Trying to create player back navigation with the history api, maybe should use the back navigation event listener

src/app/app.component.ts

@@ -1,5 +1,12 @@
 import {Component} from '@angular/core';
-import {Event, Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from '@angular/router';
+import {
+	Event,
+	Router,
+	NavigationStart,
+	NavigationEnd,
+	NavigationCancel,
+	NavigationError
+} from "@angular/router";
 import {Location} from "@angular/common";
 import {MatDialog} from "@angular/material/dialog";
 import {AccountComponent} from "./auth/account/account.component";
@@ -68,7 +75,9 @@ export class AppComponent
 		if (query != "")
 		{
 			event.target.classList.add("searching");
-			this.router.navigate(["/search", query], { replaceUrl: this.router.url.startsWith("/search") });
+			this.router.navigate(["/search", query], {
+				replaceUrl: true
+			});
 		}
 		else
 		{

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from "@angular/core";
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
@@ -46,6 +46,7 @@ import { MatExpansionModule } from "@angular/material/expansion";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ShowGridComponent } from "./components/show-grid/show-grid.component";
 import { MatBadgeModule } from "@angular/material/badge";
+import { StartupService } from "./services/startup.service";
 
 
 @NgModule({
@@ -101,6 +102,15 @@ import { MatBadgeModule } from "@angular/material/badge";
 		MatBadgeModule,
 		HammerModule
 	],
-	bootstrap: [AppComponent]
+	bootstrap: [AppComponent],
+	providers: [
+		StartupService,
+		{
+			provide: APP_INITIALIZER,
+			useFactory: (startup: StartupService) => () => startup.load(),
+			deps: [StartupService],
+			multi: true
+		}
+	]
 })
 export class AppModule { }

src/app/pages/player/player.component.ts

@@ -359,7 +359,8 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 
 	back()
 	{
-		this.router.navigate(["/show", this.item.showSlug]);
+		// TODO add the show page in the backstack if the user used a direct link to go to the watch page.
+		this.location.back();
 	}
 
 	next()
@@ -367,7 +368,8 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 		if (this.item.nextEpisode == null)
 			return;
 		this.router.navigate(["/watch", this.item.nextEpisode.slug], {
-			queryParamsHandling: "merge"
+			queryParamsHandling: "merge",
+			replaceUrl: true
 		});
 	}
 
@@ -376,7 +378,8 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 		if (this.item.previousEpisode == null)
 			return;
 		this.router.navigate(["/watch", this.item.previousEpisode.slug], {
-			queryParamsHandling: "merge"
+			queryParamsHandling: "merge",
+			replaceUrl: true
 		});
 	}
 

src/app/services/startup.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root"
+})
+export class StartupService
+{
+	constructor() {}
+
+	load(): Promise<any>
+	{
+		if (window.location.pathname.startsWith("/watch/"))
+		{
+			const show = window.location.pathname.match(/^\/watch\/(?<show>.*)(-s\d+e\d+)+?$/).groups["show"];
+			history.pushState({}, null, `/show/${show}`)
+		}
+		return Promise.resolve(null);
+	}
+}