From 8098bc5c33e23344e488b1d56cb9c34bb5a7dce2 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Sun, 8 Dec 2024 13:57:40 +0100
Subject: [PATCH 1/3] fix: mark video as watched on player

---
 .../VideosList => common}/Video/Video.js      | 20 +++++--------
 .../VideoPlaceholder/VideoPlaceholder.js      |  0
 .../Video/VideoPlaceholder/index.js           |  0
 .../Video/VideoPlaceholder/styles.less        |  0
 .../VideosList => common}/Video/index.js      |  0
 .../VideosList => common}/Video/styles.less   |  0
 src/common/index.js                           |  2 ++
 .../MetaDetails/VideosList/VideosList.js      | 28 ++++++++++--------
 src/routes/Player/Player.js                   |  9 +++---
 src/routes/Player/VideosMenu/VideosMenu.js    | 29 ++++++++++++-------
 10 files changed, 48 insertions(+), 40 deletions(-)
 rename src/{routes/MetaDetails/VideosList => common}/Video/Video.js (94%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/VideoPlaceholder/VideoPlaceholder.js (100%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/VideoPlaceholder/index.js (100%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/VideoPlaceholder/styles.less (100%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/index.js (100%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/styles.less (100%)

diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/common/Video/Video.js
similarity index 94%
rename from src/routes/MetaDetails/VideosList/Video/Video.js
rename to src/common/Video/Video.js
index 25b67aae9..f74b994eb 100644
--- a/src/routes/MetaDetails/VideosList/Video/Video.js
+++ b/src/common/Video/Video.js
@@ -4,15 +4,16 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { t } = require('i18next');
-const { useServices } = require('stremio/services');
 const { useRouteFocused } = require('stremio-router');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image, Popup, useBinaryState } = require('stremio/common');
+const Button = require('stremio/common/Button');
+const Image = require('stremio/common/Image');
+const Popup = require('stremio/common/Popup');
+const useBinaryState = require('stremio/common/useBinaryState');
 const VideoPlaceholder = require('./VideoPlaceholder');
 const styles = require('./styles');
 
-const Video = ({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, deepLinks, ...props }) => {
-    const { core } = useServices();
+const Video = ({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, deepLinks, onMarkVideoAsWatched, ...props }) => {
     const routeFocused = useRouteFocused();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
     const popupLabelOnMouseUp = React.useCallback((event) => {
@@ -49,13 +50,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
         event.preventDefault();
         event.stopPropagation();
         closeMenu();
-        core.transport.dispatch({
-            action: 'MetaDetails',
-            args: {
-                action: 'MarkVideoAsWatched',
-                args: [{ id, released }, !watched]
-            }
-        });
+        onMarkVideoAsWatched({ id, released }, watched);
     }, [id, released, watched]);
     const videoButtonOnClick = React.useCallback(() => {
         if (deepLinks) {
@@ -198,7 +193,8 @@ Video.propTypes = {
     deepLinks: PropTypes.shape({
         metaDetailsStreams: PropTypes.string,
         player: PropTypes.string
-    })
+    }),
+    onMarkVideoAsWatched: PropTypes.func,
 };
 
 module.exports = Video;
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js b/src/common/Video/VideoPlaceholder/VideoPlaceholder.js
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js
rename to src/common/Video/VideoPlaceholder/VideoPlaceholder.js
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/index.js b/src/common/Video/VideoPlaceholder/index.js
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/index.js
rename to src/common/Video/VideoPlaceholder/index.js
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less b/src/common/Video/VideoPlaceholder/styles.less
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
rename to src/common/Video/VideoPlaceholder/styles.less
diff --git a/src/routes/MetaDetails/VideosList/Video/index.js b/src/common/Video/index.js
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/index.js
rename to src/common/Video/index.js
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/common/Video/styles.less
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/styles.less
rename to src/common/Video/styles.less
diff --git a/src/common/index.js b/src/common/index.js
index 0605a3f9b..45eb0ef41 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -29,6 +29,7 @@ const Slider = require('./Slider');
 const { default: TextInput } = require('./TextInput');
 const { ToastProvider, useToast } = require('./Toast');
 const { TooltipProvider, Tooltip } = require('./Tooltips');
+const Video = require('./Video');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
 const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
@@ -83,6 +84,7 @@ module.exports = {
     useToast,
     TooltipProvider,
     Tooltip,
+    Video,
     comparatorWithPriorities,
     CONSTANTS,
     withCoreSuspender,
diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 6013e4f01..3a446b44f 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -4,12 +4,13 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { t } = require('i18next');
-const { Image, SearchBar, Toggle } = require('stremio/common');
+const { useServices } = require('stremio/services');
+const { Image, SearchBar, Toggle, Video } = require('stremio/common');
 const SeasonsBar = require('./SeasonsBar');
-const Video = require('./Video');
 const styles = require('./styles');
 
 const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => {
+    const { core } = useServices();
     const showNotificationsToggle = React.useMemo(() => {
         return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
     }, [metaItem]);
@@ -59,6 +60,17 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
     const searchInputOnChange = React.useCallback((event) => {
         setSearch(event.currentTarget.value);
     }, []);
+
+    const onMarkVideoAsWatched = (video, watched) => {
+        core.transport.dispatch({
+            action: 'MetaDetails',
+            args: {
+                action: 'MarkVideoAsWatched',
+                args: [video, !watched]
+            }
+        });
+    };
+
     return (
         <div className={classnames(className, styles['videos-list-container'])}>
             {
@@ -120,16 +132,8 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                                         .map((video, index) => (
                                             <Video
                                                 key={index}
-                                                id={video.id}
-                                                title={video.title}
-                                                thumbnail={video.thumbnail}
-                                                episode={video.episode}
-                                                released={video.released}
-                                                upcoming={video.upcoming}
-                                                watched={video.watched}
-                                                progress={video.progress}
-                                                deepLinks={video.deepLinks}
-                                                scheduled={video.scheduled}
+                                                {...video}
+                                                onMarkVideoAsWatched={onMarkVideoAsWatched}
                                             />
                                         ))
                                 }
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 5ace96f77..cdde60474 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -271,10 +271,9 @@ const Player = ({ urlParams, queryParams }) => {
 
     React.useEffect(() => {
         setError(null);
-        if (player.selected === null) {
-            video.unload();
-        } else if (streamingServer.settings !== null && streamingServer.settings.type !== 'Loading' &&
-            (player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
+        video.unload();
+
+        if (player.selected && streamingServer.settings?.type !== 'Loading') {
             video.load({
                 stream: {
                     ...player.selected.stream,
@@ -309,7 +308,7 @@ const Player = ({ urlParams, queryParams }) => {
                 shellTransport: shell.active ? shell.transport : null,
             });
         }
-    }, [streamingServer.baseUrl, player.selected, player.metaItem, forceTranscoding, casting]);
+    }, [streamingServer.baseUrl, player.selected, forceTranscoding, casting]);
     React.useEffect(() => {
         if (video.state.stream !== null) {
             const tracks = player.subtitles.map((subtitles) => ({
diff --git a/src/routes/Player/VideosMenu/VideosMenu.js b/src/routes/Player/VideosMenu/VideosMenu.js
index 9d5819db7..6e065d5f9 100644
--- a/src/routes/Player/VideosMenu/VideosMenu.js
+++ b/src/routes/Player/VideosMenu/VideosMenu.js
@@ -3,35 +3,42 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Video = require('../../MetaDetails/VideosList/Video');
+const { useServices } = require('stremio/services');
+const { Video } = require('stremio/common');
 const styles = require('./styles');
 
 const VideosMenu = ({ className, metaItem, seriesInfo }) => {
+    const { core } = useServices();
+
     const onMouseDown = React.useCallback((event) => {
         event.nativeEvent.videosMenuClosePrevented = true;
     }, []);
+
     const videos = React.useMemo(() => {
         return seriesInfo && typeof seriesInfo.season === 'number' && Array.isArray(metaItem.videos) ?
             metaItem.videos.filter(({ season }) => season === seriesInfo.season)
             :
             metaItem.videos;
     }, [metaItem, seriesInfo]);
+
+    const onMarkVideoAsWatched = (video, watched) => {
+        core.transport.dispatch({
+            action: 'Player',
+            args: {
+                action: 'MarkVideoAsWatched',
+                args: [video, !watched]
+            }
+        });
+    };
+
     return (
         <div className={classnames(className, styles['videos-menu-container'])} onMouseDown={onMouseDown}>
             {
                 videos.map((video, index) => (
                     <Video
                         key={index}
-                        id={video.id}
-                        title={video.title}
-                        thumbnail={video.thumbnail}
-                        episode={video.episode}
-                        released={video.released}
-                        upcoming={video.upcoming}
-                        watched={video.watched}
-                        progress={video.progress}
-                        deepLinks={video.deepLinks}
-                        scheduled={video.scheduled}
+                        {...video}
+                        onMarkVideoAsWatched={onMarkVideoAsWatched}
                     />
                 ))
             }

From 41be4528ff831f296f9b7c2417fe4386dada7551 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 9 Dec 2024 09:06:03 +0100
Subject: [PATCH 2/3] fix: don't spread Video component props

---
 src/routes/MetaDetails/VideosList/VideosList.js | 11 ++++++++++-
 src/routes/Player/VideosMenu/VideosMenu.js      | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 3a446b44f..14a390b8b 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -132,7 +132,16 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                                         .map((video, index) => (
                                             <Video
                                                 key={index}
-                                                {...video}
+                                                id={video.id}
+                                                title={video.title}
+                                                thumbnail={video.thumbnail}
+                                                episode={video.episode}
+                                                released={video.released}
+                                                upcoming={video.upcoming}
+                                                watched={video.watched}
+                                                progress={video.progress}
+                                                deepLinks={video.deepLinks}
+                                                scheduled={video.scheduled}
                                                 onMarkVideoAsWatched={onMarkVideoAsWatched}
                                             />
                                         ))
diff --git a/src/routes/Player/VideosMenu/VideosMenu.js b/src/routes/Player/VideosMenu/VideosMenu.js
index 6e065d5f9..d418b3f31 100644
--- a/src/routes/Player/VideosMenu/VideosMenu.js
+++ b/src/routes/Player/VideosMenu/VideosMenu.js
@@ -37,7 +37,16 @@ const VideosMenu = ({ className, metaItem, seriesInfo }) => {
                 videos.map((video, index) => (
                     <Video
                         key={index}
-                        {...video}
+                        id={video.id}
+                        title={video.title}
+                        thumbnail={video.thumbnail}
+                        episode={video.episode}
+                        released={video.released}
+                        upcoming={video.upcoming}
+                        watched={video.watched}
+                        progress={video.progress}
+                        deepLinks={video.deepLinks}
+                        scheduled={video.scheduled}
                         onMarkVideoAsWatched={onMarkVideoAsWatched}
                     />
                 ))

From eb4c326aca1b8a3d348d5968f610f2844c0da740 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Dec 2024 16:24:19 +0100
Subject: [PATCH 3/3] chore: update core-web

---
 package-lock.json | 9 +++++----
 package.json      | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 15a9be2f5..f718128ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.26.0",
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
-                "@stremio/stremio-core-web": "0.48.1",
+                "@stremio/stremio-core-web": "0.48.2",
                 "@stremio/stremio-icons": "5.4.0",
                 "@stremio/stremio-video": "0.0.46",
                 "a-color-picker": "1.2.1",
@@ -3379,9 +3379,10 @@
             "license": "MIT"
         },
         "node_modules/@stremio/stremio-core-web": {
-            "version": "0.48.1",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.1.tgz",
-            "integrity": "sha512-bdWxBuuOOC0NdG1Mg60lEhpK7Bw/Ea6D89bRcvIvM3WnJrUpGA4jbx4xWj3KQRM08PM3WWCY9/FzctlWCxFMRg==",
+            "version": "0.48.2",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.2.tgz",
+            "integrity": "sha512-zkz4ftGMoK9RmIDlGLd/DYLtaXuf4HxnMEN1NduKNXDlYPSJ4Q/b1hCbXrVqVK/nx6s+8X4XyYr9IOwFLaT5ew==",
+            "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
             }
diff --git a/package.json b/package.json
index f44b53702..0fb7e8824 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "0.48.1",
+        "@stremio/stremio-core-web": "0.48.2",
         "@stremio/stremio-icons": "5.4.0",
         "@stremio/stremio-video": "0.0.46",
         "a-color-picker": "1.2.1",