From ecdd85b82ddafca9d50f360165a2c2cce4103d8f Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Mon, 28 Oct 2019 00:46:06 +0100
Subject: [PATCH] Making the progress bar work on the mobile app.

---
 .../src/app/player/player.component.html      |  2 +-
 .../src/app/player/player.component.scss      |  1 +
 .../src/app/player/player.component.ts        | 87 +++++++++++++------
 3 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/Kyoo/ClientApp/src/app/player/player.component.html b/Kyoo/ClientApp/src/app/player/player.component.html
index baa07f4c..606b5899 100644
--- a/Kyoo/ClientApp/src/app/player/player.component.html
+++ b/Kyoo/ClientApp/src/app/player/player.component.html
@@ -65,7 +65,7 @@
             <ng-template #elseBlock><p>{{this.minutes | number: '2.0-0'}}:{{this.seconds | number: '2.0-0'}} / {{this.maxMinutes | number: '2.0-0'}}:{{this.maxSeconds | number: '2.0-0'}}</p></ng-template>
           </div>
           <div class="right">
-            <button *ngIf="this.item.audios.length > 0" mat-icon-button matTooltipPosition="above" matTooltip="Select audio track">
+            <button id="volume" *ngIf="this.item.audios.length > 0" mat-icon-button matTooltipPosition="above" matTooltip="Select audio track">
               <mat-icon>music_note</mat-icon>
             </button>
             <button *ngIf="this.item.subtitles.length > 0" mat-icon-button [matMenuTriggerFor]="subtitles" matTooltipPosition="above" matTooltip="Select subtitle track">
diff --git a/Kyoo/ClientApp/src/app/player/player.component.scss b/Kyoo/ClientApp/src/app/player/player.component.scss
index edf321ae..0bbb0e12 100644
--- a/Kyoo/ClientApp/src/app/player/player.component.scss
+++ b/Kyoo/ClientApp/src/app/player/player.component.scss
@@ -337,4 +337,5 @@
 .info-panel
 {
   min-width: 250px !important;
+  max-width: 300px !important;
 }
diff --git a/Kyoo/ClientApp/src/app/player/player.component.ts b/Kyoo/ClientApp/src/app/player/player.component.ts
index 31fe27c1..b2d581c5 100644
--- a/Kyoo/ClientApp/src/app/player/player.component.ts
+++ b/Kyoo/ClientApp/src/app/player/player.component.ts
@@ -68,6 +68,7 @@ export class PlayerComponent implements OnInit
 				this.fullscreen();
 				screen.orientation.lock("landscape");
 				$("#fullscreen").addClass("d-none");
+				$("#volume").addClass("d-none");
 			}
 			if (this.player)
 				this.init();
@@ -133,31 +134,6 @@ export class PlayerComponent implements OnInit
 			this.updateTime(time);
 		});
 
-		$(progressBar).mousedown((event) =>
-		{
-			event.preventDefault();
-			this.seeking = true;
-			progressBar.classList.add("seeking");
-			this.player.pause();
-
-			let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
-			this.updateTime(time);
-		});
-
-		$(document).mouseup((event) =>
-		{
-			if (this.seeking)
-			{
-				event.preventDefault();
-				this.seeking = false;
-				progressBar.classList.remove("seeking");
-
-				let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
-				this.player.currentTime = time;
-				this.player.play();
-			}
-		});
-
 		if (!navigator.userAgent.match(/Mobi/))
 		{
 			$(document).mousemove((event) =>
@@ -185,9 +161,70 @@ export class PlayerComponent implements OnInit
 				}
 			});
 
+			$(progressBar).mousedown((event) =>
+			{
+				event.preventDefault();
+				this.seeking = true;
+				progressBar.classList.add("seeking");
+				this.player.pause();
+
+				let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+				this.updateTime(time);
+			});
+
+			$(document).mouseup((event) =>
+			{
+				if (this.seeking)
+				{
+					event.preventDefault();
+					this.seeking = false;
+					progressBar.classList.remove("seeking");
+
+					let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+					this.player.currentTime = time;
+					this.player.play();
+				}
+			});
+
 			$("#controller").mouseenter(() => { this.controllerHovered = true; });
 			$("#controller").mouseleave(() => { this.controllerHovered = false; });
 		}
+		else
+		{
+			$(progressBar).on("touchstart", (event) =>
+			{
+				event.preventDefault();
+				this.seeking = true;
+				progressBar.classList.add("seeking");
+				this.player.pause();
+
+				let time: number = this.getTimeFromSeekbar(progressBar, event.changedTouches[0].pageX);
+				this.updateTime(time);
+			});
+
+			$(document).on("touchend", (event) =>
+			{
+				if (this.seeking)
+				{
+					event.preventDefault();
+					this.seeking = false;
+					progressBar.classList.remove("seeking");
+
+					let time: number = this.getTimeFromSeekbar(progressBar, event.changedTouches[0].pageX);
+					this.player.currentTime = time;
+					this.player.play();
+				}
+			});
+
+			$(document).on("touchmove", (event) =>
+			{
+				if (this.seeking)
+				{
+					let time: number = this.getTimeFromSeekbar(progressBar, event.changedTouches[0].pageX);
+					this.updateTime(time);
+				}
+			});
+		}
 
 		//Initialize the timout at the document initialization.
 		this.videoHider = setTimeout(() =>