Remove hover/watch later bug for mobile devices (#6950)

* starting work to remove hover effect for preview images on mobile

* identifying code for PR

* update functionality for watch later button on mobile

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/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;