[DEV] auto-hide the video menue

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

@@ -50,6 +50,7 @@
 	<div class="fill-all" *ngIf="playVideo">
 		<div class="video"
 		    #globalVideoElement
+		    (mousemove)="startHideTimer()"
 			(fullscreenchange)="onFullscreenChange($event)">
 			<div class="video-elem"> 
 				<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>-->
 				</video>
 			</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)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</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>
 				</button>
 			</div>
-			<div class="volume" *ngIf="displayVolumeMenu">
+			<div class="volume" *ngIf="displayVolumeMenu && (!displayNeedHide || !isPlaying)">
 				<div class="volume-menu">
 					<div class="slidecontainer">
 						<input type="range" min="0" max="100"  class="slider"

front/src/app/scene/video/video.ts

@@ -70,7 +70,36 @@ export class VideoScene implements OnInit {
 	duration:number = 0;
 	durationDisplay:string = "00";
 	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,
 	            private router: Router,
 	            private locate: Location,
@@ -109,9 +138,7 @@ export class VideoScene implements OnInit {
 	}
 	
 	ngOnInit() {
-		interval(1000).subscribe(x => {
-		    this.myPeriodicCheckFunction();
-		});
+		this.startHideTimer();
 		this.arianeService.updateManual(this.route.snapshot.paramMap);
 		
 		this.id_video = this.arianeService.getVideoId();