From 23dfeb263b912f74679bb4df96a812f64b1caaca Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Wed, 28 Feb 2024 14:16:15 +0200
Subject: [PATCH] feature: mark libItem as watched / unwatched

---
 src/common/LibItem/LibItem.js   | 40 +++++++++++++++++++++++++++------
 src/common/MetaItem/styles.less |  2 +-
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/common/LibItem/LibItem.js b/src/common/LibItem/LibItem.js
index d2858790d..a8071b278 100644
--- a/src/common/LibItem/LibItem.js
+++ b/src/common/LibItem/LibItem.js
@@ -6,19 +6,23 @@ const PropTypes = require('prop-types');
 const MetaItem = require('stremio/common/MetaItem');
 const { t } = require('i18next');
 
-const OPTIONS = [
-    { label: 'LIBRARY_PLAY', value: 'play' },
-    { label: 'LIBRARY_DETAILS', value: 'details' },
-    { label: 'LIBRARY_RESUME_DISMISS', value: 'dismiss' },
-    { label: 'LIBRARY_REMOVE', value: 'remove' },
-];
+const LibItem = ({ _id, removable, notifications, watched, ...props }) => {
+
+    const OPTIONS = [
+        { label: 'LIBRARY_PLAY', value: 'play' },
+        { label: 'LIBRARY_DETAILS', value: 'details' },
+        { label: 'LIBRARY_RESUME_DISMISS', value: 'dismiss' },
+        { label: watched ? 'CTX_MARK_UNWATCHED' : 'CTX_MARK_WATCHED', value: 'watched' },
+        { label: 'LIBRARY_REMOVE', value: 'remove' },
+    ];
 
-const LibItem = ({ _id, removable, notifications, ...props }) => {
     const { core } = useServices();
+
     const newVideos = React.useMemo(() => {
         const count = notifications.items?.[_id]?.length ?? 0;
         return Math.min(Math.max(count, 0), 99);
     }, [_id, notifications]);
+
     const options = React.useMemo(() => {
         return OPTIONS
             .filter(({ value }) => {
@@ -27,6 +31,8 @@ const LibItem = ({ _id, removable, notifications, ...props }) => {
                         return props.deepLinks && typeof props.deepLinks.player === 'string';
                     case 'details':
                         return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
+                    case 'watched':
+                        return typeof _id === 'string' && watched !== null;
                     case 'dismiss':
                         return typeof _id === 'string' && props.progress !== null && !isNaN(props.progress);
                     case 'remove':
@@ -38,6 +44,7 @@ const LibItem = ({ _id, removable, notifications, ...props }) => {
                 label: t(option.label)
             }));
     }, [_id, removable, props.progress, props.deepLinks]);
+
     const optionOnSelect = React.useCallback((event) => {
         if (typeof props.optionOnSelect === 'function') {
             props.optionOnSelect(event);
@@ -83,6 +90,22 @@ const LibItem = ({ _id, removable, notifications, ...props }) => {
 
                     break;
                 }
+                case 'watched': {
+                    if (typeof _id === 'string') {
+                        core.transport.dispatch({
+                            action: 'Ctx',
+                            args: {
+                                action: 'LibraryItemMarkAsWatched',
+                                args: {
+                                    id: _id,
+                                    is_watched: !watched
+                                }
+                            }
+                        });
+                    }
+
+                    break;
+                }
                 case 'remove': {
                     if (typeof _id === 'string') {
                         core.transport.dispatch({
@@ -99,9 +122,11 @@ const LibItem = ({ _id, removable, notifications, ...props }) => {
             }
         }
     }, [_id, props.deepLinks, props.optionOnSelect]);
+
     return (
         <MetaItem
             {...props}
+            watched={watched}
             newVideos={newVideos}
             options={options}
             optionOnSelect={optionOnSelect}
@@ -114,6 +139,7 @@ LibItem.propTypes = {
     removable: PropTypes.bool,
     progress: PropTypes.number,
     notifications: PropTypes.object,
+    watched: PropTypes.bool,
     deepLinks: PropTypes.shape({
         metaDetailsVideos: PropTypes.string,
         metaDetailsStreams: PropTypes.string,
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 1af8111c0..f31724970 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -351,7 +351,7 @@
                 width: auto;
 
                 .multiselect-menu-container {
-                    min-width: 8rem;
+                    min-width: 9rem;
                     max-width: 14rem;
 
                     .multiselect-option-container {