Allow opening content in recommended overlay to new tabs (#3149)

Co-authored-by: miko <[email protected]>
OdyseeTeam · Sep 20, 2024 · 0f85408 · 0f85408
1 parent eae98ea
commit 0f85408
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
@@ -54,6 +54,7 @@ type Props = {
   pulse?: boolean,
   firstCollectionItemUrl: ?string,
   onlyThumb?: boolean,
+  onClickHandledByParent?: boolean,
 };
 
 // preview image cards used in related video functionality, channel overview page and homepage
@@ -86,6 +87,7 @@ function ClaimPreviewTile(props: Props) {
     pulse,
     firstCollectionItemUrl,
     onlyThumb,
+    onClickHandledByParent,
   } = props;
 
   const isEmbed = React.useContext(EmbedContext);
@@ -107,7 +109,9 @@ function ClaimPreviewTile(props: Props) {
     (fypId ? `?${FYP_ID}=${fypId}` : ''); // sigh...
   const navLinkProps = {
     to: navigateUrl,
-    onClick: (e) => e.stopPropagation(),
+    onClick: (e) => {
+      onClickHandledByParent ? e.preventDefault() : e.stopPropagation();
+    },
   };
 
   const signingChannel = claim && claim.signing_channel;

diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
@@ -552,8 +552,13 @@ function VideoViewer(props: Props) {
             <div className="recommendation-overlay-grid">
               {recomendedContent &&
                 recomendedContent.slice(0, 9).map((url, i) => (
-                  <div key={url} onClick={() => (i === 4 && isMobile ? replay() : doPlayNextUri({ uri: url }))}>
-                    <ClaimPreviewTile uri={url} />
+                  <div
+                    key={url}
+                    onClick={() => {
+                      i === 4 && isMobile ? replay() : doPlayNextUri({ uri: url });
+                    }}
+                  >
+                    <ClaimPreviewTile uri={url} onClickHandledByParent />
                   </div>
                 ))}
             </div>

diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
@@ -1363,13 +1363,6 @@ $control-bar-icon-size: 30px;
       margin: 0;
       animation: grow 0.6s forwards;
 
-      &:active {
-        pointer-events: none;
-      }
-
-      a {
-        pointer-events: none;
-      }
       .claim-tile__header {
         position: absolute;
         top: 0;
@@ -1442,7 +1435,6 @@ $control-bar-icon-size: 30px;
 
     .recommendation-overlay-grid {
       .claim-preview--tile {
-        pointer-events: none;
         &:hover {
           .claim-tile__info,
           .claim-tile__header,