Adding an method error cathing and a way to force a mehtod.

Kyoo/ClientApp/angular.json

@@ -56,7 +56,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "3mb",
                   "maximumError": "5mb"
                 },
                 {

Kyoo/ClientApp/package-lock.json

@@ -4266,9 +4266,9 @@
       "dev": true
     },
     "fsevents": {
-      "version": "2.0.7",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
-      "integrity": "sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==",
+      "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
       "dev": true,
       "optional": true
     },
@@ -8601,6 +8601,7 @@
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.4.0.tgz",
       "integrity": "sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw==",
+      "dev": true,
       "requires": {
         "tslib": "^1.9.0"
       }

Kyoo/ClientApp/package.json

@@ -27,8 +27,6 @@
     "hammerjs": "^2.0.8",
     "jquery": "^3.4.1",
     "popper.js": "^1.15.0",
-    "rxjs": "~6.4.0",
-    "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {

Kyoo/ClientApp/src/app/browse/browse.component.ts

@@ -8,7 +8,7 @@ import { Show } from "../../models/show";
   templateUrl: './browse.component.html',
   styleUrls: ['./browse.component.scss']
 })
-export class BrowseComponent implements OnInit
+export class BrowseComponent
 {
   @Input() shows: Show[];
   sortType: string = "title";
@@ -16,12 +16,12 @@ export class BrowseComponent implements OnInit
 
   sortTypes: string[] = ["title", "release date"];
 
-  constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) { }
+	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer)
-
-  ngOnInit()
 	{
-    if (this.shows == null)
+		this.route.data.subscribe((data) =>
-      this.shows = this.route.snapshot.data.shows;
+		{
+			this.shows = data.shows;
+		});
 	}
 
   getThumb(slug: string)

Kyoo/ClientApp/src/app/collection/collection.component.ts

@@ -8,15 +8,16 @@ import { DomSanitizer } from "@angular/platform-browser";
   templateUrl: './collection.component.html',
   styleUrls: ['./collection.component.scss']
 })
-export class CollectionComponent implements OnInit
+export class CollectionComponent
 {
   collection: Collection;
 
-	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) { }
+	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer)
-
-  ngOnInit()
 	{
-    this.collection = this.route.snapshot.data.collection;
+		this.route.data.subscribe((data) =>
+		{
+			this.collection = data.collection;
+		});
 	}
 
 	getThumb()

Kyoo/ClientApp/src/app/player/player.component.ts

@@ -40,6 +40,8 @@ export class PlayerComponent implements OnInit
 	playTooltip: string = "Pause"; //Text used in the play tooltip
 	fullscreenTooltip: string = "Fullscreen"; //Text used in the fullscreen tooltip
 
+	playMethod: method;
+
 	private player: HTMLVideoElement;
 	private thumb: HTMLElement;
 	private progress: HTMLElement;
@@ -127,6 +129,19 @@ export class PlayerComponent implements OnInit
 			this.next();
 		}
 
+		this.player.onerror = () =>
+		{
+			if (this.playMethod == method.transcode)
+			{
+				this.snackBar.open("This episode can't be played.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 10000 });
+			}
+			else
+			{
+				this.playMethod += 1;
+				this.selectPlayMethod();
+			}
+		}
+
 		let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement;
 		$(progressBar).click((event) =>
 		{
@@ -339,21 +354,14 @@ export class PlayerComponent implements OnInit
 
 	init()
 	{
-		let playbackMethod = getPlaybackMethod(this.player, this.item);
+		let queryMethod: string = this.route.snapshot.queryParams["method"];
-		if (playbackMethod == method.direct)
+		console.log("Query method: " + queryMethod);
-		{
+		if (queryMethod)
-			this.player.src = "/video/" + this.item.link;
+			this.playMethod = method[queryMethod];
-		}
-		else if (playbackMethod == method.transmux)
-		{
-			var dashPlayer = MediaPlayer().create();
-			dashPlayer.initialize(this.player, "/video/transmux/" + this.item.link + "/", true);
-		}
     else
-		{
+			this.playMethod = getPlaybackMethod(this.player, this.item);
-			var dashPlayer = MediaPlayer().create();
+			
-			dashPlayer.initialize(this.player, "/video/transcode/" + this.item.link + "/", true);
+		this.selectPlayMethod();
-		}
 
 		let sub: string = this.route.snapshot.queryParams["sub"];
 		if (sub != null)
@@ -370,6 +378,24 @@ export class PlayerComponent implements OnInit
 		}, 750);
 	}
 
+	selectPlayMethod()
+	{
+		if (this.playMethod == method.direct)
+		{
+			this.player.src = "/video/" + this.item.link;
+		}
+		else if (this.playMethod == method.transmux)
+		{
+			var dashPlayer = MediaPlayer().create();
+			dashPlayer.initialize(this.player, "/video/transmux/" + this.item.link + "/", true);
+		}
+		else
+		{
+			var dashPlayer = MediaPlayer().create();
+			dashPlayer.initialize(this.player, "/video/transcode/" + this.item.link + "/", true);
+		}
+	}
+
 	back()
 	{
 		this.location.back();

Kyoo/ClientApp/src/app/show-details/show-details.component.ts

@@ -26,22 +26,25 @@ export class ShowDetailsComponent implements OnInit
     {
       this.season = params["season"];
 	  });
-  }
 
-  ngOnInit()
+	  this.route.data.subscribe(data =>
 	  {
-    this.show = this.route.snapshot.data.show;
+		  this.show = data.show;
 		  this.title.setTitle(this.show.title + " - Kyoo");
 
 		  if (this.season == null || this.show.seasons.find(x => x.seasonNumber == this.season) == null)
 			  this.season = 1;
 
+		  this.getEpisodes();
+	  });
+  }
+
+  ngOnInit()
+  {
     this.toolbar = document.getElementById("toolbar");
     this.backdrop = document.getElementById("backdrop");
     window.addEventListener("scroll", this.scroll, true);
     this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`);
-
-    this.getEpisodes();
   }
 
   ngOnDestroy()