From 146182845833ebd8fd9541f5dd4793adb690fea2 Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Fri, 13 Nov 2020 23:26:04 +0100 Subject: [PATCH] [DEV] replace player --- front/src/app/scene/video/video.html | 68 ++++-- front/src/app/scene/video/video.less | 235 ++++++++++++++++++--- front/src/app/scene/video/video.ts | 292 ++++++++++++++++++++++++-- front/src/environments/environment.ts | 8 +- 4 files changed, 532 insertions(+), 71 deletions(-) diff --git a/front/src/app/scene/video/video.html b/front/src/app/scene/video/video.html index 59d35da..865bfbe 100644 --- a/front/src/app/scene/video/video.html +++ b/front/src/app/scene/video/video.html @@ -1,7 +1,7 @@
- Edit media




+ Play media




The media does not exist
@@ -25,7 +25,7 @@
-
@@ -46,30 +46,62 @@
{{description}}
- -
+
-
+
+ + + +
+
+ +
+
+ +
+
+ + + + + + + + +
+
-
+
+
+
+ +
+ + +
+
\ No newline at end of file diff --git a/front/src/app/scene/video/video.less b/front/src/app/scene/video/video.less index 75666e8..6b008db 100644 --- a/front/src/app/scene/video/video.less +++ b/front/src/app/scene/video/video.less @@ -89,6 +89,11 @@ right:100px; //-ms-transform: translate(-50%, 0); //transform: translate(-50%, 0); + button { + border: none; + background: none; + color: #F00000; + }; }; @@ -98,43 +103,211 @@ z-index: 1600; }; - button { - border: none; - background: none; - color: #F00000; - }; + .controls { + //visibility: hidden; + opacity: 0.5; + width: 96%; + height: 60px; + border-radius: 10px; + position: absolute; + bottom: 20px; + left: 2%; + //margin-left: -200px; + background-color: black; + box-shadow: 3px 3px 5px black; + transition: 1s all; + display: flex; + font-size: 40px; + .material-icons { + color: #FFF; + font-size: 40px; + } + button { + border: none; + background: none; + } + + .slidecontainer { + line-height: 38px; + font-size: 10px; + font-family: monospace; + text-shadow: 1px 1px 0px black; + color: white; + flex: 5; + position: relative; + } + .slider { + position: relative; + -webkit-appearance: none; + width: 98%; + height: 10px; + top: 5px; + border-radius: 5px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; + flex: 5; + } + .slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 50%; + background: #4CAF50; + cursor: pointer; + } + + .slider::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 50%; + background: #4CAF50; + cursor: pointer; + } + .timer-text { + position: absolute; + top: 25px; + left: 50%; + width:300px; + line-height: 38px; + font-size: 30px; + font-weight:bold; + } + } + :hover .controls, :focus .controls { + opacity: 1; + } + + button:before { + font-family: HeydingsControlsRegular; + font-size: 30px; + position: relative; + color: #FFF; + //text-shadow: 1px 1px 0px black; + } + .timer { + line-height: 38px; + font-size: 30px; + font-family: monospace; + text-shadow: 1px 1px 0px black; + color: white; + flex: 5; + position: relative; + } + + .timer div { + width:100%; + line-height: 38px; + font-size: 10px; + font-family: monospace; + text-shadow: 1px 1px 0px black; + color: white; + flex: 5; + position: relative; + } + + .timer span { + position: absolute; + z-index: 3; + left: 19px; + } + + + .volume-menu { + font-size: 40px; + opacity: 0.5; + width: 300px; + height: 60px; + border-radius: 10px; + position: absolute; + bottom: 90px; + right: 2%; + //margin-left: -200px; + background-color: black; + box-shadow: 3px 3px 5px black; + transition: 1s all; + display: flex; + + .material-icons { + vertical-align: middle; + color: #FFF; + font-size: 40px; + } + /* Create an Arraw on the top ob the box ... */ + &:after, &:before { + bottom: 100%; + right: 13px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + &:after { + border-color: rgba(136, 183, 213, 0); + border-bottom-color: #263238; + border-width: 15px; + margin-left: -15px; + } + button { + border: none; + background: none; + border-radius: 50%; + } + .slidecontainer { + line-height: 38px; + font-size: 10px; + font-family: monospace; + text-shadow: 1px 1px 0px black; + color: white; + flex: 5; + position: relative; + } + .slider { + position: relative; + -webkit-appearance: none; + width: 98%; + height: 10px; + top: 15px; + border-radius: 5px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; + flex: 5; + } + .slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 50%; + background: #4CAF50; + cursor: pointer; + } + + .slider::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 50%; + background: #4CAF50; + cursor: pointer; + } + + } + } .big-button { font-size:150px; } -/* -.video_div { - position: fixed; - top:0px; - left:0px; - width: 100%; - height: 100%; - margin: 0 auto; - border: none; - background: none; -} -.video_div_button { - position: fixed; - top:100px; - right:175px; - width: 50px; - height: 50px; - font-size:50px; - margin: auto; - -} -.video_object { - width: 100%; - margin: 0 auto; -} -*/ .item { font-size: 20px; height: 21%; diff --git a/front/src/app/scene/video/video.ts b/front/src/app/scene/video/video.ts index 02fcc4f..a7e9587 100644 --- a/front/src/app/scene/video/video.ts +++ b/front/src/app/scene/video/video.ts @@ -4,9 +4,10 @@ * @license PROPRIETARY (see license file) */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { Location } from '@angular/common'; +import { interval } from 'rxjs'; import { fadeInAnimation } from '../../_animations/index'; import { HttpWrapperService } from '../../service/http-wrapper'; import { VideoService } from '../../service/video'; @@ -23,27 +24,53 @@ import { ArianeService } from '../../service/ariane'; }) export class VideoScene implements OnInit { + videoGlobal:any; + @ViewChild('globalVideoElement') + set mainDivEl(el: ElementRef) { + if (el != null) { + this.videoGlobal = el.nativeElement; + } + } + videoPlayer: HTMLVideoElement; + @ViewChild('videoPlayer') + set mainVideoEl(el: ElementRef) { + if (el != null) { + this.videoPlayer = el.nativeElement; + } + } + + id_video:number = -1; - mediaIsNotFound:boolean = false - mediaIsLoading:boolean = true - error:string = "" + mediaIsNotFound:boolean = false; + mediaIsLoading:boolean = true; + error:string = ""; - name:string = "" - description:string = "" - episode:number = undefined - series_id:number = undefined - series_name:string = undefined - season_id:number = undefined - season_name:string = undefined - data_id:number = -1 - time:number = undefined - type_id:number = undefined - generated_name:string = "" - video_source:string = "" - cover:string = "" - covers:Array = [] + name:string = ""; + description:string = ""; + episode:number = undefined; + series_id:number = undefined; + series_name:string = undefined; + season_id:number = undefined; + season_name:string = undefined; + data_id:number = -1; + time:number = undefined; + type_id:number = undefined; + generated_name:string = ""; + video_source:string = ""; + cover:string = null; + covers:Array = []; + playVideo:boolean = false; + displayVolumeMenu:boolean = false; + isPlaying:boolean = false; + isFullScreen:boolean = false; + currentTime:number = 0; + currentTimeDisplay:string = "00"; + duration:number = 0; + durationDisplay:string = "00"; + volumeValue:number = 100; + constructor(private route: ActivatedRoute, private router: Router, private locate: Location, @@ -77,7 +104,14 @@ export class VideoScene implements OnInit { this.generated_name += this.name; } + myPeriodicCheckFunction() { + console.log("check ... "); + } + ngOnInit() { + interval(1000).subscribe(x => { + this.myPeriodicCheckFunction(); + }); this.arianeService.updateManual(this.route.snapshot.paramMap); this.id_video = this.arianeService.getVideoId(); @@ -147,5 +181,227 @@ export class VideoScene implements OnInit { self.mediaIsLoading = false; }); } + onRequirePlay() { + this.playVideo = true; + this.displayVolumeMenu = false; + } + onRequireStop() { + this.playVideo = false; + this.displayVolumeMenu = false; + } + onVideoEnded() { + this.playVideo = false; + this.displayVolumeMenu = false; + } + + //https://www.w3schools.com/tags/ref_av_dom.asp + changeStateToPlay() { + this.isPlaying = true; + } + changeStateToPause() { + this.isPlaying = false; + } + + convertIndisplayTime(time:number) : string { + let tmpp = parseInt("" + time); + let heures = parseInt("" + (tmpp/3600)); + tmpp = tmpp - heures * 3600; + let minutes = parseInt("" + (tmpp/60)); + let seconds = tmpp - minutes * 60; + let out = ""; + if (heures != 0) { + out += heures + ":"; + } + if (minutes >= 10) { + out += minutes + ":"; + } else { + out += "0" + minutes + ":"; + } + if (seconds >= 10) { + out += seconds; + } else { + out += "0" + seconds; + } + return out; + } + + changeTimeupdate(currentTime:any) { + //console.log("time change "); + //console.log(" ==> " + this.videoPlayer.currentTime); + this.currentTime = this.videoPlayer.currentTime; + this.currentTimeDisplay = this.convertIndisplayTime(this.currentTime); + //console.log(" ==> " + this.currentTimeDisplay); + } + changeDurationchange(duration:any) { + console.log("duration change "); + console.log(" ==> " + this.videoPlayer.duration); + this.duration = this.videoPlayer.duration; + this.durationDisplay = this.convertIndisplayTime(this.duration); + } + + onPlay() { + console.log("play"); + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.videoPlayer.volume = this.volumeValue/100; + this.videoPlayer.play(); + } + + onPause() { + console.log("pause"); + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.videoPlayer.pause(); + } + + onStop() { + console.log("stop"); + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.videoPlayer.pause(); + this.videoPlayer.currentTime = 0; + + } + + onBefore() { + console.log("before"); + } + + onNext() { + console.log("next"); + } + + seek(newValue:any) { + console.log("seek " + newValue.value); + console.log("next"); + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.videoPlayer.currentTime = newValue.value; + } + + onRewind() { + console.log("rewind"); + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.videoPlayer.currentTime = this.currentTime - 10; + } + + onForward() { + console.log("forward"); + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.videoPlayer.currentTime = this.currentTime + 10; + } + + onMore() { + console.log("more"); + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + } + onFullscreen() { + console.log("fullscreen"); + if (this.videoGlobal === null + || this.videoGlobal === undefined) { + console.log("error elemrent: " + this.videoGlobal); + return; + } + if (this.videoGlobal.requestFullscreen) { + this.videoGlobal.requestFullscreen(); + } else if (this.videoGlobal.mozRequestFullScreen) { + this.videoGlobal.mozRequestFullScreen(); + } else if (this.videoGlobal.webkitRequestFullscreen) { + this.videoGlobal.webkitRequestFullscreen(); + } else if (this.videoGlobal.msRequestFullscreen) { + this.videoGlobal.msRequestFullscreen(); + } + } + + onFullscreenExit() { + this.onFullscreenExit22(document); + } + onFullscreenExit22(docc:any) { + console.log("fullscreen EXIT"); + if (this.videoGlobal === null + || this.videoGlobal === undefined) { + console.log("error elemrent: " + this.videoGlobal); + return; + } + if (docc.exitFullscreen) { + docc.exitFullscreen(); + } else if (docc.mozCancelFullScreen) { + docc.mozCancelFullScreen(); + } else if (docc.webkitExitFullscreen) { + docc.webkitExitFullscreen(); + } else if (docc.msExitFullscreen) { + docc.msExitFullscreen(); + } + } + + onFullscreenChange() { + this.onFullscreenChange22(document); + } + onFullscreenChange22(element:any) { + var isInFullScreen = (element.fullscreenElement && element.fullscreenElement !== null) || + (element.webkitFullscreenElement && element.webkitFullscreenElement !== null) || + (element.mozFullScreenElement && element.mozFullScreenElement !== null) || + (element.msFullscreenElement && element.msFullscreenElement !== null); + console.log("onFullscreenChange(" + isInFullScreen + ")"); + this.isFullScreen = isInFullScreen; + } + + onVolumeMenu() { + this.displayVolumeMenu = !this.displayVolumeMenu; + } + + onVolume(newValue:any) { + console.log("onVolume " + newValue.value); + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.volumeValue = newValue.value; + this.videoPlayer.volume = this.volumeValue/100; + this.videoPlayer.muted=false; + } + + onVolumeMute() { + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.videoPlayer.muted=true; + } + + onVolumeUnMute() { + if (this.videoPlayer === null + || this.videoPlayer === undefined) { + console.log("error elemrent: " + this.videoPlayer); + return; + } + this.videoPlayer.muted=false; + } } diff --git a/front/src/environments/environment.ts b/front/src/environments/environment.ts index 1dd16ed..d837668 100644 --- a/front/src/environments/environment.ts +++ b/front/src/environments/environment.ts @@ -7,10 +7,10 @@ export const environment = { production: false, // URL of development API //apiUrl: 'http://localhost:15080', - apiUrl: 'http://localhost:18080/karideo/api', - //apiUrl: 'http://192.168.1.156/karideo/api', - apiOAuthUrl: 'http://localhost:17080/oauth/api', - //apiOAuthUrl: 'http://192.168.1.156/oauth/api', + //apiUrl: 'http://localhost:18080/karideo/api', + apiUrl: 'http://192.168.1.156/karideo/api', + //apiOAuthUrl: 'http://localhost:17080/karauth/api', + apiOAuthUrl: 'http://192.168.1.156/karauth/api', frontBaseUrl: '', //apiMode: "QUERRY" apiMode: "REWRITE"