Separate episode navigation and playback

src/components/Video/Video.js

@@ -66,19 +66,29 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
         closeMenu();
         onMarkSeasonAsWatched(season, seasonWatched);
     }, [season, seasonWatched, onMarkSeasonAsWatched]);
-    const videoButtonOnClick = React.useCallback(() => {
+    const selectVideo = React.useCallback(() => {
         if (typeof onSelect === 'function') {
             onSelect();
         }
+    }, [onSelect]);
+    const videoButtonOnClick = React.useCallback(() => {
+        selectVideo();
 
-        if (deepLinks) {
-            if (typeof deepLinks.player === 'string') {
-                navigate(toPath(deepLinks.player));
-            } else if (typeof deepLinks.metaDetailsStreams === 'string') {
-                navigate(toPath(deepLinks.metaDetailsStreams), { replace: !platform.isMobile });
-            }
+        if (deepLinks && typeof deepLinks.metaDetailsStreams === 'string') {
+            navigate(toPath(deepLinks.metaDetailsStreams), { replace: !platform.isMobile });
+        }
+    }, [deepLinks, navigate, platform.isMobile, selectVideo]);
+    const playButtonOnClick = React.useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        selectVideo();
+        if (deepLinks && typeof deepLinks.player === 'string') {
+            navigate(toPath(deepLinks.player));
         }
-    }, [deepLinks, onSelect]);
+    }, [deepLinks, navigate, selectVideo]);
+    const playButtonOnKeyDown = React.useCallback((event) => {
+        event.stopPropagation();
+    }, []);
     const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ref, ...props }) {
         const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched;
 
@@ -163,10 +173,23 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
                         </div>
                     </div>
                 </div>
+                {
+                    deepLinks && typeof deepLinks.player === 'string' ?
+                        <Button
+                            className={styles['play-button-container']}
+                            title={t('CTX_WATCH')}
+                            onClick={playButtonOnClick}
+                            onKeyDown={playButtonOnKeyDown}
+                        >
+                            <Icon className={styles['play-icon']} name={'play'} />
+                        </Button>
+                        :
+                        null
+                }
                 {children}
             </Button>
         );
-    }, [selected]);
+    }, [deepLinks, playButtonOnClick, playButtonOnKeyDown, selected]);
     const renderMenu = React.useMemo(() => function renderMenu() {
         return (
             <div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>

src/components/Video/styles.less

@@ -177,6 +177,29 @@
         }
     }
 
+    .play-button-container {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 3rem;
+        height: 3rem;
+        margin-right: 0.5rem;
+        border-radius: 50%;
+        color: var(--primary-foreground-color);
+        background-color: var(--overlay-color);
+
+        &:hover,
+        &:focus {
+            background-color: var(--secondary-accent-color);
+        }
+
+        .play-icon {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+    }
+
     &.selected {
         animation: border 3s ease-in-out forwards;
     }
@@ -243,4 +266,4 @@
             }
         }
     }
-}
+}