From a07d2c123c56538ae2be5013fae5c7b57ad895f4 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Mon, 14 Oct 2019 23:32:55 +0200
Subject: [PATCH] Starting to add mobile support to the web app.

---
 .../src/app/player/player.component.html      |  2 +-
 .../src/app/player/player.component.ts        | 85 +++++++++++++------
 2 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/Kyoo/ClientApp/src/app/player/player.component.html b/Kyoo/ClientApp/src/app/player/player.component.html
index 5a9c368e..5ffcb06c 100644
--- a/Kyoo/ClientApp/src/app/player/player.component.html
+++ b/Kyoo/ClientApp/src/app/player/player.component.html
@@ -1,6 +1,6 @@
 <div id="root">
   <div class="player">
-    <video id="player" poster="backdrop/{{this.item.showSlug}}" autoplay muted (click)="tooglePlayback()" class="video-js">
+    <video id="player" poster="backdrop/{{this.item.showSlug}}" autoplay muted (click)="videoClicked()" class="video-js">
       <source src="/video/{{this.item.link}}" />
       <source src="/video/transmux/{{this.item.link}}" type="video/mp4" />
     </video>
diff --git a/Kyoo/ClientApp/src/app/player/player.component.ts b/Kyoo/ClientApp/src/app/player/player.component.ts
index dfb3d17d..ac3bdca4 100644
--- a/Kyoo/ClientApp/src/app/player/player.component.ts
+++ b/Kyoo/ClientApp/src/app/player/player.component.ts
@@ -62,6 +62,12 @@ export class PlayerComponent implements OnInit
 
       this.title.setTitle(this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber + " - Kyoo");
 
+		  if (navigator.userAgent.match(/Mobi/))
+		  {
+			  this.fullscreen();
+			  screen.orientation.lock("landscape");
+			  $("#fullscreen").addClass("d-none");
+		  }
       if (this.player)
         this.init();
     });
@@ -154,33 +160,36 @@ export class PlayerComponent implements OnInit
       }
     });
 
-    $(document).mousemove((event) =>
-    {
-      if (this.seeking)
-      {
-        let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
-        this.updateTime(time);
-      }
-      else
-      {
-        document.getElementById("hover").classList.remove("idle");
-        document.documentElement.style.cursor = "";
+	  if (!navigator.userAgent.match(/Mobi/))
+	  {
+		  $(document).mousemove((event) =>
+		  {
+			  if (this.seeking)
+			  {
+				  let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+				  this.updateTime(time);
+			  }
+			  else
+			  {
+				  document.getElementById("hover").classList.remove("idle");
+				  document.documentElement.style.cursor = "";
 
-        clearTimeout(this.videoHider);
+				  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.videoHider = setTimeout((ev: MouseEvent) =>
+				  {
+					  if (!this.player.paused && !this.controllerHovered)
+					  {
+						  document.getElementById("hover").classList.add("idle");
+						  document.documentElement.style.cursor = "none";
+					  }
+				  }, 2000);
+			  }
+		  });
 
-    $("#controller").mouseenter(() => { this.controllerHovered = true; });
-    $("#controller").mouseleave(() => { this.controllerHovered = false; });
+		  $("#controller").mouseenter(() => { this.controllerHovered = true; });
+		  $("#controller").mouseleave(() => { this.controllerHovered = false; });
+	  }
 
     //Initialize the timout at the document initialization.
     this.videoHider = setTimeout(() =>
@@ -335,7 +344,33 @@ export class PlayerComponent implements OnInit
 
     $(document).unbind();
     $(window).unbind();
-  }
+	}
+
+	videoClicked()
+	{
+		if (!navigator.userAgent.match(/Mobi/))
+			this.tooglePlayback();
+		else
+		{
+			if ($("#hover").hasClass("idle"))
+			{
+				$("#hover").removeClass("idle");
+				clearTimeout(this.videoHider);
+				this.videoHider = setTimeout((ev: MouseEvent) =>
+				{
+					if (!this.player.paused)
+					{
+						document.getElementById("hover").classList.add("idle");
+					}
+				}, 1000);
+			}
+			else
+			{
+				$("#hover").addClass("idle");
+				clearTimeout(this.videoHider);
+			}
+		}
+	}
 
   tooglePlayback()
   {