Merge pull request #807 from Stremio/feat/mark-season-as-watched

Videos: Add mark season as watched option
Stremio · Feb 27, 2025 · 0a6d70f · 0a6d70f
2 parents 8fb09b0 + c9969eb
commit 0a6d70f
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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.5",
+        "@stremio/stremio-core-web": "0.49.0",
         "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.53",
         "a-color-picker": "1.2.1",

diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js
@@ -11,7 +11,7 @@ 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, onMarkVideoAsWatched, ...props }) => {
+const Video = ({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }) => {
     const routeFocused = useRouteFocused();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
     const popupLabelOnMouseUp = React.useCallback((event) => {
@@ -50,6 +50,12 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
         closeMenu();
         onMarkVideoAsWatched({ id, released }, watched);
     }, [id, released, watched]);
+    const toggleWatchedSeasonOnClick = React.useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        closeMenu();
+        onMarkSeasonAsWatched(season, seasonWatched);
+    }, [season, seasonWatched, onMarkSeasonAsWatched]);
     const videoButtonOnClick = React.useCallback(() => {
         if (deepLinks) {
             if (typeof deepLinks.player === 'string') {
@@ -142,9 +148,12 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                 <Button className={styles['context-menu-option-container']} title={watched ? 'Mark as non-watched' : 'Mark as watched'} onClick={toggleWatchedOnClick}>
                     <div className={styles['context-menu-option-label']}>{watched ? t('CTX_MARK_NON_WATCHED') : t('CTX_MARK_WATCHED')}</div>
                 </Button>
+                <Button className={styles['context-menu-option-container']} title={seasonWatched ? t('CTX_UNMARK_REST') : t('CTX_MARK_REST')} onClick={toggleWatchedSeasonOnClick}>
+                    <div className={styles['context-menu-option-label']}>{seasonWatched ? t('CTX_UNMARK_REST') : t('CTX_MARK_REST')}</div>
+                </Button>
             </div>
         );
-    }, [watched, toggleWatchedOnClick]);
+    }, [watched, seasonWatched, toggleWatchedOnClick]);
     React.useEffect(() => {
         if (!routeFocused) {
             closeMenu();
@@ -182,17 +191,20 @@ Video.propTypes = {
     id: PropTypes.string,
     title: PropTypes.string,
     thumbnail: PropTypes.string,
+    season: PropTypes.number,
     episode: PropTypes.number,
     released: PropTypes.instanceOf(Date),
     upcoming: PropTypes.bool,
     watched: PropTypes.bool,
     progress: PropTypes.number,
     scheduled: PropTypes.bool,
+    seasonWatched: PropTypes.bool,
     deepLinks: PropTypes.shape({
         metaDetailsStreams: PropTypes.string,
         player: PropTypes.string
     }),
     onMarkVideoAsWatched: PropTypes.func,
+    onMarkSeasonAsWatched: PropTypes.func,
 };
 
 module.exports = Video;
diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -56,6 +56,11 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                 return a.episode - b.episode;
             });
     }, [videos, selectedSeason]);
+
+    const seasonWatched = React.useMemo(() => {
+        return videosForSeason.every((video) => video.watched);
+    }, [videosForSeason]);
+
     const [search, setSearch] = React.useState('');
     const searchInputOnChange = React.useCallback((event) => {
         setSearch(event.currentTarget.value);
@@ -71,6 +76,16 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
         });
     };
 
+    const onMarkSeasonAsWatched = (season, watched) => {
+        core.transport.dispatch({
+            action: 'MetaDetails',
+            args: {
+                action: 'MarkSeasonAsWatched',
+                args: [season, !watched]
+            }
+        });
+    };
+
     return (
         <div className={classnames(className, styles['videos-list-container'])}>
             {
@@ -135,14 +150,17 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                                                 id={video.id}
                                                 title={video.title}
                                                 thumbnail={video.thumbnail}
+                                                season={video.season}
                                                 episode={video.episode}
                                                 released={video.released}
                                                 upcoming={video.upcoming}
                                                 watched={video.watched}
                                                 progress={video.progress}
                                                 deepLinks={video.deepLinks}
                                                 scheduled={video.scheduled}
+                                                seasonWatched={seasonWatched}
                                                 onMarkVideoAsWatched={onMarkVideoAsWatched}
+                                                onMarkSeasonAsWatched={onMarkSeasonAsWatched}
                                             />
                                         ))
                                 }

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -47,6 +47,10 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
         setSeason(parseInt(event.value));
     }, []);
 
+    const seasonWatched = React.useMemo(() => {
+        return videos.every((video) => video.watched);
+    }, [videos]);
+
     const onMarkVideoAsWatched = useCallback((video: Video, watched: boolean) => {
         core.transport.dispatch({
             action: 'Player',
@@ -57,6 +61,16 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
         });
     }, []);
 
+    const onMarkSeasonAsWatched = (season: number, watched: boolean) => {
+        core.transport.dispatch({
+            action: 'Player',
+            args: {
+                action: 'MarkSeasonAsWatched',
+                args: [season, !watched]
+            }
+        });
+    };
+
     const onMouseDown = (event: React.MouseEvent) => {
         event.stopPropagation();
     };
@@ -95,14 +109,17 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                                     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>