r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix hiding video controls on space keypress

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-02-09 17:48:45 +04:00
parent 983de7c2c3
commit c96bb7c41d
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/helpers/dom/controlsHover.ts
View File

@ -13,7 +13,7 @@ import findUpClassName from "./findUpClassName";
export default class ControlsHover extends EventListenerBase<{ export default class ControlsHover extends EventListenerBase<{
toggleControls: (show: boolean) => void toggleControls: (show: boolean) => void
}> { }> {
protected showControlsTimeout: number; protected hideControlsTimeout: number;
protected controlsLocked: boolean; protected controlsLocked: boolean;
protected canHideControls: () => boolean; protected canHideControls: () => boolean;
@ -23,7 +23,7 @@ export default class ControlsHover extends EventListenerBase<{
constructor() { constructor() {
super(false); super(false);
this.showControlsTimeout = 0; this.hideControlsTimeout = 0;
} }
public setup(options: { public setup(options: {
@ -70,9 +70,17 @@ export default class ControlsHover extends EventListenerBase<{
} }
} }
public hideControls = () => { public hideControls = (setHideTimeout = false) => {
clearTimeout(this.showControlsTimeout); if(setHideTimeout) {
this.showControlsTimeout = 0; if(!this.hideControlsTimeout) {
this.hideControlsTimeout = window.setTimeout(this.hideControls, 3e3);
}
return;
}
clearTimeout(this.hideControlsTimeout);
this.hideControlsTimeout = 0;
const isShown = this.element.classList.contains('show-controls'); const isShown = this.element.classList.contains('show-controls');
if(this.controlsLocked !== false) { if(this.controlsLocked !== false) {
@ -88,9 +96,9 @@ export default class ControlsHover extends EventListenerBase<{
}; };
public showControls = (setHideTimeout = true) => { public showControls = (setHideTimeout = true) => {
if(this.showControlsTimeout) { if(this.hideControlsTimeout) {
clearTimeout(this.showControlsTimeout); clearTimeout(this.hideControlsTimeout);
this.showControlsTimeout = 0; this.hideControlsTimeout = 0;
} else if(!this.element.classList.contains('show-controls') && this.controlsLocked !== false) { } else if(!this.element.classList.contains('show-controls') && this.controlsLocked !== false) {
this.dispatchEvent('toggleControls', true); this.dispatchEvent('toggleControls', true);
this.element.classList.add('show-controls'); this.element.classList.add('show-controls');
@ -100,7 +108,7 @@ export default class ControlsHover extends EventListenerBase<{
return; return;
} }
this.showControlsTimeout = window.setTimeout(this.hideControls, 3e3); this.hideControlsTimeout = window.setTimeout(this.hideControls, 3e3);
}; };
public toggleControls = (show?: boolean) => { public toggleControls = (show?: boolean) => {

4
src/lib/mediaPlayer.ts
View File

@ -424,6 +424,10 @@ export default class VideoPlayer extends ControlsHover {
wrapper.classList.add('played'); wrapper.classList.add('played');
}, {once: true}); }, {once: true});
listenerSetter.add(video)('play', () => {
this.hideControls(true);
});
listenerSetter.add(video)('pause', () => { listenerSetter.add(video)('pause', () => {
this.showControls(false); this.showControls(false);
}); });