From 23c7d726755ae8d3e5ea3b81abb083920004f28c Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sun, 27 Oct 2019 18:17:26 +0100
Subject: [PATCH] Solving a bug with navigation on the player.

---
 .../src/app/player/player.component.html      |   6 +-
 .../src/app/player/player.component.ts        | 811 +++++++++---------
 2 files changed, 417 insertions(+), 400 deletions(-)

diff --git a/Kyoo/ClientApp/src/app/player/player.component.html b/Kyoo/ClientApp/src/app/player/player.component.html
index 5ffcb06c..baa07f4c 100644
--- a/Kyoo/ClientApp/src/app/player/player.component.html
+++ b/Kyoo/ClientApp/src/app/player/player.component.html
@@ -12,7 +12,7 @@
 
   <div id="hover">
     <div class="back">
-      <a mat-icon-button matTooltipPosition="below" matTooltip="Back" href="/show/{{this.item.showSlug}}" routerLink="/show/{{this.item.showSlug}}">
+      <a mat-icon-button matTooltipPosition="below" matTooltip="Back" (click)="back()">
         <mat-icon>arrow_back</mat-icon>
       </a>
       <h5>{{this.item.showTitle}}</h5>
@@ -35,13 +35,13 @@
 
         <div class="buttons">
           <div class="left">
-            <a *ngIf="this.item.previousEpisode" mat-icon-button matTooltipPosition="above" matTooltip="Previous" routerLink="/watch/{{this.item.previousEpisode}}" href="/watch/{{this.item.previousEpisode}}" queryParamsHandling="merge">
+            <a *ngIf="this.item.previousEpisode" mat-icon-button matTooltipPosition="above" matTooltip="Previous" (click)="previous()">
               <mat-icon>skip_previous</mat-icon>
             </a>
             <button mat-icon-button matTooltipPosition="above" [matTooltip]="playTooltip" id="play" (click)="tooglePlayback()">
               <mat-icon>{{this.playIcon}}</mat-icon>
             </button>
-            <a mat-icon-button id="nextBtn" *ngIf="this.item.nextEpisode" routerLink="/watch/{{this.item.nextEpisode.link}}" href="/watch/{{this.item.nextEpisode.link}}" queryParamsHandling="merge">
+            <a mat-icon-button id="nextBtn" *ngIf="this.item.nextEpisode" (click)="next()">
               <mat-icon>skip_next</mat-icon>
 
               <div id="next">
diff --git a/Kyoo/ClientApp/src/app/player/player.component.ts b/Kyoo/ClientApp/src/app/player/player.component.ts
index d6e5e980..e447aa56 100644
--- a/Kyoo/ClientApp/src/app/player/player.component.ts
+++ b/Kyoo/ClientApp/src/app/player/player.component.ts
@@ -3,356 +3,373 @@ import { MatSnackBar } from "@angular/material/snack-bar";
 import { DomSanitizer, Title } from "@angular/platform-browser";
 import { ActivatedRoute, Event, NavigationCancel, NavigationEnd, NavigationStart, Router } from "@angular/router";
 import { Track, WatchItem } from "../../models/watch-item";
+import { Location } from "@angular/common";
 
 declare var SubtitleManager: any;
 
 @Component({
-  selector: 'app-player',
-  templateUrl: './player.component.html',
-  styleUrls: ['./player.component.scss'],
-  encapsulation: ViewEncapsulation.None
+	selector: 'app-player',
+	templateUrl: './player.component.html',
+	styleUrls: ['./player.component.scss'],
+	encapsulation: ViewEncapsulation.None
 })
 export class PlayerComponent implements OnInit
 {
-  item: WatchItem;
+	item: WatchItem;
 
-  volume: number = 100;
-  seeking: boolean = false;
-  videoHider;
-  controllerHovered: boolean = false;
-  selectedSubtitle: Track;
+	volume: number = 100;
+	seeking: boolean = false;
+	videoHider;
+	controllerHovered: boolean = false;
+	selectedSubtitle: Track;
 
-  hours: number;
-  minutes: number = 0;
-  seconds: number = 0;
+	hours: number;
+	minutes: number = 0;
+	seconds: number = 0;
 
-  maxHours: number;
-  maxMinutes: number;
-  maxSeconds: number;
+	maxHours: number;
+	maxMinutes: number;
+	maxSeconds: number;
 
-  playIcon: string = "pause"; //Icon used by the play btn.
-  volumeIcon: string = "volume_up"; //Icon used by the volume btn.
-  fullscreenIcon: string = "fullscreen"; //Icon used by the fullscreen btn.
+	playIcon: string = "pause"; //Icon used by the play btn.
+	volumeIcon: string = "volume_up"; //Icon used by the volume btn.
+	fullscreenIcon: string = "fullscreen"; //Icon used by the fullscreen btn.
 
-  playTooltip: string = "Pause"; //Text used in the play tooltip
-  fullscreenTooltip: string = "Fullscreen"; //Text used in the fullscreen tooltip
+	playTooltip: string = "Pause"; //Text used in the play tooltip
+	fullscreenTooltip: string = "Fullscreen"; //Text used in the fullscreen tooltip
 
-  private player: HTMLVideoElement;
-  private thumb: HTMLElement;
-  private progress: HTMLElement;
-  private buffered: HTMLElement;
+	private player: HTMLVideoElement;
+	private thumb: HTMLElement;
+	private progress: HTMLElement;
+	private buffered: HTMLElement;
 
-  constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer, private snackBar: MatSnackBar, private title: Title, private router: Router) { }
+	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer, private snackBar: MatSnackBar, private title: Title, private router: Router, private location: Location) { }
 
-  ngOnInit()
-  {
-    document.getElementById("nav").classList.add("d-none");
-    this.route.data.subscribe((data) =>
-    {
-      this.item = data.item;
-      this.item.duration = 20 * 60;
+	ngOnInit()
+	{
+		document.getElementById("nav").classList.add("d-none");
+		this.route.data.subscribe((data) =>
+		{
+			this.item = data.item;
+			this.item.duration = 20 * 60;
 
-      if (this.player)
-      {
-        this.player.load();
-        this.initPlayBtn();
-      }
+			if (this.player)
+			{
+				this.player.load();
+				this.initPlayBtn();
+			}
 
-      this.setDuration(this.item.duration);
+			this.setDuration(this.item.duration);
 
-      this.title.setTitle(this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber + " - Kyoo");
+			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();
-    });
-  }
+			if (navigator.userAgent.match(/Mobi/))
+			{
+				this.fullscreen();
+				screen.orientation.lock("landscape");
+				$("#fullscreen").addClass("d-none");
+			}
+			if (this.player)
+				this.init();
+		});
+	}
 
-  ngAfterViewInit()
-  {
-    this.player = document.getElementById("player") as HTMLVideoElement;
-    this.thumb = document.getElementById("thumb") as HTMLElement;
-    this.progress = document.getElementById("progress") as HTMLElement;
-    this.buffered = document.getElementById("buffered") as HTMLElement;
-    this.player.controls = false;
-    //console.log(this.player.volume * 100);
-    //this.volume = this.player.volume * 100;
-    //this.changeVolumeBtn();
+	ngAfterViewInit()
+	{
+		this.player = document.getElementById("player") as HTMLVideoElement;
+		this.thumb = document.getElementById("thumb") as HTMLElement;
+		this.progress = document.getElementById("progress") as HTMLElement;
+		this.buffered = document.getElementById("buffered") as HTMLElement;
+		this.player.controls = false;
+		//console.log(this.player.volume * 100);
+		//this.volume = this.player.volume * 100;
+		//this.changeVolumeBtn();
 
-    this.player.onplay = () =>
-    {
-      this.initPlayBtn();
-    }
+		this.player.onplay = () =>
+		{
+			this.initPlayBtn();
+		}
 
-    this.player.onpause = () =>
-    {
-      this.playIcon = "play_arrow"
-      this.playTooltip = "Play";
-    }
+		this.player.onpause = () =>
+		{
+			this.playIcon = "play_arrow"
+			this.playTooltip = "Play";
+		}
 
-    this.player.ontimeupdate = () =>
-    {
-      if (!this.seeking)
-        this.updateTime(this.player.currentTime);
-    };
+		this.player.ontimeupdate = () =>
+		{
+			if (!this.seeking)
+				this.updateTime(this.player.currentTime);
+		};
 
-    this.player.onprogress = () =>
-    {
-      if (this.player.buffered.length > 0)
-        this.buffered.style.width = (this.player.buffered.end(this.player.buffered.length - 1) / this.item.duration * 100) + "%";
+		this.player.onprogress = () =>
+		{
+			if (this.player.buffered.length > 0)
+				this.buffered.style.width = (this.player.buffered.end(this.player.buffered.length - 1) / this.item.duration * 100) + "%";
 
-      if (this.player.duration != undefined && this.player.duration != Infinity)
-        this.setDuration(this.player.duration);
-    };
+			if (this.player.duration != undefined && this.player.duration != Infinity)
+				this.setDuration(this.player.duration);
+		};
 
-    let loadIndicator: HTMLElement = document.getElementById("loadIndicator") as HTMLElement;
-    this.player.onwaiting = () =>
-    {
-      loadIndicator.classList.remove("d-none");
-    }
+		let loadIndicator: HTMLElement = document.getElementById("loadIndicator") as HTMLElement;
+		this.player.onwaiting = () =>
+		{
+			loadIndicator.classList.remove("d-none");
+		}
 
-    this.player.oncanplay = () =>
-    {
-      loadIndicator.classList.add("d-none");
-    }
+		this.player.oncanplay = () =>
+		{
+			loadIndicator.classList.add("d-none");
+		}
 
-    this.player.onended = () =>
-    {
-      this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge" });
-    }
+		this.player.onended = () =>
+		{
+			this.next();
+		}
 
-    let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement;
-    $(progressBar).click((event) =>
-    {
-      event.preventDefault();
-      let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
-      this.player.currentTime = time;
-      this.updateTime(time);
-    });
+		let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement;
+		$(progressBar).click((event) =>
+		{
+			event.preventDefault();
+			let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+			this.player.currentTime = time;
+			this.updateTime(time);
+		});
 
-    $(progressBar).mousedown((event) =>
-    {
-      event.preventDefault();
-      this.seeking = true;
-      progressBar.classList.add("seeking");
-      this.player.pause();
+		$(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);
-    });
+			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");
+		$(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();
-      }
-    });
+				let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+				this.player.currentTime = time;
+				this.player.play();
+			}
+		});
 
-	  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 = "";
+		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(() =>
-    {
-      if (!this.player.paused)
-      {
-        document.getElementById("hover").classList.add("idle");
-        document.documentElement.style.cursor = "none";
-      }
-    }, 1000);
+		//Initialize the timout at the document initialization.
+		this.videoHider = setTimeout(() =>
+		{
+			if (!this.player.paused)
+			{
+				document.getElementById("hover").classList.add("idle");
+				document.documentElement.style.cursor = "none";
+			}
+		}, 1000);
 
-    document.addEventListener("fullscreenchange", () =>
-	  {
-		  if (navigator.userAgent.match(/Mobi/))
-		  {
-			  if (document.fullscreenElement == null)
-			    this.router.navigate(["/show/" + this.item.showSlug]);
-		  }
-		  else
-		  {
-			  if (document.fullscreenElement != null)
-			  {
-				  this.fullscreenIcon = "fullscreen_exit";
-				  this.fullscreenTooltip = "Exit fullscreen";
-			  }
-			  else
-			  {
-				  this.fullscreenIcon = "fullscreen";
-				  this.fullscreenTooltip = "Fullscreen";
-			  }
-		  }
-      
-    });
+		document.addEventListener("fullscreenchange", () =>
+		{
+			if (navigator.userAgent.match(/Mobi/))
+			{
+				if (document.fullscreenElement == null)
+					this.back();
+			}
+			else
+			{
+				if (document.fullscreenElement != null)
+				{
+					this.fullscreenIcon = "fullscreen_exit";
+					this.fullscreenTooltip = "Exit fullscreen";
+				}
+				else
+				{
+					this.fullscreenIcon = "fullscreen";
+					this.fullscreenTooltip = "Fullscreen";
+				}
+			}
 
-    $(window).keydown((e) =>
-    {
-      switch (e.keyCode)
-      {
-        case 32: //space
-          this.tooglePlayback();
-          break;
+		});
 
-        case 38: //Key up
-          this.changeVolume(this.volume + 5);
-          this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
-          break;
-        case 40: //Key down
-          this.changeVolume(this.volume - 5);
-          this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
-          break;
+		$(window).keydown((e) =>
+		{
+			switch (e.keyCode)
+			{
+				case 32: //space
+					this.tooglePlayback();
+					break;
 
-        case 86: //V key
-          let subtitleIndex: number = this.item.subtitles.indexOf(this.selectedSubtitle);
-          let nextSub: Track;
-          if (subtitleIndex + 1 <= this.item.subtitles.length)
-            nextSub = this.item.subtitles[subtitleIndex + 1];
-          else
-            nextSub = this.item.subtitles[0];
+				case 38: //Key up
+					this.changeVolume(this.volume + 5);
+					this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
+					break;
+				case 40: //Key down
+					this.changeVolume(this.volume - 5);
+					this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
+					break;
 
-          this.selectSubtitle(nextSub);
-          break;
+				case 86: //V key
+					let subtitleIndex: number = this.item.subtitles.indexOf(this.selectedSubtitle);
+					let nextSub: Track;
+					if (subtitleIndex + 1 <= this.item.subtitles.length)
+						nextSub = this.item.subtitles[subtitleIndex + 1];
+					else
+						nextSub = this.item.subtitles[0];
 
-        case 70: //F key
-          this.fullscreen();
-          break;
+					this.selectSubtitle(nextSub);
+					break;
 
-        case 77: //M key
-          this.toogleMute();
-          if (this.player.muted)
-            this.snackBar.open("Sound muted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
-          else
-            this.snackBar.open("Sound unmuted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
-          break;
+				case 70: //F key
+					this.fullscreen();
+					break;
 
-        case 78: //N key
-          this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge" });
-          break;
+				case 77: //M key
+					this.toogleMute();
+					if (this.player.muted)
+						this.snackBar.open("Sound muted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
+					else
+						this.snackBar.open("Sound unmuted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
+					break;
 
-        case 80: //P key
-          if (this.item.previousEpisode != null)
-            this.router.navigate(["/watch/" + this.item.previousEpisode], { queryParamsHandling: "merge" });
-          break;
+				case 78: //N key
+					this.next();
+					break;
 
-        default:
-          break;
-      }
-    });
+				case 80: //P key
+					this.previous();
+					break;
 
-    this.router.events.subscribe((event: Event) =>
-    {
-      switch (true)
-      {
-        case event instanceof NavigationStart:
-        {
-          loadIndicator.classList.remove("d-none");
-          break;
-        }
-        case event instanceof NavigationEnd:
-        case event instanceof NavigationCancel:
-        {
-          loadIndicator.classList.add("d-none");
-          break;
-        }
-        default:
-          break;
-      }
-    });
+				default:
+					break;
+			}
+		});
 
-    this.init();
-  }
+		this.router.events.subscribe((event: Event) =>
+		{
+			switch (true)
+			{
+				case event instanceof NavigationStart:
+					{
+						loadIndicator.classList.remove("d-none");
+						break;
+					}
+				case event instanceof NavigationEnd:
+				case event instanceof NavigationCancel:
+					{
+						loadIndicator.classList.add("d-none");
+						break;
+					}
+				default:
+					break;
+			}
+		});
 
-  init()
-  {
-    //Load sub selected from the url.
-    let sub: string = this.route.snapshot.queryParams["sub"];
-    if (sub != null)
-    {
-      let languageCode: string = sub.substring(0, 3);
-      let forced: boolean = sub.length > 3 && sub.substring(4) == "for";
+		this.init();
+	}
 
-      this.selectSubtitle(this.item.subtitles.find(x => x.language == languageCode && x.isForced == forced), false);
-    }
+	init()
+	{
+		//Load sub selected from the url.
+		let sub: string = this.route.snapshot.queryParams["sub"];
+		if (sub != null)
+		{
+			let languageCode: string = sub.substring(0, 3);
+			let forced: boolean = sub.length > 3 && sub.substring(4) == "for";
 
-    setTimeout(() =>
-    {
-      this.snackBar.open("Playing: " + this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber, null, { verticalPosition: "top", horizontalPosition: "right", duration: 2000, panelClass: "info-panel" });
-    }, 750);
-  }
+			this.selectSubtitle(this.item.subtitles.find(x => x.language == languageCode && x.isForced == forced), false);
+		}
 
-  getTimeFromSeekbar(progressBar: HTMLElement, pageX: number)
-  {
-    return Math.max(0, Math.min((pageX - progressBar.offsetLeft) / progressBar.clientWidth, 1)) * this.item.duration;
-  }
+		setTimeout(() =>
+		{
+			this.snackBar.open("Playing: " + this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber, null, { verticalPosition: "top", horizontalPosition: "right", duration: 2000, panelClass: "info-panel" });
+		}, 750);
+	}
 
-  setDuration(duration: number)
-  {
-    this.maxSeconds = Math.round(duration % 60);
-    this.maxMinutes = Math.round(duration / 60 % 60);
-    this.maxHours = Math.round(duration / 3600);
+	back()
+	{
+		this.location.back();
+	}
 
-    this.item.duration = duration;
-  }
+	next()
+	{
+		if (this.item.nextEpisode != null)
+		  this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge", replaceUrl: true });
+	}
 
-  updateTime(time: number)
-  {
-    this.hours = Math.round(time / 60 % 60);
-    this.seconds = Math.round(time % 60);
-    this.minutes = Math.round(time / 60);
+	previous()
+	{
+		if (this.item.previousEpisode != null)
+			this.router.navigate(["/watch/" + this.item.previousEpisode], { queryParamsHandling: "merge", replaceUrl: true });
+	}
 
-    this.thumb.style.transform = "translateX(" + (time / this.item.duration * 100) + "%)";
-    this.progress.style.width = (time / this.item.duration * 100) + "%";
-  }
+	getTimeFromSeekbar(progressBar: HTMLElement, pageX: number)
+	{
+		return Math.max(0, Math.min((pageX - progressBar.offsetLeft) / progressBar.clientWidth, 1)) * this.item.duration;
+	}
 
-  ngOnDestroy()
-  {
-    if (document.fullscreen)
-      document.exitFullscreen();
+	setDuration(duration: number)
+	{
+		this.maxSeconds = Math.round(duration % 60);
+		this.maxMinutes = Math.round(duration / 60 % 60);
+		this.maxHours = Math.round(duration / 3600);
 
-    document.getElementById("nav").classList.remove("d-none");
-    this.title.setTitle("Kyoo");
+		this.item.duration = duration;
+	}
 
-    $(document).unbind();
-    $(window).unbind();
+	updateTime(time: number)
+	{
+		this.hours = Math.round(time / 60 % 60);
+		this.seconds = Math.round(time % 60);
+		this.minutes = Math.round(time / 60);
+
+		this.thumb.style.transform = "translateX(" + (time / this.item.duration * 100) + "%)";
+		this.progress.style.width = (time / this.item.duration * 100) + "%";
+	}
+
+	ngOnDestroy()
+	{
+		if (document.fullscreen)
+			document.exitFullscreen();
+
+		document.getElementById("nav").classList.remove("d-none");
+		this.title.setTitle("Kyoo");
+
+		$(document).unbind();
+		$(window).unbind();
 	}
 
 	videoClicked()
@@ -381,129 +398,129 @@ export class PlayerComponent implements OnInit
 		}
 	}
 
-  tooglePlayback()
-  {
-    if (this.player.paused)
-      this.player.play();
-    else
-      this.player.pause();
-  }
+	tooglePlayback()
+	{
+		if (this.player.paused)
+			this.player.play();
+		else
+			this.player.pause();
+	}
 
-  toogleMute()
-  {
-    if (this.player.muted)
-      this.player.muted = false;
-    else
-      this.player.muted = true;
+	toogleMute()
+	{
+		if (this.player.muted)
+			this.player.muted = false;
+		else
+			this.player.muted = true;
 
-    this.updateVolumeBtn()
-  }
+		this.updateVolumeBtn()
+	}
 
-  initPlayBtn()
-  {
-    this.playIcon = "pause";
-    this.playTooltip = "Pause";
-  }
+	initPlayBtn()
+	{
+		this.playIcon = "pause";
+		this.playTooltip = "Pause";
+	}
 
-  fullscreen()
-  {
-    if (document.fullscreenElement == null)
-      document.body.requestFullscreen();
-    else
-      document.exitFullscreen();
-  }
+	fullscreen()
+	{
+		if (document.fullscreenElement == null)
+			document.body.requestFullscreen();
+		else
+			document.exitFullscreen();
+	}
 
-  //Value from 0 to 100
-  changeVolume(value: number)
-  {
-    value = Math.max(0, Math.min(value, 100));
+	//Value from 0 to 100
+	changeVolume(value: number)
+	{
+		value = Math.max(0, Math.min(value, 100));
 
-    this.player.muted = false;
-    this.player.volume = value / 100;
-    this.volume = value;
+		this.player.muted = false;
+		this.player.volume = value / 100;
+		this.volume = value;
 
-    this.updateVolumeBtn();
-  }
+		this.updateVolumeBtn();
+	}
 
-  updateVolumeBtn()
-  {
-    if (this.player.muted)
-    {
-      this.volumeIcon = "volume_off"
-    }
-    else
-    {
-      if (this.volume == 0)
-        this.volumeIcon = "volume_off";
-      else if (this.volume < 25)
-        this.volumeIcon = "volume_mute";
-      else if (this.volume < 65)
-        this.volumeIcon = "volume_down";
-      else
-        this.volumeIcon = "volume_up";
-    }
-  }
+	updateVolumeBtn()
+	{
+		if (this.player.muted)
+		{
+			this.volumeIcon = "volume_off"
+		}
+		else
+		{
+			if (this.volume == 0)
+				this.volumeIcon = "volume_off";
+			else if (this.volume < 25)
+				this.volumeIcon = "volume_mute";
+			else if (this.volume < 65)
+				this.volumeIcon = "volume_down";
+			else
+				this.volumeIcon = "volume_up";
+		}
+	}
 
-  selectSubtitle(subtitle: Track, changeUrl: boolean = true)
-  {
-    if (changeUrl)
-    {
-      let subSlug: string;
-      if (subtitle != null)
-      {
-        subSlug = subtitle.language;
-        if (subtitle.isForced)
-          subSlug += "-for";
-      }
+	selectSubtitle(subtitle: Track, changeUrl: boolean = true)
+	{
+		if (changeUrl)
+		{
+			let subSlug: string;
+			if (subtitle != null)
+			{
+				subSlug = subtitle.language;
+				if (subtitle.isForced)
+					subSlug += "-for";
+			}
 
-      this.router.navigate([], { relativeTo: this.route, queryParams: { sub: subSlug }, replaceUrl: true, queryParamsHandling: "merge" });
-    }
+			this.router.navigate([], { relativeTo: this.route, queryParams: { sub: subSlug }, replaceUrl: true, queryParamsHandling: "merge" });
+		}
 
-    this.selectedSubtitle = subtitle;
+		this.selectedSubtitle = subtitle;
 
-    if (subtitle == null)
-    {
-      this.snackBar.open("Subtitle removed.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
-      SubtitleManager.remove(this.player);
-      this.removeHtmlTrack();
-    }
-    else
-    {
-      this.snackBar.open(subtitle.displayName + " subtitle loaded.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
-      this.removeHtmlTrack();
+		if (subtitle == null)
+		{
+			this.snackBar.open("Subtitle removed.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
+			SubtitleManager.remove(this.player);
+			this.removeHtmlTrack();
+		}
+		else
+		{
+			this.snackBar.open(subtitle.displayName + " subtitle loaded.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
+			this.removeHtmlTrack();
 
-      if (subtitle.codec == "ass")
-        SubtitleManager.add(this.player, subtitle.link, true);
+			if (subtitle.codec == "ass")
+				SubtitleManager.add(this.player, subtitle.link, true);
 
-      else if (subtitle.codec == "subrip")
-      {
-        SubtitleManager.remove(this.player);
+			else if (subtitle.codec == "subrip")
+			{
+				SubtitleManager.remove(this.player);
 
-        let track = document.createElement("track");
-        track.kind = "subtitles";
-        track.label = subtitle.displayName;
-        track.srclang = subtitle.language;
-        track.src = subtitle.link.replace(".srt", ".vtt");
-        track.classList.add("subtitle_container");
-        track.default = true;
-        track.onload = () => 
-        {
-          this.player.textTracks[0].mode = "showing";
-        };
-        this.player.appendChild(track);
-      }
-    }
-  }
+				let track = document.createElement("track");
+				track.kind = "subtitles";
+				track.label = subtitle.displayName;
+				track.srclang = subtitle.language;
+				track.src = subtitle.link.replace(".srt", ".vtt");
+				track.classList.add("subtitle_container");
+				track.default = true;
+				track.onload = () => 
+				{
+					this.player.textTracks[0].mode = "showing";
+				};
+				this.player.appendChild(track);
+			}
+		}
+	}
 
-  removeHtmlTrack()
-  {
-    let elements = this.player.getElementsByTagName("track");
-    if (elements.length > 0)
-      elements.item(0).remove();
-  }
+	removeHtmlTrack()
+	{
+		let elements = this.player.getElementsByTagName("track");
+		if (elements.length > 0)
+			elements.item(0).remove();
+	}
 
-  getThumb(url: string)
-  {
-    return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
-  }
+	getThumb(url: string)
+	{
+		return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
+	}
 }