Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-07 15:44:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Solving a bug with navigation on the player.

Browse Source
This commit is contained in:
Zoe Roux 2019-10-27 18:17:26 +01:00
parent 38e464c461
commit 23c7d72675
2 changed files with 417 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Kyoo/ClientApp/src/app/player/player.component.html
View File

@ -12,7 +12,7 @@
<div id="hover"> <div id="hover">
<div class="back"> <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> <mat-icon>arrow_back</mat-icon>
</a> </a>
<h5>{{this.item.showTitle}}</h5> <h5>{{this.item.showTitle}}</h5>
@ -35,13 +35,13 @@
<div class="buttons"> <div class="buttons">
<div class="left"> <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> <mat-icon>skip_previous</mat-icon>
</a> </a>
<button mat-icon-button matTooltipPosition="above" [matTooltip]="playTooltip" id="play" (click)="tooglePlayback()"> <button mat-icon-button matTooltipPosition="above" [matTooltip]="playTooltip" id="play" (click)="tooglePlayback()">
<mat-icon>{{this.playIcon}}</mat-icon> <mat-icon>{{this.playIcon}}</mat-icon>
</button> </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> <mat-icon>skip_next</mat-icon>
<div id="next"> <div id="next">

29
Kyoo/ClientApp/src/app/player/player.component.ts
View File

@ -3,6 +3,7 @@ import { MatSnackBar } from "@angular/material/snack-bar";
import { DomSanitizer, Title } from "@angular/platform-browser"; import { DomSanitizer, Title } from "@angular/platform-browser";
import { ActivatedRoute, Event, NavigationCancel, NavigationEnd, NavigationStart, Router } from "@angular/router"; import { ActivatedRoute, Event, NavigationCancel, NavigationEnd, NavigationStart, Router } from "@angular/router";
import { Track, WatchItem } from "../../models/watch-item"; import { Track, WatchItem } from "../../models/watch-item";
import { Location } from "@angular/common";
declare var SubtitleManager: any; declare var SubtitleManager: any;
@ -42,7 +43,7 @@ export class PlayerComponent implements OnInit
private progress: HTMLElement; private progress: HTMLElement;
private buffered: 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() ngOnInit()
{ {
@ -123,7 +124,7 @@ export class PlayerComponent implements OnInit
this.player.onended = () => this.player.onended = () =>
{ {
this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge" }); this.next();
} }
let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement; let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement;
@ -206,7 +207,7 @@ export class PlayerComponent implements OnInit
if (navigator.userAgent.match(/Mobi/)) if (navigator.userAgent.match(/Mobi/))
{ {
if (document.fullscreenElement == null) if (document.fullscreenElement == null)
this.router.navigate(["/show/" + this.item.showSlug]); this.back();
} }
else else
{ {
@ -265,12 +266,11 @@ export class PlayerComponent implements OnInit
break; break;
case 78: //N key case 78: //N key
this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge" }); this.next();
break; break;
case 80: //P key case 80: //P key
if (this.item.previousEpisode != null) this.previous();
this.router.navigate(["/watch/" + this.item.previousEpisode], { queryParamsHandling: "merge" });
break; break;
default: default:
@ -319,6 +319,23 @@ export class PlayerComponent implements OnInit
}, 750); }, 750);
} }
back()
{
this.location.back();
}
next()
{
if (this.item.nextEpisode != null)
this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge", replaceUrl: true });
}
previous()
{
if (this.item.previousEpisode != null)
this.router.navigate(["/watch/" + this.item.previousEpisode], { queryParamsHandling: "merge", replaceUrl: true });
}
getTimeFromSeekbar(progressBar: HTMLElement, pageX: number) getTimeFromSeekbar(progressBar: HTMLElement, pageX: number)
{ {
return Math.max(0, Math.min((pageX - progressBar.offsetLeft) / progressBar.clientWidth, 1)) * this.item.duration; return Math.max(0, Math.min((pageX - progressBar.offsetLeft) / progressBar.clientWidth, 1)) * this.item.duration;