hide play button if autoplay next is on

ui/component/claimPreview/view.jsx

@@ -35,6 +35,7 @@ const AbandonedChannelPreview = lazyImport(() =>
   import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
 );
 
+// preview images used on the landing page and on the channel page
 type Props = {
   uri: string,
   claim: ?Claim,
@@ -379,13 +380,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                     <div className="claim-preview__hover-actions">
                       {isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
                     </div>
+                    {/* @if TARGET='app' */}
                     <div className="claim-preview__hover-actions">
-                      {/* @if TARGET='app' */}
                       {claim && !isCollection && (
                         <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton hideDownloadStatus />
                       )}
-                      {/* @endif */}
                     </div>
+                    {/* @endif */}
                     {!isLivestream && (
                       <div className="claim-preview__file-property-overlay">
                         <PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />

ui/component/claimPreviewTile/view.jsx

@@ -53,6 +53,7 @@ type Props = {
   isLivestream: boolean,
 };
 
+// preview image cards used in related video functionality
 function ClaimPreviewTile(props: Props) {
   const {
     history,
@@ -213,18 +214,19 @@ function ClaimPreviewTile(props: Props) {
                   <FileWatchLaterLink focusable={false} uri={uri} />
                 )}
               </div>
+              {/* @if TARGET='app' */}
               <div className="claim-preview__hover-actions">
-                {/* @if TARGET='app' */}
                 {isStream && (
                   <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />
                 )}
-                {/* @endif */}
               </div>
+              {/* @endif */}
 
               <div className="claim-preview__file-property-overlay">
                 <PreviewOverlayProperties uri={uri} properties={liveProperty || properties} />
               </div>
             </React.Fragment>
+
           )}
           {isCollection && (
             <React.Fragment>

ui/component/fileWatchLaterLink/view.jsx

@@ -37,7 +37,10 @@ function FileWatchLaterLink(props: Props) {
     });
   }
 
+  // text that will show if you keep cursor over button
   const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later');
+
+  // label that is shown after hover
   const label = !hasClaimInWatchLater ? __('Add') : __('Added');
 
   return (
@@ -52,7 +55,6 @@ function FileWatchLaterLink(props: Props) {
         (isHovering ? ICONS.COMPLETED : ICONS.TIME)
       }
       onClick={(e) => handleWatchLater(e)}
-      aria-hidden={!focusable}
       tabIndex={focusable ? 0 : -1}
     />
   );

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -59,6 +59,7 @@ type Props = {
   userId: ?number,
   // allowPreRoll: ?boolean,
   shareTelemetry: boolean,
+  showAutoplayCountdown: boolean
 };
 
 // type VideoJSOptions = {
@@ -84,11 +85,12 @@ const VIDEO_JS_OPTIONS = {
   controls: true,
   html5: {
     vhs: {
-      overrideNative: !videojs.browser.IS_ANY_SAFARI,
+      overrideNative: !videojs.browser.IS_ANY_SAFARI, // don't override on safari
     },
   },
 };
 
+// keys to bind to for keyboard shortcuts
 const SPACE_BAR_KEYCODE = 32;
 const SMALL_F_KEYCODE = 70;
 const SMALL_M_KEYCODE = 77;
@@ -197,6 +199,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     userId,
     // allowPreRoll,
     shareTelemetry,
+    showAutoplayCountdown,
   } = props;
 
   const [reload, setReload] = useState('initial');
@@ -493,6 +496,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     wrapper.setAttribute('data-vjs-player', 'true');
     const el = document.createElement(isAudio ? 'audio' : 'video');
     el.className = 'video-js vjs-big-play-centered ';
+
+    // show large play button when paused on ios
+    if (IS_IOS) {
+      el.classList.add('vjs-show-big-play-button-on-pause');
+    }
+
     wrapper.appendChild(el);
 
     container.appendChild(wrapper);
@@ -553,6 +562,29 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       player.on('error', onError);
       player.on('ended', onEnded);
 
+      // on ios, show a play button when paused
+      if (IS_IOS) {
+        const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
+
+        player.on('pause', function() {
+          const videoDiv = player.children_[0];
+          const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
+          const leftWidth = ((videoDiv.offsetWidth - playBT.offsetWidth) / 2) + 'px';
+          const availableHeight = videoDiv.offsetHeight - controlBar.offsetHeight;
+          const topHeight = (((availableHeight - playBT.offsetHeight) / 2) + 3) + 'px';
+
+          playBT.style.top = topHeight;
+          playBT.style.left = leftWidth;
+          playBT.style.margin = 0;
+        });
+
+        player.on('ended', function() {
+          if (showAutoplayCountdown) {
+            playBT.style.display = 'none';
+          }
+        });
+      }
+
       // Replace volume bar with custom LBRY volume bar
       LbryVolumeBarClass.replaceExisting(player);
 

ui/component/viewers/videoViewer/view.jsx

@@ -336,6 +336,7 @@ function VideoViewer(props: Props) {
           userId={userId}
           allowPreRoll={!embedded && !authenticated}
           shareTelemetry={shareTelemetry}
+          showAutoplayCountdown={autoplaySetting}
         />
       )}
     </div>

ui/scss/component/_claim-list.scss

@@ -130,6 +130,7 @@
     @include handleChannelGif(6rem);
   }
 
+  // show watch later button and duration divs when hovered
   &:hover {
     .claim-preview__hover-actions {
       display: block;
@@ -604,8 +605,13 @@
   background-color: var(--color-black);
   padding: 0.3rem;
   border-radius: var(--border-radius);
-  opacity: 0.7;
   z-index: 2;
+  opacity: 0.7;
+
+  // show full opacity for touch devices
+  @media (pointer: fine), (pointer: coarse) {
+    opacity: 0.85;
+  }
 
   .file-properties {
     color: var(--color-white);
@@ -645,6 +651,7 @@
   overflow: hidden;
 }
 
+// show duration and watch later button when hovered
 .claim-preview--tile {
   &:hover {
     .claim-preview__hover-actions {
@@ -672,8 +679,19 @@
   margin-bottom: 0;
 }
 
+// div that displays watch later button
 .claim-preview__hover-actions {
-  display: none;
+
+  // if the user is using a mouse
+  @media (pointer: fine){
+    display: none;
+  }
+
+  // if the user doesn't have a pointer (mouse etc) hide watch later button
+  @media (pointer: none), (pointer:coarse) {
+    display: none !important;
+  }
+
   position: relative;
   float: right;
   top: var(--spacing-xxs);
@@ -697,12 +715,14 @@
     padding: var(--spacing-xxs) var(--spacing-xxs);
     height: unset;
 
+    // label (with 'Add' text) hidden by default
     .button__label {
       color: var(--color-text);
       font-size: var(--font-small);
       display: none;
     }
 
+    // show the additional watch later text (Add) when hovered
     &:hover {
       .button__label {
         display: inline;