Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-06 07:04:12 -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 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">

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 { 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;
@ -42,7 +43,7 @@ export class PlayerComponent implements OnInit
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()
{
@ -123,7 +124,7 @@ export class PlayerComponent implements OnInit
this.player.onended = () =>
{
this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge" });
this.next();
}
let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement;
@ -206,7 +207,7 @@ export class PlayerComponent implements OnInit
if (navigator.userAgent.match(/Mobi/))
{
if (document.fullscreenElement == null)
this.router.navigate(["/show/" + this.item.showSlug]);
this.back();
}
else
{
@ -265,12 +266,11 @@ export class PlayerComponent implements OnInit
break;
case 78: //N key
this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge" });
this.next();
break;
case 80: //P key
if (this.item.previousEpisode != null)
this.router.navigate(["/watch/" + this.item.previousEpisode], { queryParamsHandling: "merge" });
this.previous();
break;
default:
@ -319,6 +319,23 @@ export class PlayerComponent implements OnInit
}, 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)
{
return Math.max(0, Math.min((pageX - progressBar.offsetLeft) / progressBar.clientWidth, 1)) * this.item.duration;