Merge branch 'development' of https://github.com/Stremio/stremio-web into add-iina-mpv

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

@@ -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.28",
+        "@stremio/stremio-core-web": "0.45.0",
         "@stremio/stremio-icons": "5.0.0-beta.3",
         "@stremio/stremio-video": "0.0.26",
         "a-color-picker": "1.2.1",
@@ -39,7 +39,7 @@
         "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",
+        "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#847c7675a0ad4f70787aebb88e2fd6e2ed9b9ccb",
         "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/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/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -18,7 +18,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
         window.history.back();
     }, []);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
-    const isPWA = usePWA();
+    const [isIOSPWA] = usePWA();
     const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
         <Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
             <Icon className={styles['icon']} name={'person-outline'} />
@@ -63,7 +63,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                         null
                 }
                 {
-                    !isPWA && fullscreenButton ?
+                    !isIOSPWA && fullscreenButton ?
                         <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
                             <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
                         </Button>

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

@@ -20,7 +20,7 @@ const NavMenuContent = ({ onClick }) => {
     const profile = useProfile();
     const { createTorrentFromMagnet } = useTorrent();
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
-    const isPWA = usePWA();
+    const [isIOSPWA, isAndroidPWA] = usePWA();
     const logoutButtonOnClick = React.useCallback(() => {
         core.transport.dispatch({
             action: 'Ctx',
@@ -62,7 +62,7 @@ const NavMenuContent = ({ onClick }) => {
                 </div>
             </div>
             {
-                !isPWA ?
+                !isIOSPWA && !isAndroidPWA ?
                     <div className={styles['nav-menu-section']}>
                         <Button className={styles['nav-menu-option-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
                             <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />

src/common/index.js

@@ -45,6 +45,7 @@ const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const platform = require('./platform');
 const externalPlayerOptions = require('./externalPlayerOptions');
+const EventModal = require('./EventModal');
 
 module.exports = {
     AddonDetailsModal,
@@ -96,4 +97,5 @@ module.exports = {
     useTorrent,
     platform,
     externalPlayerOptions,
+    EventModal,
 };

src/common/usePWA.js

@@ -6,7 +6,7 @@ const usePWA = () => {
     const isPWA = React.useMemo(() => {
         const isIOSPWA = window.navigator.standalone;
         const isAndroidPWA = window.matchMedia('(display-mode: standalone)').matches;
-        return isIOSPWA || isAndroidPWA;
+        return [isIOSPWA, isAndroidPWA];
     }, []);
     return isPWA;
 };

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

@@ -27,13 +27,10 @@ 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] = usePlayer(urlParams);
+    const [player, videoParamsChanged, timeChanged, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
     const routeFocused = useRouteFocused();
@@ -199,6 +196,8 @@ const Player = ({ urlParams, queryParams }) => {
     }, []);
     const onNextVideoRequested = React.useCallback(() => {
         if (player.nextVideo !== null) {
+            nextVideo();
+
             const deepLinks = player.nextVideo.deepLinks;
             if (deepLinks.metaDetailsStreams && deepLinks.player) {
                 window.location.replace(deepLinks.metaDetailsStreams);
@@ -261,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 (streamingServer.baseUrl !== null && (player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
             dispatch({
                 type: 'command',
                 commandName: 'load',
@@ -286,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
                         :
@@ -304,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({

src/routes/Player/usePlayer.js

@@ -121,8 +121,16 @@ const usePlayer = (urlParams) => {
             }
         }, 'player');
     }, []);
+    const nextVideo = React.useCallback(() => {
+        core.transport.dispatch({
+            action: 'Player',
+            args: {
+                action: 'NextVideo'
+            }
+        }, 'player');
+    }, []);
     const player = useModelState({ model: 'player', action, map });
-    return [player, videoParamsChanged, timeChanged, pausedChanged, ended];
+    return [player, videoParamsChanged, timeChanged, pausedChanged, ended, nextVideo];
 };
 
 module.exports = usePlayer;

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

@@ -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: () => {
@@ -313,6 +328,7 @@ const useProfileSettingsInputs = (profile) => {
         subtitlesBackgroundColorInput,
         subtitlesOutlineColorInput,
         audioLanguageSelect,
+        surroundSoundCheckbox,
         escExitFullscreenCheckbox,
         seekTimeDurationSelect,
         seekShortTimeDurationSelect,

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