From e6c55223295f7f63a99d038b6a85ab25dfc04f58 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Tue, 29 Dec 2020 23:02:04 +0100 Subject: [PATCH] Trying to create player back navigation with the history api, maybe should use the back navigation event listener --- src/app/app.component.ts | 13 +++++++++++-- src/app/app.module.ts | 14 ++++++++++++-- src/app/pages/player/player.component.ts | 9 ++++++--- src/app/services/startup.service.ts | 19 +++++++++++++++++++ 4 files changed, 48 insertions(+), 7 deletions(-) create mode 100644 src/app/services/startup.service.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c8e8a49a..c3a9600b 100644 --- a/src/app/app.component.ts +++ b/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 { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 06f5b345..91cfadd0 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/pages/player/player.component.ts b/src/app/pages/player/player.component.ts index b0048aff..d2599405 100644 --- a/src/app/pages/player/player.component.ts +++ b/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 }); } diff --git a/src/app/services/startup.service.ts b/src/app/services/startup.service.ts new file mode 100644 index 00000000..6b64621d --- /dev/null +++ b/src/app/services/startup.service.ts @@ -0,0 +1,19 @@ +import { Injectable } from "@angular/core"; + +@Injectable({ + providedIn: "root" +}) +export class StartupService +{ + constructor() {} + + load(): Promise + { + if (window.location.pathname.startsWith("/watch/")) + { + const show = window.location.pathname.match(/^\/watch\/(?.*)(-s\d+e\d+)+?$/).groups["show"]; + history.pushState({}, null, `/show/${show}`) + } + return Promise.resolve(null); + } +}