Merge branch 'development' of https://github.com/Stremio/stremio-web into refactor/video-player

.dockerignore

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

.github/workflows/build.yml

@@ -3,7 +3,7 @@ name: Build
 on:
   push:
     branches:
-      - '*'
+      - '**'
 
 jobs:
   build:

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",
@@ -15,7 +15,7 @@
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
-        "@stremio/stremio-core-web": "0.44.30",
+        "@stremio/stremio-core-web": "0.46.0",
         "@stremio/stremio-icons": "5.0.0-beta.3",
         "@stremio/stremio-video": "0.0.26",
         "a-color-picker": "1.2.1",
@@ -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#9c91862cdf8f1f0fb54df870807cd6af18679a89",
+        "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/MetaRow/MetaRow.js

@@ -4,39 +4,47 @@ const React = require('react');
 const ReactIs = require('react-is');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const CONSTANTS = require('stremio/common/CONSTANTS');
+const useTranslate = require('stremio/common/useTranslate');
 const MetaRowPlaceholder = require('./MetaRowPlaceholder');
 const styles = require('./styles');
 
-const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => {
-    const { t } = useTranslation();
+const MetaRow = ({ className, title, catalog, message, itemComponent }) => {
+    const t = useTranslate();
+
+    const catalogTitle = React.useMemo(() => {
+        return title ?? t.catalogTitle(catalog);
+    }, [title, catalog, t.catalogTitle]);
+
+    const items = React.useMemo(() => {
+        return catalog?.items ?? catalog?.content?.content;
+    }, [catalog]);
+
+    const href = React.useMemo(() => {
+        return catalog?.deepLinks?.discover ?? catalog?.deepLinks?.library;
+    }, [catalog]);
+
     return (
         <div className={classnames(className, styles['meta-row-container'])}>
-            {
-                (typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ?
-                    <div className={styles['header-container']}>
-                        {
-                            typeof title === 'string' && title.length > 0 ?
-                                <div className={styles['title-container']} title={title}>{title}</div>
-                                :
-                                null
-                        }
-                        {
-                            deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ?
-                                <Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
-                                    <div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
-                                    <Icon className={styles['icon']} name={'chevron-forward'} />
-                                </Button>
-                                :
-                                null
-                        }
-                    </div>
-                    :
-                    null
-            }
+            <div className={styles['header-container']}>
+                {
+                    typeof catalogTitle === 'string' && catalogTitle.length > 0 ?
+                        <div className={styles['title-container']} title={catalogTitle}>{catalogTitle}</div>
+                        :
+                        null
+                }
+                {
+                    href ?
+                        <Button className={styles['see-all-container']} title={t.string('BUTTON_SEE_ALL')} href={href} tabIndex={-1}>
+                            <div className={styles['label']}>{ t.string('BUTTON_SEE_ALL') }</div>
+                            <Icon className={styles['icon']} name={'chevron-forward'} />
+                        </Button>
+                        :
+                        null
+                }
+            </div>
             {
                 typeof message === 'string' && message.length > 0 ?
                     <div className={styles['message-container']} title={message}>{message}</div>
@@ -69,14 +77,33 @@ MetaRow.propTypes = {
     className: PropTypes.string,
     title: PropTypes.string,
     message: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-        posterShape: PropTypes.string
-    })),
+    catalog: PropTypes.shape({
+        id: PropTypes.string,
+        name: PropTypes.string,
+        type: PropTypes.string,
+        addon: PropTypes.shape({
+            manifest: PropTypes.shape({
+                id: PropTypes.string,
+                name: PropTypes.string,
+            }),
+        }),
+        content: PropTypes.shape({
+            content: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.arrayOf(PropTypes.shape({
+                    posterShape: PropTypes.string,
+                })),
+            ]),
+        }),
+        items: PropTypes.arrayOf(PropTypes.shape({
+            posterShape: PropTypes.string,
+        })),
+        deepLinks: PropTypes.shape({
+            discover: PropTypes.string,
+            library: PropTypes.string,
+        }),
+    }),
     itemComponent: PropTypes.elementType,
-    deepLinks: PropTypes.shape({
-        discover: PropTypes.string,
-        library: PropTypes.string
-    })
 };
 
 module.exports = MetaRow;

src/common/ModalDialog/styles.less

@@ -84,6 +84,7 @@
         }
     }
 }
+
 .action-button {
     flex: 1;
     display: flex;
@@ -126,7 +127,6 @@
         text-align: center;
         color: var(--primary-foreground-color);
     }
-
 }
 
 @media only screen and (max-width: @minimum) {
@@ -137,6 +137,20 @@
             max-width: initial;
             z-index: 0;
             padding: 0 1.5rem;
+
+            .buttons-container {
+                flex-direction: column;
+                gap: 1rem;
+            }
+        }
+
+        .action-button {
+            width: 100%;
+
+            .label {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
     }
 }

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/HorizontalNavBar/SearchBar/SearchBar.js

@@ -3,6 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useRouteFocused } = require('stremio-router');
@@ -10,37 +11,92 @@ const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
 const useTorrent = require('stremio/common/useTorrent');
 const { withCoreSuspender } = require('stremio/common/CoreSuspender');
+const useSearchHistory = require('./useSearchHistory');
+const useLocalSearch = require('./useLocalSearch');
 const styles = require('./styles');
+const useBinaryState = require('stremio/common/useBinaryState');
 
-const SearchBar = ({ className, query, active }) => {
+const SearchBar = React.memo(({ className, query, active }) => {
     const { t } = useTranslation();
     const routeFocused = useRouteFocused();
+    const searchHistory = useSearchHistory();
+    const localSearch = useLocalSearch();
     const { createTorrentFromMagnet } = useTorrent();
+
+    const [historyOpen, openHistory, closeHistory, ] = useBinaryState(false);
+    const [currentQuery, setCurrentQuery] = React.useState(query || '');
+
     const searchInputRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+
     const searchBarOnClick = React.useCallback(() => {
         if (!active) {
             window.location = '#/search';
         }
     }, [active]);
+
+    const searchHistoryOnClose = React.useCallback((event) => {
+        if (historyOpen && containerRef.current && !containerRef.current.contains(event.target)) {
+            closeHistory();
+        }
+    }, [historyOpen]);
+
+    React.useEffect(() => {
+        document.addEventListener('mousedown', searchHistoryOnClose);
+        return () => {
+            document.removeEventListener('mousedown', searchHistoryOnClose);
+        };
+    }, [searchHistoryOnClose]);
+
     const queryInputOnChange = React.useCallback(() => {
+        const value = searchInputRef.current.value;
+        setCurrentQuery(value);
+        openHistory();
         try {
-            createTorrentFromMagnet(searchInputRef.current.value);
-            // eslint-disable-next-line no-empty
-        } catch { }
-    }, []);
-    const queryInputOnSubmit = React.useCallback(() => {
-        if (searchInputRef.current !== null) {
-            const queryParams = new URLSearchParams([['search', searchInputRef.current.value]]);
-            window.location = `#/search?${queryParams.toString()}`;
+            createTorrentFromMagnet(value);
+        } catch (error) {
+            console.error('Failed to create torrent from magnet:', error);
+        }
+    }, [createTorrentFromMagnet]);
+
+    const queryInputOnSubmit = React.useCallback((event) => {
+        event.preventDefault();
+        const searchValue = `/search?search=${event.target.value}`;
+        setCurrentQuery(searchValue);
+        if (searchInputRef.current && searchValue) {
+            window.location.hash = searchValue;
+            closeHistory();
         }
     }, []);
+
+    const queryInputClear = React.useCallback(() => {
+        searchInputRef.current.value = '';
+        setCurrentQuery('');
+        window.location.hash = '/search';
+    }, []);
+
+    const updateLocalSearchDebounced = React.useCallback(debounce((query) => {
+        localSearch.search(query);
+    }, 250), []);
+
+    React.useEffect(() => {
+        updateLocalSearchDebounced(currentQuery);
+    }, [currentQuery]);
+
     React.useEffect(() => {
         if (routeFocused && active) {
             searchInputRef.current.focus();
         }
-    }, [routeFocused, active, query]);
+    }, [routeFocused, active]);
+
+    React.useEffect(() => {
+        return () => {
+            updateLocalSearchDebounced.cancel();
+        };
+    }, []);
+
     return (
-        <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
+        <div className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick} ref={containerRef}>
             {
                 active ?
                     <TextInput
@@ -53,18 +109,72 @@ const SearchBar = ({ className, query, active }) => {
                         tabIndex={-1}
                         onChange={queryInputOnChange}
                         onSubmit={queryInputOnSubmit}
+                        onClick={openHistory}
                     />
                     :
                     <div className={styles['search-input']}>
                         <div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
                     </div>
             }
-            <Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
-                <Icon className={styles['icon']} name={'search'} />
-            </Button>
-        </label>
+            {
+                currentQuery.length > 0 ?
+                    <Button className={styles['submit-button-container']} onClick={queryInputClear}>
+                        <Icon className={styles['icon']} name={'close'} />
+                    </Button>
+                    :
+                    <Button className={styles['submit-button-container']}>
+                        <Icon className={styles['icon']} name={'search'} />
+                    </Button>
+            }
+            {
+                historyOpen && (searchHistory?.items?.length || localSearch?.items?.length) ?
+                    <div className={styles['menu-container']}>
+                        {
+                            searchHistory?.items?.length > 0 ?
+                                <div className={styles['items']}>
+                                    <div className={styles['title']}>
+                                        <div className={styles['label']}>{ t('STREMIO_TV_SEARCH_HISTORY_TITLE') }</div>
+                                        <button className={styles['search-history-clear']} onClick={searchHistory.clear}>
+                                            { t('CLEAR_HISTORY') }
+                                        </button>
+                                    </div>
+                                    {
+                                        searchHistory.items.slice(0, 8).map(({ query, deepLinks }, index) => (
+                                            <Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
+                                                {query}
+                                            </Button>
+                                        ))
+                                    }
+                                </div>
+                                :
+                                null
+                        }
+                        {
+                            localSearch?.items?.length ?
+                                <div className={styles['items']}>
+                                    <div className={styles['title']}>
+                                        <div className={styles['label']}>{ t('Recommendations') }</div>
+                                    </div>
+                                    {
+                                        localSearch.items.map(({ query, deepLinks }, index) => (
+                                            <Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
+                                                {query}
+                                            </Button>
+                                        ))
+                                    }
+                                </div>
+                                :
+                                null
+                        }
+                    </div>
+                    :
+                    null
+            }
+        </div>
     );
-};
+});
+
+SearchBar.displayName = 'SearchBar';
 
 SearchBar.propTypes = {
     className: PropTypes.string,

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

@@ -9,6 +9,8 @@
     height: var(--search-bar-size);
     border-radius: var(--search-bar-size);
     background-color: var(--overlay-color);
+    position: relative;
+    overflow: visible;
 
     .search-input {
         flex: 1;
@@ -46,4 +48,70 @@
             opacity: 0.6;
         }
     }
+
+    .menu-container {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: auto;
+        z-index: 10;
+        padding: 1rem;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 1.5rem;
+        background-color: var(--modal-background-color);
+        border-radius: var(--border-radius);
+        
+        .label {
+            font-size: 0.9rem;
+            color: var(--primary-foreground-color);
+        }
+
+        .title {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            opacity: 0.8;
+            padding-bottom: 1rem;
+
+            .search-history-clear {
+                cursor: pointer;
+                color: var(--primary-foreground-color);
+                font-size: 0.9rem;
+
+                &:hover {
+                    opacity: 0.6;
+                }
+            }
+        }
+
+        .items {
+            width: 100%;
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            flex-direction: column;
+
+            .item {
+                width: 90%;
+                color: var(--primary-foreground-color);
+                text-align: left;
+                text-decoration: none;
+                padding: 0.5rem 1rem;
+                border-radius: var(--border-radius);
+                width: 100%;
+                cursor: pointer;
+                z-index: 10;
+
+                &:hover {
+                    background-color: var(--secondary-background-color);
+                }
+            }
+        }
+    }
 }

src/common/NavBar/HorizontalNavBar/SearchBar/useLocalSearch.d.ts

@@ -0,0 +1,2 @@
+declare const useLocalSearch: () => { items: LocalSearchItem[], search: (query: string) => void };
+export = useLocalSearch;

src/common/NavBar/HorizontalNavBar/SearchBar/useLocalSearch.js

@@ -0,0 +1,38 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const { useServices } = require('stremio/services');
+const useModelState = require('stremio/common/useModelState');
+
+const useLocalSearch = () => {
+    const { core } = useServices();
+
+    const action = React.useMemo(() => ({
+        action: 'Load',
+        args: {
+            model: 'LocalSearch',
+        }
+    }), []);
+
+    const { items } = useModelState({ model: 'local_search', action });
+
+    const search = React.useCallback((query) => {
+        core.transport.dispatch({
+            action: 'Search',
+            args: {
+                action: 'Search',
+                args: {
+                    searchQuery: query,
+                    maxResults: 5
+                }
+            },
+        });
+    }, []);
+
+    return {
+        items,
+        search,
+    };
+};
+
+module.exports = useLocalSearch;

src/common/NavBar/HorizontalNavBar/SearchBar/useSearchHistory.d.ts

@@ -0,0 +1,2 @@
+declare const useSearchHistory: () => { items: SearchHistory, clear: () => void };
+export = useSearchHistory;

src/common/NavBar/HorizontalNavBar/SearchBar/useSearchHistory.js

@@ -0,0 +1,26 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const useModelState = require('stremio/common/useModelState');
+const { useServices } = require('stremio/services');
+
+const useSearchHistory = () => {
+    const { core } = useServices();
+    const { searchHistory: items } = useModelState({ model: 'ctx' });
+
+    const clear = React.useCallback(() => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'ClearSearchHistory',
+            },
+        });
+    }, []);
+
+    return {
+        items,
+        clear,
+    };
+};
+
+module.exports = useSearchHistory;

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

@@ -32,7 +32,6 @@ const getVisibleChildrenRange = require('./getVisibleChildrenRange');
 const interfaceLanguages = require('./interfaceLanguages.json');
 const languageNames = require('./languageNames.json');
 const routesRegexp = require('./routesRegexp');
-const translateOption = require('./translateOption');
 const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
 const useFullscreen = require('./useFullscreen');
@@ -43,8 +42,9 @@ const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 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,
@@ -83,7 +83,6 @@ module.exports = {
     interfaceLanguages,
     languageNames,
     routesRegexp,
-    translateOption,
     useAnimationFrame,
     useBinaryState,
     useFullscreen,
@@ -94,6 +93,7 @@ module.exports = {
     useProfile,
     useStreamingServer,
     useTorrent,
+    useTranslate,
     platform,
-    externalPlayerOptions,
+    EventModal,
 };

src/common/translateOption.js

@@ -1,15 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const { t } = require('i18next');
-
-const translateOption = (option, translateKeyPrefix = '') => {
-    const translateKey = `${translateKeyPrefix}${option}`;
-    const translateValue = t(translateKey, {
-        defaultValue: t(translateKey.toUpperCase(), {
-            defaultValue: null
-        })
-    });
-    return translateValue ?? option.charAt(0).toUpperCase() + option.slice(1);
-};
-
-module.exports = translateOption;

src/common/useTranslate.js

@@ -0,0 +1,43 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const { useCallback } = require('react');
+const { useTranslation } = require('react-i18next');
+
+const useTranslate = () => {
+    const { t } = useTranslation();
+
+    const string = useCallback((key) => t(key), [t]);
+
+    const stringWithPrefix = useCallback((value, prefix, fallback = null) => {
+        const key = `${prefix}${value}`;
+        const defaultValue = fallback ?? value.charAt(0).toUpperCase() + value.slice(1);
+
+        return t(key, {
+            defaultValue,
+        });
+    }, [t]);
+
+    const catalogTitle = useCallback(({ addon, id, name, type } = {}, withType = true) => {
+        if (addon && id && name) {
+            const partialKey = `${addon.manifest.id}/${id}`;
+            const translatedName = stringWithPrefix(partialKey, 'CATALOG_', name);
+
+            if (type && withType) {
+                const translatedType = stringWithPrefix(type, 'TYPE_');
+                return `${translatedName} - ${translatedType}`;
+            }
+
+            return translatedName;
+        }
+
+        return null;
+    }, [stringWithPrefix]);
+
+    return {
+        string,
+        stringWithPrefix,
+        catalogTitle,
+    };
+};
+
+module.exports = useTranslate;

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/Addons/Addon/styles.less

@@ -84,7 +84,6 @@
             flex-basis: 100%;
             margin-top: 0.5rem;
             padding: 0 0.5rem;
-            max-height: 4.8em;
             color: var(--primary-foreground-color);
         }
     }
@@ -202,6 +201,11 @@
         .info-container {
             margin-left: 0.5rem;
             padding: 0;
+
+            .name-container {
+                max-height: none;
+                font-size: 1.3rem;
+            }
         }
 
         .buttons-container {

src/routes/Addons/useSelectableInputs.js

@@ -1,18 +1,17 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { t } = require('i18next');
-const { translateOption } = require('stremio/common');
+const { useTranslate } = require('stremio/common');
 
-const mapSelectableInputs = (installedAddons, remoteAddons) => {
+const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
     const catalogSelect = {
-        title: t('SELECT_CATALOG'),
+        title: t.string('SELECT_CATALOG'),
         options: remoteAddons.selectable.catalogs
             .concat(installedAddons.selectable.catalogs)
             .map(({ name, deepLinks }) => ({
                 value: deepLinks.addons,
-                label: translateOption(name, 'ADDON_'),
-                title: translateOption(name, 'ADDON_'),
+                label: t.stringWithPrefix(name, 'ADDON_'),
+                title: t.stringWithPrefix(name, 'ADDON_'),
             })),
         selected: remoteAddons.selectable.catalogs
             .concat(installedAddons.selectable.catalogs)
@@ -22,7 +21,7 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
             () => {
                 const selectableCatalog = remoteAddons.selectable.catalogs
                     .find(({ id }) => id === remoteAddons.selected.request.path.id);
-                return selectableCatalog ? translateOption(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
+                return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
             }
             :
             null,
@@ -31,16 +30,16 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
         }
     };
     const typeSelect = {
-        title: t('SELECT_TYPE'),
+        title: t.string('SELECT_TYPE'),
         options: installedAddons.selected !== null ?
             installedAddons.selectable.types.map(({ type, deepLinks }) => ({
                 value: deepLinks.addons,
-                label: type !== null ? translateOption(type, 'TYPE_') : t('TYPE_ALL')
+                label: type !== null ? t.stringWithPrefix(type, 'TYPE_') : t.string('TYPE_ALL')
             }))
             :
             remoteAddons.selectable.types.map(({ type, deepLinks }) => ({
                 value: deepLinks.addons,
-                label: translateOption(type, 'TYPE_')
+                label: t.stringWithPrefix(type, 'TYPE_')
             })),
         selected: installedAddons.selected !== null ?
             installedAddons.selectable.types
@@ -53,12 +52,12 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
         renderLabelText: () => {
             return installedAddons.selected !== null ?
                 installedAddons.selected.request.type === null ?
-                    t('TYPE_ALL')
+                    t.string('TYPE_ALL')
                     :
-                    translateOption(installedAddons.selected.request.type, 'TYPE_')
+                    t.stringWithPrefix(installedAddons.selected.request.type, 'TYPE_')
                 :
                 remoteAddons.selected !== null ?
-                    translateOption(remoteAddons.selected.request.path.type, 'TYPE_')
+                    t.stringWithPrefix(remoteAddons.selected.request.path.type, 'TYPE_')
                     :
                     typeSelect.title;
         },
@@ -70,8 +69,9 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
 };
 
 const useSelectableInputs = (installedAddons, remoteAddons) => {
+    const t = useTranslate();
     const selectableInputs = React.useMemo(() => {
-        return mapSelectableInputs(installedAddons, remoteAddons);
+        return mapSelectableInputs(installedAddons, remoteAddons, t);
     }, [installedAddons, remoteAddons]);
     return selectableInputs;
 };

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}>
                     {
@@ -45,9 +46,8 @@ const Board = () => {
                             <MetaRow
                                 className={classnames(styles['board-row'], styles['continue-watching-row'], 'animation-fade-in')}
                                 title={t('BOARD_CONTINUE_WATCHING')}
-                                items={continueWatchingPreview.items}
+                                catalog={continueWatchingPreview}
                                 itemComponent={ContinueWatchingItem}
-                                deepLinks={continueWatchingPreview.deepLinks}
                             />
                             :
                             null
@@ -59,10 +59,8 @@ const Board = () => {
                                     <MetaRow
                                         key={index}
                                         className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')}
-                                        title={catalog.title}
-                                        items={catalog.content.content}
+                                        catalog={catalog}
                                         itemComponent={MetaItem}
-                                        deepLinks={catalog.deepLinks}
                                     />
                                 );
                             }
@@ -71,9 +69,8 @@ const Board = () => {
                                     <MetaRow
                                         key={index}
                                         className={classnames(styles['board-row'], 'animation-fade-in')}
-                                        title={catalog.title}
+                                        catalog={catalog}
                                         message={catalog.content.content}
-                                        deepLinks={catalog.deepLinks}
                                     />
                                 );
                             }
@@ -82,8 +79,7 @@ const Board = () => {
                                     <MetaRow.Placeholder
                                         key={index}
                                         className={classnames(styles['board-row'], styles['board-row-poster'], 'animation-fade-in')}
-                                        title={catalog.title}
-                                        deepLinks={catalog.deepLinks}
+                                        catalog={catalog}
                                     />
                                 );
                             }

src/routes/Discover/useSelectableInputs.js

@@ -1,22 +1,21 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { useTranslation } = require('react-i18next');
-const { translateOption } = require('stremio/common');
+const { useTranslate } = require('stremio/common');
 
 const mapSelectableInputs = (discover, t) => {
     const typeSelect = {
-        title: t('SELECT_TYPE'),
+        title: t.string('SELECT_TYPE'),
         options: discover.selectable.types
             .map(({ type, deepLinks }) => ({
                 value: deepLinks.discover,
-                label: translateOption(type, 'TYPE_')
+                label: t.stringWithPrefix(type, 'TYPE_')
             })),
         selected: discover.selectable.types
             .filter(({ selected }) => selected)
             .map(({ deepLinks }) => deepLinks.discover),
         renderLabelText: discover.selected !== null ?
-            () => translateOption(discover.selected.request.path.type, 'TYPE_')
+            () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
             :
             null,
         onSelect: (event) => {
@@ -24,11 +23,11 @@ const mapSelectableInputs = (discover, t) => {
         }
     };
     const catalogSelect = {
-        title: t('SELECT_CATALOG'),
+        title: t.string('SELECT_CATALOG'),
         options: discover.selectable.catalogs
-            .map(({ name, addon, deepLinks }) => ({
+            .map(({ id, name, addon, deepLinks }) => ({
                 value: deepLinks.discover,
-                label: name,
+                label: t.catalogTitle({ addon, id, name }),
                 title: `${name} (${addon.manifest.name})`
             })),
         selected: discover.selectable.catalogs
@@ -38,7 +37,7 @@ const mapSelectableInputs = (discover, t) => {
             () => {
                 const selectableCatalog = discover.selectable.catalogs
                     .find(({ id }) => id === discover.selected.request.path.id);
-                return selectableCatalog ? selectableCatalog.name : discover.selected.request.path.id;
+                return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
             }
             :
             null,
@@ -47,10 +46,10 @@ const mapSelectableInputs = (discover, t) => {
         }
     };
     const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
-        title: translateOption(name, 'SELECT_'),
+        title: t.stringWithPrefix(name, 'SELECT_'),
         isRequired: isRequired,
         options: options.map(({ value, deepLinks }) => ({
-            label: typeof value === 'string' ? translateOption(value) : t('NONE'),
+            label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
             value: JSON.stringify({
                 href: deepLinks.discover,
                 value
@@ -63,7 +62,7 @@ const mapSelectableInputs = (discover, t) => {
                 value
             })),
         renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
-            () => translateOption(name, 'SELECT_')
+            () => t.stringWithPrefix(name, 'SELECT_')
             :
             null,
         onSelect: (event) => {
@@ -75,7 +74,7 @@ const mapSelectableInputs = (discover, t) => {
 };
 
 const useSelectableInputs = (discover) => {
-    const { t } = useTranslation();
+    const t = useTranslate();
     const selectableInputs = React.useMemo(() => {
         return mapSelectableInputs(discover, t);
     }, [discover.selected, discover.selectable]);

src/routes/Library/useSelectableInputs.js

@@ -1,16 +1,15 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { useTranslation } = require('react-i18next');
-const { translateOption } = require('stremio/common');
+const { useTranslate } = require('stremio/common');
 
 const mapSelectableInputs = (library, t) => {
     const typeSelect = {
-        title: t('SELECT_TYPE'),
+        title: t.string('SELECT_TYPE'),
         options: library.selectable.types
             .map(({ type, deepLinks }) => ({
                 value: deepLinks.library,
-                label: type === null ? t('TYPE_ALL') : translateOption(type, 'TYPE_')
+                label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
             })),
         selected: library.selectable.types
             .filter(({ selected }) => selected)
@@ -20,11 +19,11 @@ const mapSelectableInputs = (library, t) => {
         }
     };
     const sortSelect = {
-        title: t('SELECT_SORT'),
+        title: t.string('SELECT_SORT'),
         options: library.selectable.sorts
             .map(({ sort, deepLinks }) => ({
                 value: deepLinks.library,
-                label: translateOption(sort, 'SORT_')
+                label: t.stringWithPrefix(sort, 'SORT_')
             })),
         selected: library.selectable.sorts
             .filter(({ selected }) => selected)
@@ -51,7 +50,7 @@ const mapSelectableInputs = (library, t) => {
 };
 
 const useSelectableInputs = (library) => {
-    const { t } = useTranslation();
+    const t = useTranslate();
     const selectableInputs = React.useMemo(() => {
         return mapSelectableInputs(library, t);
     }, [library]);

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/MetaDetails/StreamsList/Stream/styles.less

@@ -110,6 +110,12 @@
         .description-container {
             font-size: 0.9rem;
         }
+
+        .info-container {
+            .addon-name {
+                font-size: 0.9rem;
+            }
+        }
     }
 }
 

src/routes/Player/Error/Error.js

@@ -11,6 +11,13 @@ const styles = require('./styles');
 const Error = ({ className, code, message, stream }) => {
     const { t } = useTranslation();
 
+    const [playlist, fileName] = React.useMemo(() => {
+        return [
+            stream?.deepLinks?.externalPlayer?.playlist,
+            stream?.deepLinks?.externalPlayer?.fileName,
+        ];
+    }, [stream]);
+
     return (
         <div className={classNames(className, styles['error'])}>
             <div className={styles['error-label']} title={message}>{message}</div>
@@ -21,8 +28,14 @@ const Error = ({ className, code, message, stream }) => {
                     null
             }
             {
-                stream !== null ?
-                    <Button className={styles['playlist-button']} title={t('PLAYER_OPEN_IN_EXTERNAL')} href={stream.deepLinks.externalPlayer.href} download={stream.deepLinks.externalPlayer.fileName} target={'_blank'}>
+                playlist && fileName ?
+                    <Button
+                        className={styles['playlist-button']}
+                        title={t('PLAYER_OPEN_IN_EXTERNAL')}
+                        href={playlist}
+                        download={fileName}
+                        target={'_blank'}
+                    >
                         <Icon className={styles['icon']} name={'ic_downloads'} />
                         <div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
                     </Button>

src/routes/Player/Player.js

@@ -29,11 +29,8 @@ const Video = require('./Video');
 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);
@@ -267,8 +264,7 @@ const Player = ({ urlParams, queryParams }) => {
         setError(null);
         if (player.selected === null) {
             video.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')) {
             video.load({
                 stream: {
                     ...player.selected.stream,
@@ -289,13 +285,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,8 +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 (video.state.stream !== null) {
             const tracks = player.subtitles.map((subtitles) => ({

src/routes/Search/Search.js

@@ -131,7 +131,7 @@ Search.propTypes = {
 };
 
 const SearchFallback = ({ queryParams }) => (
-    <MainNavBars className={styles['search-container']} route={'search'} query={queryParams.get('search')} />
+    <MainNavBars className={styles['search-container']} route={'search'} query={queryParams.get('search') ?? queryParams.get('query')} />
 );
 
 SearchFallback.propTypes = Search.propTypes;

src/routes/Search/useSearch.js

@@ -32,14 +32,15 @@ const useSearch = (queryParams) => {
     //     };
     // }, [queryParams.get('search')]);
     const action = React.useMemo(() => {
-        if (queryParams.has('search') && queryParams.get('search').length > 0) {
+        const query = queryParams.get('search') ?? queryParams.get('query');
+        if (query?.length > 0) {
             return {
                 action: 'Load',
                 args: {
                     model: 'CatalogsWithExtra',
                     args: {
                         extra: [
-                            ['search', queryParams.get('search')]
+                            ['search', query]
                         ]
                     }
                 }

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 = {
@@ -56,7 +57,17 @@ type NotificationItem = {
     videoReleased: string,
 }
 
+type SearchHistoryItem = {
+    query: string,
+    deepLinks: {
+        search: string,
+    },
+};
+
+type SearchHistory = SearchHistoryItem[];
+
 type Ctx = {
     profile: Profile,
     notifications: Notifications,
+    searchHistory: SearchHistory,
 };

src/types/models/LocalSearch.d.ts

@@ -0,0 +1,10 @@
+type LocalSearchItem = {
+    query: string,
+    deepLinks: {
+        search: string,
+    },
+};
+
+type LocalSearch = {
+    items: LocalSearchItem[],
+};

src/types/types.d.ts

@@ -54,7 +54,9 @@ type BehaviorHints = {
 type PosterShape = 'square' | 'landscape' | 'poster' | null; 
 
 type Catalog<T, D = any> = {
-    title?: string,
+    label?: string,
+    name?: string,
+    type?: string,
     content: T,
     installed?: boolean,
     deepLinks?: D,

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)
 });