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

Finishing the seekbar

Browse Source
This commit is contained in:
Zoe Roux 2020-10-12 23:31:37 +02:00
parent 1bd0855516
commit de715fea54
2 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,9 +78,7 @@
[ngClass]="{'seeking': this.seeking}" [ngClass]="{'seeking': this.seeking}"
(click)="player.currentTime = this.getTimeFromSeekbar($event.pageX);" (click)="player.currentTime = this.getTimeFromSeekbar($event.pageX);"
(mousedown)="this.startSeeking($event)" (mousedown)="this.startSeeking($event)"
(touchstart)="this.startSeeking($event)" (touchstart)="this.startSeeking($event)">
(mouseup)="this.endSeeking($event)"
(touchend)="this.endSeeking($event)">
<div class="seek-bar"> <div class="seek-bar">
<div id="buffered" [style.width]="player.buffered | bufferToWidth: player.duration"> <div id="buffered" [style.width]="player.buffered | bufferToWidth: player.duration">
</div> </div>

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

@ -66,6 +66,7 @@ export class BufferToWidthPipe implements PipeTransform
export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
{ {
item: WatchItem; item: WatchItem;
playMethod: method = method.direct;
playing: boolean = true; playing: boolean = true;
loading: boolean = false; loading: boolean = false;
seeking: boolean = false; seeking: boolean = false;
@ -76,15 +77,15 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
set volume(value: number) { this._volume = Math.max(0, Math.min(value, 100)); } set volume(value: number) { this._volume = Math.max(0, Math.min(value, 100)); }
@ViewChild("player") private playerRef: ElementRef; @ViewChild("player") private playerRef: ElementRef;
private get player() { return this.playerRef.nativeElement; } private get player(): HTMLVideoElement { return this.playerRef.nativeElement; }
@ViewChild("progressBar") private progressBar: HTMLElement; @ViewChild("progressBar") private progressBarRef: ElementRef;
private get progressBar(): HTMLElement { return this.progressBarRef.nativeElement; }
videoHider; videoHider;
controllerHovered: boolean = false; controllerHovered: boolean = false;
selectedSubtitle: Track; selectedSubtitle: Track;
playMethod: method = method.direct;
methodType = method; methodType = method;
displayStats: boolean = false; displayStats: boolean = false;
@ -119,34 +120,6 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
}); });
} }
$(document).on("touchmove", (event) =>
{
if (this.seeking)
this.player.currentTime = this.getTimeFromSeekbar(event.changedTouches[0].pageX);
});
$(document).on("mousemove", (event) =>
{
if (this.seeking)
this.player.currentTime = this.getTimeFromSeekbar(event.pageX);
else
{
document.getElementById("hover").classList.remove("idle");
document.documentElement.style.cursor = "";
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.route.data.subscribe(data => this.route.data.subscribe(data =>
{ {
this.item = data.item; this.item = data.item;
@ -201,7 +174,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
ngAfterViewInit() ngAfterViewInit()
{ {
this.route.data.subscribe(data => setTimeout(() => this.route.data.subscribe(data =>
{ {
let queryMethod: string = this.route.snapshot.queryParams["method"]; let queryMethod: string = this.route.snapshot.queryParams["method"];
this.selectPlayMethod(queryMethod ? method[queryMethod] : getPlaybackMethod(this.player, this.item)); this.selectPlayMethod(queryMethod ? method[queryMethod] : getPlaybackMethod(this.player, this.item));
@ -216,7 +189,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
} }
this.supportList = getWhatIsSupported(this.player, this.item); this.supportList = getWhatIsSupported(this.player, this.item);
}); }));
if (!navigator.userAgent.match(/Mobi/)) if (!navigator.userAgent.match(/Mobi/))
{ {
@ -261,6 +234,8 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
this.player.currentTime = this.getTimeFromSeekbar(pageX); this.player.currentTime = this.getTimeFromSeekbar(pageX);
} }
@HostListener("document:mouseup", ["$event"])
@HostListener("document:touchend", ["$event"])
endSeeking(event: MouseEvent | TouchEvent): void endSeeking(event: MouseEvent | TouchEvent): void
{ {
if (!this.seeking) if (!this.seeking)
@ -272,6 +247,36 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
this.player.play(); this.player.play();
} }
@HostListener("document:touchmove", ["$event"])
touchSeek(event)
{
if (this.seeking)
this.player.currentTime = this.getTimeFromSeekbar(event.changedTouches[0].pageX);
}
@HostListener("document:mousemove", ["$event"])
mouseMove(event)
{
if (this.seeking)
this.player.currentTime = this.getTimeFromSeekbar(event.pageX);
else
{
document.getElementById("hover").classList.remove("idle");
document.documentElement.style.cursor = "";
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);
}
}
playbackError(): void playbackError(): void
{ {
if (this.playMethod == method.transcode) if (this.playMethod == method.transcode)