120 lines
4.8 KiB
HTML
120 lines
4.8 KiB
HTML
<div class="main-reduce">
|
|
<div class="fill-all" *ngIf="mediaIsNotFound">
|
|
<div class="title">
|
|
Play media<br/><br/><br/><br/><br/>
|
|
The media does not exist
|
|
</div>
|
|
</div>
|
|
<div class="fill-all" *ngIf="mediaIsLoading">
|
|
<div class="title">
|
|
Play media<br/><br/><br/><br/><br/>
|
|
Loading ...<br/>
|
|
Please wait.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fill-all" *ngIf="!mediaIsNotFound && !mediaIsLoading && !playVideo">
|
|
<div class="title">
|
|
{{name}}
|
|
</div>
|
|
<div class="cover">
|
|
<div class="cover-image" *ngIf="cover != null">
|
|
<img src="{{cover}}"/>
|
|
</div>
|
|
<div class="cover-no-image" *ngIf="cover == null">
|
|
<img src="{{cover}}"/>
|
|
</div>
|
|
<div class="cover-button">
|
|
<button (click)="onRequirePlay()">
|
|
<i class="material-icons big-button">play_circle_outline</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
<div class="episode" *ngIf="series_name!=null">
|
|
<b>Series:</b> {{series_name}}
|
|
</div>
|
|
<div class="episode" *ngIf="season_name!=null">
|
|
<b>Season:</b> {{season_name}}
|
|
</div>
|
|
<div class="episode" *ngIf="episode!=null">
|
|
<b>Episode:</b> {{episode}}
|
|
</div>
|
|
<div class="episode">
|
|
<b>generated_name:</b> {{generated_name}}
|
|
</div>
|
|
<div class="description">
|
|
{{description}}
|
|
</div>
|
|
</div>
|
|
<div class="fill-all bg-black" *ngIf="playVideo">
|
|
<div class="video"
|
|
#globalVideoElement
|
|
(mousemove)="startHideTimer()"
|
|
(fullscreenchange)="onFullscreenChange($event)">
|
|
<div class="video-elem">
|
|
<video src="{{video_source}}/{{generated_name}}"
|
|
#videoPlayer
|
|
preload
|
|
(play)="changeStateToPlay()"
|
|
(pause)="changeStateToPause()"
|
|
(timeupdate)="changeTimeupdate($event.currentTime)"
|
|
(durationchange)="changeDurationchange($event.duration)"
|
|
(loadedmetadata)="changeMetadata()"
|
|
(audioTracks)="audioTracks($event)"
|
|
autoplay
|
|
(ended)="onVideoEnded()"
|
|
><!-- controls > --> <!--preload="none"-->
|
|
<!--<p>Your browser does not support HTML5 video player. download video: <a href="{{video_source}}>link here</a>.</p>-->
|
|
</video>
|
|
</div>
|
|
<div class="controls" *ngIf="!displayNeedHide || !isPlaying">
|
|
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
|
|
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
|
|
<button (click)="onStop()" ><i class="material-icons">stop</i></button>
|
|
<div class="timer">
|
|
<div>
|
|
<input type="range" min="0" class="slider"
|
|
[value]="currentTime"
|
|
[max]="duration"
|
|
(input)="seek($event.target)">
|
|
</div>
|
|
<div class="timer-text">
|
|
<label class="unselectable">{{currentTimeDisplay}} / {{durationDisplay}}</label>
|
|
</div>
|
|
</div>
|
|
<!--<button (click)="onBefore()"><i class="material-icons">navigate_before</i></button>-->
|
|
<button (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
|
|
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
|
|
<!--<button (click)="onNext()"><i class="material-icons">navigate_next</i></button>-->
|
|
<!--<button (click)="onMore()" ><i class="material-icons">more_vert</i></button>-->
|
|
<button (click)="onFullscreen()" *ngIf="!isFullScreen"><i class="material-icons">fullscreen</i></button>
|
|
<button (click)="onFullscreenExit()" *ngIf="isFullScreen"><i class="material-icons">fullscreen_exit</i></button>
|
|
<!--<button (click)="onTakeScreenShoot()"><i class="material-icons">add_a_photo</i></button>-->
|
|
<button (click)="onVolumeMenu()" ><i class="material-icons">volume_up</i></button>
|
|
|
|
<button class="bigPause" (click)="onPauseToggle()"><i *ngIf="!isPlaying" class="material-icons">play_circle_outline</i></button>
|
|
<button class="bigRewind" (click)="onRewind()"><i *ngIf="!isPlaying" class="material-icons">fast_rewind</i></button>
|
|
<button class="bigForward" (click)="onForward()"><i *ngIf="!isPlaying" class="material-icons">fast_forward</i></button>
|
|
</div>
|
|
|
|
<div class="video-button" *ngIf="!isFullScreen || !isPlaying">
|
|
<button (click)="onRequireStop()">
|
|
<i class="material-icons big-button">highlight_off</i>
|
|
</button>
|
|
</div>
|
|
<div class="volume" *ngIf="displayVolumeMenu && (!displayNeedHide || !isPlaying)">
|
|
<div class="volume-menu">
|
|
<div class="slidecontainer">
|
|
<input type="range" min="0" max="100" class="slider"
|
|
[value]="volumeValue"
|
|
(input)="onVolume($event.target)">
|
|
</div>
|
|
<button (click)="onVolumeMute()" *ngIf="!videoPlayer.muted"><i class="material-icons">volume_mute</i></button>
|
|
<button (click)="onVolumeUnMute()" *ngIf="videoPlayer.muted"><i class="material-icons">volume_off</i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<canvas #canvascreenshoot style="overflow:auto"></canvas>
|
|
</div> |