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

Starting to clean up the player

Browse Source
This commit is contained in:
Zoe Roux 2020-10-11 01:47:57 +02:00
parent de8fed8694
commit 2b8c527fdf
4 changed files with 188 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app.component.ts
View File

@ -18,6 +18,8 @@ export class AppComponent
libraries: Library[];
isLoading: boolean = false;
static isMobile: boolean = false;
constructor(private libraryService: LibraryService,
private router: Router,
private location: Location,
@ -47,7 +49,8 @@ export class AppComponent
}
});
if (!navigator.userAgent.match(/Mobi/))
AppComponent.isMobile = !!navigator.userAgent.match(/Mobi/);
if (!AppComponent.isMobile)
document.body.classList.add("hoverEnabled");
}

75
src/app/pages/player/player.component.html
View File

@ -1,6 +1,14 @@
<div id="root">
<div class="player data-vjs-player">
<video id="player" poster="backdrop/{{this.item.showSlug}}" autoplay muted (click)="videoClicked()">
<video id="player"
poster="backdrop/{{this.item.showSlug}}"
autoplay muted
(click)="this.videoClicked()"
(play)="this.playing = true"
(pause)="this.playing = false"
(ended)="this.next()"
[volume]="this.volume / 100"
[muted]="this.muted">
</video>
</div>
@ -8,25 +16,41 @@
<div class="spinner-border align-self-center" role="status"></div>
</div>
<mat-card class="d-none w-25 m-5" [ngClass]="{'d-block': this.displayStats}">
<mat-card-header style="margin-bottom: 0.5rem;">
<h4 style="align-self: center; margin-bottom: 0;">Stats</h4>
<mat-card class="d-none w-25 m-5 stats" [ngClass]="{'d-block': this.displayStats}">
<mat-card-header>
<h4>Stats</h4>
<div style="flex: 1 1 auto"></div>
<button mat-icon-button aria-label="Close" (click)="this.displayStats = false" style="outline: none;">
<button mat-icon-button aria-label="Close" (click)="this.displayStats = false">
<mat-icon>close</mat-icon>
</button>
</mat-card-header>
<mat-card-content>
Play method: <span style="float: right">{{this.playMethod}}</span>
Play method: <span>{{this.playMethod}}</span>
<br />
<br />
Video Container: <span style="float: right">{{this.item.container}} <i class="material-icons" style="vertical-align: middle; font-size: 14px">{{getSupportedFeature("container")}}</i></span>
Video Container:
<span>
{{this.item.container}}
<i class="material-icons">{{getSupportedFeature("container")}}</i>
</span>
<br />
Video Codec: <span style="float: right">{{this.item.video.codec}} <i class="material-icons" style="vertical-align: middle; font-size: 14px">{{getSupportedFeature("video")}}</i></span>
Video Codec:
<span>
{{this.item.video.codec}}
<i class="material-icons">{{getSupportedFeature("video")}}</i>
</span>
<br />
Audio Codec: <span style="float: right">{{this.item.audios[0].codec}} <i class="material-icons" style="vertical-align: middle; font-size: 14px">{{getSupportedFeature("audio")}}</i></span>
Audio Codec:
<span>
{{this.item.audios[0].codec}}
<i class="material-icons">{{getSupportedFeature("audio")}}</i>
</span>
<br />
Subtitle Codec: <span style="float: right">{{this.selectedSubtitle ? this.selectedSubtitle.codec : "none"}} <i class="material-icons" style="vertical-align: middle; font-size: 14px">{{getSupportedFeature("subtitle")}}</i></span>
Subtitle Codec:
<span>
{{this.selectedSubtitle ? this.selectedSubtitle.codec : "none"}}
<i class="material-icons">{{getSupportedFeature("subtitle")}}</i>
</span>
<br />
</mat-card-content>
</mat-card>
@ -60,8 +84,10 @@
<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 mat-icon-button matTooltipPosition="above" id="play"
[matTooltip]="this.playing ? 'Pause' : 'Play'"
(click)="togglePlayback()">
<mat-icon>{{this.playing ? 'pause' : 'play_arrow'}}</mat-icon>
</button>
<a mat-icon-button id="nextBtn" *ngIf="this.item.nextEpisode" (click)="next()">
<mat-icon>skip_next</mat-icon>
@ -76,13 +102,15 @@
</div>
</div>
</a>
<div id="volume">
<button mat-icon-button matTooltipPosition="above" matTooltip="Volume" (click)="toogleMute()">
<mat-icon>{{this.volumeIcon}}</mat-icon>
<div id="volume" [ngClass]="{'d-none': this.isMobile}">
<button mat-icon-button matTooltipPosition="above" matTooltip="Volume"
(click)="this.muted = !this.muted">
<mat-icon>{{this.getVolumeBtn()}}</mat-icon>
</button>
<mat-slider [value]="volume" (input)="changeVolume($event.value)"></mat-slider>
<mat-slider [value]="this.volume" (input)="this.volume = $event.value"></mat-slider>
</div>
<!-- TODO REWORK THIS DUMPSTER FIRE OF A TIMER. -->
<p *ngIf="this.maxHours; else elseBlock">{{this.hours | number: '2.0-0'}}:{{this.minutes | number: '2.0-0'}}:{{this.seconds | number: '2.0-0'}} / {{this.maxHours | number: '2.0-0'}}:{{this.maxMinutes | number: '2.0-0'}}:{{this.maxSeconds | number: '2.0-0'}}</p>
<ng-template #elseBlock><p>{{this.minutes | number: '2.0-0'}}:{{this.seconds | number: '2.0-0'}} / {{this.maxMinutes | number: '2.0-0'}}:{{this.maxSeconds | number: '2.0-0'}}</p></ng-template>
</div>
@ -90,7 +118,8 @@
<button id="volume" *ngIf="this.item.audios.length > 1" mat-icon-button matTooltipPosition="above" matTooltip="Select audio track">
<mat-icon>music_note</mat-icon>
</button>
<button *ngIf="this.item.subtitles.length > 0" mat-icon-button [matMenuTriggerFor]="subtitles" matTooltipPosition="above" matTooltip="Select subtitle track">
<button *ngIf="this.item.subtitles.length > 0" mat-icon-button [matMenuTriggerFor]="subtitles"
matTooltipPosition="above" matTooltip="Select subtitle track">
<mat-icon>closed_caption</mat-icon>
</button>
<button mat-icon-button matTooltipPosition="above" matTooltip="Cast">
@ -99,8 +128,11 @@
<button mat-icon-button matTooltipPosition="above" [matMenuTriggerFor]="settings" matTooltip="Settings">
<mat-icon>settings</mat-icon>
</button>
<button mat-icon-button matTooltipPosition="above" [matTooltip]="fullscreenTooltip" id="fullscreen" (click)="fullscreen()">
<mat-icon>{{fullscreenIcon}}</mat-icon>
<button mat-icon-button matTooltipPosition="above"
[ngClass]="{'d-none': this.isMobile}"
[matTooltip]="this.isFullScreen ? 'Exit fullscreen' : 'Fullscreen'"
(click)="fullscreen()">
<mat-icon>{{this.isFullScreen ? "fullscreen_exit" : "fullscreen"}}</mat-icon>
</button>
</div>
</div>
@ -113,7 +145,10 @@
</button>
<div *ngFor="let subtitle of this.item.subtitles">
<button [ngClass]="{'selected': this.selectedSubtitle == subtitle}" mat-menu-item *ngIf="subtitle.codec == 'ass' || subtitle.codec == 'subrip'; else elseBlock" (click)="selectSubtitle(subtitle)">
<button [ngClass]="{'selected': this.selectedSubtitle == subtitle}"
mat-menu-item *ngIf="subtitle.codec === 'ass' || subtitle.codec === 'subrip';
else elseBlock"
(click)="selectSubtitle(subtitle)">
<span>{{subtitle.displayName}}</span>
</button>

39
src/app/pages/player/player.component.scss
View File

@ -51,8 +51,7 @@
> h5
{
margin: 0;
margin-left: .5rem;
margin: 0 0 0 .5rem;
align-self: center;
}
}
@ -104,8 +103,7 @@
> p
{
margin: 0;
margin-left: 1rem;
margin: 0 0 0 1rem;
align-self: center;
}
}
@ -288,8 +286,8 @@
> mat-slider
{
width: 0px;
min-width: 0px;
width: 0;
min-width: 0;
padding: 0;
height: 40px;
overflow: hidden;
@ -331,7 +329,7 @@
.volume
{
min-width: 0px !important;
min-width: 0 !important;
}
.info-panel
@ -339,3 +337,30 @@
min-width: 250px !important;
max-width: 300px !important;
}
.stats
{
> mat-card-header
{
margin-bottom: 0.5rem;
> h4
{
align-self: center;
margin-bottom: 0;
}
> button
{
outline: none;
}
}
> mat-card-content > span
{
float: right;
> i
{
vertical-align: middle;
font-size: 14px;
}
}
}

205
src/app/pages/player/player.component.ts
View File

@ -1,26 +1,34 @@
import {Component, Injector, OnInit, ViewEncapsulation} from '@angular/core';
import { Component, Injector, OnInit, ViewEncapsulation } from "@angular/core";
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 { AppComponent } from "../../app.component";
import { Track, WatchItem } from "../../models/watch-item";
import { Location } from "@angular/common";
import * as Hls from "hls.js"
import { getPlaybackMethod, getWhatIsSupported, method, SupportList } from "../../../videoSupport/playbackMethodDetector";
import { OidcSecurityService } from "angular-auth-oidc-client";
import * as Hls from "hls.js"
declare var SubtitleManager: any;
@Component({
selector: 'app-player',
templateUrl: './player.component.html',
styleUrls: ['./player.component.scss'],
selector: "app-player",
templateUrl: "./player.component.html",
styleUrls: ["./player.component.scss"],
encapsulation: ViewEncapsulation.None
})
export class PlayerComponent implements OnInit
{
item: WatchItem;
playing: boolean = true;
muted: boolean = false;
private _volume: number = 100;
get volume(): number { return this._volume; }
set volume(value: number) { this._volume = Math.max(0, Math.min(value, 100)); }
volume: number = 100;
seeking: boolean = false;
videoHider;
controllerHovered: boolean = false;
@ -34,13 +42,6 @@ export class PlayerComponent implements OnInit
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.
playTooltip: string = "Pause"; //Text used in the play tooltip
fullscreenTooltip: string = "Fullscreen"; //Text used in the fullscreen tooltip
playMethod: method = method.direct;
methodType = method;
@ -56,7 +57,14 @@ export class PlayerComponent implements OnInit
private oidcSecurity: OidcSecurityService;
constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer, private snackBar: MatSnackBar, private title: Title, private router: Router, private location: Location, private injector: Injector) { }
constructor(private route: ActivatedRoute,
private sanitizer: DomSanitizer,
private snackBar: MatSnackBar,
private title: Title,
private router: Router,
private location: Location,
private injector: Injector)
{ }
ngOnInit()
{
@ -64,27 +72,21 @@ export class PlayerComponent implements OnInit
this.route.data.subscribe((data) =>
{
this.item = data.item;
this.item.duration = 20 * 60;
if (this.player)
{
this.player.load();
this.initPlayBtn();
}
this.setDuration(this.item.duration);
if (this.item.isMovie)
this.title.setTitle(this.item.showTitle + " - Kyoo");
this.title.setTitle(`${this.item.showTitle} - Kyoo`);
else
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/) && document.fullscreenElement == null)
if (AppComponent.isMobile && !this.isFullScreen)
{
this.fullscreen();
screen.orientation.lock("landscape");
$("#fullscreen").addClass("d-none");
$("#volume").addClass("d-none");
}
setTimeout(() =>
{
@ -94,24 +96,22 @@ export class PlayerComponent implements OnInit
});
}
get isFullScreen(): boolean
{
return document.fullscreenElement != null;
}
get isMobile(): boolean
{
return AppComponent.isMobile;
}
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;
this.player.onplay = () =>
{
this.initPlayBtn();
};
this.player.onpause = () =>
{
this.playIcon = "play_arrow";
this.playTooltip = "Play";
};
this.player.ontimeupdate = () =>
{
@ -139,16 +139,11 @@ export class PlayerComponent implements OnInit
loadIndicator.classList.add("d-none");
};
this.player.onended = () =>
{
this.next();
};
this.player.onerror = () =>
{
if (this.playMethod == method.transcode)
{
this.snackBar.open("This episode can't be played.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 10000 });
this.snackBar.open("This episode can't be played.", null, { horizontalPosition: "left", panelClass: ["snackError"], duration: 10000 });
}
else
{
@ -277,20 +272,6 @@ export class PlayerComponent implements OnInit
if (document.fullscreenElement == null && this.router.url.startsWith("/watch"))
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) =>
@ -298,15 +279,15 @@ export class PlayerComponent implements OnInit
switch (e.keyCode)
{
case 32: //space
this.tooglePlayback();
this.togglePlayback();
break;
case 38: //Key up
this.changeVolume(this.volume + 5);
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.volume += 5;
this.snackBar.open(this.volume + "%", null, { verticalPosition: "top", horizontalPosition: "right", duration: 300, panelClass: "volume" });
break;
@ -326,7 +307,7 @@ export class PlayerComponent implements OnInit
break;
case 77: //M key
this.toogleMute();
this.muted = !this.muted;
if (this.player.muted)
this.snackBar.open("Sound muted.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
else
@ -351,16 +332,12 @@ export class PlayerComponent implements OnInit
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;
}
@ -395,7 +372,12 @@ export class PlayerComponent implements OnInit
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" });
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);
}
@ -405,7 +387,7 @@ export class PlayerComponent implements OnInit
if (this.oidcSecurity === undefined)
this.oidcSecurity = this.injector.get(OidcSecurityService);
this.hlsPlayer.config.xhrSetup = (xhr, url) =>
this.hlsPlayer.config.xhrSetup = xhr =>
{
const token = this.oidcSecurity.getToken();
if (token)
@ -413,9 +395,7 @@ export class PlayerComponent implements OnInit
};
if (this.playMethod == method.direct)
{
this.player.src = "/video/" + this.item.slug;
}
this.player.src = `/video/${this.item.slug}`;
else if (this.playMethod == method.transmux)
{
this.hlsPlayer.loadSource("/video/transmux/" + this.item.slug + "/");
@ -438,19 +418,25 @@ export class PlayerComponent implements OnInit
back()
{
this.location.back();
this.router.navigate(["/show", this.item.showSlug]);
}
next()
{
if (this.item.nextEpisode != null)
this.router.navigate(["/watch/" + this.item.nextEpisode.slug], { queryParamsHandling: "merge", replaceUrl: true });
if (this.item.nextEpisode == null)
return;
this.router.navigate(["/watch", this.item.nextEpisode.slug], {
queryParamsHandling: "merge"
});
}
previous()
{
if (this.item.previousEpisode != null)
this.router.navigate(["/watch/" + this.item.previousEpisode], { queryParamsHandling: "merge", replaceUrl: true });
if (this.item.previousEpisode == null)
return;
this.router.navigate(["/watch", this.item.previousEpisode], {
queryParamsHandling: "merge"
});
}
getTimeFromSeekbar(progressBar: HTMLElement, pageX: number)
@ -492,7 +478,7 @@ export class PlayerComponent implements OnInit
videoClicked()
{
if (!navigator.userAgent.match(/Mobi/))
this.tooglePlayback();
this.togglePlayback();
else
{
if ($("#hover").hasClass("idle"))
@ -515,7 +501,7 @@ export class PlayerComponent implements OnInit
}
}
tooglePlayback()
togglePlayback()
{
if (this.player.paused)
this.player.play();
@ -523,22 +509,6 @@ export class PlayerComponent implements OnInit
this.player.pause();
}
toogleMute()
{
if (this.player.muted)
this.player.muted = false;
else
this.player.muted = true;
this.updateVolumeBtn()
}
initPlayBtn()
{
this.playIcon = "pause";
this.playTooltip = "Pause";
}
fullscreen()
{
if (document.fullscreenElement == null)
@ -547,35 +517,16 @@ export class PlayerComponent implements OnInit
document.exitFullscreen();
}
//Value from 0 to 100
changeVolume(value: number)
getVolumeBtn(): string
{
value = Math.max(0, Math.min(value, 100));
this.player.muted = false;
this.player.volume = value / 100;
this.volume = value;
this.updateVolumeBtn();
}
updateVolumeBtn()
{
if (this.player.muted)
{
this.volumeIcon = "volume_off"
}
else
{
if (this.volume == 0)
this.volumeIcon = "volume_off";
if (this.volume == 0 || this.muted)
return "volume_off";
else if (this.volume < 25)
this.volumeIcon = "volume_mute";
return "volume_mute";
else if (this.volume < 65)
this.volumeIcon = "volume_down";
return "volume_down";
else
this.volumeIcon = "volume_up";
}
return "volume_up";
}
selectSubtitle(subtitle: Track, changeUrl: boolean = true)
@ -590,25 +541,39 @@ export class PlayerComponent implements OnInit
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;
if (subtitle == null)
{
this.snackBar.open("Subtitle removed.", null, { verticalPosition: "top", horizontalPosition: "right", duration: 750, panelClass: "info-panel" });
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.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/${subtitle.slug}`, true);
else if (subtitle.codec == "subrip")
{
SubtitleManager.remove(this.player);