145 lines
4.4 KiB
HTML
145 lines
4.4 KiB
HTML
<div class="ucap-sound-viewer-container">
|
|
<mat-toolbar color="accent" class="ucap-sound-viewer-header">
|
|
<mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
|
|
<span class="ucap-sound-viewer-title">{{ fileName }}</span>
|
|
<span class="ucap-sound-viewer-spacer"></span>
|
|
<button
|
|
mat-icon-button
|
|
class="ucap-image-viewer-action"
|
|
matTooltip="{{ 'common.file.download' | translate }}"
|
|
matTooltipPosition="below"
|
|
aria-label=""
|
|
(click)="onClickDownload()"
|
|
>
|
|
<!--<mat-icon>get_app</mat-icon>-->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<span class="stroke-bar"></span>
|
|
<button
|
|
mat-icon-button
|
|
color="warn"
|
|
class="ucap-image-viewer-action btn-close"
|
|
matTooltip="{{ 'common.messages.close' | translate }}"
|
|
(click)="onClickClose()"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</mat-toolbar>
|
|
<div style="position: relative;">
|
|
<div
|
|
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
|
style="position: absolute; width: 100%;"
|
|
>
|
|
<mat-progress-bar
|
|
mode="determinate"
|
|
[value]="fileDownloadItem.downloadingProgress$ | async"
|
|
></mat-progress-bar>
|
|
</div>
|
|
</div>
|
|
<div class="ucap-sound-viewer-body">
|
|
<div
|
|
class="ucap-sound-viewer-sound-icon"
|
|
fxLayout="row"
|
|
fxLayout.xs="column"
|
|
fxLayoutAlign="center center"
|
|
>
|
|
<audio
|
|
[src]="fileDownloadUrl"
|
|
#audioPlayer
|
|
(playing)="onPlayingAudio()"
|
|
(pause)="onPauseAudio()"
|
|
(timeupdate)="onTimeUpdateAudio()"
|
|
(volumechange)="onVolumeChangeAudio()"
|
|
(loadstart)="onLoadStartAudio()"
|
|
(loadeddata)="onLoadedDataAudio()"
|
|
></audio>
|
|
<div class="circle-box">
|
|
<mat-icon class="ucap-sound-viewer-icon" *ngIf="!playing">
|
|
music_note
|
|
</mat-icon>
|
|
<div class="sound-wave" *ngIf="playing">
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
<div class="sound-bar bg-accent-dark"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="viewer-bottom">
|
|
<div
|
|
class="ucap-sound-viewer-sound-time"
|
|
fxLayout="row"
|
|
fxLayout.xs="column"
|
|
fxLayoutAlign="center center"
|
|
>
|
|
<mat-slider
|
|
#timeSlider
|
|
min="0"
|
|
[max]="duration"
|
|
[value]="currentTime"
|
|
(change)="onChangeTimeSlider($event)"
|
|
>
|
|
</mat-slider>
|
|
</div>
|
|
<div
|
|
class="ucap-sound-viewer-sound-controls"
|
|
fxLayout="row"
|
|
fxLayout.xs="column"
|
|
>
|
|
<div class="ucap-sound-viewer-sound-time-current">
|
|
{{ currentTime | ucapSecondsToMinutes }}
|
|
</div>
|
|
<span class="ucap-sound-viewer-spacer"></span>
|
|
<button
|
|
mat-icon-button
|
|
class="ucap-sound-viewer-action"
|
|
matTooltip="{{
|
|
(playing ? 'common.player.stop' : 'common.player.play') | translate
|
|
}}"
|
|
aria-label=""
|
|
(click)="onClickPlayOrPause()"
|
|
>
|
|
<mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
|
|
</button>
|
|
<span class="ucap-sound-viewer-spacer"></span>
|
|
<div class="ucap-sound-viewer-sound-time-total">
|
|
{{ duration | ucapSecondsToMinutes }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|