Merge branch 'development' of https://github.com/Stremio/stremio-web into feat/translate-catalog-names

.dockerignore

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

manifest.json

@@ -1,40 +0,0 @@
-{
-    "short_name": "Stremio",
-    "name": "Stremio Web",
-    "description": "Freedom To Stream",
-    "icons": [
-        {
-            "src": "favicons/favicon.ico",
-            "sizes": "64x64 32x32 24x24 16x16",
-            "type": "image/x-icon"
-        },
-        {
-            "src": "images/icon_x192.png",
-            "type": "image/png",
-            "sizes": "192x192"
-        },
-        {
-            "src": "images/icon_x512.png",
-            "type": "image/png",
-            "sizes": "512x512"
-        },
-        {
-            "src": "images/maskable_icon_x192.png",
-            "type": "image/png",
-            "sizes": "192x192",
-            "purpose": "maskable"
-        },
-        {
-            "src": "images/maskable_icon_x512.png",
-            "type": "image/png",
-            "sizes": "512x512",
-            "purpose": "maskable"
-        }
-    ],
-    "start_url": "https://web.stremio.com",
-    "scope": "https://web.stremio.com",
-    "display": "standalone",
-    "orientation": "any",
-    "theme_color": "#2a2843",
-    "background_color": "#161523"
-}

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",
-        "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#f5587521902320be9b97ecf5e1c5c38d1aa847ff",
+        "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
+        "stremio-translations": "github:Stremio/stremio-translations#f5587521902320be9b97ecf5e1c5c38d1aa847ff",
         "url": "0.11.0",
         "use-long-press": "^3.1.5"
     },
@@ -69,6 +69,7 @@
         "webpack": "5.61.0",
         "webpack-cli": "4.9.1",
         "webpack-dev-server": "^4.7.4",
+        "webpack-pwa-manifest": "^4.3.0",
         "workbox-webpack-plugin": "^6.5.3"
     }
 }

src/App/App.js

@@ -146,8 +146,10 @@ const App = () => {
                 .catch((e) => console.error(e));
         }
         return () => {
-            window.removeEventListener('focus', onWindowFocus);
-            services.core.transport.off('CoreEvent', onCoreEvent);
+            if (services.core.active) {
+                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}>
-                    <div className={styles['label']}>Try again</div>
+                <Button className={styles['button-container']} title={t('TRY_AGAIN')} onClick={reload}>
+                    <div className={styles['label']}>
+                        { t('TRY_AGAIN') }
+                    </div>
                 </Button>
-                <Button className={styles['button-container']} disabled={dataCleared} title={'Clear data'} onClick={clearData}>
-                    <div className={styles['label']}>Clear data</div>
+                <Button className={styles['button-container']} disabled={dataCleared} title={t('CLEAR_DATA')} onClick={clearData}>
+                    <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 1rem;
+            padding: 0 2.5rem;
             min-width: 8rem;
-            height: 3rem;
-            background-color: @color-accent3;
+            height: 3.5rem;
+            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/MetaItem/MetaItem.js

@@ -13,7 +13,7 @@ const useBinaryState = require('stremio/common/useBinaryState');
 const { ICON_FOR_TYPE } = require('stremio/common/CONSTANTS');
 const styles = require('./styles');
 
-const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, ...props }) => {
+const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, watched, ...props }) => {
     const { t } = useTranslation();
     const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
     const href = React.useMemo(() => {
@@ -75,6 +75,14 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste
                         :
                         null
                 }
+                {
+                    watched ?
+                        <div className={styles['watched-icon-layer']}>
+                            <Icon className={styles['watched-icon']} name={'checkmark'} />
+                        </div>
+                        :
+                        null
+                }
                 <div className={styles['poster-image-layer']}>
                     <Image
                         className={styles['poster-image']}
@@ -169,6 +177,7 @@ MetaItem.propTypes = {
     onDismissClick: PropTypes.func,
     onPlayClick: PropTypes.func,
     onClick: PropTypes.func,
+    watched: PropTypes.bool
 };
 
 module.exports = MetaItem;

src/common/MetaItem/styles.less

@@ -125,6 +125,26 @@
             }
         }
 
+        .watched-icon-layer {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 1.5rem;
+            height: 1.5rem;
+            background-color: var(--primary-accent-color);
+            border-radius: 50%;
+            margin: 0.5rem;
+
+            .watched-icon {
+                width: 0.75rem;
+                height: 0.75rem;
+                color: var(--primary-foreground-color);
+            }
+        }
+
         .poster-image-layer {
             position: absolute;
             top: 0;

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/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,
-            0 1.1rem 0.85rem @color-background-dark5-20;
+        box-shadow: var(--outer-glow);
         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 useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const useTranslate = require('./useTranslate');
 const platform = require('./platform');
-const externalPlayerOptions = require('./externalPlayerOptions');
+const EventModal = require('./EventModal');
 
 module.exports = {
     AddonDetailsModal,
@@ -95,5 +95,5 @@ module.exports = {
     useTorrent,
     useTranslate,
     platform,
-    externalPlayerOptions,
+    EventModal,
 };

src/index.html

@@ -6,10 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Stremio">
-    <link rel="icon" type="image/png" sizes="96x96" href="<%= htmlWebpackPlugin.options.faviconsPath %>/icon-96.png">
-    <link rel="manifest" href="<%= htmlWebpackPlugin.options.manifestPath %>" />
-    <meta name="theme-color" content="<%= htmlWebpackPlugin.options.themeColor %>">
-    <link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.options.imagesPath %>/icon_x192.png">
+    <link rel="icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/favicon.ico">
     <title>Stremio - Freedom to Stream</title>
     <%= htmlWebpackPlugin.tags.headTags %>
 </head>

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' ?
-                platform.isMobile() || !haveStreamingServer ?
-                    (deepLinks.externalPlayer.openPlayer || {})[platform.name] || deepLinks.externalPlayer.href
-                    : null
-                :
-                typeof deepLinks.player === 'string' ?
-                    deepLinks.player
+            deepLinks.externalPlayer ?
+                deepLinks.externalPlayer.web ?
+                    deepLinks.externalPlayer.web
                     :
-                    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) {
-            // 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') {
+        if (profile.settings.playerType !== null) {
             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]);
-    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]);
+    }, [props.onClick, profile.settings, markVideoAsWatched]);
+
     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,
-            fileName: PropTypes.string,
+            download: PropTypes.string,
             streaming: PropTypes.string,
+            playlist: PropTypes.string,
+            fileName: PropTypes.string,
+            web: PropTypes.string,
             openPlayer: PropTypes.shape({
-                choose: PropTypes.shape({
-                    ios: PropTypes.string,
-                    android: PropTypes.string,
-                    windows: PropTypes.string,
-                    macos: 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
-                }),
+                ios: PropTypes.string,
+                android: PropTypes.string,
+                windows: PropTypes.string,
+                macos: PropTypes.string,
+                linux: PropTypes.string,
             })
         })
     }),

src/routes/Player/Player.js

@@ -27,11 +27,8 @@ const styles = require('./styles');
 const Player = ({ urlParams, queryParams }) => {
     const { t } = useTranslation();
     const { chromecast, shell, core } = useServices();
-    const [forceTranscoding, maxAudioChannels] = React.useMemo(() => {
-        return [
-            queryParams.has('forceTranscoding'),
-            queryParams.has('maxAudioChannels') ? parseInt(queryParams.get('maxAudioChannels'), 10) : null
-        ];
+    const forceTranscoding = React.useMemo(() => {
+        return queryParams.has('forceTranscoding');
     }, [queryParams]);
     const [player, videoParamsChanged, timeChanged, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
@@ -263,8 +260,7 @@ const Player = ({ urlParams, queryParams }) => {
         setError(null);
         if (player.selected === null) {
             dispatch({ type: 'command', commandName: 'unload' });
-        } else if (streamingServer.baseUrl !== null && streamingServer.baseUrl.type !== 'Loading' &&
-            (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',
@@ -288,13 +284,10 @@ const Player = ({ urlParams, queryParams }) => {
                         :
                         0,
                     forceTranscoding: forceTranscoding || casting,
-                    maxAudioChannels: typeof maxAudioChannels === 'number' ?
-                        maxAudioChannels
-                        :
-                        null,
-                    streamingServerURL: streamingServer.baseUrl.type === 'Ready' ?
+                    maxAudioChannels: settings.surroundSound ? 32 : 2,
+                    streamingServerURL: streamingServer.baseUrl ?
                         casting ?
-                            streamingServer.baseUrl.content
+                            streamingServer.baseUrl
                             :
                             streamingServer.selected.transportUrl
                         :
@@ -306,7 +299,7 @@ const Player = ({ urlParams, queryParams }) => {
                 shellTransport: shell.active ? shell.transport : null,
             });
         }
-    }, [streamingServer.baseUrl, player.selected, player.metaItem, forceTranscoding, maxAudioChannels, casting]);
+    }, [streamingServer.baseUrl, player.selected, player.metaItem, forceTranscoding, casting]);
     React.useEffect(() => {
         if (videoState.stream !== null) {
             dispatch({
@@ -654,8 +647,14 @@ const Player = ({ urlParams, queryParams }) => {
                                 null
                         }
                         {
-                            player.selected !== 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'}>
+                            player.selected?.stream?.deepLinks?.externalPlayer?.playlist !== null ?
+                                <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/Settings.js

@@ -34,6 +34,7 @@ const Settings = () => {
         subtitlesBackgroundColorInput,
         subtitlesOutlineColorInput,
         audioLanguageSelect,
+        surroundSoundCheckbox,
         seekTimeDurationSelect,
         seekShortTimeDurationSelect,
         escExitFullscreenCheckbox,
@@ -405,6 +406,16 @@ const Settings = () => {
                                 {...audioLanguageSelect}
                             />
                         </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>{ t('SETTINGS_SURROUND_SOUND') }</div>
+                            </div>
+                            <Checkbox
+                                className={classnames(styles['option-input-container'], styles['checkbox-container'])}
+                                tabIndex={-1}
+                                {...surroundSoundCheckbox}
+                            />
+                        </div>
                     </div>
                     <div className={styles['section-container']}>
                         <div className={styles['section-category-container']}>

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();
@@ -135,6 +135,21 @@ const useProfileSettingsInputs = (profile) => {
             });
         }
     }), [profile.settings]);
+    const surroundSoundCheckbox = React.useMemo(() => ({
+        checked: profile.settings.surroundSound,
+        onClick: () => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        surroundSound: !profile.settings.surroundSound
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
     const escExitFullscreenCheckbox = React.useMemo(() => ({
         checked: profile.settings.escExitFullscreen,
         onClick: () => {
@@ -196,11 +211,17 @@ const useProfileSettingsInputs = (profile) => {
         }
     }), [profile.settings]);
     const playInExternalPlayerSelect = React.useMemo(() => ({
-        options: externalPlayerOptions.map((opt) => {
-            opt.label = t(opt.label);
-            return opt;
-        }),
-        selected: [`${profile.settings.playerType || 'internal'}`],
+        options: CONSTANTS.EXTERNAL_PLAYERS
+            .filter(({ platforms }) => platforms.includes(platform.name))
+            .map(({ label, value }) => ({
+                value,
+                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',
@@ -307,6 +328,7 @@ const useProfileSettingsInputs = (profile) => {
         subtitlesBackgroundColorInput,
         subtitlesOutlineColorInput,
         audioLanguageSelect,
+        surroundSoundCheckbox,
         escExitFullscreenCheckbox,
         seekTimeDurationSelect,
         seekShortTimeDurationSelect,

src/services/KeyboardShortcuts/KeyboardShortcuts.js

@@ -35,12 +35,12 @@ function KeyboardShortcuts() {
             }
             case 'Digit4': {
                 event.preventDefault();
-                window.location = '#/settings';
+                window.location = '#/addons';
                 break;
             }
             case 'Digit5': {
                 event.preventDefault();
-                window.location = '#/addons';
+                window.location = '#/settings';
                 break;
             }
             case 'Backspace': {

src/types/models/Ctx.d.ts

@@ -37,6 +37,7 @@ type Settings = {
     subtitlesOutlineColor: string,
     subtitlesSize: number,
     subtitlesTextColor: string,
+    surroundSound: boolean,
 };
 
 type Profile = {

webpack.config.js

@@ -9,7 +9,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const WorkboxPlugin = require('workbox-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const colors = require('@stremio/stremio-colors');
+const WebpackPwaManifest = require('webpack-pwa-manifest');
 const pachageJson = require('./package.json');
 
 const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
@@ -199,7 +199,7 @@ module.exports = (env, argv) => ({
             patterns: [
                 { from: 'favicons', to: `${COMMIT_HASH}/favicons` },
                 { from: 'images', to: `${COMMIT_HASH}/images` },
-                { from: 'manifest.json', to: `${COMMIT_HASH}/manifest.json` },
+                { from: 'screenshots/*.webp', to: `${COMMIT_HASH}` },
             ]
         }),
         new MiniCssExtractPlugin({
@@ -209,10 +209,59 @@ module.exports = (env, argv) => ({
             template: './src/index.html',
             inject: false,
             scriptLoading: 'blocking',
-            themeColor: colors.background,
             faviconsPath: `${COMMIT_HASH}/favicons`,
             imagesPath: `${COMMIT_HASH}/images`,
-            manifestPath: `${COMMIT_HASH}/manifest.json`,
-        })
+        }),
+        new WebpackPwaManifest({
+            name: 'Stremio Web',
+            short_name: 'Stremio',
+            description: 'Freedom To Stream',
+            background_color: '#161523',
+            theme_color: '#2a2843',
+            orientation: 'any',
+            display: 'standalone',
+            display_override: ['standalone'],
+            scope: './',
+            start_url: './',
+            publicPath: './',
+            icons: [
+                {
+                    src: 'images/icon.png',
+                    destination: `${COMMIT_HASH}/images`,
+                    sizes: [196, 512],
+                    purpose: 'any',
+                    ios: true,
+                },
+                {
+                    src: 'images/maskable_icon.png',
+                    destination: `${COMMIT_HASH}/images`,
+                    sizes: [196, 512],
+                    purpose: 'maskable',
+                },
+                {
+                    src: 'favicons/favicon.ico',
+                    destination: `${COMMIT_HASH}/favicons`,
+                    sizes: [256],
+                }
+            ],
+            screenshots : [
+                {
+                    src: `${COMMIT_HASH}/screenshots/board_wide.webp`,
+                    sizes: '1440x900',
+                    type: 'image/webp',
+                    form_factor: 'wide',
+                    label: 'Homescreen of Stremio'
+                },
+                {
+                    src: `${COMMIT_HASH}/screenshots/board_narrow.webp`,
+                    sizes: '414x896',
+                    type: 'image/webp',
+                    form_factor: 'narrow',
+                    label: 'Homescreen of Stremio'
+                }
+            ],
+            fingerprints: false,
+            ios: true
+        }),
     ].filter(Boolean)
 });