Fix player mark video as watched

src/routes/MetaDetails/VideosList/Video/Video.js → 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'])}>
             {
@@ -130,6 +142,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                                                 progress={video.progress}
                                                 deepLinks={video.deepLinks}
                                                 scheduled={video.scheduled}
+                                                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,19 +3,34 @@
 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}>
             {
@@ -32,6 +47,7 @@ const VideosMenu = ({ className, metaItem, seriesInfo }) => {
                         progress={video.progress}
                         deepLinks={video.deepLinks}
                         scheduled={video.scheduled}
+                        onMarkVideoAsWatched={onMarkVideoAsWatched}
                     />
                 ))
             }