From de715fea54838f748c1008f36b1f77e607298239 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Mon, 12 Oct 2020 23:31:37 +0200
Subject: [PATCH] Finishing the seekbar

---
 src/app/pages/player/player.component.html |  4 +-
 src/app/pages/player/player.component.ts   | 71 ++++++++++++----------
 2 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/app/pages/player/player.component.html b/src/app/pages/player/player.component.html
index a22dca84..33c2a386 100644
--- a/src/app/pages/player/player.component.html
+++ b/src/app/pages/player/player.component.html
@@ -78,9 +78,7 @@
 				     [ngClass]="{'seeking': this.seeking}"
 				     (click)="player.currentTime = this.getTimeFromSeekbar($event.pageX);"
 				     (mousedown)="this.startSeeking($event)"
-				     (touchstart)="this.startSeeking($event)"
-				     (mouseup)="this.endSeeking($event)"
-				     (touchend)="this.endSeeking($event)">
+				     (touchstart)="this.startSeeking($event)">
 					<div class="seek-bar">
 						<div id="buffered" [style.width]="player.buffered | bufferToWidth: player.duration">
 						</div>
diff --git a/src/app/pages/player/player.component.ts b/src/app/pages/player/player.component.ts
index 4035666f..ed91f999 100644
--- a/src/app/pages/player/player.component.ts
+++ b/src/app/pages/player/player.component.ts
@@ -66,6 +66,7 @@ export class BufferToWidthPipe implements PipeTransform
 export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 {
 	item: WatchItem;
+	playMethod: method = method.direct;
 	playing: boolean = true;
 	loading: boolean = false;
 	seeking: boolean = false;
@@ -76,15 +77,15 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 	set volume(value: number) { this._volume = Math.max(0, Math.min(value, 100)); }
 
 	@ViewChild("player") private playerRef: ElementRef;
-	private get player() { return this.playerRef.nativeElement; }
-	@ViewChild("progressBar") private progressBar: HTMLElement;
+	private get player(): HTMLVideoElement { return this.playerRef.nativeElement; }
+	@ViewChild("progressBar") private progressBarRef: ElementRef;
+	private get progressBar(): HTMLElement { return this.progressBarRef.nativeElement; }
 
 
 	videoHider;
 	controllerHovered: boolean = false;
 	selectedSubtitle: Track;
 
-	playMethod: method = method.direct;
 	methodType = method;
 
 	displayStats: boolean = false;
@@ -119,34 +120,6 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 			});
 		}
 
-		$(document).on("touchmove", (event) =>
-		{
-			if (this.seeking)
-				this.player.currentTime = this.getTimeFromSeekbar(event.changedTouches[0].pageX);
-		});
-
-		$(document).on("mousemove", (event) =>
-		{
-			if (this.seeking)
-				this.player.currentTime = this.getTimeFromSeekbar(event.pageX);
-			else
-			{
-				document.getElementById("hover").classList.remove("idle");
-				document.documentElement.style.cursor = "";
-
-				clearTimeout(this.videoHider);
-
-				this.videoHider = setTimeout((ev: MouseEvent) =>
-				{
-					if (!this.player.paused && !this.controllerHovered)
-					{
-						document.getElementById("hover").classList.add("idle");
-						document.documentElement.style.cursor = "none";
-					}
-				}, 2000);
-			}
-		});
-
 		this.route.data.subscribe(data =>
 		{
 			this.item = data.item;
@@ -201,7 +174,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 
 	ngAfterViewInit()
 	{
-		this.route.data.subscribe(data =>
+		setTimeout(() => this.route.data.subscribe(data =>
 		{
 			let queryMethod: string = this.route.snapshot.queryParams["method"];
 			this.selectPlayMethod(queryMethod ? method[queryMethod] : getPlaybackMethod(this.player, this.item));
@@ -216,7 +189,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 			}
 
 			this.supportList = getWhatIsSupported(this.player, this.item);
-		});
+		}));
 
 		if (!navigator.userAgent.match(/Mobi/))
 		{
@@ -261,6 +234,8 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 		this.player.currentTime = this.getTimeFromSeekbar(pageX);
 	}
 
+	@HostListener("document:mouseup", ["$event"])
+	@HostListener("document:touchend", ["$event"])
 	endSeeking(event: MouseEvent | TouchEvent): void
 	{
 		if (!this.seeking)
@@ -272,6 +247,36 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 		this.player.play();
 	}
 
+	@HostListener("document:touchmove", ["$event"])
+	touchSeek(event)
+	{
+		if (this.seeking)
+			this.player.currentTime = this.getTimeFromSeekbar(event.changedTouches[0].pageX);
+	}
+
+	@HostListener("document:mousemove", ["$event"])
+	mouseMove(event)
+	{
+		if (this.seeking)
+			this.player.currentTime = this.getTimeFromSeekbar(event.pageX);
+		else
+		{
+			document.getElementById("hover").classList.remove("idle");
+			document.documentElement.style.cursor = "";
+
+			clearTimeout(this.videoHider);
+
+			this.videoHider = setTimeout((ev: MouseEvent) =>
+			{
+				if (!this.player.paused && !this.controllerHovered)
+				{
+					document.getElementById("hover").classList.add("idle");
+					document.documentElement.style.cursor = "none";
+				}
+			}, 2000);
+		}
+	}
+
 	playbackError(): void
 	{
 		if (this.playMethod == method.transcode)