karideo/front/src/app/scene/video/video.html

<div class="main-reduce">
	@if(mediaIsNotFound) {
		<div class="fill-all">
			<div class="title">
				Play media<br /><br /><br /><br /><br />
				The media does not exist
			</div>
		</div>
	}
	@else if(mediaIsLoading) {
		<div class="fill-all">
			<div class="title">
				Play media<br /><br /><br /><br /><br />
				Loading ...<br />
				Please wait.
			</div>
		</div>
	}
	@else if(!playVideo) {
		<div class="fill-all">
			<div class="title">
				{{name}}
			</div>
			<div class="cover-full">
				<div class="cover">
					@if(covers) {
						<div class="cover-image">
							<img src="{{covers[0]}}" />
						</div>
					}
					@else {
						<div class="cover-no-image"></div>
					}
					<div class="cover-button">
						<button (click)="onRequirePlay()">
							<i class="material-icons big-button">play_circle_outline</i>
						</button>
					</div>
				</div>
				@if(haveNext) {
					<div class="cover-button-next">
						<button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
							<i class="material-icons big-button">arrow_forward_ios</i>
						</button>
					</div>
				}
				@if(havePrevious) {
					<div class="cover-button-previous">
						<button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)">
							<i class="material-icons big-button">arrow_back_ios</i>
						</button>
					</div>
				}
			</div>
			<div class="clear"></div>
			@if(seriesName) {
				<div class="episode">
					<b>Series:</b> {{seriesName}}
				</div>
			}
			@if(seasonName) {
				<div class="episode">
					<b>Season:</b> {{seasonName}}
				</div>
			}
			@if(episode) {
				<div class="episode">
					<b>Episode:</b> {{episode}}
				</div>
			}
			<div class="episode">
				<b>generatedName:</b> {{generatedName}}
			</div>
			@if(userMetaData) {
				<div class="episode">
					<b>Number of view:</b> {{userMetaData.count}}<br />
					<b>Position:</b> {{userMetaData.percentDisplay}} % ==> {{convertIndisplayTime(userMetaData.time)}}
				</div>
			}
			<div class="description">
				{{description}}
			</div>
		</div>
	}
	@else {
		<div class="fill-all bg-black">
			<div class="video" #globalVideoElement (mousemove)="startHideTimer()"
				(fullscreenchange)="onFullscreenChange()">
				<div class="video-elem">
					<video src="{{videoSource}}" #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="{{videoSource}}>link here</a>.</p>-->
					</video>
				</div>
				@if(!displayNeedHide || !isPlaying) {
					<div class="controls">
						@if(isPlaying) {
							<button (click)="onPause()"><i class="material-icons">pause</i></button>
						}
						@else {
							<button (click)="onPlay()"><i class="material-icons">play_arrow</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>-->
						@if(isFullScreen) {
							<button (click)="onFullscreenExit()"><i	class="material-icons">fullscreen_exit</i></button>
						}
						@else {
							<button (click)="onFullscreen()"><i class="material-icons">fullscreen</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>
						@if(!isPlaying) {
							<button class="bigPause" (click)="onPauseToggle()"><i class="material-icons">play_circle_outline</i></button>
							<button class="bigRewind" (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
							<button class="bigForward" (click)="onForward()"><i class="material-icons">fast_forward</i></button>
						}
					</div>
				}
				@if(!isFullScreen || !isPlaying) {
					<div class="title-inline">
						{{generatedName}}
					</div>
					<div class="video-button">
						<button (click)="onRequireStop()">
							<i class="material-icons big-button">highlight_off</i>
						</button>
					</div>
				}
				@if(displayVolumeMenu && (!displayNeedHide || !isPlaying)) {
					<div class="volume">
						<div class="volume-menu">
							<div class="slidecontainer">
								<input type="range" min="0" max="100" class="slider" [value]="volumeValue"
									(input)="onVolume($event.target)">
							</div>
							@if(videoPlayer.muted) {
								<button (click)="onVolumeUnMute()"><i
										class="material-icons">volume_off</i></button>
							}
							@else {
								<button (click)="onVolumeMute()"><i
										class="material-icons">volume_mute</i></button>
							}
						</div>
					</div>
				}
			</div>
		</div>
	}
	<canvas #canvascreenshoot style="overflow:auto"></canvas>
</div>