From 852f478f1ee400436967090b01205fbe8747f850 Mon Sep 17 00:00:00 2001
From: higorgoulart <higorgoulart@hotmail.com>
Date: Tue, 4 Nov 2025 17:52:09 -0300
Subject: [PATCH] feat: change trailer order & fix discover mark as watched

---
 src/components/DiscItem/DiscItem.js       |  5 +----
 src/components/MetaPreview/MetaPreview.js | 26 +++++++++++------------
 src/routes/Discover/Discover.js           | 18 ++++++++--------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/components/DiscItem/DiscItem.js b/src/components/DiscItem/DiscItem.js
index 45f6499a6..cc1cf5315 100644
--- a/src/components/DiscItem/DiscItem.js
+++ b/src/components/DiscItem/DiscItem.js
@@ -1,15 +1,12 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { useServices } = require('stremio/services');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const MetaItem = require('stremio/components/MetaItem');
 const { t } = require('i18next');
 
-const DiscItem = ({ id, watched, selected, toggleWatched, ...props }) => {
-
-    const { core } = useServices();
+const DiscItem = ({ id, watched, selected, toggleWatched, select, ...props }) => {
 
     const options = React.useMemo(() => {
         return [
diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index e4ec82ded..829903cfa 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -195,19 +195,6 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                 }
             </div>
             <div className={styles['action-buttons-container']}>
-                {
-                    typeof toggleInLibrary === 'function' ?
-                        <ActionButton
-                            className={styles['action-button']}
-                            icon={inLibrary ? 'remove-from-library' : 'add-to-library'}
-                            label={inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}
-                            tooltip={compact}
-                            tabIndex={compact ? -1 : 0}
-                            onClick={toggleInLibrary}
-                        />
-                        :
-                        null
-                }
                 {
                     typeof trailerHref === 'string' ?
                         <ActionButton
@@ -221,6 +208,19 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         :
                         null
                 }
+                {
+                    typeof toggleInLibrary === 'function' ?
+                        <ActionButton
+                            className={styles['action-button']}
+                            icon={inLibrary ? 'remove-from-library' : 'add-to-library'}
+                            label={inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}
+                            tooltip={compact}
+                            tabIndex={compact ? -1 : 0}
+                            onClick={toggleInLibrary}
+                        />
+                        :
+                        null
+                }
                 {
                     typeof toggleWatched === 'function' ?
                         <ActionButton
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index a462a5af9..29dc2cfe1 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -74,17 +74,17 @@ const Discover = ({ urlParams, queryParams }) => {
             }
         });
     }, [selectedMetaItem]);
-    const toggleWatched = React.useCallback(() => {
-        if (selectedMetaItem === null) {
+    const toggleWatched = React.useCallback((item) => {
+        if (item === null) {
             return;
         }
 
-        if (!selectedMetaItem.inLibrary) {
+        if (!item.inLibrary) {
             core.transport.dispatch({
                 action: 'Ctx',
                 args: {
                     action: 'AddToLibrary',
-                    args: selectedMetaItem
+                    args: item
                 }
             });
         }
@@ -94,12 +94,12 @@ const Discover = ({ urlParams, queryParams }) => {
             args: {
                 action: 'LibraryItemMarkAsWatched',
                 args: {
-                    id: selectedMetaItem.id,
-                    is_watched: !selectedMetaItem.watched
+                    id: item.id,
+                    is_watched: !item.watched
                 }
             }
         });
-    }, [selectedMetaItem]);
+    }, []);
     const metaItemsOnFocusCapture = React.useCallback((event) => {
         if (event.target.dataset.index !== null && !isNaN(event.target.dataset.index)) {
             setSelectedMetaItemIndex(parseInt(event.target.dataset.index, 10));
@@ -184,7 +184,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                     :
                                     <div ref={metasContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
                                         {discover.catalog.content.content.map((discItem, index) => (
-                                            <DiscItem {...discItem} toggleWatched={toggleWatched} selected={selectedMetaItemIndex === index} key={index} data-index={index} onClick={metaItemOnClick} />
+                                            <DiscItem {...discItem} toggleWatched={() => toggleWatched(discItem)} selected={selectedMetaItemIndex === index} key={index} data-index={index} onClick={metaItemOnClick} />
                                         ))}
                                     </div>
                     }
@@ -208,7 +208,7 @@ const Discover = ({ urlParams, queryParams }) => {
                             inLibrary={selectedMetaItem.inLibrary}
                             toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary}
                             watched={selectedMetaItem.watched}
-                            toggleWatched={toggleWatched}
+                            toggleWatched={() => toggleWatched(selectedMetaItem)}
                             metaId={selectedMetaItem.id}
                             like={selectedMetaItem.like}
                         />