85 lines
2.3 KiB
HTML
85 lines
2.3 KiB
HTML
<div class="ucap-video-viewer-container">
|
|
<mat-toolbar color="accent" class="ucap-video-viewer-header">
|
|
<mat-icon class="ucap-video-viewer-icon">video_label</mat-icon>
|
|
<span class="ucap-video-viewer-title">{{ fileInfo.fileName }}</span>
|
|
<span class="ucap-video-viewer-spacer"></span>
|
|
<button
|
|
mat-icon-button
|
|
class="ucap-video-viewer-action"
|
|
matTooltip="다운로드"
|
|
matTooltipPosition="below"
|
|
aria-label=""
|
|
(click)="onClickDownload()"
|
|
>
|
|
<mat-icon>get_app</mat-icon>
|
|
</button>
|
|
|
|
<button
|
|
mat-raised-button
|
|
color="primary"
|
|
class="ucap-video-viewer-action"
|
|
(click)="onClickClose()"
|
|
>
|
|
Close
|
|
</button>
|
|
</mat-toolbar>
|
|
<div class="ucap-video-viewer-body">
|
|
<div
|
|
class="ucap-video-viewer-video-icon"
|
|
fxLayout="row"
|
|
fxLayout.xs="column"
|
|
fxLayoutAlign="center center"
|
|
>
|
|
<video
|
|
[src]="fileDownloadUrl"
|
|
#audioPlayer
|
|
(playing)="onPlayingVideo()"
|
|
(pause)="onPauseVideo()"
|
|
(timeupdate)="onTimeUpdateVideo()"
|
|
(volumechange)="onVolumeChangeVideo()"
|
|
(loadstart)="onLoadStartVideo()"
|
|
(loadeddata)="onLoadedDataVideo()"
|
|
></video>
|
|
</div>
|
|
<div
|
|
class="ucap-video-viewer-video-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-video-viewer-video-controls"
|
|
fxLayout="row"
|
|
fxLayout.xs="column"
|
|
fxLayoutAlign="center center"
|
|
>
|
|
<div class="ucap-video-viewer-video-time-current">
|
|
{{ currentTime | ucapSecondsToMinutes }}
|
|
</div>
|
|
<span class="ucap-video-viewer-spacer"></span>
|
|
<button
|
|
mat-icon-button
|
|
class="ucap-video-viewer-action"
|
|
[matTooltip]="playing ? '멈춤' : '재생'"
|
|
aria-label=""
|
|
(click)="onClickPlayOrPause()"
|
|
>
|
|
<mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
|
|
</button>
|
|
<span class="ucap-video-viewer-spacer"></span>
|
|
<div class="ucap-video-viewer-video-time-total">
|
|
{{ duration | ucapSecondsToMinutes }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|