mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-06-23 15:30:34 -04:00
Starting to clean up the player
This commit is contained in:
Zoe Roux
parent
de8fed8694
commit
2b8c527fdf
@ -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");
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,34 @@
|
||||
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 {Track, WatchItem} from "../../models/watch-item";
|
||||
import {Location} from "@angular/common";
|
||||
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 { getPlaybackMethod, getWhatIsSupported, method, SupportList } from "../../../videoSupport/playbackMethodDetector";
|
||||
import { OidcSecurityService } from "angular-auth-oidc-client";
|
||||
import * as Hls from "hls.js"
|
||||
import {getPlaybackMethod, getWhatIsSupported, method, SupportList} from "../../../videoSupport/playbackMethodDetector";
|
||||
import {OidcSecurityService} from "angular-auth-oidc-client";
|
||||
|
||||
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;
|
||||
}
|
||||
loadIndicator.classList.remove("d-none");
|
||||
break;
|
||||
case event instanceof NavigationEnd:
|
||||
case event instanceof NavigationCancel:
|
||||
{
|
||||
loadIndicator.classList.add("d-none");
|
||||
break;
|
||||
}
|
||||
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"
|
||||
}
|
||||
if (this.volume == 0 || this.muted)
|
||||
return "volume_off";
|
||||
else if (this.volume < 25)
|
||||
return "volume_mute";
|
||||
else if (this.volume < 65)
|
||||
return "volume_down";
|
||||
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";
|
||||
}
|
||||
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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user