Hide thumb immediately when user is not touching the screen(mobile) (#1122)

* fix issue with not hiding thumb when not touching

* hide playcontrol when loading

src/shared/components/VideoPlayer/CustomTimeline.style.ts

@@ -34,35 +34,40 @@ export const ProgressControl = styled.div<ProgressControlProps>`
     cursor: pointer;
     padding: ${({ isFullScreen }) => (isFullScreen ? `1.5em 1.5em` : `0`)};
     ${({ isScrubbing, isFullScreen }) => isScrubbing && scrubbingStyles(isFullScreen)};
-  }
 
-  :hover ${() => SeekBar} {
-    height: 0.5em;
-  }
-  :hover ${() => PlayProgressThumb} {
-    opacity: 1;
-  }
-  :hover ${() => MouseDisplayWrapper} {
-    opacity: 1;
-  }
-  :hover ${() => MouseDisplayTooltip} {
-    transform: translateY(-0.5em);
-    opacity: 1;
-  }
-  :hover ~ ${CustomControls} {
-    opacity: 0;
-    transform: translateY(0.5em);
+    :hover ${() => SeekBar} {
+      height: 0.5em;
+    }
+    :hover ${() => PlayProgressThumb} {
+      opacity: 1;
+    }
+    :hover ${() => MouseDisplayWrapper} {
+      opacity: 1;
+    }
+    :hover ${() => MouseDisplayTooltip} {
+      transform: translateY(-0.5em);
+      opacity: 1;
+    }
+    :hover ~ ${CustomControls} {
+      opacity: 0;
+      transform: translateY(0.5em);
+    }
   }
 
-  ${() => SeekBar} {
-    ${({ isScrubbing }) => isScrubbing && `height: 0.5em;`}
+  :active {
+    ${() => PlayProgressThumb} {
+      ${({ isScrubbing }) => isScrubbing && `opacity: 1;`}
+    }
   }
 
   ${() => MouseDisplayWrapper}, ${() => PlayProgressThumb} {
     ${({ isScrubbing }) => isScrubbing && `opacity: 1;`}
   }
   ${() => MouseDisplayTooltip} {
-    ${({ isScrubbing }) => isScrubbing && `transform: translateY(-0.5em);`}
+    ${({ isScrubbing }) => isScrubbing && `transform: translateY(-0.5em); opacity: 1;`}
+  }
+  ${() => SeekBar} {
+    ${({ isScrubbing }) => isScrubbing && `height: 0.5em;`}
   }
   ~ ${CustomControls} {
     ${({ isScrubbing }) => isScrubbing && `opacity: 0; transform: translateY(0.5em);`}

src/shared/components/VideoPlayer/VideoPlayer.style.tsx

@@ -64,8 +64,11 @@ export const CustomControls = styled.div<CustomControlsProps>`
     height: unset;
   }
 `
+type PlayControlProps = {
+  isLoading?: boolean
+}
 
-export const PlayControl = styled.div`
+export const PlayControl = styled.div<PlayControlProps>`
   align-self: center;
   width: 100%;
   position: absolute;
@@ -73,7 +76,11 @@ export const PlayControl = styled.div`
   display: flex;
   justify-content: center;
   left: 0;
+
+  /* hide PlayControl when loading on mobile */
+  ${({ isLoading }) => isLoading && `opacity: 0;`}
   @media (hover: hover) {
+    opacity: 1;
     margin-right: 0.5em;
     align-self: unset;
     width: unset;

src/shared/components/VideoPlayer/VideoPlayer.tsx

@@ -445,7 +445,7 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
             <ControlsOverlay isFullScreen={isFullScreen}>
               <CustomTimeline player={player} isFullScreen={isFullScreen} playerState={playerState} />
               <CustomControls isFullScreen={isFullScreen} isEnded={playerState === 'ended'}>
-                <PlayControl>
+                <PlayControl isLoading={playerState === 'loading'}>
                   <PlayButton
                     isEnded={playerState === 'ended'}
                     onClick={handlePlayPause}