disable inline play for similar videos, #1044

frontend/src/components/VideoList.tsx

@@ -9,6 +9,7 @@ type VideoListProps = {
   viewStyle: ViewStylesType;
   playlistId?: string;
   showReorderButton?: boolean;
+  allowInlinePlay?: boolean;
   refreshVideoList: (refresh: boolean) => void;
 };
 
@@ -17,6 +18,7 @@ const VideoList = ({
   viewStyle,
   playlistId,
   showReorderButton = false,
+  allowInlinePlay = true,
   refreshVideoList,
 }: VideoListProps) => {
   if (!videoList) {
@@ -40,6 +42,7 @@ const VideoList = ({
             viewStyle={viewStyle}
             playlistId={playlistId}
             showReorderButton={showReorderButton}
+            allowInlinePlay={allowInlinePlay}
             refreshVideoList={refreshVideoList}
           />
         );

frontend/src/components/VideoListItem.tsx

@@ -1,4 +1,4 @@
-import { Link, useSearchParams } from 'react-router-dom';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import Routes from '../configuration/routes/RouteList';
 import { VideoType } from '../pages/Home';
 import iconPlay from '/img/icon-play.svg';
@@ -21,6 +21,7 @@ type VideoListItemProps = {
   viewStyle: ViewStylesType;
   playlistId?: string;
   showReorderButton?: boolean;
+  allowInlinePlay?: boolean;
   refreshVideoList: (refresh: boolean) => void;
 };
 
@@ -29,8 +30,10 @@ const VideoListItem = ({
   viewStyle,
   playlistId,
   showReorderButton = false,
+  allowInlinePlay = true,
   refreshVideoList,
 }: VideoListItemProps) => {
+  const navigate = useNavigate();
   const [, setSearchParams] = useSearchParams();
 
   const [showReorderMenu, setShowReorderMenu] = useState(false);
@@ -58,11 +61,15 @@ const VideoListItem = ({
       )}
       <a
         onClick={() => {
-          setSearchParams(params => {
-            const newParams = new URLSearchParams(params);
-            newParams.set('videoId', video.youtube_id);
-            return newParams;
-          });
+          if (allowInlinePlay) {
+            setSearchParams(params => {
+              const newParams = new URLSearchParams(params);
+              newParams.set('videoId', video.youtube_id);
+              return newParams;
+            });
+          } else {
+            navigate(Routes.Video(video.youtube_id));
+          }
         }}
       >
         <div className={`video-thumb-wrap ${viewStyle}`}>
@@ -86,9 +93,11 @@ const VideoListItem = ({
               ></div>
             )}
           </div>
-          <div className="video-play">
-            <img src={iconPlay} alt="play-icon" />
-          </div>
+          {allowInlinePlay && (
+            <div className="video-play">
+              <img src={iconPlay} alt="play-icon" />
+            </div>
+          )}
         </div>
       </a>
       <div className={`video-desc ${viewStyle}`}>

frontend/src/pages/Video.tsx

@@ -595,6 +595,7 @@ const Video = () => {
               videoList={similarVideosResponseData}
               viewStyle={ViewStylesEnum.Grid as ViewStylesType}
               refreshVideoList={setRefreshVideoList}
+              allowInlinePlay={false}
             />
           </div>
         </div>