fix: external player stream logic

src/common/CONSTANTS.js

@@ -40,6 +40,49 @@ const ICON_FOR_TYPE = new Map([
     ['other', 'movies'],
 ]);
 
+const EXTERNAL_PLAYERS = [
+    {
+        label: 'EXTERNAL_PLAYER_DISABLED',
+        value: null,
+        platforms: ['ios', 'android', 'windows', 'linux', 'macos'],
+    },
+    {
+        label: 'EXTERNAL_PLAYER_ALLOW_CHOOSING',
+        value: 'choose',
+        platforms: ['android'],
+    },
+    {
+        label: 'VLC',
+        value: 'vlc',
+        platforms: ['ios', 'android'],
+    },
+    {
+        label: 'MPV',
+        value: 'mpv',
+        platforms: ['macos'],
+    },
+    {
+        label: 'IINA',
+        value: 'iina',
+        platforms: ['macos'],
+    },
+    {
+        label: 'MX Player',
+        value: 'mxplayer',
+        platforms: ['android'],
+    },
+    {
+        label: 'Just Player',
+        value: 'justplayer',
+        platforms: ['android'],
+    },
+    {
+        label: 'Outplayer',
+        value: 'outplayer',
+        platforms: ['ios'],
+    },
+];
+
 module.exports = {
     CHROMECAST_RECEIVER_APP_ID,
     SUBTITLES_SIZES,
@@ -55,5 +98,6 @@ module.exports = {
     SHARE_LINK_CATEGORY,
     WRITERS_LINK_CATEGORY,
     TYPE_PRIORITIES,
-    ICON_FOR_TYPE
+    ICON_FOR_TYPE,
+    EXTERNAL_PLAYERS,
 };

src/common/Multiselect/Multiselect.js

@@ -15,7 +15,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
     const options = React.useMemo(() => {
         return Array.isArray(props.options) ?
             props.options.filter((option) => {
-                return option && typeof option.value === 'string';
+                return option && (typeof option.value === 'string' || option.value === null);
             })
             :
             [];
@@ -23,7 +23,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
     const selected = React.useMemo(() => {
         return Array.isArray(props.selected) ?
             props.selected.filter((value) => {
-                return typeof value === 'string';
+                return typeof value === 'string' || value === null;
             })
             :
             [];
@@ -161,7 +161,7 @@ Multiselect.propTypes = {
     direction: PropTypes.any,
     title: PropTypes.string,
     options: PropTypes.arrayOf(PropTypes.shape({
-        value: PropTypes.string.isRequired,
+        value: PropTypes.string,
         title: PropTypes.string,
         label: PropTypes.string
     })),

src/common/externalPlayerOptions.js

@@ -1,35 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const platform = require('./platform');
-
-let options = [{ label: 'EXTERNAL_PLAYER_DISABLED', value: 'internal' }];
-
-if (platform.name === 'ios') {
-    options = options.concat([
-        { label: 'VLC', value: 'vlc' },
-        { label: 'Outplayer', value: 'outplayer' }
-    ]);
-} else if (platform.name === 'android') {
-    options = options.concat([
-        { label: 'EXTERNAL_PLAYER_ALLOW_CHOOSING', value: 'choose' },
-        { label: 'VLC', value: 'vlc' },
-        { label: 'Just Player', value: 'justplayer' },
-        { label: 'MX Player', value: 'mxplayer' }
-    ]);
-} else if (platform.name === 'macos') {
-    options = options.concat([
-        { label: 'IINA', value: 'iina' },
-        { label: 'mpv', value: 'mpv' },
-        { label: 'VLC', value: 'vlc' }
-    ]);
-} else if (['windows', 'linux'].includes(platform.name)) {
-    options = options.concat([
-        { label: 'VLC', value: 'vlc' }
-    ]);
-} else {
-    options = options.concat([
-        { label: 'M3U Playlist', value: 'm3u' }
-    ]);
-}
-
-module.exports = options;

src/common/index.js

@@ -44,7 +44,6 @@ const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const platform = require('./platform');
-const externalPlayerOptions = require('./externalPlayerOptions');
 const EventModal = require('./EventModal');
 
 module.exports = {
@@ -96,6 +95,5 @@ module.exports = {
     useStreamingServer,
     useTorrent,
     platform,
-    externalPlayerOptions,
     EventModal,
 };

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

@@ -4,25 +4,49 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image, useProfile, platform, useStreamingServer, useToast } = require('stremio/common');
+const { Button, Image, useProfile, platform, useToast } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const StreamPlaceholder = require('./StreamPlaceholder');
 const styles = require('./styles');
 
 const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
     const profile = useProfile();
-    const streamingServer = useStreamingServer();
-    const { core } = useServices();
     const toast = useToast();
+    const { core } = useServices();
+
     const href = React.useMemo(() => {
-        if (!deepLinks) return null;
+        return deepLinks ?
+            deepLinks.externalPlayer ?
+                deepLinks.externalPlayer.web ?
+                    deepLinks.externalPlayer.web
+                    :
+                    deepLinks.externalPlayer.openPlayer ?
+                        deepLinks.externalPlayer.openPlayer[platform.name] ?
+                            deepLinks.externalPlayer.openPlayer[platform.name]
+                            :
+                            deepLinks.externalPlayer.playlist
+                        :
+                        deepLinks.player
+                :
+                deepLinks.player
+            :
+            null;
+    }, [deepLinks]);
 
-        if (profile.settings.playerType && profile.settings.playerType !== 'internal') {
+    const download = React.useMemo(() => {
-            return (deepLinks.externalPlayer.openPlayer || {})[platform.name] || deepLinks.externalPlayer.href;
+        return href === deepLinks?.externalPlayer?.playlist ?
-        }
+            deepLinks.externalPlayer.fileName
+            :
+            null;
+    }, [href, deepLinks]);
+
+    const target = React.useMemo(() => {
+        return href === deepLinks?.externalPlayer?.web ?
+            '_blank'
+            :
+            null;
+    }, [href, deepLinks]);
 
-        return typeof deepLinks.player === 'string' ? deepLinks.player : null;
-    }, [deepLinks, profile, streamingServer]);
     const markVideoAsWatched = React.useCallback(() => {
         if (typeof videoId === 'string') {
             core.transport.dispatch({
@@ -34,22 +58,9 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
             });
         }
     }, [videoId, videoReleased]);
+
     const onClick = React.useCallback((event) => {
-        if (href === null) {
+        if (profile.settings.playerType !== 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: {
-                    action: 'PlayOnDevice',
-                    args: {
-                        device: 'vlc',
-                        source: deepLinks.externalPlayer.streaming
-                    }
-                }
-            });
-        } else if (profile.settings.playerType && profile.settings.playerType !== 'internal') {
             markVideoAsWatched();
             toast.show({
                 type: 'success',
@@ -57,20 +68,18 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
                 timeout: 4000
             });
         }
+
         if (typeof props.onClick === 'function') {
             props.onClick(event);
         }
-    }, [href, deepLinks, props.onClick, profile, toast, markVideoAsWatched]);
+    }, [props.onClick, profile.settings, markVideoAsWatched]);
-    const forceDownload = React.useMemo(() => {
+
-        // we only do this in one case to force the download
-        // of a M3U playlist generated in the browser
-        return href === deepLinks.externalPlayer.href ? deepLinks.externalPlayer.fileName : false;
-    }, [href]);
     const renderThumbnailFallback = React.useCallback(() => (
         <Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
     ), []);
+
     return (
-        <Button href={href} download={forceDownload} {...props} onClick={onClick} className={classnames(className, styles['stream-container'])} title={addonName}>
+        <Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick}>
             <div className={styles['info-container']}>
                 {
                     typeof thumbnail === 'string' && thumbnail.length > 0 ?
@@ -117,52 +126,17 @@ Stream.propTypes = {
     deepLinks: PropTypes.shape({
         player: PropTypes.string,
         externalPlayer: PropTypes.shape({
-            href: PropTypes.string,
+            download: PropTypes.string,
-            fileName: PropTypes.string,
             streaming: PropTypes.string,
+            playlist: PropTypes.string,
+            fileName: PropTypes.string,
+            web: PropTypes.string,
             openPlayer: PropTypes.shape({
-                choose: PropTypes.shape({
+                ios: PropTypes.string,
-                    ios: PropTypes.string,
+                android: PropTypes.string,
-                    android: PropTypes.string,
+                windows: PropTypes.string,
-                    windows: PropTypes.string,
+                macos: PropTypes.string,
-                    macos: PropTypes.string,
+                linux: PropTypes.string,
-                    linux: PropTypes.string
-                }),
-                vlc: PropTypes.shape({
-                    ios: PropTypes.string,
-                    android: PropTypes.string,
-                    windows: PropTypes.string,
-                    macos: PropTypes.string,
-                    linux: PropTypes.string
-                }),
-                outplayer: PropTypes.shape({
-                    ios: PropTypes.string,
-                    android: PropTypes.string,
-                    windows: PropTypes.string,
-                    macos: PropTypes.string,
-                    linux: PropTypes.string
-                }),
-                infuse: PropTypes.shape({
-                    ios: PropTypes.string,
-                    android: PropTypes.string,
-                    windows: PropTypes.string,
-                    macos: PropTypes.string,
-                    linux: PropTypes.string
-                }),
-                justplayer: PropTypes.shape({
-                    ios: PropTypes.string,
-                    android: PropTypes.string,
-                    windows: PropTypes.string,
-                    macos: PropTypes.string,
-                    linux: PropTypes.string
-                }),
-                mxplayer: PropTypes.shape({
-                    ios: PropTypes.string,
-                    android: PropTypes.string,
-                    windows: PropTypes.string,
-                    macos: PropTypes.string,
-                    linux: PropTypes.string
-                }),
             })
         })
     }),

src/routes/Player/Player.js

@@ -260,7 +260,7 @@ const Player = ({ urlParams, queryParams }) => {
         setError(null);
         if (player.selected === null) {
             dispatch({ type: 'command', commandName: 'unload' });
-        } else if (streamingServer.baseUrl !== null && (player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
+        } else if ((player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
             dispatch({
                 type: 'command',
                 commandName: 'load',
@@ -647,8 +647,14 @@ const Player = ({ urlParams, queryParams }) => {
                                 null
                         }
                         {
-                            player.selected !== null ?
+                            player.selected?.stream?.deepLinks?.externalPlayer?.playlist !== null ?
-                                <Button className={styles['playlist-button']} title={t('PLAYER_OPEN_IN_EXTERNAL')} href={player.selected.stream.deepLinks.externalPlayer.href} download={player.selected.stream.deepLinks.externalPlayer.fileName} target={'_blank'}>
+                                <Button
+                                    className={styles['playlist-button']}
+                                    title={t('PLAYER_OPEN_IN_EXTERNAL')}
+                                    href={player.selected.stream.deepLinks.externalPlayer.playlist}
+                                    download={player.selected.stream.deepLinks.externalPlayer.fileName}
+                                    target={'_blank'}
+                                >
                                     <Icon className={styles['icon']} name={'ic_downloads'} />
                                     <div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
                                 </Button>

src/routes/Settings/useProfileSettingsInputs.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const { useTranslation } = require('react-i18next');
 const { useServices } = require('stremio/services');
-const { CONSTANTS, interfaceLanguages, languageNames, externalPlayerOptions } = require('stremio/common');
+const { CONSTANTS, interfaceLanguages, languageNames, platform } = require('stremio/common');
 
 const useProfileSettingsInputs = (profile) => {
     const { t } = useTranslation();
@@ -211,13 +211,15 @@ const useProfileSettingsInputs = (profile) => {
         }
     }), [profile.settings]);
     const playInExternalPlayerSelect = React.useMemo(() => ({
-        options: externalPlayerOptions.map((opt) => ({
+        options: CONSTANTS.EXTERNAL_PLAYERS
-            value: opt.value,
+            .filter(({ platforms }) => platforms.includes(platform.name))
-            label: t(opt.label),
+            .map(({ label, value }) => ({
-        })),
+                value,
+                label: t(label),
+            })),
         selected: [profile.settings.playerType],
         renderLabelText: () => {
-            const selectedOption = externalPlayerOptions.find(({ value }) => value === profile.settings.playerType);
+            const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
             return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
         },
         onSelect: (event) => {