From 5ed1160eb11093e43b2c6999d763038d5d39a54d Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 21 Aug 2021 01:30:41 +0300 Subject: [PATCH] Zoom: hide video controls --- src/components/appMediaViewer.ts | 17 ++++- src/components/swipeHandler.ts | 2 +- src/lib/mediaPlayer.ts | 104 ++++++++++++++++------------ src/scss/partials/_ckin.scss | 39 +++++------ src/scss/partials/_mediaViewer.scss | 6 ++ 5 files changed, 100 insertions(+), 68 deletions(-) diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index c5921e05..474e0951 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -335,6 +335,10 @@ class AppMediaViewerBase { + if(rootScope.overlaysActive > 1) { + return; + } + if(!(e.ctrlKey || e.metaKey)) { this.ctrlKeyDown = false; @@ -522,8 +530,12 @@ class AppMediaViewerBase { + if(rootScope.overlaysActive > 1) { + return; + } + cancelEvent(e); - + if(this.ctrlKeyDown) { const scrollingUp = e.deltaY < 0; this.changeZoom(!!scrollingUp); @@ -1359,6 +1371,9 @@ class AppMediaViewerBase { - clearTimeout(showControlsTimeout); - showControlsTimeout = 0; - - if(this.video.paused || !player.classList.contains('show-controls')) { - return; - } - - this.dispatchEvent('toggleControls', false); - player.classList.remove('show-controls'); - }; - - let showControlsTimeout = 0; - const showControls = (setHideTimeout = true) => { - if(showControlsTimeout) { - clearTimeout(showControlsTimeout); - showControlsTimeout = 0; - } else if(!player.classList.contains('show-controls')) { - this.dispatchEvent('toggleControls', true); - player.classList.add('show-controls'); - } - - if(!setHideTimeout) { - return; - } - - showControlsTimeout = window.setTimeout(hideControls, 3e3); - }; - - const toggleControls = () => { - if(player.classList.contains('show-controls')) { - hideControls(); - } else { - showControls(); - } - }; - if(isTouchSupported) { this.listenerSetter.add(player)('click', () => { - toggleControls(); + this.toggleControls(); }); /* this.listenerSetter.add(player)('touchstart', () => { @@ -368,20 +335,20 @@ export default class VideoPlayer extends EventListenerBase<{ }); */ } else { this.listenerSetter.add(this.wrapper)('mousemove', () => { - showControls(); + this.showControls(); }); this.listenerSetter.add(this.wrapper)('mouseenter', () => { - showControls(false); + this.showControls(false); }); this.listenerSetter.add(this.wrapper)('mouseleave', (e) => { if(findUpClassName(e.relatedTarget, 'media-viewer-caption')) { - showControls(false); + this.showControls(false); return; } - hideControls(); + this.hideControls(); }); this.listenerSetter.add(document)('keydown', (e: KeyboardEvent) => { @@ -445,7 +412,7 @@ export default class VideoPlayer extends EventListenerBase<{ }, {once: true}); this.listenerSetter.add(video)('pause', () => { - showControls(false); + this.showControls(false); }); } @@ -466,6 +433,57 @@ export default class VideoPlayer extends EventListenerBase<{ } } + public hideControls = () => { + clearTimeout(this.showControlsTimeout); + this.showControlsTimeout = 0; + + const isShown = this.wrapper.classList.contains('show-controls'); + if(this.controlsLocked !== false) { + if(this.video.paused || !isShown || this.controlsLocked) { + return; + } + } else if(!isShown) { + return; + } + + this.dispatchEvent('toggleControls', false); + this.wrapper.classList.remove('show-controls'); + }; + + public showControls = (setHideTimeout = true) => { + if(this.showControlsTimeout) { + clearTimeout(this.showControlsTimeout); + this.showControlsTimeout = 0; + } else if(!this.wrapper.classList.contains('show-controls') && this.controlsLocked !== false) { + this.dispatchEvent('toggleControls', true); + this.wrapper.classList.add('show-controls'); + } + + if(!setHideTimeout || this.controlsLocked) { + return; + } + + this.showControlsTimeout = window.setTimeout(this.hideControls, 3e3); + }; + + public toggleControls = (show?: boolean) => { + const isShown = this.wrapper.classList.contains('show-controls'); + + if(show === undefined) { + if(isShown) this.hideControls(); + else this.showControls(); + } else if(show === isShown) return; + else if(show === false) this.hideControls(); + else this.showControls(); + }; + + public lockControls(visible: boolean) { + this.controlsLocked = visible; + + this.wrapper.classList.toggle('disable-hover', visible === false); + this.toggleControls(visible); + } + protected togglePlay() { this.video[this.video.paused ? 'play' : 'pause'](); } diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index c4928139..fcd8fd64 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -175,39 +175,32 @@ content: $tgico-play; } - &.is-playing, &:not(.played) { - .default__gradient-bottom { - transform: translate3d(0, 50px, 0); - } + .default__gradient-bottom { + transform: translate3d(0, 50px, 0); + } - .default__controls { - transform: translate3d(0, 52px, 0); + .default__controls { + transform: translate3d(0, 52px, 0); - @include respond-to(handhelds) { - transform: translate3d(0, 65px, 0); - } + @include respond-to(handhelds) { + transform: translate3d(0, 65px, 0); } + } - /* html.no-touch &:hover,*/ - /* &.show-controls.ckin__fullscreen, - &.show-controls:not(.ckin__fullscreen):hover, - html.is-touch */&.show-controls { - .default__gradient-bottom, - .default__controls { - transform: translateZ(0); - } + &.show-controls { + .default__gradient-bottom, + .default__controls { + transform: translateZ(0); } + } + &.is-playing { &:not(.show-controls) { cursor: none; } + } - &:before { - opacity: 0; - visibility: hidden; - transform: translate3d(-50%, -50%, 0) scale(1.3); - } - + &.is-playing, &:not(.played) { .default__button--big { opacity: 0; visibility: hidden; diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index 91d1b93d..5d80e6a0 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -637,6 +637,12 @@ $inactive-opacity: .4; opacity: 0 !important; pointer-events: none; } + + & ~ .media-viewer-movers { + .default__button--big { + opacity: 0 !important; + } + } } }