From f7f9e6a40842110dc707d67cf0d77f2ca26637b0 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Sat, 14 Jun 2025 22:42:14 +0300
Subject: [PATCH] remove container and use `forwardRef`

---
 src/components/Video/Video.js               |  6 +--
 src/routes/Player/SideDrawer/SideDrawer.tsx | 41 ++++++++++-----------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js
index 94fbefcc7..585920cdb 100644
--- a/src/components/Video/Video.js
+++ b/src/components/Video/Video.js
@@ -12,7 +12,7 @@ const useProfile = require('stremio/common/useProfile');
 const VideoPlaceholder = require('./VideoPlaceholder');
 const styles = require('./styles');
 
-const Video = ({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }) => {
+const Video = React.forwardRef(({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }, ref) => {
     const routeFocused = useRouteFocused();
     const profile = useProfile();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
@@ -70,7 +70,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
     const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ...props }) {
         const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched;
         return (
-            <Button {...props} className={classnames(className, styles['video-container'])} title={title}>
+            <Button {...props} className={classnames(className, styles['video-container'])} title={title} ref={ref}>
                 {
                     typeof thumbnail === 'string' && thumbnail.length > 0 ?
                         <div className={styles['thumbnail-container']}>
@@ -185,7 +185,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
             renderMenu={renderMenu}
         />
     );
-};
+});
 
 Video.Placeholder = VideoPlaceholder;
 
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 1dcca3b1b..f55130197 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useMemo, useCallback, useState, forwardRef, memo, useRef, useEffect } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import { useServices } from 'stremio/services';
@@ -113,26 +113,25 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                         />
                         <div className={styles['videos']}>
                             {videos.map((video, index) => (
-                                <div key={index} ref={video.id === props.currentlyPlayingVideoID ? currentlyPlayingVideoRef : null}>
-                                    <Video
-                                        className={styles['video']}
-                                        id={video.id}
-                                        title={video.title}
-                                        thumbnail={video.thumbnail}
-                                        season={video.season}
-                                        episode={video.episode}
-                                        released={video.released}
-                                        upcoming={video.upcoming}
-                                        watched={video.watched}
-                                        seasonWatched={seasonWatched}
-                                        progress={video.progress}
-                                        deepLinks={video.deepLinks}
-                                        scheduled={video.scheduled}
-                                        onMarkVideoAsWatched={onMarkVideoAsWatched}
-                                        onMarkSeasonAsWatched={onMarkSeasonAsWatched}
-
-                                    />
-                                </div>
+                                <Video
+                                    key={index}
+                                    className={styles['video']}
+                                    id={video.id}
+                                    title={video.title}
+                                    thumbnail={video.thumbnail}
+                                    season={video.season}
+                                    episode={video.episode}
+                                    released={video.released}
+                                    upcoming={video.upcoming}
+                                    watched={video.watched}
+                                    seasonWatched={seasonWatched}
+                                    progress={video.progress}
+                                    deepLinks={video.deepLinks}
+                                    scheduled={video.scheduled}
+                                    onMarkVideoAsWatched={onMarkVideoAsWatched}
+                                    onMarkSeasonAsWatched={onMarkSeasonAsWatched}
+                                    ref={video.id === props.currentlyPlayingVideoID ? currentlyPlayingVideoRef : null}
+                                />
                             ))}
                         </div>
                     </div>