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

Showing the controls when a menu is open

Browse Source
This commit is contained in:
Zoe Roux 2020-10-22 22:50:45 +02:00
parent 0c857c9db1
commit b8748bd7f5
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<div id="root" <div id="root"
(mouseenter)="!isMobile ? this.showControls = true : null" (mouseenter)="!isMobile ? this.showControls = true : null"
(mouseleave)="!this.player.paused && !isMobile ? this.showControls = false : null" (mouseleave)="!this.player.paused && !isMobile ? this.showControls = this.isMenuOpen : null"
[style.cursor]="this.showControls ? '' : 'none'"> [style.cursor]="this.showControls ? '' : 'none'">
<div class="player data-vjs-player"> <div class="player data-vjs-player">
<video id="player" #player <video id="player" #player
@ -134,13 +134,16 @@
<mat-icon>music_note</mat-icon> <mat-icon>music_note</mat-icon>
</button> </button>
<button *ngIf="this.item.subtitles.length > 0" mat-icon-button [matMenuTriggerFor]="subtitles" <button *ngIf="this.item.subtitles.length > 0" mat-icon-button [matMenuTriggerFor]="subtitles"
(menuOpened)="this.isMenuOpen = true"
matTooltipPosition="above" matTooltip="Select subtitle track"> matTooltipPosition="above" matTooltip="Select subtitle track">
<mat-icon>closed_caption</mat-icon> <mat-icon>closed_caption</mat-icon>
</button> </button>
<button mat-icon-button matTooltipPosition="above" matTooltip="Cast"> <button mat-icon-button matTooltipPosition="above" matTooltip="Cast">
<mat-icon>cast</mat-icon> <mat-icon>cast</mat-icon>
</button> </button>
<button mat-icon-button matTooltipPosition="above" [matMenuTriggerFor]="settings" matTooltip="Settings"> <button mat-icon-button matTooltipPosition="above" matTooltip="Settings"
(menuOpened)="this.isMenuOpen = true"
[matMenuTriggerFor]="settings">
<mat-icon>settings</mat-icon> <mat-icon>settings</mat-icon>
</button> </button>
<button mat-icon-button matTooltipPosition="above" <button mat-icon-button matTooltipPosition="above"
@ -153,7 +156,7 @@
</div> </div>
</div> </div>
<mat-menu #subtitles="matMenu"> <mat-menu #subtitles="matMenu" (closed)="this.isMenuOpen = false">
<ng-template matMenuContent> <ng-template matMenuContent>
<button [ngClass]="{'selected': this.selectedSubtitle == null}" mat-menu-item (click)="selectSubtitle(null)"> <button [ngClass]="{'selected': this.selectedSubtitle == null}" mat-menu-item (click)="selectSubtitle(null)">
<span>None</span> <span>None</span>
@ -176,7 +179,7 @@
</ng-template> </ng-template>
</mat-menu> </mat-menu>
<mat-menu #settings="matMenu"> <mat-menu #settings="matMenu" (closed)="this.isMenuOpen = false">
<ng-template matMenuContent> <ng-template matMenuContent>
<button mat-menu-item (click)="this.displayStats = !this.displayStats"> <button mat-menu-item (click)="this.displayStats = !this.displayStats">
<span>Stats</span> <span>Stats</span>

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

@ -85,6 +85,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
controlHider: NodeJS.Timeout = null; controlHider: NodeJS.Timeout = null;
areControlHovered: boolean = false; areControlHovered: boolean = false;
isMenuOpen: boolean = false;
private _showControls: boolean = true; private _showControls: boolean = true;
get showControls(): boolean { return this._showControls; } get showControls(): boolean { return this._showControls; }
set showControls(value: boolean) set showControls(value: boolean)
@ -96,7 +97,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
{ {
this.controlHider = setTimeout(() => this.controlHider = setTimeout(() =>
{ {
this.showControls = this.player.paused || this.areControlHovered; this.showControls = this.player.paused || this.areControlHovered || this.isMenuOpen;
}, 2500); }, 2500);
} }
else else