mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-06-03 05:34:23 -04:00
Solving a bug with navigation on the player.
This commit is contained in:
Zoe Roux
parent
38e464c461
commit
23c7d72675
@ -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">
|
||||
|
||||
@ -3,356 +3,373 @@ 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;
|
||||
|
||||
@Component({
|
||||
selector: 'app-player',
|
||||
templateUrl: './player.component.html',
|
||||
styleUrls: ['./player.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
selector: 'app-player',
|
||||
templateUrl: './player.component.html',
|
||||
styleUrls: ['./player.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class PlayerComponent implements OnInit
|
||||
{
|
||||
item: WatchItem;
|
||||
item: WatchItem;
|
||||
|
||||
volume: number = 100;
|
||||
seeking: boolean = false;
|
||||
videoHider;
|
||||
controllerHovered: boolean = false;
|
||||
selectedSubtitle: Track;
|
||||
volume: number = 100;
|
||||
seeking: boolean = false;
|
||||
videoHider;
|
||||
controllerHovered: boolean = false;
|
||||
selectedSubtitle: Track;
|
||||
|
||||
hours: number;
|
||||
minutes: number = 0;
|
||||
seconds: number = 0;
|
||||
hours: number;
|
||||
minutes: number = 0;
|
||||
seconds: number = 0;
|
||||
|
||||
maxHours: number;
|
||||
maxMinutes: number;
|
||||
maxSeconds: number;
|
||||
maxHours: number;
|
||||
maxMinutes: number;
|
||||
maxSeconds: number;
|
||||
|
||||
playIcon: string = "pause"; //Icon used by the play btn.
|
||||
volumeIcon: string = "volume_up"; //Icon used by the volume btn.
|
||||
fullscreenIcon: string = "fullscreen"; //Icon used by the fullscreen btn.
|
||||
playIcon: string = "pause"; //Icon used by the play btn.
|
||||
volumeIcon: string = "volume_up"; //Icon used by the volume btn.
|
||||
fullscreenIcon: string = "fullscreen"; //Icon used by the fullscreen btn.
|
||||
|
||||
playTooltip: string = "Pause"; //Text used in the play tooltip
|
||||
fullscreenTooltip: string = "Fullscreen"; //Text used in the fullscreen tooltip
|
||||
playTooltip: string = "Pause"; //Text used in the play tooltip
|
||||
fullscreenTooltip: string = "Fullscreen"; //Text used in the fullscreen tooltip
|
||||
|
||||
private player: HTMLVideoElement;
|
||||
private thumb: HTMLElement;
|
||||
private progress: HTMLElement;
|
||||
private buffered: HTMLElement;
|
||||
private player: HTMLVideoElement;
|
||||
private thumb: HTMLElement;
|
||||
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()
|
||||
{
|
||||
document.getElementById("nav").classList.add("d-none");
|
||||
this.route.data.subscribe((data) =>
|
||||
{
|
||||
this.item = data.item;
|
||||
this.item.duration = 20 * 60;
|
||||
ngOnInit()
|
||||
{
|
||||
document.getElementById("nav").classList.add("d-none");
|
||||
this.route.data.subscribe((data) =>
|
||||
{
|
||||
this.item = data.item;
|
||||
this.item.duration = 20 * 60;
|
||||
|
||||
if (this.player)
|
||||
{
|
||||
this.player.load();
|
||||
this.initPlayBtn();
|
||||
}
|
||||
if (this.player)
|
||||
{
|
||||
this.player.load();
|
||||
this.initPlayBtn();
|
||||
}
|
||||
|
||||
this.setDuration(this.item.duration);
|
||||
this.setDuration(this.item.duration);
|
||||
|
||||
this.title.setTitle(this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber + " - Kyoo");
|
||||
this.title.setTitle(this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber + " - Kyoo");
|
||||
|
||||
if (navigator.userAgent.match(/Mobi/))
|
||||
{
|
||||
this.fullscreen();
|
||||
screen.orientation.lock("landscape");
|
||||
$("#fullscreen").addClass("d-none");
|
||||
}
|
||||
if (this.player)
|
||||
this.init();
|
||||
});
|
||||
}
|
||||
if (navigator.userAgent.match(/Mobi/))
|
||||
{
|
||||
this.fullscreen();
|
||||
screen.orientation.lock("landscape");
|
||||
$("#fullscreen").addClass("d-none");
|
||||
}
|
||||
if (this.player)
|
||||
this.init();
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterViewInit()
|
||||
{
|
||||
this.player = document.getElementById("player") as HTMLVideoElement;
|
||||
this.thumb = document.getElementById("thumb") as HTMLElement;
|
||||
this.progress = document.getElementById("progress") as HTMLElement;
|
||||
this.buffered = document.getElementById("buffered") as HTMLElement;
|
||||
this.player.controls = false;
|
||||
//console.log(this.player.volume * 100);
|
||||
//this.volume = this.player.volume * 100;
|
||||
//this.changeVolumeBtn();
|
||||
ngAfterViewInit()
|
||||
{
|
||||
this.player = document.getElementById("player") as HTMLVideoElement;
|
||||
this.thumb = document.getElementById("thumb") as HTMLElement;
|
||||
this.progress = document.getElementById("progress") as HTMLElement;
|
||||
this.buffered = document.getElementById("buffered") as HTMLElement;
|
||||
this.player.controls = false;
|
||||
//console.log(this.player.volume * 100);
|
||||
//this.volume = this.player.volume * 100;
|
||||
//this.changeVolumeBtn();
|
||||
|
||||
this.player.onplay = () =>
|
||||
{
|
||||
this.initPlayBtn();
|
||||
}
|
||||
this.player.onplay = () =>
|
||||
{
|
||||
this.initPlayBtn();
|
||||
}
|
||||
|
||||
this.player.onpause = () =>
|
||||
{
|
||||
this.playIcon = "play_arrow"
|
||||
this.playTooltip = "Play";
|
||||
}
|
||||
this.player.onpause = () =>
|
||||
{
|
||||
this.playIcon = "play_arrow"
|
||||
this.playTooltip = "Play";
|
||||
}
|
||||
|
||||
this.player.ontimeupdate = () =>
|
||||
{
|
||||
if (!this.seeking)
|
||||
this.updateTime(this.player.currentTime);
|
||||
};
|
||||
this.player.ontimeupdate = () =>
|
||||
{
|
||||
if (!this.seeking)
|
||||
this.updateTime(this.player.currentTime);
|
||||
};
|
||||
|
||||
this.player.onprogress = () =>
|
||||
{
|
||||
if (this.player.buffered.length > 0)
|
||||
this.buffered.style.width = (this.player.buffered.end(this.player.buffered.length - 1) / this.item.duration * 100) + "%";
|
||||
this.player.onprogress = () =>
|
||||
{
|
||||
if (this.player.buffered.length > 0)
|
||||
this.buffered.style.width = (this.player.buffered.end(this.player.buffered.length - 1) / this.item.duration * 100) + "%";
|
||||
|
||||
if (this.player.duration != undefined && this.player.duration != Infinity)
|
||||
this.setDuration(this.player.duration);
|
||||
};
|
||||
if (this.player.duration != undefined && this.player.duration != Infinity)
|
||||
this.setDuration(this.player.duration);
|
||||
};
|
||||
|
||||
let loadIndicator: HTMLElement = document.getElementById("loadIndicator") as HTMLElement;
|
||||
this.player.onwaiting = () =>
|
||||
{
|
||||
loadIndicator.classList.remove("d-none");
|
||||
}
|
||||
let loadIndicator: HTMLElement = document.getElementById("loadIndicator") as HTMLElement;
|
||||
this.player.onwaiting = () =>
|
||||
{
|
||||
loadIndicator.classList.remove("d-none");
|
||||
}
|
||||
|
||||
this.player.oncanplay = () =>
|
||||
{
|
||||
loadIndicator.classList.add("d-none");
|
||||
}
|
||||
this.player.oncanplay = () =>
|
||||
{
|
||||
loadIndicator.classList.add("d-none");
|
||||
}
|
||||
|
||||
this.player.onended = () =>
|
||||
{
|
||||
this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge" });
|
||||
}
|
||||
this.player.onended = () =>
|
||||
{
|
||||
this.next();
|
||||
}
|
||||
|
||||
let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement;
|
||||
$(progressBar).click((event) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
|
||||
this.player.currentTime = time;
|
||||
this.updateTime(time);
|
||||
});
|
||||
let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement;
|
||||
$(progressBar).click((event) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
|
||||
this.player.currentTime = time;
|
||||
this.updateTime(time);
|
||||
});
|
||||
|
||||
$(progressBar).mousedown((event) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
this.seeking = true;
|
||||
progressBar.classList.add("seeking");
|
||||
this.player.pause();
|
||||
$(progressBar).mousedown((event) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
this.seeking = true;
|
||||
progressBar.classList.add("seeking");
|
||||
this.player.pause();
|
||||
|
||||
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
|
||||
this.updateTime(time);
|
||||
});
|
||||
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
|
||||
this.updateTime(time);
|
||||
});
|
||||
|
||||
$(document).mouseup((event) =>
|
||||
{
|
||||
if (this.seeking)
|
||||
{
|
||||
event.preventDefault();
|
||||
this.seeking = false;
|
||||
progressBar.classList.remove("seeking");
|
||||
$(document).mouseup((event) =>
|
||||
{
|
||||
if (this.seeking)
|
||||
{
|
||||
event.preventDefault();
|
||||
this.seeking = false;
|
||||
progressBar.classList.remove("seeking");
|
||||
|
||||
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
|
||||
this.player.currentTime = time;
|
||||
this.player.play();
|
||||
}
|
||||
});
|
||||
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
|
||||
this.player.currentTime = time;
|
||||
this.player.play();
|
||||
}
|
||||
});
|
||||
|
||||
if (!navigator.userAgent.match(/Mobi/))
|
||||
{
|
||||
$(document).mousemove((event) =>
|
||||
{
|
||||
if (this.seeking)
|
||||
{
|
||||
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
|
||||
this.updateTime(time);
|
||||
}
|
||||
else
|
||||
{
|
||||
document.getElementById("hover").classList.remove("idle");
|
||||
document.documentElement.style.cursor = "";
|
||||
if (!navigator.userAgent.match(/Mobi/))
|
||||
{
|
||||
$(document).mousemove((event) =>
|
||||
{
|
||||
if (this.seeking)
|
||||
{
|
||||
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
|
||||
this.updateTime(time);
|
||||
}
|
||||
else
|
||||
{
|
||||
document.getElementById("hover").classList.remove("idle");
|
||||
document.documentElement.style.cursor = "";
|
||||
|
||||
clearTimeout(this.videoHider);
|
||||
clearTimeout(this.videoHider);
|
||||
|
||||
this.videoHider = setTimeout((ev: MouseEvent) =>
|
||||
{
|
||||
if (!this.player.paused && !this.controllerHovered)
|
||||
{
|
||||
document.getElementById("hover").classList.add("idle");
|
||||
document.documentElement.style.cursor = "none";
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
this.videoHider = setTimeout((ev: MouseEvent) =>
|
||||
{
|
||||
if (!this.player.paused && !this.controllerHovered)
|
||||
{
|
||||
document.getElementById("hover").classList.add("idle");
|
||||
document.documentElement.style.cursor = "none";
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
$("#controller").mouseenter(() => { this.controllerHovered = true; });
|
||||
$("#controller").mouseleave(() => { this.controllerHovered = false; });
|
||||
}
|
||||
$("#controller").mouseenter(() => { this.controllerHovered = true; });
|
||||
$("#controller").mouseleave(() => { this.controllerHovered = false; });
|
||||
}
|
||||
|
||||
//Initialize the timout at the document initialization.
|
||||
this.videoHider = setTimeout(() =>
|
||||
{
|
||||
if (!this.player.paused)
|
||||
{
|
||||
document.getElementById("hover").classList.add("idle");
|
||||
document.documentElement.style.cursor = "none";
|
||||
}
|
||||
}, 1000);
|
||||
//Initialize the timout at the document initialization.
|
||||
this.videoHider = setTimeout(() =>
|
||||
{
|
||||
if (!this.player.paused)
|
||||
{
|
||||
document.getElementById("hover").classList.add("idle");
|
||||
document.documentElement.style.cursor = "none";
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
document.addEventListener("fullscreenchange", () =>
|
||||
{
|
||||
if (navigator.userAgent.match(/Mobi/))
|
||||
{
|
||||
if (document.fullscreenElement == null)
|
||||
this.router.navigate(["/show/" + this.item.showSlug]);
|
||||
}
|
||||
else
|
||||
{
|
||||
if (document.fullscreenElement != null)
|
||||
{
|
||||
this.fullscreenIcon = "fullscreen_exit";
|
||||
this.fullscreenTooltip = "Exit fullscreen";
|
||||
}
|
||||
else
|
||||
{
|
||||
this.fullscreenIcon = "fullscreen";
|
||||
this.fullscreenTooltip = "Fullscreen";
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
document.addEventListener("fullscreenchange", () =>
|
||||
{
|
||||
if (navigator.userAgent.match(/Mobi/))
|
||||
{
|
||||
if (document.fullscreenElement == null)
|
||||
this.back();
|
||||
}
|
||||
else
|
||||
{
|
||||
if (document.fullscreenElement != null)
|
||||
{
|
||||
this.fullscreenIcon = "fullscreen_exit";
|
||||
this.fullscreenTooltip = "Exit fullscreen";
|
||||
}
|
||||
else
|
||||
{
|
||||
this.fullscreenIcon = "fullscreen";
|
||||
this.fullscreenTooltip = "Fullscreen";
|
||||
}
|
||||
}
|
||||
|
||||
$(window).keydown((e) =>
|
||||
{
|
||||
switch (e.keyCode)
|
||||
{
|
||||
case 32: //space
|
||||
this.tooglePlayback();
|
||||
break;
|
||||
});
|
||||
|
||||
case 38: //Key up
|
||||
this.changeVolume(this.volume + 5);
|
||||
this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
|
||||
break;
|
||||
case 40: //Key down
|
||||
this.changeVolume(this.volume - 5);
|
||||
this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
|
||||
break;
|
||||
$(window).keydown((e) =>
|
||||
{
|
||||
switch (e.keyCode)
|
||||
{
|
||||
case 32: //space
|
||||
this.tooglePlayback();
|
||||
break;
|
||||
|
||||
case 86: //V key
|
||||
let subtitleIndex: number = this.item.subtitles.indexOf(this.selectedSubtitle);
|
||||
let nextSub: Track;
|
||||
if (subtitleIndex + 1 <= this.item.subtitles.length)
|
||||
nextSub = this.item.subtitles[subtitleIndex + 1];
|
||||
else
|
||||
nextSub = this.item.subtitles[0];
|
||||
case 38: //Key up
|
||||
this.changeVolume(this.volume + 5);
|
||||
this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
|
||||
break;
|
||||
case 40: //Key down
|
||||
this.changeVolume(this.volume - 5);
|
||||
this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
|
||||
break;
|
||||
|
||||
this.selectSubtitle(nextSub);
|
||||
break;
|
||||
case 86: //V key
|
||||
let subtitleIndex: number = this.item.subtitles.indexOf(this.selectedSubtitle);
|
||||
let nextSub: Track;
|
||||
if (subtitleIndex + 1 <= this.item.subtitles.length)
|
||||
nextSub = this.item.subtitles[subtitleIndex + 1];
|
||||
else
|
||||
nextSub = this.item.subtitles[0];
|
||||
|
||||
case 70: //F key
|
||||
this.fullscreen();
|
||||
break;
|
||||
this.selectSubtitle(nextSub);
|
||||
break;
|
||||
|
||||
case 77: //M key
|
||||
this.toogleMute();
|
||||
if (this.player.muted)
|
||||
this.snackBar.open("Sound muted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
|
||||
else
|
||||
this.snackBar.open("Sound unmuted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
|
||||
break;
|
||||
case 70: //F key
|
||||
this.fullscreen();
|
||||
break;
|
||||
|
||||
case 78: //N key
|
||||
this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge" });
|
||||
break;
|
||||
case 77: //M key
|
||||
this.toogleMute();
|
||||
if (this.player.muted)
|
||||
this.snackBar.open("Sound muted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
|
||||
else
|
||||
this.snackBar.open("Sound unmuted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
|
||||
break;
|
||||
|
||||
case 80: //P key
|
||||
if (this.item.previousEpisode != null)
|
||||
this.router.navigate(["/watch/" + this.item.previousEpisode], { queryParamsHandling: "merge" });
|
||||
break;
|
||||
case 78: //N key
|
||||
this.next();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
case 80: //P key
|
||||
this.previous();
|
||||
break;
|
||||
|
||||
this.router.events.subscribe((event: Event) =>
|
||||
{
|
||||
switch (true)
|
||||
{
|
||||
case event instanceof NavigationStart:
|
||||
{
|
||||
loadIndicator.classList.remove("d-none");
|
||||
break;
|
||||
}
|
||||
case event instanceof NavigationEnd:
|
||||
case event instanceof NavigationCancel:
|
||||
{
|
||||
loadIndicator.classList.add("d-none");
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.init();
|
||||
}
|
||||
this.router.events.subscribe((event: Event) =>
|
||||
{
|
||||
switch (true)
|
||||
{
|
||||
case event instanceof NavigationStart:
|
||||
{
|
||||
loadIndicator.classList.remove("d-none");
|
||||
break;
|
||||
}
|
||||
case event instanceof NavigationEnd:
|
||||
case event instanceof NavigationCancel:
|
||||
{
|
||||
loadIndicator.classList.add("d-none");
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
init()
|
||||
{
|
||||
//Load sub selected from the url.
|
||||
let sub: string = this.route.snapshot.queryParams["sub"];
|
||||
if (sub != null)
|
||||
{
|
||||
let languageCode: string = sub.substring(0, 3);
|
||||
let forced: boolean = sub.length > 3 && sub.substring(4) == "for";
|
||||
this.init();
|
||||
}
|
||||
|
||||
this.selectSubtitle(this.item.subtitles.find(x => x.language == languageCode && x.isForced == forced), false);
|
||||
}
|
||||
init()
|
||||
{
|
||||
//Load sub selected from the url.
|
||||
let sub: string = this.route.snapshot.queryParams["sub"];
|
||||
if (sub != null)
|
||||
{
|
||||
let languageCode: string = sub.substring(0, 3);
|
||||
let forced: boolean = sub.length > 3 && sub.substring(4) == "for";
|
||||
|
||||
setTimeout(() =>
|
||||
{
|
||||
this.snackBar.open("Playing: " + this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber, null, { verticalPosition: "top", horizontalPosition: "right", duration: 2000, panelClass: "info-panel" });
|
||||
}, 750);
|
||||
}
|
||||
this.selectSubtitle(this.item.subtitles.find(x => x.language == languageCode && x.isForced == forced), false);
|
||||
}
|
||||
|
||||
getTimeFromSeekbar(progressBar: HTMLElement, pageX: number)
|
||||
{
|
||||
return Math.max(0, Math.min((pageX - progressBar.offsetLeft) / progressBar.clientWidth, 1)) * this.item.duration;
|
||||
}
|
||||
setTimeout(() =>
|
||||
{
|
||||
this.snackBar.open("Playing: " + this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber, null, { verticalPosition: "top", horizontalPosition: "right", duration: 2000, panelClass: "info-panel" });
|
||||
}, 750);
|
||||
}
|
||||
|
||||
setDuration(duration: number)
|
||||
{
|
||||
this.maxSeconds = Math.round(duration % 60);
|
||||
this.maxMinutes = Math.round(duration / 60 % 60);
|
||||
this.maxHours = Math.round(duration / 3600);
|
||||
back()
|
||||
{
|
||||
this.location.back();
|
||||
}
|
||||
|
||||
this.item.duration = duration;
|
||||
}
|
||||
next()
|
||||
{
|
||||
if (this.item.nextEpisode != null)
|
||||
this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge", replaceUrl: true });
|
||||
}
|
||||
|
||||
updateTime(time: number)
|
||||
{
|
||||
this.hours = Math.round(time / 60 % 60);
|
||||
this.seconds = Math.round(time % 60);
|
||||
this.minutes = Math.round(time / 60);
|
||||
previous()
|
||||
{
|
||||
if (this.item.previousEpisode != null)
|
||||
this.router.navigate(["/watch/" + this.item.previousEpisode], { queryParamsHandling: "merge", replaceUrl: true });
|
||||
}
|
||||
|
||||
this.thumb.style.transform = "translateX(" + (time / this.item.duration * 100) + "%)";
|
||||
this.progress.style.width = (time / this.item.duration * 100) + "%";
|
||||
}
|
||||
getTimeFromSeekbar(progressBar: HTMLElement, pageX: number)
|
||||
{
|
||||
return Math.max(0, Math.min((pageX - progressBar.offsetLeft) / progressBar.clientWidth, 1)) * this.item.duration;
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
if (document.fullscreen)
|
||||
document.exitFullscreen();
|
||||
setDuration(duration: number)
|
||||
{
|
||||
this.maxSeconds = Math.round(duration % 60);
|
||||
this.maxMinutes = Math.round(duration / 60 % 60);
|
||||
this.maxHours = Math.round(duration / 3600);
|
||||
|
||||
document.getElementById("nav").classList.remove("d-none");
|
||||
this.title.setTitle("Kyoo");
|
||||
this.item.duration = duration;
|
||||
}
|
||||
|
||||
$(document).unbind();
|
||||
$(window).unbind();
|
||||
updateTime(time: number)
|
||||
{
|
||||
this.hours = Math.round(time / 60 % 60);
|
||||
this.seconds = Math.round(time % 60);
|
||||
this.minutes = Math.round(time / 60);
|
||||
|
||||
this.thumb.style.transform = "translateX(" + (time / this.item.duration * 100) + "%)";
|
||||
this.progress.style.width = (time / this.item.duration * 100) + "%";
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
if (document.fullscreen)
|
||||
document.exitFullscreen();
|
||||
|
||||
document.getElementById("nav").classList.remove("d-none");
|
||||
this.title.setTitle("Kyoo");
|
||||
|
||||
$(document).unbind();
|
||||
$(window).unbind();
|
||||
}
|
||||
|
||||
videoClicked()
|
||||
@ -381,129 +398,129 @@ export class PlayerComponent implements OnInit
|
||||
}
|
||||
}
|
||||
|
||||
tooglePlayback()
|
||||
{
|
||||
if (this.player.paused)
|
||||
this.player.play();
|
||||
else
|
||||
this.player.pause();
|
||||
}
|
||||
tooglePlayback()
|
||||
{
|
||||
if (this.player.paused)
|
||||
this.player.play();
|
||||
else
|
||||
this.player.pause();
|
||||
}
|
||||
|
||||
toogleMute()
|
||||
{
|
||||
if (this.player.muted)
|
||||
this.player.muted = false;
|
||||
else
|
||||
this.player.muted = true;
|
||||
toogleMute()
|
||||
{
|
||||
if (this.player.muted)
|
||||
this.player.muted = false;
|
||||
else
|
||||
this.player.muted = true;
|
||||
|
||||
this.updateVolumeBtn()
|
||||
}
|
||||
this.updateVolumeBtn()
|
||||
}
|
||||
|
||||
initPlayBtn()
|
||||
{
|
||||
this.playIcon = "pause";
|
||||
this.playTooltip = "Pause";
|
||||
}
|
||||
initPlayBtn()
|
||||
{
|
||||
this.playIcon = "pause";
|
||||
this.playTooltip = "Pause";
|
||||
}
|
||||
|
||||
fullscreen()
|
||||
{
|
||||
if (document.fullscreenElement == null)
|
||||
document.body.requestFullscreen();
|
||||
else
|
||||
document.exitFullscreen();
|
||||
}
|
||||
fullscreen()
|
||||
{
|
||||
if (document.fullscreenElement == null)
|
||||
document.body.requestFullscreen();
|
||||
else
|
||||
document.exitFullscreen();
|
||||
}
|
||||
|
||||
//Value from 0 to 100
|
||||
changeVolume(value: number)
|
||||
{
|
||||
value = Math.max(0, Math.min(value, 100));
|
||||
//Value from 0 to 100
|
||||
changeVolume(value: number)
|
||||
{
|
||||
value = Math.max(0, Math.min(value, 100));
|
||||
|
||||
this.player.muted = false;
|
||||
this.player.volume = value / 100;
|
||||
this.volume = value;
|
||||
this.player.muted = false;
|
||||
this.player.volume = value / 100;
|
||||
this.volume = value;
|
||||
|
||||
this.updateVolumeBtn();
|
||||
}
|
||||
this.updateVolumeBtn();
|
||||
}
|
||||
|
||||
updateVolumeBtn()
|
||||
{
|
||||
if (this.player.muted)
|
||||
{
|
||||
this.volumeIcon = "volume_off"
|
||||
}
|
||||
else
|
||||
{
|
||||
if (this.volume == 0)
|
||||
this.volumeIcon = "volume_off";
|
||||
else if (this.volume < 25)
|
||||
this.volumeIcon = "volume_mute";
|
||||
else if (this.volume < 65)
|
||||
this.volumeIcon = "volume_down";
|
||||
else
|
||||
this.volumeIcon = "volume_up";
|
||||
}
|
||||
}
|
||||
updateVolumeBtn()
|
||||
{
|
||||
if (this.player.muted)
|
||||
{
|
||||
this.volumeIcon = "volume_off"
|
||||
}
|
||||
else
|
||||
{
|
||||
if (this.volume == 0)
|
||||
this.volumeIcon = "volume_off";
|
||||
else if (this.volume < 25)
|
||||
this.volumeIcon = "volume_mute";
|
||||
else if (this.volume < 65)
|
||||
this.volumeIcon = "volume_down";
|
||||
else
|
||||
this.volumeIcon = "volume_up";
|
||||
}
|
||||
}
|
||||
|
||||
selectSubtitle(subtitle: Track, changeUrl: boolean = true)
|
||||
{
|
||||
if (changeUrl)
|
||||
{
|
||||
let subSlug: string;
|
||||
if (subtitle != null)
|
||||
{
|
||||
subSlug = subtitle.language;
|
||||
if (subtitle.isForced)
|
||||
subSlug += "-for";
|
||||
}
|
||||
selectSubtitle(subtitle: Track, changeUrl: boolean = true)
|
||||
{
|
||||
if (changeUrl)
|
||||
{
|
||||
let subSlug: string;
|
||||
if (subtitle != null)
|
||||
{
|
||||
subSlug = subtitle.language;
|
||||
if (subtitle.isForced)
|
||||
subSlug += "-for";
|
||||
}
|
||||
|
||||
this.router.navigate([], { relativeTo: this.route, queryParams: { sub: subSlug }, replaceUrl: true, queryParamsHandling: "merge" });
|
||||
}
|
||||
this.router.navigate([], { relativeTo: this.route, queryParams: { sub: subSlug }, replaceUrl: true, queryParamsHandling: "merge" });
|
||||
}
|
||||
|
||||
this.selectedSubtitle = subtitle;
|
||||
this.selectedSubtitle = subtitle;
|
||||
|
||||
if (subtitle == null)
|
||||
{
|
||||
this.snackBar.open("Subtitle removed.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
|
||||
SubtitleManager.remove(this.player);
|
||||
this.removeHtmlTrack();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.snackBar.open(subtitle.displayName + " subtitle loaded.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
|
||||
this.removeHtmlTrack();
|
||||
if (subtitle == null)
|
||||
{
|
||||
this.snackBar.open("Subtitle removed.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
|
||||
SubtitleManager.remove(this.player);
|
||||
this.removeHtmlTrack();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.snackBar.open(subtitle.displayName + " subtitle loaded.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
|
||||
this.removeHtmlTrack();
|
||||
|
||||
if (subtitle.codec == "ass")
|
||||
SubtitleManager.add(this.player, subtitle.link, true);
|
||||
if (subtitle.codec == "ass")
|
||||
SubtitleManager.add(this.player, subtitle.link, true);
|
||||
|
||||
else if (subtitle.codec == "subrip")
|
||||
{
|
||||
SubtitleManager.remove(this.player);
|
||||
else if (subtitle.codec == "subrip")
|
||||
{
|
||||
SubtitleManager.remove(this.player);
|
||||
|
||||
let track = document.createElement("track");
|
||||
track.kind = "subtitles";
|
||||
track.label = subtitle.displayName;
|
||||
track.srclang = subtitle.language;
|
||||
track.src = subtitle.link.replace(".srt", ".vtt");
|
||||
track.classList.add("subtitle_container");
|
||||
track.default = true;
|
||||
track.onload = () =>
|
||||
{
|
||||
this.player.textTracks[0].mode = "showing";
|
||||
};
|
||||
this.player.appendChild(track);
|
||||
}
|
||||
}
|
||||
}
|
||||
let track = document.createElement("track");
|
||||
track.kind = "subtitles";
|
||||
track.label = subtitle.displayName;
|
||||
track.srclang = subtitle.language;
|
||||
track.src = subtitle.link.replace(".srt", ".vtt");
|
||||
track.classList.add("subtitle_container");
|
||||
track.default = true;
|
||||
track.onload = () =>
|
||||
{
|
||||
this.player.textTracks[0].mode = "showing";
|
||||
};
|
||||
this.player.appendChild(track);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
removeHtmlTrack()
|
||||
{
|
||||
let elements = this.player.getElementsByTagName("track");
|
||||
if (elements.length > 0)
|
||||
elements.item(0).remove();
|
||||
}
|
||||
removeHtmlTrack()
|
||||
{
|
||||
let elements = this.player.getElementsByTagName("track");
|
||||
if (elements.length > 0)
|
||||
elements.item(0).remove();
|
||||
}
|
||||
|
||||
getThumb(url: string)
|
||||
{
|
||||
return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
|
||||
}
|
||||
getThumb(url: string)
|
||||
{
|
||||
return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user