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

Reworking the control view/hide

Browse Source
This commit is contained in:
Zoe Roux 2020-10-13 23:03:40 +02:00
parent de715fea54
commit b592e43dc6
2 changed files with 38 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,7 @@
<div id="root">
<div id="root"
(mouseenter)="this.showControls = true;"
(mouseleave)="!this.player.paused ? this.showControls = false : null"
[style.cursor]="this.showControls ? '' : 'none'">
<div class="player data-vjs-player">
<video id="player" #player
poster="backdrop/{{this.item.showSlug}}"
@ -58,7 +61,10 @@
</mat-card-content>
</mat-card>
<div id="hover">
<div id="hover"
(mouseenter)="this.areControlHovered = true"
(mouseleave)="this.areControlHovered = false"
[ngClass]="{'idle': !this.showControls}">
<div class="back">
<a mat-icon-button matTooltipPosition="below" matTooltip="Back" (click)="back()">
<mat-icon>arrow_back</mat-icon>

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

@ -66,7 +66,9 @@ export class BufferToWidthPipe implements PipeTransform
export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
{
item: WatchItem;
selectedSubtitle: Track;
playMethod: method = method.direct;
supportList: SupportList;
playing: boolean = true;
loading: boolean = false;
seeking: boolean = false;
@ -81,21 +83,34 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
@ViewChild("progressBar") private progressBarRef: ElementRef;
private get progressBar(): HTMLElement { return this.progressBarRef.nativeElement; }
videoHider;
controllerHovered: boolean = false;
selectedSubtitle: Track;
controlHider: NodeJS.Timeout = null;
areControlHovered: boolean = false;
private _showControls: boolean = true;
get showControls(): boolean { return this._showControls; }
set showControls(value: boolean)
{
this._showControls = value;
if (this.controlHider)
clearTimeout(this.controlHider);
if (value)
{
this.controlHider = setTimeout(() =>
{
if (!this.player.paused && !this.areControlHovered)
this.showControls = false;
// else restart timer
}, 2500);
}
else
this.controlHider = null;
}
methodType = method;
displayStats: boolean = false;
supportList: SupportList;
private hlsPlayer: Hls = new Hls();
private oidcSecurity: OidcSecurityService;
constructor(private route: ActivatedRoute,
private sanitizer: DomSanitizer,
private snackBar: MatSnackBar,
@ -174,7 +189,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
ngAfterViewInit()
{
setTimeout(() => this.route.data.subscribe(data =>
setTimeout(() => this.route.data.subscribe(() =>
{
let queryMethod: string = this.route.snapshot.queryParams["method"];
this.selectPlayMethod(queryMethod ? method[queryMethod] : getPlaybackMethod(this.player, this.item));
@ -190,22 +205,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
this.supportList = getWhatIsSupported(this.player, this.item);
}));
if (!navigator.userAgent.match(/Mobi/))
{
$("#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);
this.showControls = true;
}
get isFullScreen(): boolean
@ -260,21 +260,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
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.showControls = true;
}
playbackError(): void
@ -355,8 +341,8 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
if ($("#hover").hasClass("idle"))
{
$("#hover").removeClass("idle");
clearTimeout(this.videoHider);
this.videoHider = setTimeout((ev: MouseEvent) =>
clearTimeout(this.controlHider);
this.controlHider = setTimeout((ev: MouseEvent) =>
{
if (!this.player.paused)
{
@ -367,7 +353,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
else
{
$("#hover").addClass("idle");
clearTimeout(this.videoHider);
clearTimeout(this.controlHider);
}
}
}