fix: mark video as watched on player

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;

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,

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}
                                             />
                                         ))
                                 }

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) => ({

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}
                     />
                 ))
             }