Merge branch 'development' of https://github.com/Stremio/stremio-web into feat/player-options-menu

2026-04-19 13:52:12 +00:00 · 2022-11-28 13:24:30 +01:00 · 2022-11-28 13:24:30 +01:00 · c5d84bfe6b
commit c5d84bfe6b
parent 3b5ab5fc0f 92c67f7058
39 changed files with 2591 additions and 201 deletions
--- a/favicons/favicon.ico
+++ b/favicons/favicon.ico
--- a/images/icon_x192.png
+++ b/images/icon_x192.png
--- a/images/icon_x512.png
+++ b/images/icon_x512.png
--- a/images/maskable_icon_x192.png
+++ b/images/maskable_icon_x192.png
--- a/images/maskable_icon_x512.png
+++ b/images/maskable_icon_x512.png
--- a/manifest.json
+++ b/manifest.json
@ -0,0 +1,40 @@
+{
+    "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": "natural",
+    "theme_color": "#2a2843",
+    "background_color": "#161523"
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -14,16 +14,19 @@
    "dependencies": {
        "@babel/runtime": "7.16.0",
        "@sentry/browser": "6.13.3",
-        "@stremio/stremio-colors": "4.0.1",
-        "@stremio/stremio-core-web": "0.44.5",
-        "@stremio/stremio-icons": "3.0.5",
-        "@stremio/stremio-video": "0.0.23",
+        "@stremio/stremio-colors": "5.0.1",
+        "@stremio/stremio-core-web": "0.44.6",
+        "@stremio/stremio-icons": "4.0.0",
+        "@stremio/stremio-video": "0.0.24",
        "a-color-picker": "1.2.1",
        "bowser": "2.11.0",
        "buffer": "6.0.3",
        "classnames": "2.3.1",
        "eventemitter3": "4.0.7",
        "filter-invalid-dom-props": "2.1.0",
+        "langs": "^2.0.0",
+        "hat": "0.0.3",
+        "langs": "^2.0.0",
        "lodash.debounce": "4.0.8",
        "lodash.intersection": "4.4.0",
        "lodash.isequal": "4.5.0",
@ -61,6 +64,7 @@
        "terser-webpack-plugin": "5.2.4",
        "webpack": "5.61.0",
        "webpack-cli": "4.9.1",
-        "webpack-dev-server": "4.7.4"
+        "webpack-dev-server": "4.7.4",
+        "workbox-webpack-plugin": "^6.5.3"
    }
 }
--- a/src/App/ServicesToaster.js
+++ b/src/App/ServicesToaster.js
@ -23,7 +23,10 @@ const ServicesToaster = () => {
                        type: 'error',
                        title: args.source.event,
                        message: args.error.message,
-                        timeout: 4000
+                        timeout: 4000,
+                        dataset: {
+                            type: 'CoreEvent'
+                        }
                    });
                    break;
                }
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
@ -8,12 +8,14 @@ const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const useFullscreen = require('stremio/common/useFullscreen');
 const useProfile = require('stremio/common/useProfile');
+const useTorrent = require('stremio/common/useTorrent');
 const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const styles = require('./styles');

 const NavMenuContent = ({ onClick }) => {
    const { core } = useServices();
    const profile = useProfile();
+    const { createTorrentFromMagnet } = useTorrent();
    const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
    const logoutButtonOnClick = React.useCallback(() => {
        core.transport.dispatch({
@ -23,6 +25,14 @@ const NavMenuContent = ({ onClick }) => {
            }
        });
    }, []);
+    const onPlayMagnetLinkClick = React.useCallback(async () => {
+        try {
+            const clipboardText = await navigator.clipboard.readText();
+            createTorrentFromMagnet(clipboardText);
+        } catch(e) {
+            console.error(e);
+        }
+    }, []);
    return (
        <div className={classnames(styles['nav-menu-container'], 'animation-fade-in')} onClick={onClick}>
            <div className={styles['user-info-container']}>
@ -57,11 +67,7 @@ const NavMenuContent = ({ onClick }) => {
                    <Icon className={styles['icon']} icon={'ic_addons'} />
                    <div className={styles['nav-menu-option-label']}>Addons</div>
                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Remote Control'} disabled={true}>
-                    <Icon className={styles['icon']} icon={'ic_remote'} />
-                    <div className={styles['nav-menu-option-label']}>Remote Control</div>
-                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} disabled={true}>
+                <Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} onClick={onPlayMagnetLinkClick}>
                    <Icon className={styles['icon']} icon={'ic_magnet'} />
                    <div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
                </Button>
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
@ -3,17 +3,17 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const magnet = require('magnet-uri');
-const { useServices } = require('stremio/services');
 const Icon = require('@stremio/stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 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 styles = require('./styles');

 const SearchBar = ({ className, query, active }) => {
-    const { core } = useServices();
    const routeFocused = useRouteFocused();
+    const { createTorrentFromMagnet } = useTorrent();
    const searchInputRef = React.useRef(null);
    const searchBarOnClick = React.useCallback(() => {
        if (!active) {
@ -22,17 +22,7 @@ const SearchBar = ({ className, query, active }) => {
    }, [active]);
    const queryInputOnChange = React.useCallback(() => {
        try {
-            const parsed = magnet.decode(searchInputRef.current.value);
-            if (parsed && typeof parsed.infoHash === 'string') {
-                core.transport.dispatch({
-                    action: 'StreamingServer',
-                    args: {
-                        action: 'CreateTorrent',
-                        args: searchInputRef.current.value
-                    }
-                });
-                searchInputRef.current.value = '';
-            }
+            createTorrentFromMagnet(searchInputRef.current.value);
            // eslint-disable-next-line no-empty
        } catch { }
    }, []);
@ -80,4 +70,17 @@ SearchBar.propTypes = {
    active: PropTypes.bool
 };

-module.exports = SearchBar;
+const SearchBarFallback = ({ className }) => (
+    <label className={classnames(className, styles['search-bar-container'])}>
+        <div className={styles['search-input']}>
+            <div className={styles['placeholder-label']}>Search or paste link</div>
+        </div>
+        <Button className={styles['submit-button-container']} tabIndex={-1}>
+            <Icon className={styles['icon']} icon={'ic_search_link'} />
+        </Button>
+    </label>
+);
+
+SearchBarFallback.propTypes = SearchBar.propTypes;
+
+module.exports = withCoreSuspender(SearchBar, SearchBarFallback);
--- a/src/common/Toast/ToastProvider.js
+++ b/src/common/Toast/ToastProvider.js
@ -28,32 +28,48 @@ const ToastProvider = ({ className, children }) => {
        clearTimeout(event.dataset.id);
        dispatch({ type: 'remove', id: event.dataset.id });
    }, []);
-    const toast = React.useMemo(() => ({
-        show: (item) => {
-            const timeout = typeof item.timeout === 'number' && !isNaN(item.timeout) ?
-                item.timeout
-                :
-                DEFAULT_TIMEOUT;
-            const id = setTimeout(() => {
-                dispatch({ type: 'remove', id });
-            }, timeout);
-            dispatch({
-                type: 'add',
-                item: {
-                    ...item,
-                    id,
-                    dataset: {
-                        ...item.dataset,
-                        id
-                    },
-                    onClose: itemOnClose
+    const toast = React.useMemo(() => {
+        const filters = [];
+        return {
+            addFilter: (filter) => {
+                filters.push(filter);
+            },
+            removeFilter: (filter) => {
+                const index = filters.indexOf(filter);
+                if (index > -1) {
+                    filters.splice(index, 1);
                }
-            });
-        },
-        clear: () => {
-            dispatch({ type: 'clear' });
-        }
-    }), []);
+            },
+            show: (item) => {
+                if (filters.some((filter) => filter(item))) {
+                    return;
+                }
+
+                const timeout = typeof item.timeout === 'number' && !isNaN(item.timeout) ?
+                    item.timeout
+                    :
+                    DEFAULT_TIMEOUT;
+                const id = setTimeout(() => {
+                    dispatch({ type: 'remove', id });
+                }, timeout);
+                dispatch({
+                    type: 'add',
+                    item: {
+                        ...item,
+                        id,
+                        dataset: {
+                            ...item.dataset,
+                            id
+                        },
+                        onClose: itemOnClose
+                    }
+                });
+            },
+            clear: () => {
+                dispatch({ type: 'clear' });
+            }
+        };
+    }, []);
    return (
        <ToastContext.Provider value={toast}>
            {container instanceof HTMLElement ? children : null}
--- a/src/common/index.js
+++ b/src/common/index.js
@ -31,13 +31,13 @@ const languageNames = require('./languageNames');
 const routesRegexp = require('./routesRegexp');
 const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
-const useDeepEqualMemo = require('./useDeepEqualMemo');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
 const useModelState = require('./useModelState');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
+const useTorrent = require('./useTorrent');

 module.exports = {
    AddonDetailsModal,
@ -74,11 +74,11 @@ module.exports = {
    routesRegexp,
    useAnimationFrame,
    useBinaryState,
-    useDeepEqualMemo,
    useFullscreen,
    useLiveRef,
    useModelState,
    useOnScrollToBottom,
    useProfile,
-    useStreamingServer
+    useStreamingServer,
+    useTorrent
 };
--- a/src/common/useDeepEqualMemo.js
+++ b/src/common/useDeepEqualMemo.js
@ -1,20 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-const React = require('react');
-const isEqual = require('lodash.isequal');
-
-const useDeepEqualMemo = (cb, deps) => {
-    const valueRef = React.useRef();
-    const mountedRef = React.useRef(false);
-    const prevDepsRef = React.useRef(deps);
-    if (!mountedRef.current || !isEqual(prevDepsRef.current, deps)) {
-        valueRef.current = cb();
-        prevDepsRef.current = deps;
-    }
-    React.useLayoutEffect(() => {
-        mountedRef.current = true;
-    }, []);
-    return valueRef.current;
-};
-
-module.exports = useDeepEqualMemo;
--- a/src/common/useTorrent.js
+++ b/src/common/useTorrent.js
@ -0,0 +1,50 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const React = require('react');
+const magnet = require('magnet-uri');
+const { useServices } = require('stremio/services');
+const useToast = require('stremio/common/Toast/useToast');
+const useStreamingServer = require('stremio/common/useStreamingServer');
+
+const useTorrent = () => {
+    const { core } = useServices();
+    const streamingServer = useStreamingServer();
+    const toast = useToast();
+    const createTorrentTimeout = React.useRef(null);
+    const createTorrentFromMagnet = React.useCallback((text) => {
+        const parsed = magnet.decode(text);
+        if (parsed && typeof parsed.infoHash === 'string') {
+            core.transport.dispatch({
+                action: 'StreamingServer',
+                args: {
+                    action: 'CreateTorrent',
+                    args: text
+                }
+            });
+            clearTimeout(createTorrentTimeout.current);
+            createTorrentTimeout.current = setTimeout(() => {
+                toast.show({
+                    type: 'error',
+                    title: 'It\'s taking a long time to get metadata from the torrent.',
+                    timeout: 10000
+                });
+            }, 10000);
+        }
+    }, []);
+    React.useEffect(() => {
+        if (streamingServer.torrent !== null) {
+            const [, { type }] = streamingServer.torrent;
+            if (type === 'Ready') {
+                clearTimeout(createTorrentTimeout.current);
+            }
+        }
+    }, [streamingServer.torrent]);
+    React.useEffect(() => {
+        return () => clearTimeout(createTorrentTimeout.current);
+    }, []);
+    return {
+        createTorrentFromMagnet
+    };
+};
+
+module.exports = useTorrent;
--- a/src/index.html
+++ b/src/index.html
@ -7,8 +7,10 @@
    <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="apple-touch-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/icon-96.png" />
-    <title>Stremio - All you can watch!</title>
+    <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">
+    <title>Stremio - Freedom to Stream</title>
    <%= htmlWebpackPlugin.tags.headTags %>
 </head>

--- a/src/index.js
+++ b/src/index.js
@ -17,3 +17,12 @@ const App = require('./App');

 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(<App />);
+
+if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js')
+            .catch((registrationError) => {
+                console.error('SW registration failed: ', registrationError);
+            });
+    });
+}
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@ -4,32 +4,70 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('@stremio/stremio-icons/dom');
-const { Button, Image } = require('stremio/common');
+const { Button, Image, Multiselect } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');

+const ALL_ADDONS_KEY = 'ALL';
+
 const StreamsList = ({ className, ...props }) => {
    const { core } = useServices();
-    const streams = React.useMemo(() => {
+    const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
+    const onAddonSelected = React.useCallback((event) => {
+        setSelectedAddon(event.value);
+    }, []);
+    const streamsByAddon = React.useMemo(() => {
        return props.streams
            .filter((streams) => streams.content.type === 'Ready')
-            .map((streams) => {
-                return streams.content.content.map((stream) => ({
-                    ...stream,
-                    onClick: () => {
-                        core.transport.analytics({
-                            event: 'StreamClicked',
-                            args: {
-                                stream
-                            }
-                        });
-                    },
-                    addonName: streams.addon.manifest.name
-                }));
-            })
-            .flat(1);
+            .reduce((streamsByAddon, streams) => {
+                streamsByAddon[streams.addon.transportUrl] = {
+                    addon: streams.addon,
+                    streams: streams.content.content.map((stream) => ({
+                        ...stream,
+                        onClick: () => {
+                            core.transport.analytics({
+                                event: 'StreamClicked',
+                                args: {
+                                    stream
+                                }
+                            });
+                        },
+                        addonName: streams.addon.manifest.name
+                    }))
+                };
+
+                return streamsByAddon;
+            }, {});
    }, [props.streams]);
+    const filteredStreams = React.useMemo(() => {
+        return selectedAddon === ALL_ADDONS_KEY ?
+            Object.values(streamsByAddon).map(({ streams }) => streams).flat(1)
+            :
+            streamsByAddon[selectedAddon] ?
+                streamsByAddon[selectedAddon].streams
+                :
+                [];
+    }, [streamsByAddon, selectedAddon]);
+    const selectableOptions = React.useMemo(() => {
+        return {
+            title: 'Select Addon',
+            options: [
+                {
+                    value: ALL_ADDONS_KEY,
+                    label: 'All',
+                    title: 'All'
+                },
+                ...Object.keys(streamsByAddon).map((transportUrl) => ({
+                    value: transportUrl,
+                    label: streamsByAddon[transportUrl].addon.manifest.name,
+                    title: streamsByAddon[transportUrl].addon.manifest.name,
+                }))
+            ],
+            selected: [selectedAddon],
+            onSelect: onAddonSelected
+        };
+    }, [streamsByAddon, selectedAddon]);
    return (
        <div className={classnames(className, styles['streams-list-container'])}>
            {
@ -45,26 +83,37 @@ const StreamsList = ({ className, ...props }) => {
                            <div className={styles['label']}>No streams were found!</div>
                        </div>
                        :
-                        streams.length === 0 ?
+                        filteredStreams.length === 0 ?
                            <div className={styles['streams-container']}>
                                <Stream.Placeholder />
                                <Stream.Placeholder />
                            </div>
                            :
-                            <div className={styles['streams-container']}>
-                                {streams.map((stream, index) => (
-                                    <Stream
-                                        key={index}
-                                        addonName={stream.addonName}
-                                        name={stream.name}
-                                        description={stream.description}
-                                        thumbnail={stream.thumbnail}
-                                        progress={stream.progress}
-                                        deepLinks={stream.deepLinks}
-                                        onClick={stream.onClick}
-                                    />
-                                ))}
-                            </div>
+                            <React.Fragment>
+                                {
+                                    Object.keys(streamsByAddon).length > 1 ?
+                                        <Multiselect
+                                            {...selectableOptions}
+                                            className={styles['select-input-container']}
+                                        />
+                                        :
+                                        null
+                                }
+                                <div className={styles['streams-container']}>
+                                    {filteredStreams.map((stream, index) => (
+                                        <Stream
+                                            key={index}
+                                            addonName={stream.addonName}
+                                            name={stream.name}
+                                            description={stream.description}
+                                            thumbnail={stream.thumbnail}
+                                            progress={stream.progress}
+                                            deepLinks={stream.deepLinks}
+                                            onClick={stream.onClick}
+                                        />
+                                    ))}
+                                </div>
+                            </React.Fragment>
            }
            <Button className={styles['install-button-container']} title={'Install Addons'} href={'#/addons'}>
                <Icon className={styles['icon']} icon={'ic_addons'} />
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@ -3,6 +3,12 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';

+:import('~stremio/common/Multiselect/styles.less') {
+    multiselect-menu-container: menu-container;
+    multiselect-label: label;
+    multiselect-icon: icon;
+}
+
 .streams-list-container {
    display: flex;
    flex-direction: column;
@ -35,6 +41,30 @@
        }
    }

+    .select-input-container {
+        flex: 0 0 auto;
+        height: 3.5rem;
+        margin: 1em 1em 0 1em;
+        background: none;
+
+        &:hover, &:focus, &:global(.active) {
+            background-color: @color-background;
+        }
+
+        & >.multiselect-label {
+            color: @color-surface-light5-90;
+        }
+
+        & >.multiselect-icon {
+            fill: @color-surface-light5-90;
+        }
+
+        .multiselect-menu-container {
+            max-height: calc(3.2rem * 7);
+            overflow: auto;
+        }
+    }
+
    .streams-container {
        flex: 0 1 auto;
        align-self: stretch;
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@ -18,9 +18,11 @@ const ControlBar = ({
    duration,
    volume,
    muted,
+    playbackSpeed,
    subtitlesTracks,
    audioTracks,
    metaItem,
+    nextVideo,
    onPlayRequested,
    onPauseRequested,
    onMuteRequested,
@ -29,6 +31,8 @@ const ControlBar = ({
    onSeekRequested,
    onToggleSubtitlesMenu,
    onToggleInfoMenu,
+    onToggleSpeedMenu,
+    onToggleVideosMenu,
    onToggleOptionsMenu,
    ...props
 }) => {
@ -41,6 +45,12 @@ const ControlBar = ({
    const onInfoButtonMouseDown = React.useCallback((event) => {
        event.nativeEvent.infoMenuClosePrevented = true;
    }, []);
+    const onSpeedButtonMouseDown = React.useCallback((event) => {
+        event.nativeEvent.speedMenuClosePrevented = true;
+    }, []);
+    const onVideosButtonMouseDown = React.useCallback((event) => {
+        event.nativeEvent.videosMenuClosePrevented = true;
+    }, []);
    const onOptionsButtonMouseDown = React.useCallback((event) => {
        event.nativeEvent.optionsMenuClosePrevented = true;
    }, []);
@ -55,6 +65,15 @@ const ControlBar = ({
            }
        }
    }, [paused, onPlayRequested, onPauseRequested]);
+    const onNextVideoButtonClick = React.useCallback(() => {
+        if (nextVideo !== null && typeof nextVideo.deepLinks === 'object') {
+            if (nextVideo.deepLinks.player !== null) {
+                window.location.replace(nextVideo.deepLinks.player);
+            } else if (nextVideo.deepLinks.metaDetailsStreams !== null) {
+                window.location.replace(nextVideo.deepLinks.metaDetailsStreams);
+            }
+        }
+    }, [nextVideo]);
    const onMuteButtonClick = React.useCallback(() => {
        if (muted) {
            if (typeof onUnmuteRequested === 'function') {
@ -76,6 +95,16 @@ const ControlBar = ({
            onToggleInfoMenu();
        }
    }, [onToggleInfoMenu]);
+    const onSpeedButtonClick = React.useCallback(() => {
+        if (typeof onToggleSpeedMenu === 'function') {
+            onToggleSpeedMenu();
+        }
+    }, [onToggleSpeedMenu]);
+    const onVideosButtonClick = React.useCallback(() => {
+        if (typeof onToggleVideosMenu === 'function') {
+            onToggleVideosMenu();
+        }
+    }, [onToggleVideosMenu]);
    const onOptionsButtonClick = React.useCallback(() => {
        if (typeof onToggleOptionsMenu === 'function') {
            onToggleOptionsMenu();
@ -105,6 +134,14 @@ const ControlBar = ({
                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof paused !== 'boolean' })} title={paused ? 'Play' : 'Pause'} tabIndex={-1} onClick={onPlayPauseButtonClick}>
                    <Icon className={styles['icon']} icon={typeof paused !== 'boolean' || paused ? 'ic_play' : 'ic_pause'} />
                </Button>
+                {
+                    nextVideo !== null ?
+                        <Button className={classnames(styles['control-bar-button'])} title={'Next Video'} tabIndex={-1} onClick={onNextVideoButtonClick}>
+                            <Icon className={styles['icon']} icon={'ic_play_next'} />
+                        </Button>
+                        :
+                        null
+                }
                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof muted !== 'boolean' })} title={muted ? 'Unmute' : 'Mute'} tabIndex={-1} onClick={onMuteButtonClick}>
                    <Icon
                        className={styles['icon']}
@ -127,6 +164,9 @@ const ControlBar = ({
                    <Icon className={styles['icon']} icon={'ic_more'} />
                </Button>
                <div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
+                    <Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onSpeedButtonClick}>
+                        <Icon className={styles['icon']} icon={'ic_speedometer'} />
+                    </Button>
                    <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
                        <Icon className={styles['icon']} icon={'ic_network'} />
                    </Button>
@ -139,9 +179,14 @@ const ControlBar = ({
                    <Button className={classnames(styles['control-bar-button'], { 'disabled': (!Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0) && (!Array.isArray(audioTracks) || audioTracks.length === 0) })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
                        <Icon className={styles['icon']} icon={'ic_sub'} />
                    </Button>
-                    <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
-                        <Icon className={styles['icon']} icon={'ic_videos'} />
-                    </Button>
+                    {
+                        metaItem?.content?.videos?.length > 0 ?
+                            <Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onVideosButtonMouseDown} onClick={onVideosButtonClick}>
+                                <Icon className={styles['icon']} icon={'ic_videos'} />
+                            </Button>
+                            :
+                            null
+                    }
                    <Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onOptionsButtonMouseDown} onClick={onOptionsButtonClick}>
                        <Icon className={styles['icon']} icon={'ic_more'} />
                    </Button>
@ -158,9 +203,11 @@ ControlBar.propTypes = {
    duration: PropTypes.number,
    volume: PropTypes.number,
    muted: PropTypes.bool,
+    playbackSpeed: PropTypes.number,
    subtitlesTracks: PropTypes.array,
    audioTracks: PropTypes.array,
    metaItem: PropTypes.object,
+    nextVideo: PropTypes.object,
    onPlayRequested: PropTypes.func,
    onPauseRequested: PropTypes.func,
    onMuteRequested: PropTypes.func,
@ -169,7 +216,9 @@ ControlBar.propTypes = {
    onSeekRequested: PropTypes.func,
    onToggleSubtitlesMenu: PropTypes.func,
    onToggleInfoMenu: PropTypes.func,
-    onToggleOptionsMenu: PropTypes.func
+    onToggleSpeedMenu: PropTypes.func,
+    onToggleVideosMenu: PropTypes.func,
+    onToggleOptionsMenu: PropTypes.func,
 };

 module.exports = ControlBar;
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@ -4,6 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
+const langs = require('langs');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
@ -12,7 +13,9 @@ const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
 const InfoMenu = require('./InfoMenu');
 const OptionsMenu = require('./OptionsMenu');
+const VideosMenu = require('./VideosMenu');
 const SubtitlesMenu = require('./SubtitlesMenu');
+const SpeedMenu = require('./SpeedMenu');
 const Video = require('./Video');
 const usePlayer = require('./usePlayer');
 const useSettings = require('./useSettings');
@ -37,9 +40,13 @@ const Player = ({ urlParams, queryParams }) => {
    });
    const [immersed, setImmersed] = React.useState(true);
    const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
+    const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
    const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
    const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
-    const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
+    const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
+    const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
+    const defaultSubtitlesSelected = React.useRef(false);
+    const defaultAudioTrackSelected = React.useRef(false);
    const [error, setError] = React.useState(null);
    const [videoState, setVideoState] = React.useReducer(
        (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
@ -52,6 +59,7 @@ const Player = ({ urlParams, queryParams }) => {
            buffering: null,
            volume: null,
            muted: null,
+            playbackSpeed: null,
            audioTracks: [],
            selectedAudioTrackId: null,
            subtitlesTracks: [],
@ -159,6 +167,9 @@ const Player = ({ urlParams, queryParams }) => {
    const onSeekRequested = React.useCallback((time) => {
        dispatch({ type: 'setProp', propName: 'time', propValue: time });
    }, []);
+    const onPlaybackSpeedChanged = React.useCallback((rate) => {
+        dispatch({ type: 'setProp', propName: 'playbackSpeed', propValue: rate });
+    }, []);
    const onSubtitlesTrackSelected = React.useCallback((id) => {
        dispatch({ type: 'setProp', propName: 'selectedSubtitlesTrackId', propValue: id });
        dispatch({ type: 'setProp', propName: 'selectedExtraSubtitlesTrackId', propValue: null });
@ -194,14 +205,20 @@ const Player = ({ urlParams, queryParams }) => {
        toggleFullscreen();
    }, [toggleFullscreen]);
    const onContainerMouseDown = React.useCallback((event) => {
+        if (!event.nativeEvent.optionsMenuClosePrevented) {
+            closeOptionsMenu();
+        }
        if (!event.nativeEvent.subtitlesMenuClosePrevented) {
            closeSubtitlesMenu();
        }
        if (!event.nativeEvent.infoMenuClosePrevented) {
            closeInfoMenu();
        }
-        if (!event.nativeEvent.optionsMenuClosePrevented) {
-            closeOptionsMenu();
+        if (!event.nativeEvent.speedMenuClosePrevented) {
+            closeSpeedMenu();
+        }
+        if (!event.nativeEvent.videosMenuClosePrevented) {
+            closeVideosMenu();
        }
    }, []);
    const onContainerMouseMove = React.useCallback((event) => {
@ -240,7 +257,10 @@ const Player = ({ urlParams, queryParams }) => {
                            []
                    },
                    autoplay: true,
-                    time: player.libraryItem !== null && player.selected.streamRequest !== null && player.libraryItem.state.video_id === player.selected.streamRequest.id ?
+                    time: player.libraryItem !== null &&
+                        player.selected.streamRequest !== null &&
+                        player.selected.streamRequest.path !== null &&
+                        player.libraryItem.state.video_id === player.selected.streamRequest.path.id ?
                        player.libraryItem.state.timeOffset
                        :
                        0,
@ -313,6 +333,37 @@ const Player = ({ urlParams, queryParams }) => {
            pausedChanged(videoState.paused);
        }
    }, [videoState.paused]);
+    React.useEffect(() => {
+        if (!defaultSubtitlesSelected.current) {
+            const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
+
+            const subtitlesTrack = findTrackByLang(videoState.subtitlesTracks, settings.subtitlesLanguage);
+            const extraSubtitlesTrack = findTrackByLang(videoState.extraSubtitlesTracks, settings.subtitlesLanguage);
+
+            if (subtitlesTrack && subtitlesTrack.id) {
+                onSubtitlesTrackSelected(subtitlesTrack.id);
+                defaultSubtitlesSelected.current = true;
+            } else if (extraSubtitlesTrack && extraSubtitlesTrack.id) {
+                onExtraSubtitlesTrackSelected(extraSubtitlesTrack.id);
+                defaultSubtitlesSelected.current = true;
+            }
+        }
+    }, [videoState.subtitlesTracks, videoState.extraSubtitlesTracks]);
+    React.useEffect(() => {
+        if (!defaultAudioTrackSelected.current) {
+            const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
+            const audioTrack = findTrackByLang(videoState.audioTracks, settings.audioLanguage);
+
+            if (audioTrack && audioTrack.id) {
+                onAudioTrackSelected(audioTrack.id);
+                defaultAudioTrackSelected.current = true;
+            }
+        }
+    }, [videoState.audioTracks]);
+    React.useEffect(() => {
+        defaultSubtitlesSelected.current = false;
+        defaultAudioTrackSelected.current = false;
+    }, [videoState.stream]);
    React.useEffect(() => {
        if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&
            (!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) &&
@ -323,8 +374,14 @@ const Player = ({ urlParams, queryParams }) => {
    React.useEffect(() => {
        if (player.metaItem === null || player.metaItem.type !== 'Ready') {
            closeInfoMenu();
+            closeVideosMenu();
        }
    }, [player.metaItem]);
+    React.useEffect(() => {
+        if (videoState.playbackSpeed === null) {
+            closeSpeedMenu();
+        }
+    }, [videoState.playbackSpeed]);
    React.useEffect(() => {
        const intervalId = setInterval(() => {
            pushToLibrary();
@ -334,6 +391,8 @@ const Player = ({ urlParams, queryParams }) => {
        };
    }, []);
    React.useEffect(() => {
+        const toastFilter = (item) => item?.dataset?.type === 'CoreEvent';
+        toast.addFilter(toastFilter);
        const onCastStateChange = () => {
            setCasting(chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED);
        };
@ -349,6 +408,7 @@ const Player = ({ urlParams, queryParams }) => {
        chromecast.on('stateChanged', onChromecastServiceStateChange);
        onChromecastServiceStateChange();
        return () => {
+            toast.removeFilter(toastFilter);
            chromecast.off('stateChanged', onChromecastServiceStateChange);
            if (chromecast.active) {
                chromecast.transport.off(
@ -362,7 +422,7 @@ const Player = ({ urlParams, queryParams }) => {
        const onKeyDown = (event) => {
            switch (event.code) {
                case 'Space': {
-                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.paused !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen&& videoState.paused !== null) {
                        if (videoState.paused) {
                            onPlayRequested();
                        } else {
@ -373,7 +433,7 @@ const Player = ({ urlParams, queryParams }) => {
                    break;
                }
                case 'ArrowRight': {
-                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.time !== null) {
                        const seekTimeMultiplier = event.shiftKey ? 3 : 1;
                        onSeekRequested(videoState.time + (settings.seekTimeDuration * seekTimeMultiplier));
                    }
@ -381,7 +441,7 @@ const Player = ({ urlParams, queryParams }) => {
                    break;
                }
                case 'ArrowLeft': {
-                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.time !== null) {
                        const seekTimeMultiplier = event.shiftKey ? 3 : 1;
                        onSeekRequested(videoState.time - (settings.seekTimeDuration * seekTimeMultiplier));
                    }
@ -389,22 +449,24 @@ const Player = ({ urlParams, queryParams }) => {
                    break;
                }
                case 'ArrowUp': {
-                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.volume !== null) {
                        onVolumeChangeRequested(videoState.volume + 5);
                    }

                    break;
                }
                case 'ArrowDown': {
-                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.volume !== null) {
                        onVolumeChangeRequested(videoState.volume - 5);
                    }

                    break;
                }
                case 'KeyS': {
-                    closeInfoMenu();
                    closeOptionsMenu();
+                    closeInfoMenu();
+                    closeSpeedMenu();
+                    closeVideosMenu();
                    if ((Array.isArray(videoState.subtitlesTracks) && videoState.subtitlesTracks.length > 0) ||
                        (Array.isArray(videoState.extraSubtitlesTracks) && videoState.extraSubtitlesTracks.length > 0) ||
                        (Array.isArray(videoState.audioTracks) && videoState.audioTracks.length > 0)) {
@ -414,18 +476,44 @@ const Player = ({ urlParams, queryParams }) => {
                    break;
                }
                case 'KeyI': {
-                    closeSubtitlesMenu();
                    closeOptionsMenu();
+                    closeSubtitlesMenu();
+                    closeSpeedMenu();
+                    closeVideosMenu();
                    if (player.metaItem !== null && player.metaItem.type === 'Ready') {
                        toggleInfoMenu();
                    }

                    break;
                }
+                case 'KeyR': {
+                    closeOptionsMenu();
+                    closeInfoMenu();
+                    closeSubtitlesMenu();
+                    closeVideosMenu();
+                    if (videoState.playbackSpeed !== null) {
+                        toggleSpeedMenu();
+                    }
+
+                    break;
+                }
+                case 'KeyV': {
+                    closeOptionsMenu();
+                    closeInfoMenu();
+                    closeSubtitlesMenu();
+                    closeSpeedMenu();
+                    if (player.metaItem !== null && player.metaItem.type === 'Ready') {
+                        toggleVideosMenu();
+                    }
+
+                    break;
+                }
                case 'Escape': {
+                    closeOptionsMenu();
                    closeSubtitlesMenu();
                    closeInfoMenu();
-                    closeOptionsMenu();
+                    closeSpeedMenu();
+                    closeVideosMenu();
                    break;
                }
            }
@ -436,7 +524,7 @@ const Player = ({ urlParams, queryParams }) => {
        return () => {
            window.removeEventListener('keydown', onKeyDown);
        };
-    }, [player.metaItem, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
+    }, [player.metaItem, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videosMenuOpen, speedMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, videoState.playbackSpeed, toggleSubtitlesMenu, toggleInfoMenu, toggleVideosMenu]);
    React.useLayoutEffect(() => {
        return () => {
            setImmersedDebounced.cancel();
@ -445,7 +533,7 @@ const Player = ({ urlParams, queryParams }) => {
        };
    }, []);
    return (
-        <div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && !casting && videoState.paused !== null && !videoState.paused && !subtitlesMenuOpen && !infoMenuOpen && !optionsMenuOpen })}
+        <div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && !casting && videoState.paused !== null && !videoState.paused && !subtitlesMenuOpen && !infoMenuOpen && !speedMenuOpen && !videosMenuOpen && !optionsMenuOpen })}
            onMouseDown={onContainerMouseDown}
            onMouseMove={onContainerMouseMove}
            onMouseOver={onContainerMouseMove}
@ -490,7 +578,7 @@ const Player = ({ urlParams, queryParams }) => {
                    null
            }
            {
-                subtitlesMenuOpen || infoMenuOpen ?
+                subtitlesMenuOpen || infoMenuOpen || videosMenuOpen || speedMenuOpen ?
                    <div className={styles['layer']} />
                    :
                    null
@ -510,18 +598,22 @@ const Player = ({ urlParams, queryParams }) => {
                duration={videoState.duration}
                volume={videoState.volume}
                muted={videoState.muted}
+                playbackSpeed={videoState.playbackSpeed}
                subtitlesTracks={videoState.subtitlesTracks.concat(videoState.extraSubtitlesTracks)}
                audioTracks={videoState.audioTracks}
                metaItem={player.metaItem}
+                nextVideo={player.nextVideo}
                onPlayRequested={onPlayRequested}
                onPauseRequested={onPauseRequested}
                onMuteRequested={onMuteRequested}
                onUnmuteRequested={onUnmuteRequested}
                onVolumeChangeRequested={onVolumeChangeRequested}
                onSeekRequested={onSeekRequested}
+                onToggleOptionsMenu={toggleOptionsMenu}
                onToggleSubtitlesMenu={toggleSubtitlesMenu}
                onToggleInfoMenu={toggleInfoMenu}
-                onToggleOptionsMenu={toggleOptionsMenu}
+                onToggleSpeedMenu={toggleSpeedMenu}
+                onToggleVideosMenu={toggleVideosMenu}
                onMouseMove={onBarMouseMove}
                onMouseOver={onBarMouseMove}
            />
@ -563,6 +655,26 @@ const Player = ({ urlParams, queryParams }) => {
                    :
                    null
            }
+            {
+                speedMenuOpen ?
+                    <SpeedMenu
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        playbackSpeed={videoState.playbackSpeed}
+                        onPlaybackSpeedChanged={onPlaybackSpeedChanged}
+                    />
+                    :
+                    null
+            }
+            {
+                videosMenuOpen ?
+                    <VideosMenu
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        metaItem={player.metaItem !== null && player.metaItem.type === 'Ready' ? player.metaItem.content : null}
+                        seriesInfo={player.seriesInfo}
+                    />
+                    :
+                    null
+            }
            {
                optionsMenuOpen ?
                    <OptionsMenu
--- a/src/routes/Player/SpeedMenu/Option/Option.js
+++ b/src/routes/Player/SpeedMenu/Option/Option.js
@ -0,0 +1,33 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const { Button } = require('stremio/common');
+const styles = require('./styles');
+
+const OptionButton = ({ className, value, selected, onSelect }) => {
+    const onClick = React.useCallback(() => {
+        if (typeof onSelect === 'function') {
+            onSelect(value);
+        }
+    }, [onSelect, value]);
+    return (
+        <Button
+            className={classnames(className, styles['option'], { 'selected': selected })}
+            onClick={onClick}
+        >
+            <div className={styles['label']}>{ value }x</div>
+            <div className={styles['icon']} />
+        </Button>
+    );
+};
+
+OptionButton.propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.number,
+    selected: PropTypes.bool,
+    onSelect: PropTypes.func,
+};
+
+module.exports = OptionButton;
--- a/src/routes/Player/SpeedMenu/Option/index.js
+++ b/src/routes/Player/SpeedMenu/Option/index.js
@ -0,0 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const Option = require('./Option');
+
+module.exports = Option;
--- a/src/routes/Player/SpeedMenu/Option/styles.less
+++ b/src/routes/Player/SpeedMenu/Option/styles.less
@ -0,0 +1,38 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+
+.option {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 1.5em;
+    
+    &:global(.selected) {
+        background-color: @color-background;
+
+        .icon {
+            display: block;
+        }
+    }
+
+    &:hover, &:focus {
+        background-color: @color-background-light2;
+    }
+
+    .label {
+        flex: 1;
+        font-weight: 400;
+        color: @color-surface-light5-90;
+    }
+
+    .icon {
+        flex: none;
+        display: none;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 100%;
+        margin-left: 1rem;
+        background-color: @color-accent3-90;
+    }
+}
--- a/src/routes/Player/SpeedMenu/SpeedMenu.js
+++ b/src/routes/Player/SpeedMenu/SpeedMenu.js
@ -0,0 +1,48 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Option = require('./Option');
+const styles = require('./styles');
+
+const RATES = Array.from(Array(8).keys(), (n) => n * 0.25 + 0.25).reverse();
+
+const SpeedMenu = ({ className, playbackSpeed, onPlaybackSpeedChanged }) => {
+    const onMouseDown = React.useCallback((event) => {
+        event.nativeEvent.speedMenuClosePrevented = true;
+    }, []);
+    const onOptionSelect = React.useCallback((value) => {
+        if (typeof onPlaybackSpeedChanged === 'function') {
+            onPlaybackSpeedChanged(value);
+        }
+    }, [onPlaybackSpeedChanged]);
+    return (
+        <div className={classnames(className, styles['speed-menu-container'])} onMouseDown={onMouseDown}>
+            <div className={styles['title']}>
+                Playback Speed
+            </div>
+            <div className={styles['options-container']}>
+                {
+                    RATES.map((rate) => (
+                        <Option
+                            className={styles['option']}
+                            key={rate}
+                            value={rate}
+                            selected={rate === playbackSpeed}
+                            onSelect={onOptionSelect}
+                        />
+                    ))
+                }
+            </div>
+        </div>
+    );
+};
+
+SpeedMenu.propTypes = {
+    className: PropTypes.string,
+    playbackSpeed: PropTypes.number,
+    onPlaybackSpeedChanged: PropTypes.func,
+};
+
+module.exports = SpeedMenu;
--- a/src/routes/Player/SpeedMenu/index.js
+++ b/src/routes/Player/SpeedMenu/index.js
@ -0,0 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const SpeedMenu = require('./SpeedMenu');
+
+module.exports = SpeedMenu;
--- a/src/routes/Player/SpeedMenu/styles.less
+++ b/src/routes/Player/SpeedMenu/styles.less
@ -0,0 +1,27 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+
+.speed-menu-container {
+    width: 12rem;
+    overflow: visible !important;
+
+    .title {
+        flex: none;
+        align-self: stretch;
+        max-height: 2.4em;
+        font-weight: 600;
+        color: @color-surface-light5-90;
+        margin: 1rem;
+    }
+
+    .options-container {
+        flex: 0 1 auto;
+        max-height: calc(3.2rem * 8);
+        overflow-y: auto;
+        
+        .option {
+            height: 3.2rem;
+        }
+    }
+}
--- a/src/routes/Player/VideosMenu/VideosMenu.js
+++ b/src/routes/Player/VideosMenu/VideosMenu.js
@ -0,0 +1,51 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Video = require('../../MetaDetails/VideosList/Video');
+const styles = require('./styles');
+
+const VideosMenu = ({ className, metaItem, seriesInfo }) => {
+    const onMouseDown = React.useCallback((event) => {
+        event.nativeEvent.videosMenuClosePrevented = true;
+    }, []);
+    const videos = React.useMemo(() => {
+        return seriesInfo && typeof seriesInfo.season === 'number' && Array.isArray(metaItem.videos) ?
+            metaItem.videos.filter(({ season }) => season === seriesInfo.season)
+            :
+            metaItem.videos;
+    }, [metaItem, seriesInfo]);
+    return (
+        <div className={classnames(className, styles['videos-menu-container'])} onMouseDown={onMouseDown}>
+            {
+                videos.map((video, index) => (
+                    <Video
+                        key={index}
+                        id={video.id}
+                        title={video.title}
+                        thumbnail={video.thumbnail}
+                        episode={video.episode}
+                        released={video.released}
+                        upcoming={video.upcoming}
+                        watched={video.watched}
+                        progress={video.progress}
+                        deepLinks={video.deepLinks}
+                        scheduled={video.scheduled}
+                    />
+                ))
+            }
+        </div>
+    );
+};
+
+VideosMenu.propTypes = {
+    className: PropTypes.string,
+    metaItem: PropTypes.object,
+    seriesInfo: PropTypes.shape({
+        season: PropTypes.number,
+        episode: PropTypes.number,
+    }),
+};
+
+module.exports = VideosMenu;
--- a/src/routes/Player/VideosMenu/index.js
+++ b/src/routes/Player/VideosMenu/index.js
@ -0,0 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const VideosMenu = require('./VideosMenu');
+
+module.exports = VideosMenu;
--- a/src/routes/Player/VideosMenu/styles.less
+++ b/src/routes/Player/VideosMenu/styles.less
@ -0,0 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+.videos-menu-container {
+    width: 30rem;
+}
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const Icon = require('@stremio/stremio-icons/dom');
-const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
+const { Image, MainNavBars, MetaRow, MetaItem, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
 const useSearch = require('./useSearch');
 const styles = require('./styles');

@ -13,7 +13,7 @@ const THRESHOLD = 100;

 const Search = ({ queryParams }) => {
    const [search, loadSearchRows] = useSearch(queryParams);
-    const query = useDeepEqualMemo(() => {
+    const query = React.useMemo(() => {
        return search.selected !== null ?
            search.selected.extra.reduceRight((query, [name, value]) => {
                if (name === 'search') {
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@ -14,6 +14,7 @@ const styles = require('./styles');
 const GENERAL_SECTION = 'general';
 const PLAYER_SECTION = 'player';
 const STREAMING_SECTION = 'streaming';
+const SHORTCUTS_SECTION = 'shortcuts';

 const Settings = () => {
    const { core } = useServices();
@ -27,6 +28,7 @@ const Settings = () => {
        subtitlesTextColorInput,
        subtitlesBackgroundColorInput,
        subtitlesOutlineColorInput,
+        audioLanguageSelect,
        seekTimeDurationSelect,
        bingeWatchingCheckbox,
        playInBackgroundCheckbox,
@ -93,10 +95,12 @@ const Settings = () => {
    const generalSectionRef = React.useRef(null);
    const playerSectionRef = React.useRef(null);
    const streamingServerSectionRef = React.useRef(null);
+    const shortcutsSectionRef = React.useRef(null);
    const sections = React.useMemo(() => ([
        { ref: generalSectionRef, id: GENERAL_SECTION },
        { ref: playerSectionRef, id: PLAYER_SECTION },
        { ref: streamingServerSectionRef, id: STREAMING_SECTION },
+        { ref: shortcutsSectionRef, id: SHORTCUTS_SECTION },
    ]), []);
    const [selectedSectionId, setSelectedSectionId] = React.useState(GENERAL_SECTION);
    const updateSelectedSectionId = React.useCallback(() => {
@ -142,6 +146,9 @@ const Settings = () => {
                    <Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === STREAMING_SECTION })} title={'Streaming server'} data-section={STREAMING_SECTION} onClick={sideMenuButtonOnClick}>
                        Streaming server
                    </Button>
+                    <Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === SHORTCUTS_SECTION })} title={'Shortcuts'} data-section={SHORTCUTS_SECTION} onClick={sideMenuButtonOnClick}>
+                        Shortcuts
+                    </Button>
                    <div className={styles['spacing']} />
                    <div className={styles['version-info-label']} title={process.env.VERSION}>App Version: {process.env.VERSION}</div>
                    {
@ -304,6 +311,15 @@ const Settings = () => {
                                {...subtitlesOutlineColorInput}
                            />
                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Audio Language</div>
+                            </div>
+                            <Multiselect
+                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                {...audioLanguageSelect}
+                            />
+                        </div>
                        <div className={styles['option-container']}>
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>Rewind & Fast-forward duration</div>
@ -424,6 +440,107 @@ const Settings = () => {
                                null
                        }
                    </div>
+                    <div ref={shortcutsSectionRef} className={styles['section-container']}>
+                        <div className={styles['section-title']}>Shortcuts</div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Play / Pause</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>Space</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Seek Forward</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>→</kbd>
+                                <div className={styles['label']}>or</div>
+                                <kbd>⇧ Shift</kbd>
+                                <div className={styles['label']}>+</div>
+                                <kbd>→</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Seek Backward</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>←</kbd>
+                                <div className={styles['label']}>or</div>
+                                <kbd>⇧ Shift</kbd>
+                                <div className={styles['label']}>+</div>
+                                <kbd>←</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Volume Up</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>↑</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Volume Down</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>↓</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Toggle Subtitles Menu</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>S</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Toggle Info Menu</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>I</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Toggle Fullscreen</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>F</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Navigate Between Menus</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>1</kbd>
+                                <div className={styles['label']}>to</div>
+                                <kbd>5</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Go to Search</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>0</kbd>
+                            </div>
+                        </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Close Menu or Modal</div>
+                            </div>
+                            <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
+                                <kbd>Esc</kbd>
+                            </div>
+                        </div>
+                    </div>
                </div>
            </div>
            {
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@ -315,6 +315,31 @@
                                }
                            }
                        }
+
+                        &.shortcut-container {
+                            justify-content: center;
+                            padding: 0;
+                            overflow: visible;
+
+                            kbd {
+                                flex: 0 1 auto;
+                                height: 2.5rem;
+                                min-width: 2.5rem;
+                                line-height: 2.5rem;
+                                padding: 0 1rem;
+                                font-weight: 500;
+                                color: @color-secondaryvariant1-90;
+                                border-radius: 0.25em;
+                                box-shadow: 0 4px 0 1px @color-background-40;
+                                background-color: @color-background;
+                            }
+
+                            .label {
+                                margin: 0 1rem;
+                                white-space: nowrap;
+                                color: @color-secondaryvariant1-90;
+                            }
+                        }
                    }
                }
            }
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/useProfileSettingsInputs.js
@ -1,12 +1,13 @@
 // Copyright (C) 2017-2022 Smart code 203358507

+const React = require('react');
 const { useServices } = require('stremio/services');
-const { CONSTANTS, languageNames, useDeepEqualMemo } = require('stremio/common');
+const { CONSTANTS, languageNames } = require('stremio/common');

 const useProfileSettingsInputs = (profile) => {
    const { core } = useServices();
-    // TODO combine those useDeepEqualMemo in one
-    const interfaceLanguageSelect = useDeepEqualMemo(() => ({
+    // TODO combine those useMemo in one
+    const interfaceLanguageSelect = React.useMemo(() => ({
        options: Object.keys(languageNames).map((code) => ({
            value: code,
            label: languageNames[code]
@ -25,7 +26,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const subtitlesLanguageSelect = useDeepEqualMemo(() => ({
+    const subtitlesLanguageSelect = React.useMemo(() => ({
        options: Object.keys(languageNames).map((code) => ({
            value: code,
            label: languageNames[code]
@ -44,7 +45,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const subtitlesSizeSelect = useDeepEqualMemo(() => ({
+    const subtitlesSizeSelect = React.useMemo(() => ({
        options: CONSTANTS.SUBTITLES_SIZES.map((size) => ({
            value: `${size}`,
            label: `${size}%`
@ -66,7 +67,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const subtitlesTextColorInput = useDeepEqualMemo(() => ({
+    const subtitlesTextColorInput = React.useMemo(() => ({
        value: profile.settings.subtitlesTextColor,
        onChange: (event) => {
            core.transport.dispatch({
@ -81,7 +82,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const subtitlesBackgroundColorInput = useDeepEqualMemo(() => ({
+    const subtitlesBackgroundColorInput = React.useMemo(() => ({
        value: profile.settings.subtitlesBackgroundColor,
        onChange: (event) => {
            core.transport.dispatch({
@ -96,7 +97,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const subtitlesOutlineColorInput = useDeepEqualMemo(() => ({
+    const subtitlesOutlineColorInput = React.useMemo(() => ({
        value: profile.settings.subtitlesOutlineColor,
        onChange: (event) => {
            core.transport.dispatch({
@ -111,7 +112,26 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const seekTimeDurationSelect = useDeepEqualMemo(() => ({
+    const audioLanguageSelect = React.useMemo(() => ({
+        options: Object.keys(languageNames).map((code) => ({
+            value: code,
+            label: languageNames[code]
+        })),
+        selected: [profile.settings.audioLanguage],
+        onSelect: (event) => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        audioLanguage: event.value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+    const seekTimeDurationSelect = React.useMemo(() => ({
        options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
            value: `${size}`,
            label: `${size / 1000} seconds`
@ -133,7 +153,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const bingeWatchingCheckbox = useDeepEqualMemo(() => ({
+    const bingeWatchingCheckbox = React.useMemo(() => ({
        checked: profile.settings.bingeWatching,
        onClick: () => {
            core.transport.dispatch({
@ -148,7 +168,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const playInBackgroundCheckbox = useDeepEqualMemo(() => ({
+    const playInBackgroundCheckbox = React.useMemo(() => ({
        checked: profile.settings.playInBackground,
        onClick: () => {
            core.transport.dispatch({
@ -163,7 +183,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const playInExternalPlayerCheckbox = useDeepEqualMemo(() => ({
+    const playInExternalPlayerCheckbox = React.useMemo(() => ({
        checked: profile.settings.playInExternalPlayer,
        onClick: () => {
            core.transport.dispatch({
@ -178,7 +198,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const hardwareDecodingCheckbox = useDeepEqualMemo(() => ({
+    const hardwareDecodingCheckbox = React.useMemo(() => ({
        checked: profile.settings.hardwareDecoding,
        onClick: () => {
            core.transport.dispatch({
@ -193,7 +213,7 @@ const useProfileSettingsInputs = (profile) => {
            });
        }
    }), [profile.settings]);
-    const streamingServerUrlInput = useDeepEqualMemo(() => ({
+    const streamingServerUrlInput = React.useMemo(() => ({
        value: profile.settings.streamingServerUrl,
        onChange: (value) => {
            core.transport.dispatch({
@ -215,6 +235,7 @@ const useProfileSettingsInputs = (profile) => {
        subtitlesTextColorInput,
        subtitlesBackgroundColorInput,
        subtitlesOutlineColorInput,
+        audioLanguageSelect,
        seekTimeDurationSelect,
        bingeWatchingCheckbox,
        playInBackgroundCheckbox,
--- a/src/routes/Settings/useStreamingServerSettingsInputs.js
+++ b/src/routes/Settings/useStreamingServerSettingsInputs.js
@ -1,8 +1,8 @@
 // Copyright (C) 2017-2022 Smart code 203358507

+const React = require('react');
 const isEqual = require('lodash.isequal');
 const { useServices } = require('stremio/services');
-const { useDeepEqualMemo } = require('stremio/common');

 const CACHE_SIZES = [0, 2147483648, 5368709120, 10737418240, null];

@ -53,8 +53,8 @@ const TORRENT_PROFILES = {

 const useStreamingServerSettingsInputs = (streamingServer) => {
    const { core } = useServices();
-    // TODO combine those useDeepEqualMemo in one
-    const cacheSizeSelect = useDeepEqualMemo(() => {
+    // TODO combine those useMemo in one
+    const cacheSizeSelect = React.useMemo(() => {
        if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
            return null;
        }
@ -82,7 +82,7 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
            }
        };
    }, [streamingServer.settings]);
-    const torrentProfileSelect = useDeepEqualMemo(() => {
+    const torrentProfileSelect = React.useMemo(() => {
        if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
            return null;
        }
--- a/src/services/Chromecast/Chromecast.js
+++ b/src/services/Chromecast/Chromecast.js
@ -20,7 +20,7 @@ function Chromecast() {
    function onTransportInitError(args) {
        console.error(args);
        active = false;
-        error = new Error('Google Cast API not available');
+        error = new Error('Google Cast API not available', { cause: args });
        starting = false;
        onStateChanged();
        transport = null;
--- a/src/services/Chromecast/ChromecastTransport.js
+++ b/src/services/Chromecast/ChromecastTransport.js
@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507

 const EventEmitter = require('eventemitter3');
+const hat = require('hat');

 const MESSAGE_NAMESPACE = 'urn:x-cast:com.stremio';
 const CHUNK_SIZE = 20000;
@ -33,7 +34,7 @@ const initialize = () => {

 function ChromecastTransport() {
    const events = new EventEmitter();
-    const chunks = [];
+    const messages = {};

    initialize()
        .then(() => {
@ -59,26 +60,17 @@ function ChromecastTransport() {

    function onMessage(_, message) {
        try {
-            const { chunk, last } = JSON.parse(message);
-            chunks.push(chunk);
-            if (!last) {
-                return;
+            const { id, chunk, index, length } = JSON.parse(message);
+            messages[id] = messages[id] || [];
+            messages[id][index] = chunk;
+            if (Object.keys(messages[id]).length === length) {
+                const parsedMessage = JSON.parse(messages[id].join(''));
+                delete messages[id];
+                events.emit('message', parsedMessage);
            }
        } catch (error) {
-            chunks.splice(0, chunks.length);
            events.emit('message-error', error);
-            return;
        }
-
-        let parsedMessage;
-        try {
-            parsedMessage = JSON.parse(chunks.splice(0, chunks.length).join(''));
-        } catch (error) {
-            events.emit('message-error', error);
-            return;
-        }
-
-        events.emit('message', parsedMessage);
    }
    function onApplicationStatusChanged(event) {
        events.emit(cast.framework.CastSession.APPLICATION_STATUS_CHANGED, event);
@ -165,11 +157,13 @@ function ChromecastTransport() {
                const chunk = serializedMessage.slice(start, start + CHUNK_SIZE);
                chunks.push(chunk);
            }
-
+            const id = hat();
            return Promise.all(chunks.map((chunk, index) => {
                return castSession.sendMessage(MESSAGE_NAMESPACE, {
+                    id,
                    chunk,
-                    last: index === chunks.length - 1,
+                    index,
+                    length: chunks.length
                });
            }));
        } else {
--- a/src/services/Core/Core.js
+++ b/src/services/Core/Core.js
@ -20,7 +20,7 @@ function Core(args) {
    function onTransportError(args) {
        console.error(args);
        active = false;
-        error = new Error('Stremio Core Transport initialization failed');
+        error = new Error('Stremio Core Transport initialization failed', { cause: args });
        starting = false;
        onStateChanged();
        transport = null;
--- a/webpack.config.js
+++ b/webpack.config.js
@ -6,8 +6,10 @@ const webpack = require('webpack');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 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 pachageJson = require('./package.json');

 const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
@ -187,8 +189,18 @@ module.exports = (env, argv) => ({
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['*']
        }),
+        argv.mode === 'production' && 
+            new WorkboxPlugin.GenerateSW({
+                maximumFileSizeToCacheInBytes: 20000000,
+                clientsClaim: true,
+                skipWaiting: true
+            }),
        new CopyWebpackPlugin({
-            patterns: [{ from: 'favicons', to: `${COMMIT_HASH}/favicons` }]
+            patterns: [
+                { from: 'favicons', to: `${COMMIT_HASH}/favicons` },
+                { from: 'images', to: `${COMMIT_HASH}/images` },
+                { from: 'manifest.json', to: `${COMMIT_HASH}/manifest.json` },
+            ]
        }),
        new MiniCssExtractPlugin({
            filename: `${COMMIT_HASH}/styles/[name].css`
@ -197,7 +209,10 @@ module.exports = (env, argv) => ({
            template: './src/index.html',
            inject: false,
            scriptLoading: 'blocking',
-            faviconsPath: `${COMMIT_HASH}/favicons`
+            themeColor: colors.background,
+            faviconsPath: `${COMMIT_HASH}/favicons`,
+            imagesPath: `${COMMIT_HASH}/images`,
+            manifestPath: `${COMMIT_HASH}/manifest.json`,
        })
-    ]
+    ].filter(Boolean)
 });