Mark Video as Watched When Using External Player

src/routes/MetaDetails/MetaDetails.js

@@ -161,6 +161,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                         <StreamsList
                             className={styles['streams-list']}
                             streams={metaDetails.streams}
+                            video={video}
                         />
                         :
                         metaPath !== null ?

src/routes/MetaDetails/StreamsList/Stream/Stream.js

@@ -9,7 +9,7 @@ const { useServices } = require('stremio/services');
 const StreamPlaceholder = require('./StreamPlaceholder');
 const styles = require('./styles');
 
-const Stream = ({ className, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
+const Stream = ({ className, videoId, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
     const profile = useProfile();
     const streamingServer = useStreamingServer();
     const { core } = useServices();
@@ -29,10 +29,22 @@ const Stream = ({ className, addonName, name, description, thumbnail, progress,
             :
             null;
     }, [deepLinks, profile, streamingServer]);
-    const onClick = React.useCallback((e) => {
+    const markVideoAsWatched = React.useCallback(() => {
+        if (typeof videoId === 'string') {
+            core.transport.dispatch({
+                action: 'MetaDetails',
+                args: {
+                    action: 'MarkVideoAsWatched',
+                    args: [videoId, true]
+                }
+            });
+        }
+    }, [videoId]);
+    const onClick = React.useCallback((event) => {
         if (href === null) {
             // link does not lead to the player, it is expected to
             // open with local video player through the streaming server
+            markVideoAsWatched();
             core.transport.dispatch({
                 action: 'StreamingServer',
                 args: {
@@ -43,15 +55,18 @@ const Stream = ({ className, addonName, name, description, thumbnail, progress,
                     }
                 }
             });
-        } else if (profile.settings.playerType === 'external') {
+        } else if (profile.settings.playerType !== 'internal') {
+            markVideoAsWatched();
             toast.show({
                 type: 'success',
                 title: 'Stream opened in external player',
                 timeout: 4000
             });
         }
-        props.onClick(e);
-    }, [href, deepLinks, props.onClick, profile, toast]);
+        if (typeof props.onClick === 'function') {
+            props.onClick(event);
+        }
+    }, [href, deepLinks, props.onClick, profile, toast, markVideoAsWatched]);
     const forceDownload = React.useMemo(() => {
         // we only do this in one case to force the download
         // of a M3U playlist generated in the browser
@@ -95,6 +110,7 @@ Stream.Placeholder = StreamPlaceholder;
 
 Stream.propTypes = {
     className: PropTypes.string,
+    videoId: PropTypes.string,
     addonName: PropTypes.string,
     name: PropTypes.string,
     description: PropTypes.string,

src/routes/MetaDetails/StreamsList/StreamsList.js

@@ -12,7 +12,7 @@ const styles = require('./styles');
 
 const ALL_ADDONS_KEY = 'ALL';
 
-const StreamsList = ({ className, ...props }) => {
+const StreamsList = ({ className, video, ...props }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
@@ -105,6 +105,7 @@ const StreamsList = ({ className, ...props }) => {
                                     {filteredStreams.map((stream, index) => (
                                         <Stream
                                             key={index}
+                                            videoId={video?.id}
                                             addonName={stream.addonName}
                                             name={stream.name}
                                             description={stream.description}
@@ -119,15 +120,16 @@ const StreamsList = ({ className, ...props }) => {
             }
             <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
                 <Icon className={styles['icon']} icon={'ic_addons'} />
-                <div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
+                <div className={styles['label']}>{t('ADDON_CATALOGUE_MORE')}</div>
             </Button>
         </div>
     );
 };
 
 StreamsList.propTypes = {
     className: PropTypes.string,
-    streams: PropTypes.arrayOf(PropTypes.object).isRequired
+    streams: PropTypes.arrayOf(PropTypes.object).isRequired,
+    video: PropTypes.object
 };
 
 module.exports = StreamsList;