kangaroo-and-rabbit/karideo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[DEV] auto-hide the video menue

Browse Source
This commit is contained in:
Edouard DUPIN 2020-11-14 00:51:16 +01:00
parent e9024651cf
commit da786fe33c
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/app/scene/video/video.html
View File

@ -50,6 +50,7 @@
<div class="fill-all" *ngIf="playVideo"> <div class="fill-all" *ngIf="playVideo">
<div class="video" <div class="video"
#globalVideoElement #globalVideoElement
(mousemove)="startHideTimer()"
(fullscreenchange)="onFullscreenChange($event)"> (fullscreenchange)="onFullscreenChange($event)">
<div class="video-elem"> <div class="video-elem">
<video src="{{video_source}}/{{generated_name}}" <video src="{{video_source}}/{{generated_name}}"
@ -64,7 +65,7 @@
<!--<p>Your browser does not support HTML5 video player. download video: <a href="{{video_source}}>link here</a>.</p>--> <!--<p>Your browser does not support HTML5 video player. download video: <a href="{{video_source}}>link here</a>.</p>-->
</video> </video>
</div> </div>
<div class="controls"> <div class="controls" *ngIf="!displayNeedHide || !isPlaying">
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button> <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)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
<button (click)="onStop()" ><i class="material-icons">stop</i></button> <button (click)="onStop()" ><i class="material-icons">stop</i></button>
@ -98,7 +99,7 @@
<i class="material-icons big-button">highlight_off</i> <i class="material-icons big-button">highlight_off</i>
</button> </button>
</div> </div>
<div class="volume" *ngIf="displayVolumeMenu"> <div class="volume" *ngIf="displayVolumeMenu && (!displayNeedHide || !isPlaying)">
<div class="volume-menu"> <div class="volume-menu">
<div class="slidecontainer"> <div class="slidecontainer">
<input type="range" min="0" max="100" class="slider" <input type="range" min="0" max="100" class="slider"

35
front/src/app/scene/video/video.ts
View File

@ -70,7 +70,36 @@ export class VideoScene implements OnInit {
duration:number = 0; duration:number = 0;
durationDisplay:string = "00"; durationDisplay:string = "00";
volumeValue:number = 100; volumeValue:number = 100;
displayNeedHide:boolean = false;
timeLeft: number = 10;
interval = null;
startHideTimer() {
this.displayNeedHide = false;
this.timeLeft = 5;
if (this.interval != null) {
return;
}
let self = this;
this.interval = setInterval(() => {
console.log("periodic event: " + self.timeLeft);
if(self.timeLeft > 0) {
self.timeLeft--;
} else {
clearInterval(self.interval);
self.timeOutDetected();
}
},1000)
}
timeOutDetected() {
console.log(" ==> stop timer");
this.displayNeedHide = true;
clearInterval(this.interval);
this.interval = null;
}
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private router: Router, private router: Router,
private locate: Location, private locate: Location,
@ -109,9 +138,7 @@ export class VideoScene implements OnInit {
} }
ngOnInit() { ngOnInit() {
interval(1000).subscribe(x => { this.startHideTimer();
this.myPeriodicCheckFunction();
});
this.arianeService.updateManual(this.route.snapshot.paramMap); this.arianeService.updateManual(this.route.snapshot.paramMap);
this.id_video = this.arianeService.getVideoId(); this.id_video = this.arianeService.getVideoId();