Zoom: hide video controls

src/components/appMediaViewer.ts

@@ -335,6 +335,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     const zoomValue = enable ? ZOOM_INITIAL_VALUE + ZOOM_STEP : 1;
     this.setZoomValue(zoomValue);
 
+    if(this.videoPlayer) {
+      this.videoPlayer.lockControls(enable ? false : undefined);
+    }
+
     if(enable) {
       if(!this.zoomSwipeHandler) {
         let lastDiffX: number, lastDiffY: number;
@@ -512,6 +516,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
   };
 
   private onKeyUp = (e: KeyboardEvent) => {
+    if(rootScope.overlaysActive > 1) {
+      return;
+    }
+
     if(!(e.ctrlKey || e.metaKey)) {
       this.ctrlKeyDown = false;
 
@@ -522,6 +530,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
   };
 
   private onWheel = (e: WheelEvent) => {
+    if(rootScope.overlaysActive > 1) {
+      return;
+    }
+
     cancelEvent(e);
 
     if(this.ctrlKeyDown) {
@@ -1359,6 +1371,9 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
                 this.wholeDiv.classList.toggle('has-video-controls', show);
               });
               this.videoPlayer = player;
+              if(this.isZooming()) {
+                this.videoPlayer.lockControls(false);
+              }
               /* div.append(video);
               mover.append(player.wrapper); */
             });

src/components/swipeHandler.ts

@@ -117,7 +117,7 @@ export default class SwipeHandler {
       this.hadMove = true;
 
       if(!isTouchSupported) {
-        this.element.style.cursor = this.cursor;
+        this.element.style.setProperty('cursor', this.cursor, 'important');
       }
 
       if(this.onFirstSwipe) {

src/lib/mediaPlayer.ts

@@ -179,6 +179,10 @@ export default class VideoPlayer extends EventListenerBase<{
 
   private listenerSetter: ListenerSetter;
 
+  private showControlsTimeout = 0;
+
+  private controlsLocked: boolean;
+
   /* private videoParent: HTMLElement;
   private videoWhichChild: number; */
 
@@ -315,46 +319,9 @@ export default class VideoPlayer extends EventListenerBase<{
         }
       });
 
-      const hideControls = () => {
-        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']();
   }

src/scss/partials/_ckin.scss

@@ -175,7 +175,6 @@
     content: $tgico-play;
   }
 
-  &.is-playing, &:not(.played) {
   .default__gradient-bottom {
     transform: translate3d(0, 50px, 0);
   }
@@ -188,26 +187,20 @@
     }
   }
 
-    /* html.no-touch &:hover,*/
-    /* &.show-controls.ckin__fullscreen, 
-    &.show-controls:not(.ckin__fullscreen):hover,
-    html.is-touch  */&.show-controls {
+  &.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;

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;
+      }
+    }
   }
 }