Merge branch 'development' of https://github.com/Stremio/stremio-web into feat/remote-https-endpoint

.dockerignore

@@ -1,2 +0,0 @@
-screenshots/*
-screenshots*

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "stremio",
-    "version": "5.0.0-beta.0",
+    "version": "5.0.0-beta.4",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "stremio",
-            "version": "5.0.0-beta.0",
+            "version": "5.0.0-beta.4",
             "license": "gpl-2.0",
             "dependencies": {
                 "@babel/runtime": "7.16.0",
@@ -35,8 +35,8 @@
                 "react-focus-lock": "2.9.1",
                 "react-i18next": "^12.1.1",
                 "react-is": "18.2.0",
-                "spatial-navigation-polyfill": "git+ssh://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
+                "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-                "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#8e30d9961402a7389f1a6209d9dab5592f32c9d7",
+                "stremio-translations": "github:Stremio/stremio-translations#13c8241ca262541813ce0e2df4ff3e289fbd391b",
                 "url": "0.11.0",
                 "use-long-press": "^3.1.5"
             },
@@ -13523,7 +13523,7 @@
         },
         "node_modules/spatial-navigation-polyfill": {
             "version": "1.2.0",
-            "resolved": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
+            "resolved": "git+ssh://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
             "integrity": "sha512-zREQWdiN2VSugD90lq0uBsSBjT/YtytCijN83V6LEJTRmAe/fMYUtjUtYr7UvBrSPxfnSM54BNq9r2kKFTJvlQ==",
             "license": "MIT"
         },
@@ -13600,9 +13600,8 @@
             }
         },
         "node_modules/stremio-translations": {
-            "version": "1.44.3",
+            "version": "1.44.4",
-            "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#8e30d9961402a7389f1a6209d9dab5592f32c9d7",
+            "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#13c8241ca262541813ce0e2df4ff3e289fbd391b",
-            "integrity": "sha512-E8UqbRzVQzDFQvKLTztrtA2V8xL8JeYfi+hI9IWx9kwIMQ34no2hxuualXH7A4U0s8xlM6BQW4bcQlVKwflhEg==",
             "license": "MIT"
         },
         "node_modules/string_decoder": {
@@ -25940,9 +25939,9 @@
             "dev": true
         },
         "spatial-navigation-polyfill": {
-            "version": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
+            "version": "git+ssh://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
             "integrity": "sha512-zREQWdiN2VSugD90lq0uBsSBjT/YtytCijN83V6LEJTRmAe/fMYUtjUtYr7UvBrSPxfnSM54BNq9r2kKFTJvlQ==",
-            "from": "spatial-navigation-polyfill@git+ssh://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6"
+            "from": "spatial-navigation-polyfill@github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6"
         },
         "spdy": {
             "version": "4.0.2",
@@ -26007,9 +26006,8 @@
             "dev": true
         },
         "stremio-translations": {
-            "version": "git+ssh://git@github.com/Stremio/stremio-translations.git#8e30d9961402a7389f1a6209d9dab5592f32c9d7",
+            "version": "git+ssh://git@github.com/Stremio/stremio-translations.git#13c8241ca262541813ce0e2df4ff3e289fbd391b",
-            "integrity": "sha512-E8UqbRzVQzDFQvKLTztrtA2V8xL8JeYfi+hI9IWx9kwIMQ34no2hxuualXH7A4U0s8xlM6BQW4bcQlVKwflhEg==",
+            "from": "stremio-translations@github:Stremio/stremio-translations#13c8241ca262541813ce0e2df4ff3e289fbd391b"
-            "from": "stremio-translations@git+ssh://git@github.com/Stremio/stremio-translations.git#8e30d9961402a7389f1a6209d9dab5592f32c9d7"
         },
         "string_decoder": {
             "version": "1.1.1",

package.json

@@ -1,7 +1,7 @@
 {
     "name": "stremio",
     "displayName": "Stremio",
-    "version": "5.0.0-beta.0",
+    "version": "5.0.0-beta.4",
     "author": "Smart Code OOD",
     "private": true,
     "license": "gpl-2.0",
@@ -38,8 +38,8 @@
         "react-focus-lock": "2.9.1",
         "react-i18next": "^12.1.1",
         "react-is": "18.2.0",
-        "spatial-navigation-polyfill": "git+ssh://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
+        "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-        "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#8e30d9961402a7389f1a6209d9dab5592f32c9d7",
+        "stremio-translations": "github:Stremio/stremio-translations#13c8241ca262541813ce0e2df4ff3e289fbd391b",
         "url": "0.11.0",
         "use-long-press": "^3.1.5"
     },

src/App/App.js

@@ -146,8 +146,10 @@ const App = () => {
                 .catch((e) => console.error(e));
         }
         return () => {
-            window.removeEventListener('focus', onWindowFocus);
+            if (services.core.active) {
-            services.core.transport.off('CoreEvent', onCoreEvent);
+                window.removeEventListener('focus', onWindowFocus);
+                services.core.transport.off('CoreEvent', onCoreEvent);
+            }
         };
     }, [initialized]);
     return (

src/App/ErrorDialog/ErrorDialog.js

@@ -1,12 +1,15 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
+const { useTranslation } = require('react-i18next');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { Button, Image } = require('stremio/common');
 const styles = require('./styles');
 
 const ErrorDialog = ({ className }) => {
+    const { t } = useTranslation();
+
     const [dataCleared, setDataCleared] = React.useState(false);
     const reload = React.useCallback(() => {
         window.location.reload();
@@ -22,13 +25,19 @@ const ErrorDialog = ({ className }) => {
                 src={require('/images/empty.png')}
                 alt={' '}
             />
-            <div className={styles['error-message']}>Something went wrong!</div>
+            <div className={styles['error-message']}>
+                { t('GENERIC_ERROR_MESSAGE') }
+            </div>
             <div className={styles['buttons-container']}>
-                <Button className={styles['button-container']} title={'Try again'} onClick={reload}>
+                <Button className={styles['button-container']} title={t('TRY_AGAIN')} onClick={reload}>
-                    <div className={styles['label']}>Try again</div>
+                    <div className={styles['label']}>
+                        { t('TRY_AGAIN') }
+                    </div>
                 </Button>
-                <Button className={styles['button-container']} disabled={dataCleared} title={'Clear data'} onClick={clearData}>
+                <Button className={styles['button-container']} disabled={dataCleared} title={t('CLEAR_DATA')} onClick={clearData}>
-                    <div className={styles['label']}>Clear data</div>
+                    <div className={styles['label']}>
+                        { t('CLEAR_DATA') }
+                    </div>
                 </Button>
             </div>
         </div>

src/App/ErrorDialog/styles.less

@@ -7,12 +7,12 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 1rem;
 
     .error-image {
         flex: none;
         width: 12rem;
         height: 12rem;
-        margin-bottom: 1rem;
         object-fit: contain;
         object-position: center;
         opacity: 0.9;
@@ -24,7 +24,7 @@
         font-size: 2rem;
         max-height: 3.6em;
         text-align: center;
-        color: @color-surface-light5-90;
+        color: var(--primary-foreground-color);
     }
 
     .buttons-container {
@@ -36,6 +36,8 @@
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
+        gap: 1.5rem;
+        margin-top: 1rem;
 
         .button-container {
             flex-grow: 0;
@@ -45,18 +47,23 @@
             flex-direction: row;
             align-items: center;
             justify-content: center;
-            margin: 2rem 1rem 0;
+            padding: 0 2.5rem;
-            padding: 0 1rem;
             min-width: 8rem;
-            height: 3rem;
+            height: 3.5rem;
-            background-color: @color-accent3;
+            border-radius: 3.5rem;
+            background-color: var(--overlay-color);
 
             &:hover {
-                background-color: @color-accent3-light1;
+                outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+                background-color: transparent;
+            }
+
+            &:active {
+                outline: none;
             }
 
             &:global(.disabled) {
-                background-color: @color-surface-dark5;
+                opacity: 0.3;
             }
 
             .label {
@@ -67,7 +74,7 @@
                 font-size: 1.1rem;
                 font-weight: 500;
                 text-align: center;
-                color: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
         }
     }

src/App/styles.less

@@ -144,7 +144,6 @@ html {
             .loader-container, .error-container {
                 width: 100%;
                 height: 100%;
-                background-color: @color-background-dark2;
             }
         }
     }

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/EventModal/EventModal.js

@@ -0,0 +1,90 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const { useTranslation } = require('react-i18next');
+const Button = require('stremio/common/Button');
+const ModalDialog = require('stremio/common/ModalDialog');
+const useEvents = require('./useEvents');
+const styles = require('./styles');
+const { default: Icon } = require('@stremio/stremio-icons/react');
+
+const EventModal = () => {
+    const { t } = useTranslation();
+
+    const { events, pullEvents, dismissEvent } = useEvents();
+
+    const modal = React.useMemo(() => {
+        return events?.modal?.type === 'Ready' ?
+            events.modal.content
+            :
+            null;
+    }, [events]);
+
+    const onClose = React.useCallback(() => {
+        modal?.id && dismissEvent(modal.id);
+    }, [modal]);
+
+    React.useEffect(() => {
+        pullEvents();
+    }, []);
+
+    return (
+        modal !== null ?
+            <ModalDialog className={styles['event-modal']} onCloseRequest={onClose}>
+                {
+                    modal.imageUrl ?
+                        <img className={styles['image']} src={modal.imageUrl} />
+                        :
+                        null
+                }
+                <div className={styles['info-container']}>
+                    <div className={styles['title-container']}>
+                        {
+                            modal.title ?
+                                <div className={styles['title']}>{modal.title}</div>
+                                :
+                                null
+                        }
+                        {
+                            modal.message ?
+                                <div className={styles['label']}>{modal.message}</div>
+                                :
+                                null
+                        }
+                    </div>
+                    {
+                        modal?.addon?.name ?
+                            <div className={styles['addon-container']}>
+                                <Icon className={styles['icon']} name={'addons'} />
+                                <div className={styles['name']}>
+                                    { modal.addon.name }
+                                </div>
+                            </div>
+                            :
+                            null
+                    }
+                    {
+                        modal?.addon?.manifestUrl ?
+                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(modal.addon.manifestUrl)}`} onClick={onClose}>
+                                <div className={styles['button-label']}>
+                                    { t('INSTALL_ADDON') }
+                                </div>
+                            </Button>
+                            :
+                            modal.externalUrl ?
+                                <Button className={styles['action-button']} href={modal.externalUrl} target={'_blank'}>
+                                    <div className={styles['button-label']}>
+                                        { t('LEARN_MORE') }
+                                    </div>
+                                </Button>
+                                :
+                                null
+                    }
+                </div>
+            </ModalDialog>
+            :
+            null
+    );
+};
+
+module.exports = EventModal;

src/common/EventModal/index.js

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const EventModal = require('./EventModal');
+
+module.exports = EventModal;

src/common/EventModal/styles.less

@@ -0,0 +1,119 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+:import('~stremio/common/ModalDialog/styles.less') {
+    modal-dialog-content: modal-dialog-content;
+    modal-dialog-container: modal-dialog-container;
+}
+
+.event-modal {
+    backdrop-filter: blur(10px);
+
+    .modal-dialog-container {
+        overflow: visible;
+        max-width: 45rem;
+
+        .modal-dialog-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            overflow: visible;
+    
+            .image {
+                width: 100%;
+                height: 100%;
+                margin-top: -10rem;
+            }
+        
+            .info-container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 2.5rem;
+                padding: 1rem 4rem;
+                margin-top: -7rem;
+        
+                .title-container {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1rem;
+
+                    .title {
+                        color: var(--primary-foreground-color);
+                        font-size: 1.325rem;
+                        text-align: center;
+                        padding: 0 6rem;
+                    }
+        
+                    .label {
+                        color: var(--primary-foreground-color);
+                        font-size: 1rem;
+                        text-align: center;
+                        opacity: 0.5;
+                    }
+                }
+        
+                .addon-container {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    gap: 0.5rem;
+
+                    .icon {
+                        height: 2rem;
+                        width: 2rem;
+                        color: var(--primary-accent-color);
+                    }
+
+                    .name {
+                        color: var(--primary-foreground-color);
+                    }
+                }
+        
+                .action-button {
+                    background-color: var(--primary-foreground-color);
+                    border: 2px solid var(--primary-foreground-color);
+                    padding: 0.8rem 2rem;
+                    border-radius: 2rem;
+        
+                    .button-label {
+                        color: var(--primary-accent-color);
+                        font-size: 1rem;
+                        font-weight: 700;
+                    }
+        
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: @minimum) {
+        .modal-dialog-container {
+            .modal-dialog-content {
+                .image {
+                    height: 125%;
+                    width: 125%;
+                }
+
+                .info-container {
+                    .title-container {
+                        .title {
+                            padding: 0rem;
+                            font-size: 1rem;
+                        }
+
+                        .label {
+                            font-size: 0.875rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/common/EventModal/useEvents.js

@@ -0,0 +1,36 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const useModelState = require('stremio/common/useModelState');
+const { useServices } = require('stremio/services');
+
+const map = (ctx) => ({
+    ...ctx.events,
+});
+
+const useEvents = () => {
+    const { core } = useServices();
+
+    const pullEvents = () => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'GetEvents',
+            },
+        });
+    };
+
+    const dismissEvent = (id) => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'DismissEvent',
+                args: id,
+            },
+        });
+    };
+
+    const events = useModelState({ model: 'ctx', map });
+    return { events, pullEvents, dismissEvent };
+};
+
+module.exports = useEvents;

src/common/Multiselect/Multiselect.js

@@ -14,13 +14,17 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
     const options = React.useMemo(() => {
         return Array.isArray(props.options) ?
-            props.options
+            props.options.filter((option) => {
+                return option && (typeof option.value === 'string' || option.value === null);
+            })
             :
             [];
     }, [props.options]);
     const selected = React.useMemo(() => {
         return Array.isArray(props.selected) ?
-            props.selected
+            props.selected.filter((value) => {
+                return typeof value === 'string' || value === null;
+            })
             :
             [];
     }, [props.selected]);

src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js

@@ -7,6 +7,7 @@ const { useRouteFocused } = require('stremio-router');
 const Popup = require('stremio/common/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
 const NavMenuContent = require('./NavMenuContent');
+const styles = require('./styles.less');
 
 const NavMenu = (props) => {
     const routeFocused = useRouteFocused();
@@ -42,6 +43,7 @@ const NavMenu = (props) => {
             onCloseRequest={closeMenu}
             renderLabel={renderLabel}
             renderMenu={renderMenu}
+            className={styles['nav-menu-popup-label']}
         />
     );
 };

src/common/NavBar/HorizontalNavBar/NavMenu/styles.less

@@ -3,6 +3,15 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
+:import('~stremio/common/Popup/styles.less') {
+    popup-menu-container: menu-container;
+}
+
+.nav-menu-popup-label {
+    .popup-menu-container {
+        margin-top: 1rem;
+    }
+}
 .nav-menu-container {
     width: 22rem;
     max-height: calc(100vh - var(--horizontal-nav-bar-size));

src/common/NavBar/VerticalNavBar/NavTabButton/styles.less

@@ -40,14 +40,19 @@
 
     .label {
         flex: none;
+        position: relative;
+        max-width: 100%;
         max-height: 2.4em;
-        padding: 0 0.2rem;
+        padding: 0 0.5rem;
         font-size: 0.8rem;
         font-weight: 500;
         letter-spacing: 0.01rem;
         text-align: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
         color: var(--primary-foreground-color);
         opacity: 0;
+        overflow: hidden;
     }
 }
 

src/common/Popup/styles.less

@@ -17,8 +17,7 @@
         visibility: hidden;
         border-radius: var(--border-radius);
         background-color: var(--modal-background-color);
-        box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
+        box-shadow: var(--outer-glow);
-            0 1.1rem 0.85rem @color-background-dark5-20;
         cursor: auto;
 
         &.menu-direction-top-left {

src/common/externalPlayerOptions.js

@@ -1,29 +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 (['windows', 'macos', '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,7 @@ 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 = {
     AddonDetailsModal,
@@ -95,5 +95,5 @@ module.exports = {
     useStreamingServer,
     useTorrent,
     platform,
-    externalPlayerOptions,
+    EventModal,
 };

src/routes/Board/Board.js

@@ -4,7 +4,7 @@ const React = require('react');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
-const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
+const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
@@ -38,6 +38,7 @@ const Board = () => {
     }, [board.catalogs, onVisibleRangeChange]);
     return (
         <div className={styles['board-container']}>
+            <EventModal />
             <MainNavBars className={styles['board-content-container']} route={'board'}>
                 <div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
                     {

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

@@ -4,31 +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(() => {
-        const haveStreamingServer = streamingServer.settings !== null && streamingServer.settings.type === 'Ready';
         return deepLinks ?
-            profile.settings.playerType && profile.settings.playerType !== 'internal' ?
+            deepLinks.externalPlayer ?
-                platform.isMobile() || !haveStreamingServer ?
+                deepLinks.externalPlayer.web ?
-                    (deepLinks.externalPlayer.openPlayer || {})[platform.name] || deepLinks.externalPlayer.href
+                    deepLinks.externalPlayer.web
-                    : null
-                :
-                typeof deepLinks.player === 'string' ?
-                    deepLinks.player
                     :
-                    null
+                    deepLinks.externalPlayer.openPlayer ?
+                        deepLinks.externalPlayer.openPlayer[platform.name] ?
+                            deepLinks.externalPlayer.openPlayer[platform.name]
+                            :
+                            deepLinks.externalPlayer.playlist
+                        :
+                        deepLinks.player
+                :
+                deepLinks.player
             :
             null;
-    }, [deepLinks, profile, streamingServer]);
+    }, [deepLinks]);
+
+    const download = React.useMemo(() => {
+        return href === deepLinks?.externalPlayer?.playlist ?
+            deepLinks.externalPlayer.fileName
+            :
+            null;
+    }, [href, deepLinks]);
+
+    const target = React.useMemo(() => {
+        return href === deepLinks?.externalPlayer?.web ?
+            '_blank'
+            :
+            null;
+    }, [href, deepLinks]);
+
     const markVideoAsWatched = React.useCallback(() => {
         if (typeof videoId === 'string') {
             core.transport.dispatch({
@@ -40,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',
@@ -63,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 ?
@@ -123,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,11 +211,17 @@ const useProfileSettingsInputs = (profile) => {
         }
     }), [profile.settings]);
     const playInExternalPlayerSelect = React.useMemo(() => ({
-        options: externalPlayerOptions.map((opt) => {
+        options: CONSTANTS.EXTERNAL_PLAYERS
-            opt.label = t(opt.label);
+            .filter(({ platforms }) => platforms.includes(platform.name))
-            return opt;
+            .map(({ label, value }) => ({
-        }),
+                value,
-        selected: [`${profile.settings.playerType || 'internal'}`],
+                label: t(label),
+            })),
+        selected: [profile.settings.playerType],
+        renderLabelText: () => {
+            const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
+            return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
+        },
         onSelect: (event) => {
             core.transport.dispatch({
                 action: 'Ctx',