Merge branch 'development' into feat/untranslated-strings

2026-03-11 21:27:05 +00:00 · 2025-06-10 13:57:12 +03:00 · 2025-06-10 13:57:12 +03:00 · 2f0ec456fe
commit 2f0ec456fe
parent 8768b9ced3 d75c9b1d99
27 changed files with 277 additions and 213 deletions
--- a/.github/workflows/auto_assign.yml
+++ b/.github/workflows/auto_assign.yml
@ -0,0 +1,65 @@
+name: PR and Issue Workflow
+on:
+  pull_request:
+    types: [opened, reopened]
+  issues:
+    types: [opened]
+jobs:
+  auto-assign-and-label:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      # Auto assign PR to author
+      - name: Auto Assign PR to Author
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const pr = context.payload.pull_request;
+            if (pr) {
+              await github.rest.issues.addAssignees({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: pr.number,
+                assignees: [pr.user.login]
+              });
+              console.log(`Assigned PR #${pr.number} to author @${pr.user.login}`);
+            }
+
+      # Dynamic labeling based on PR/Issue title
+      - name: Label PRs and Issues
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const prTitle = context.payload.pull_request ? context.payload.pull_request.title : context.payload.issue.title;
+            const issueNumber = context.payload.pull_request ? context.payload.pull_request.number : context.payload.issue.number;
+            const isIssue = context.payload.issue !== undefined;
+            const labelMappings = [
+              { pattern: /^feat(ure)?/i, label: 'feature' },
+              { pattern: /^fix/i, label: 'bug' },
+              { pattern: /^refactor/i, label: 'refactor' },
+              { pattern: /^chore/i, label: 'chore' },
+              { pattern: /^docs?/i, label: 'documentation' },
+              { pattern: /^perf(ormance)?/i, label: 'performance' },
+              { pattern: /^test/i, label: 'testing' }
+            ];
+            let labelsToAdd = [];
+            for (const mapping of labelMappings) {
+              if (mapping.pattern.test(prTitle)) {
+                labelsToAdd.push(mapping.label);
+              }
+            }
+            if (labelsToAdd.length > 0) {
+              github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issueNumber,
+                labels: labelsToAdd
+              });
+            }
--- a/src/App/App.js
+++ b/src/App/App.js
@ -102,12 +102,18 @@ const App = () => {
    // Handle shell events
    React.useEffect(() => {
        const onOpenMedia = (data) => {
-            if (data.startsWith('stremio:///')) return;
-            if (data.startsWith('stremio://')) {
-                const transportUrl = data.replace('stremio://', 'https://');
-                if (URL.canParse(transportUrl)) {
-                    window.location.href = `#/addons?addon=${encodeURIComponent(transportUrl)}`;
+            try {
+                const { protocol, hostname, pathname, searchParams } = new URL(data);
+                if (protocol === CONSTANTS.PROTOCOL) {
+                    if (hostname.length) {
+                        const transportUrl = `https://${hostname}${pathname}`;
+                        window.location.href = `#/addons?addon=${encodeURIComponent(transportUrl)}`;
+                    } else {
+                        window.location.href = `#${pathname}?${searchParams.toString()}`;
+                    }
                }
+            } catch (e) {
+                console.error('Failed to open media:', e);
            }
        };

--- a/src/common/CONSTANTS.js
+++ b/src/common/CONSTANTS.js
@ -106,6 +106,8 @@ const EXTERNAL_PLAYERS = [

 const WHITELISTED_HOSTS = ['stremio.com', 'strem.io', 'stremio.zendesk.com', 'google.com', 'youtube.com', 'twitch.tv', 'twitter.com', 'x.com', 'netflix.com', 'adex.network', 'amazon.com', 'forms.gle'];

+const PROTOCOL = 'stremio:';
+
 module.exports = {
    CHROMECAST_RECEIVER_APP_ID,
    DEFAULT_STREAMING_SERVER_URL,
@ -127,4 +129,5 @@ module.exports = {
    SUPPORTED_LOCAL_SUBTITLES,
    EXTERNAL_PLAYERS,
    WHITELISTED_HOSTS,
+    PROTOCOL,
 };
--- a/src/common/Platform/Platform.tsx
+++ b/src/common/Platform/Platform.tsx
@ -1,6 +1,5 @@
 import React, { createContext, useContext } from 'react';
 import { WHITELISTED_HOSTS } from 'stremio/common/CONSTANTS';
-import useShell from 'stremio/common/useShell';
 import { name, isMobile } from './device';

 interface PlatformContext {
@ -16,19 +15,13 @@ type Props = {
 };

 const PlatformProvider = ({ children }: Props) => {
-    const shell = useShell();
-
    const openExternal = (url: string) => {
        try {
            const { hostname } = new URL(url);
            const isWhitelisted = WHITELISTED_HOSTS.some((host: string) => hostname.endsWith(host));
            const finalUrl = !isWhitelisted ? `https://www.stremio.com/warning#${encodeURIComponent(url)}` : url;

-            if (shell.active) {
-                shell.send('open-external', finalUrl);
-            } else {
-                window.open(finalUrl, '_blank');
-            }
+            window.open(finalUrl, '_blank');
        } catch (e) {
            console.error('Failed to parse external url:', e);
        }
--- a/src/common/routesRegexp.js
+++ b/src/common/routesRegexp.js
@ -6,7 +6,7 @@ const routesRegexp = {
        urlParamsNames: []
    },
    board: {
-        regexp: /^\/?$/,
+        regexp: /^\/?(?:board)?$/,
        urlParamsNames: []
    },
    discover: {
--- a/src/common/useFullscreen.ts
+++ b/src/common/useFullscreen.ts
@ -46,6 +46,10 @@ const useFullscreen = () => {
                exitFullscreen();
            }

+            if (event.code === 'KeyF') {
+                toggleFullscreen();
+            }
+
            if (event.code === 'F11' && shell.active) {
                toggleFullscreen();
            }
@ -60,7 +64,7 @@ const useFullscreen = () => {
            document.removeEventListener('keydown', onKeyDown);
            document.removeEventListener('fullscreenchange', onFullscreenChange);
        };
-    }, [settings.escExitFullscreen]);
+    }, [settings.escExitFullscreen, toggleFullscreen]);

    return [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen];
 };
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@ -10,23 +10,25 @@ import styles from './Dropdown.less';

 type Props = {
    options: MultiselectMenuOption[];
-    selectedOption?: MultiselectMenuOption | null;
+    value?: string | number;
    menuOpen: boolean | (() => void);
    level: number;
    setLevel: (level: number) => void;
-    onSelect: (value: number) => void;
+    onSelect: (value: string | number) => void;
 };

-const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }: Props) => {
+const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
    const { t } = useTranslation();
    const optionsRef = useRef(new Map());
    const containerRef = useRef(null);

-    const handleSetOptionRef = useCallback((value: number) => (node: HTMLButtonElement | null) => {
+    const selectedOption = options.find((opt) => opt.value === value);
+
+    const handleSetOptionRef = useCallback((optionValue: string | number) => (node: HTMLButtonElement | null) => {
        if (node) {
-            optionsRef.current.set(value, node);
+            optionsRef.current.set(optionValue, node);
        } else {
-            optionsRef.current.delete(value);
+            optionsRef.current.delete(optionValue);
        }
    }, []);

@ -63,11 +65,11 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
                .filter((option: MultiselectMenuOption) => !option.hidden)
                .map((option: MultiselectMenuOption) => (
                    <Option
-                        key={option.id}
+                        key={option.value}
                        ref={handleSetOptionRef(option.value)}
                        option={option}
                        onSelect={onSelect}
-                        selectedOption={selectedOption}
+                        selectedValue={value}
                    />
                ))
            }
--- a/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
@ -8,13 +8,12 @@ import Icon from '@stremio/stremio-icons/react';

 type Props = {
    option: MultiselectMenuOption;
-    selectedOption?: MultiselectMenuOption | null;
-    onSelect: (value: number) => void;
+    selectedValue?: string | number;
+    onSelect: (value: string | number) => void;
 };

-const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedOption, onSelect }, ref) => {
-    // consider using option.id === selectedOption?.id instead
-    const selected = useMemo(() => option?.value === selectedOption?.value, [option, selectedOption]);
+const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedValue, onSelect }, ref) => {
+    const selected = useMemo(() => option?.value === selectedValue, [option, selectedValue]);

    const handleClick = useCallback(() => {
        onSelect(option.value);
--- a/src/components/MultiselectMenu/MultiselectMenu.less
+++ b/src/components/MultiselectMenu/MultiselectMenu.less
@ -14,14 +14,21 @@
    }

    .multiselect-button {
-        color: var(--primary-foreground-color);
        padding: 0.75rem 1.5rem;
        display: flex;
+        flex: 1;
        justify-content: space-between;
        align-items: center;
        gap: 0 0.5rem;
        border-radius: @border-radius;

+        .label {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: var(--primary-foreground-color);
+        }
+
        .icon {
            width: 1rem;
            color: var(--primary-foreground-color);
@ -33,7 +40,7 @@
        }
    }

-    &:hover {
+    &:hover, &.active {
        background-color: var(--overlay-color);
    }
 }
--- a/src/components/MultiselectMenu/MultiselectMenu.tsx
+++ b/src/components/MultiselectMenu/MultiselectMenu.tsx
@ -11,23 +11,25 @@ import useOutsideClick from 'stremio/common/useOutsideClick';

 type Props = {
    className?: string,
-    title?: string;
+    title?: string | (() => string);
    options: MultiselectMenuOption[];
-    selectedOption?: MultiselectMenuOption;
-    onSelect: (value: number) => void;
+    value?: string | number;
+    onSelect: (value: string | number) => void;
 };

-const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
+const MultiselectMenu = ({ className, title, options, value, onSelect }: Props) => {
    const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
    const multiselectMenuRef = useOutsideClick(() => closeMenu());
    const [level, setLevel] = React.useState<number>(0);

-    const onOptionSelect = (value: number) => {
-        level ? setLevel(level + 1) : onSelect(value), closeMenu();
+    const selectedOption = options.find((opt) => opt.value === value);
+
+    const onOptionSelect = (selectedValue: string | number) => {
+        level ? setLevel(level + 1) : onSelect(selectedValue), closeMenu();
    };

    return (
-        <div className={classNames(styles['multiselect-menu'], className)} ref={multiselectMenuRef}>
+        <div className={classNames(styles['multiselect-menu'], { [styles['active']]: menuOpen }, className)} ref={multiselectMenuRef}>
            <Button
                className={classNames(styles['multiselect-button'], { [styles['open']]: menuOpen })}
                onClick={toggleMenu}
@ -35,7 +37,13 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
                aria-haspopup='listbox'
                aria-expanded={menuOpen}
            >
-                {title}
+                <div className={styles['label']}>
+                    {
+                        typeof title === 'function'
+                            ? title()
+                            : title ?? selectedOption?.label
+                    }
+                </div>
                <Icon name={'caret-down'} className={classNames(styles['icon'], { [styles['open']]: menuOpen })} />
            </Button>
            {
@ -46,7 +54,7 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
                        options={options}
                        onSelect={onOptionSelect}
                        menuOpen={menuOpen}
-                        selectedOption={selectedOption}
+                        value={value}
                    />
                    : null
            }
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@ -6,7 +6,7 @@ const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { usePlatform, useBinaryState, withCoreSuspender } = require('stremio/common');
-const { AddonDetailsModal, Button, Image, MainNavBars, Multiselect, ModalDialog, SearchBar, SharePrompt, TextInput } = require('stremio/components');
+const { AddonDetailsModal, Button, Image, MainNavBars, ModalDialog, SearchBar, SharePrompt, TextInput, MultiselectMenu } = require('stremio/components');
 const { useServices } = require('stremio/services');
 const Addon = require('./Addon');
 const useInstalledAddons = require('./useInstalledAddons');
@ -107,7 +107,7 @@ const Addons = ({ urlParams, queryParams }) => {
            <div className={styles['addons-content']}>
                <div className={styles['selectable-inputs-container']}>
                    {selectInputs.map((selectInput, index) => (
-                        <Multiselect
+                        <MultiselectMenu
                            {...selectInput}
                            key={index}
                            className={styles['select-input-container']}
@ -218,7 +218,7 @@ const Addons = ({ urlParams, queryParams }) => {
                filtersModalOpen ?
                    <ModalDialog title={t('ADDONS_FILTERS')} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}>
                        {selectInputs.map((selectInput, index) => (
-                            <Multiselect
+                            <MultiselectMenu
                                {...selectInput}
                                key={index}
                                className={styles['select-input-container']}
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@ -90,6 +90,7 @@
            }

            .select-input-container {
+                background-color: var(--overlay-color);
                flex-grow: 0;
                flex-shrink: 1;
                flex-basis: 15rem;
--- a/src/routes/Addons/useSelectableInputs.js
+++ b/src/routes/Addons/useSelectableInputs.js
@ -4,8 +4,8 @@ const React = require('react');
 const { useTranslate } = require('stremio/common');

 const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
+    const selectedCatalog = remoteAddons.selectable.catalogs.concat(installedAddons.selectable.catalogs).find(({ selected }) => selected);
    const catalogSelect = {
-        title: t.string('SELECT_CATALOG'),
        options: remoteAddons.selectable.catalogs
            .concat(installedAddons.selectable.catalogs)
            .map(({ name, deepLinks }) => ({
@ -13,24 +13,22 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
                label: t.stringWithPrefix(name.toUpperCase(), 'ADDON_'),
                title: t.stringWithPrefix(name.toUpperCase(), 'ADDON_'),
            })),
-        selected: remoteAddons.selectable.catalogs
-            .concat(installedAddons.selectable.catalogs)
-            .filter(({ selected }) => selected)
-            .map(({ deepLinks }) => deepLinks.addons),
-        renderLabelText: remoteAddons.selected !== null ?
+        value: selectedCatalog ? selectedCatalog.deepLinks.addons : undefined,
+        title: remoteAddons.selected !== null ?
            () => {
                const selectableCatalog = remoteAddons.selectable.catalogs
                    .find(({ id }) => id === remoteAddons.selected.request.path.id);
                return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
            }
-            :
-            null,
-        onSelect: (event) => {
-            window.location = event.value;
+            : null,
+        onSelect: (value) => {
+            window.location = value;
        }
    };
+    const selectedType = installedAddons.selected !== null
+        ? installedAddons.selectable.types.find(({ selected }) => selected)
+        : remoteAddons.selectable.types.find(({ selected }) => selected);
    const typeSelect = {
-        title: t.string('SELECT_TYPE'),
        options: installedAddons.selected !== null ?
            installedAddons.selectable.types.map(({ type, deepLinks }) => ({
                value: deepLinks.addons,
@ -41,15 +39,8 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
                value: deepLinks.addons,
                label: t.stringWithPrefix(type, 'TYPE_')
            })),
-        selected: installedAddons.selected !== null ?
-            installedAddons.selectable.types
-                .filter(({ selected }) => selected)
-                .map(({ deepLinks }) => deepLinks.addons)
-            :
-            remoteAddons.selectable.types
-                .filter(({ selected }) => selected)
-                .map(({ deepLinks }) => deepLinks.addons),
-        renderLabelText: () => {
+        value: selectedType ? selectedType.deepLinks.addons : undefined,
+        title: () => {
            return installedAddons.selected !== null ?
                installedAddons.selected.request.type === null ?
                    t.string('TYPE_ALL')
@ -61,8 +52,8 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
                    :
                    typeSelect.title;
        },
-        onSelect: (event) => {
-            window.location = event.value;
+        onSelect: (value) => {
+            window.location = value;
        }
    };
    return [catalogSelect, typeSelect];
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@ -7,7 +7,7 @@ const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useServices } = require('stremio/services');
 const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
-const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog } = require('stremio/components');
+const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, ModalDialog, MultiselectMenu } = require('stremio/components');
 const useDiscover = require('./useDiscover');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
@ -102,14 +102,13 @@ const Discover = ({ urlParams, queryParams }) => {
            <div className={styles['discover-content']}>
                <div className={styles['catalog-container']}>
                    <div className={styles['selectable-inputs-container']}>
-                        {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-                            <Multiselect
+                        {selectInputs.map(({ title, options, value, onSelect }, index) => (
+                            <MultiselectMenu
                                key={index}
                                className={styles['select-input']}
                                title={title}
                                options={options}
-                                selected={selected}
-                                renderLabelText={renderLabelText}
+                                value={value}
                                onSelect={onSelect}
                            />
                        ))}
@ -205,14 +204,13 @@ const Discover = ({ urlParams, queryParams }) => {
            {
                inputsModalOpen ?
                    <ModalDialog title={t('CATALOG_FILTERS')} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
-                        {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-                            <Multiselect
+                        {selectInputs.map(({ title, options, value, onSelect }, index) => (
+                            <MultiselectMenu
                                key={index}
                                className={styles['select-input']}
                                title={title}
                                options={options}
-                                selected={selected}
-                                renderLabelText={renderLabelText}
+                                value={value}
                                onSelect={onSelect}
                            />
                        ))}
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@ -50,6 +50,7 @@

                .select-input {
                    flex: 0 1 15rem;
+                    background-color: var(--overlay-color);

                    &:not(:first-child) {
                        margin-left: 1.5rem;
--- a/src/routes/Discover/useSelectableInputs.js
+++ b/src/routes/Discover/useSelectableInputs.js
@ -4,72 +4,70 @@ const React = require('react');
 const { useTranslate } = require('stremio/common');

 const mapSelectableInputs = (discover, t) => {
+    const selectedType = discover.selectable.types.find(({ selected }) => selected);
    const typeSelect = {
-        title: t.string('SELECT_TYPE'),
        options: discover.selectable.types
            .map(({ type, deepLinks }) => ({
                value: deepLinks.discover,
                label: t.stringWithPrefix(type, 'TYPE_')
            })),
-        selected: discover.selectable.types
-            .filter(({ selected }) => selected)
-            .map(({ deepLinks }) => deepLinks.discover),
-        renderLabelText: discover.selected !== null ?
-            () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
-            :
-            null,
-        onSelect: (event) => {
-            window.location = event.value;
+        value: selectedType
+            ? selectedType.deepLinks.discover
+            : undefined,
+        title: discover.selected !== null
+            ? () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
+            : t.string('SELECT_TYPE'),
+        onSelect: (value) => {
+            window.location = value;
        }
    };
+    const selectedCatalog = discover.selectable.catalogs.find(({ selected }) => selected);
    const catalogSelect = {
-        title: t.string('SELECT_CATALOG'),
        options: discover.selectable.catalogs
            .map(({ id, name, addon, deepLinks }) => ({
                value: deepLinks.discover,
                label: t.catalogTitle({ addon, id, name }),
                title: `${name} (${addon.manifest.name})`
            })),
-        selected: discover.selectable.catalogs
-            .filter(({ selected }) => selected)
-            .map(({ deepLinks }) => deepLinks.discover),
-        renderLabelText: discover.selected !== null ?
-            () => {
+        value: discover.selected?.request.path.id
+            ? selectedCatalog.deepLinks.discover
+            : undefined,
+        title: discover.selected !== null
+            ? () => {
                const selectableCatalog = discover.selectable.catalogs
                    .find(({ id }) => id === discover.selected.request.path.id);
                return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
            }
            :
-            null,
-        onSelect: (event) => {
-            window.location = event.value;
+            t.string('SELECT_CATALOG'),
+        onSelect: (value) => {
+            window.location =value;
        }
    };
-    const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
-        title: t.string(name),
-        isRequired: isRequired,
-        options: options.map(({ value, deepLinks }) => ({
-            label: typeof value === 'string' ? t.string(value) : t.string('NONE'),
-            value: JSON.stringify({
-                href: deepLinks.discover,
-                value
-            })
-        })),
-        selected: options
-            .filter(({ selected }) => selected)
-            .map(({ value, deepLinks }) => JSON.stringify({
-                href: deepLinks.discover,
-                value
+    const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => {
+        const selectedExtra = options.find(({ selected }) => selected);
+        return {
+            isRequired: isRequired,
+            options: options.map(({ value, deepLinks }) => ({
+                label: typeof value === 'string' ? t.string(value) : t.string('NONE'),
+                value: JSON.stringify({
+                    href: deepLinks.discover,
+                    value
+                })
            })),
-        renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
-            () => t.stringWithPrefix(name.toUpperCase(), 'SELECT_')
-            :
-            null,
-        onSelect: (event) => {
-            const { href } = JSON.parse(event.value);
-            window.location = href;
-        }
-    }));
+            value: JSON.stringify({
+                href: selectedExtra.deepLinks.discover,
+                value: selectedExtra.value,
+            }),
+            title: options.some(({ selected, value }) => selected && value === null) ?
+                () => t.string(name.toUpperCase())
+                : t.string(selectedExtra.value),
+            onSelect: (value) => {
+                const { href } = JSON.parse(value);
+                window.location = href;
+            }
+        };
+    });
    return [[typeSelect, catalogSelect, ...extraSelects], discover.selectable.nextPage];
 };

--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@ -6,7 +6,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const NotFound = require('stremio/routes/NotFound');
 const { useProfile, useNotifications, routesRegexp, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
-const { DelayedRenderer, Chips, Image, MainNavBars, Multiselect, LibItem } = require('stremio/components');
+const { DelayedRenderer, Chips, Image, MainNavBars, LibItem, MultiselectMenu } = require('stremio/components');
 const { default: Placeholder } = require('./Placeholder');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
@ -66,17 +66,17 @@ const Library = ({ model, urlParams, queryParams }) => {
        }
    }, [profile.auth, library.selected]);
    React.useEffect(() => {
-        if (!library.selected?.type && typeSelect.selected) {
-            window.location = typeSelect.selected[0];
+        if (!library.selected?.type && typeSelect.value) {
+            window.location = typeSelect.value;
        }
-    }, [typeSelect.selected, library.selected]);
+    }, [typeSelect.value, library.selected]);
    return (
        <MainNavBars className={styles['library-container']} route={model}>
            {
                profile.auth !== null ?
                    <div className={styles['library-content']}>
                        <div className={styles['selectable-inputs-container']}>
-                            <Multiselect {...typeSelect} className={styles['select-input-container']} />
+                            <MultiselectMenu {...typeSelect} className={styles['select-input-container']} />
                            <Chips {...sortChips} className={styles['select-input-container']} />
                        </div>
                        {
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@ -42,6 +42,7 @@
                flex-shrink: 1;
                flex-basis: 15rem;
                height: 2.75rem;
+                background-color: var(--overlay-color);

                &:not(:last-child) {
                    margin-right: 1.5rem;
--- a/src/routes/Library/useSelectableInputs.js
+++ b/src/routes/Library/useSelectableInputs.js
@ -2,22 +2,17 @@

 const React = require('react');
 const { useTranslate } = require('stremio/common');
-
 const mapSelectableInputs = (library, t) => {
-    const selectedType = library.selectable.types
-        .filter(({ selected }) => selected).map(({ deepLinks }) => deepLinks.library);
+    const selectedType = library.selectable.types.find(({ selected }) => selected) || library.selectable.types.find(({ type }) => type === null);
    const typeSelect = {
-        title: t.string('SELECT_TYPE'),
        options: library.selectable.types
            .map(({ type, deepLinks }) => ({
                value: deepLinks.library,
                label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
            })),
-        selected: selectedType.length
-            ? selectedType
-            : [library.selectable.types[0]].map(({ deepLinks }) => deepLinks.library),
-        onSelect: (event) => {
-            window.location = event.value;
+        value: selectedType?.deepLinks.library,
+        onSelect: (value) => {
+            window.location = value;
        }
    };
    const sortChips = {
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image, Multiselect } = require('stremio/components');
+const { Button, Image, MultiselectMenu } = require('stremio/components');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');
@ -21,9 +21,9 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
    const profile = useProfile();
    const streamsContainerRef = React.useRef(null);
    const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
-    const onAddonSelected = React.useCallback((event) => {
+    const onAddonSelected = React.useCallback((value) => {
        streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
-        setSelectedAddon(event.value);
+        setSelectedAddon(value);
    }, [platform]);
    const showInstallAddonsButton = React.useMemo(() => {
        return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true && !video?.upcoming;
@ -77,7 +77,6 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
    }, [streamsByAddon, selectedAddon]);
    const selectableOptions = React.useMemo(() => {
        return {
-            title: 'Select Addon',
            options: [
                {
                    value: ALL_ADDONS_KEY,
@ -90,7 +89,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
                    title: streamsByAddon[transportUrl].addon.manifest.name,
                }))
            ],
-            selected: [selectedAddon],
+            value: selectedAddon,
            onSelect: onAddonSelected
        };
    }, [streamsByAddon, selectedAddon]);
@ -117,7 +116,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
                }
                {
                    Object.keys(streamsByAddon).length > 1 ?
-                        <Multiselect
+                        <MultiselectMenu
                            {...selectableOptions}
                            className={styles['select-input-container']}
                        />
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@ -114,7 +114,7 @@
        .select-input-container {
            min-width: 40%;
            flex-grow: 1;
-            background: none;
+            background-color: none;

            &:hover, &:focus, &:global(.active) {
                background-color: var(--overlay-color);
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
@ -17,7 +17,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
        }));
    }, [seasons]);
    const selectedSeason = React.useMemo(() => {
-        return { label: String(season), value: String(season) };
+        return String(season);
    }, [season]);
    const prevNextButtonOnClick = React.useCallback((event) => {
        if (typeof onSelect === 'function') {
@ -64,7 +64,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
                className={styles['seasons-popup-label-container']}
                options={options}
                title={season > 0 ? t('SEASON_NUMBER', { season }) : t('SPECIAL')}
-                selectedOption={selectedSeason}
+                value={selectedSeason}
                onSelect={seasonOnSelect}
            />
            <Button className={classnames(styles['next-season-button'], { 'disabled': nextDisabled })} title={t('NEXT_SEASON')} data-action={'next'} onClick={prevNextButtonOnClick}>
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@ -8,7 +8,7 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 const { useProfile, usePlatform, useStreamingServer, withCoreSuspender, useToast } = require('stremio/common');
-const { Button, ColorInput, MainNavBars, Multiselect, Toggle } = require('stremio/components');
+const { Button, ColorInput, MainNavBars, MultiselectMenu, Toggle } = require('stremio/components');
 const useProfileSettingsInputs = require('./useProfileSettingsInputs');
 const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
 const useDataExport = require('./useDataExport');
@ -314,7 +314,7 @@ const Settings = () => {
                            </div>
                            <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={t('SETTINGS_TRAKT_AUTHENTICATE')} disabled={profile.auth === null} tabIndex={-1} onClick={toggleTraktOnClick}>
                                <div className={styles['label']}>
-                                    { profile.auth !== null && profile.auth.user !== null && profile.auth.user.trakt !== null ? t('LOG_OUT') : t('SETTINGS_TRAKT_AUTHENTICATE') }
+                                    { isTraktAuthenticated ? t('LOG_OUT') : t('SETTINGS_TRAKT_AUTHENTICATE') }
                                </div>
                            </Button>
                        </div>
@ -324,7 +324,7 @@ const Settings = () => {
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>{ t('SETTINGS_UI_LANGUAGE') }</div>
                            </div>
-                            <Multiselect
+                            <MultiselectMenu
                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                tabIndex={-1}
                                {...interfaceLanguageSelect}
@ -376,7 +376,7 @@ const Settings = () => {
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>{ t('SETTINGS_SUBTITLES_LANGUAGE') }</div>
                            </div>
-                            <Multiselect
+                            <MultiselectMenu
                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                {...subtitlesLanguageSelect}
                            />
@ -385,7 +385,7 @@ const Settings = () => {
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>{ t('SETTINGS_SUBTITLES_SIZE') }</div>
                            </div>
-                            <Multiselect
+                            <MultiselectMenu
                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                {...subtitlesSizeSelect}
                            />
@ -427,7 +427,7 @@ const Settings = () => {
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>{ t('SETTINGS_DEFAULT_AUDIO_TRACK') }</div>
                            </div>
-                            <Multiselect
+                            <MultiselectMenu
                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                {...audioLanguageSelect}
                            />
@ -452,7 +452,7 @@ const Settings = () => {
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>{ t('SETTINGS_SEEK_KEY') }</div>
                            </div>
-                            <Multiselect
+                            <MultiselectMenu
                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                {...seekTimeDurationSelect}
                            />
@ -461,7 +461,7 @@ const Settings = () => {
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>{ t('SETTINGS_SEEK_KEY_SHIFT') }</div>
                            </div>
-                            <Multiselect
+                            <MultiselectMenu
                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                {...seekShortTimeDurationSelect}
                            />
@ -496,7 +496,7 @@ const Settings = () => {
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>{ t('SETTINGS_NEXT_VIDEO_POPUP_DURATION') }</div>
                            </div>
-                            <Multiselect
+                            <MultiselectMenu
                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                disabled={!profile.settings.bingeWatching}
                                {...nextVideoPopupDurationSelect}
@ -512,7 +512,7 @@ const Settings = () => {
                            <div className={styles['option-name-container']}>
                                <div className={styles['label']}>{ t('SETTINGS_PLAY_IN_EXTERNAL_PLAYER') }</div>
                            </div>
-                            <Multiselect
+                            <MultiselectMenu
                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                {...playInExternalPlayerSelect}
                            />
@ -568,7 +568,7 @@ const Settings = () => {
                                    <div className={styles['option-name-container']}>
                                        <div className={styles['label']}>{ t('SETTINGS_HTTPS_ENDPOINT') }</div>
                                    </div>
-                                    <Multiselect
+                                    <MultiselectMenu
                                        className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                        {...remoteEndpointSelect}
                                    />
@ -582,7 +582,7 @@ const Settings = () => {
                                    <div className={styles['option-name-container']}>
                                        <div className={styles['label']}>{ t('SETTINGS_SERVER_CACHE_SIZE') }</div>
                                    </div>
-                                    <Multiselect
+                                    <MultiselectMenu
                                        className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                        {...cacheSizeSelect}
                                    />
@ -596,7 +596,7 @@ const Settings = () => {
                                    <div className={styles['option-name-container']}>
                                        <div className={styles['label']}>{ t('SETTINGS_SERVER_TORRENT_PROFILE') }</div>
                                    </div>
-                                    <Multiselect
+                                    <MultiselectMenu
                                        className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                        {...torrentProfileSelect}
                                    />
@ -610,7 +610,7 @@ const Settings = () => {
                                    <div className={styles['option-name-container']}>
                                        <div className={styles['label']}>{ t('SETTINGS_TRANSCODE_PROFILE') }</div>
                                    </div>
-                                    <Multiselect
+                                    <MultiselectMenu
                                        className={classnames(styles['option-input-container'], styles['multiselect-container'])}
                                        {...transcodingProfileSelect}
                                    />
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@ -267,6 +267,11 @@

                    .option-input-container {
                        padding: 1rem 1.5rem;
+                        
+                        &.multiselect-container {
+                            padding: 0;
+                            background: var(--overlay-color);
+                        }

                        &.button-container {
                            justify-content: center;
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/useProfileSettingsInputs.js
@ -15,17 +15,15 @@ const useProfileSettingsInputs = (profile) => {
            value: codes[0],
            label: name,
        })),
-        selected: [
-            interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage
-        ],
-        onSelect: (event) => {
+        value: interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage,
+        onSelect: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        interfaceLanguage: event.value
+                        interfaceLanguage: value
                    }
                }
            });
@ -72,15 +70,15 @@ const useProfileSettingsInputs = (profile) => {
                label: languageNames[code]
            }))
        ],
-        selected: [profile.settings.subtitlesLanguage],
-        onSelect: (event) => {
+        value: profile.settings.subtitlesLanguage,
+        onSelect: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        subtitlesLanguage: event.value
+                        subtitlesLanguage: value
                    }
                }
            });
@ -91,18 +89,18 @@ const useProfileSettingsInputs = (profile) => {
            value: `${size}`,
            label: `${size}%`
        })),
-        selected: [`${profile.settings.subtitlesSize}`],
-        renderLabelText: () => {
+        value: `${profile.settings.subtitlesSize}`,
+        title: () => {
            return `${profile.settings.subtitlesSize}%`;
        },
-        onSelect: (event) => {
+        onSelect: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        subtitlesSize: parseInt(event.value, 10)
+                        subtitlesSize: parseInt(value, 10)
                    }
                }
            });
@ -110,14 +108,14 @@ const useProfileSettingsInputs = (profile) => {
    }), [profile.settings]);
    const subtitlesTextColorInput = React.useMemo(() => ({
        value: profile.settings.subtitlesTextColor,
-        onChange: (event) => {
+        onChange: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        subtitlesTextColor: event.value
+                        subtitlesTextColor: value
                    }
                }
            });
@ -125,14 +123,14 @@ const useProfileSettingsInputs = (profile) => {
    }), [profile.settings]);
    const subtitlesBackgroundColorInput = React.useMemo(() => ({
        value: profile.settings.subtitlesBackgroundColor,
-        onChange: (event) => {
+        onChange: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        subtitlesBackgroundColor: event.value
+                        subtitlesBackgroundColor: value
                    }
                }
            });
@ -140,14 +138,14 @@ const useProfileSettingsInputs = (profile) => {
    }), [profile.settings]);
    const subtitlesOutlineColorInput = React.useMemo(() => ({
        value: profile.settings.subtitlesOutlineColor,
-        onChange: (event) => {
+        onChange: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        subtitlesOutlineColor: event.value
+                        subtitlesOutlineColor: value
                    }
                }
            });
@ -158,15 +156,15 @@ const useProfileSettingsInputs = (profile) => {
            value: code,
            label: languageNames[code]
        })),
-        selected: [profile.settings.audioLanguage],
-        onSelect: (event) => {
+        value: profile.settings.audioLanguage,
+        onSelect: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        audioLanguage: event.value
+                        audioLanguage: value
                    }
                }
            });
@ -208,18 +206,18 @@ const useProfileSettingsInputs = (profile) => {
            value: `${size}`,
            label: `${size / 1000} ${t('SECONDS')}`
        })),
-        selected: [`${profile.settings.seekTimeDuration}`],
-        renderLabelText: () => {
+        value: `${profile.settings.seekTimeDuration}`,
+        title: () => {
            return `${profile.settings.seekTimeDuration / 1000} ${t('SECONDS')}`;
        },
-        onSelect: (event) => {
+        onSelect: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        seekTimeDuration: parseInt(event.value, 10)
+                        seekTimeDuration: parseInt(value, 10)
                    }
                }
            });
@ -230,18 +228,18 @@ const useProfileSettingsInputs = (profile) => {
            value: `${size}`,
            label: `${size / 1000} ${t('SECONDS')}`
        })),
-        selected: [`${profile.settings.seekShortTimeDuration}`],
-        renderLabelText: () => {
+        value: `${profile.settings.seekShortTimeDuration}`,
+        title: () => {
            return `${profile.settings.seekShortTimeDuration / 1000} ${t('SECONDS')}`;
        },
-        onSelect: (event) => {
+        onSelect: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        seekShortTimeDuration: parseInt(event.value, 10)
+                        seekShortTimeDuration: parseInt(value, 10)
                    }
                }
            });
@ -254,19 +252,19 @@ const useProfileSettingsInputs = (profile) => {
                value,
                label: t(label),
            })),
-        selected: [profile.settings.playerType],
-        renderLabelText: () => {
+        value: profile.settings.playerType,
+        title: () => {
            const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
            return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
        },
-        onSelect: (event) => {
+        onSelect: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        playerType: event.value
+                        playerType: value
                    }
                }
            });
@ -277,21 +275,21 @@ const useProfileSettingsInputs = (profile) => {
            value: `${duration}`,
            label: duration === 0 ? 'Disabled' : `${duration / 1000} ${t('SECONDS')}`
        })),
-        selected: [`${profile.settings.nextVideoNotificationDuration}`],
-        renderLabelText: () => {
+        value: `${profile.settings.nextVideoNotificationDuration}`,
+        title: () => {
            return profile.settings.nextVideoNotificationDuration === 0 ?
                'Disabled'
                :
                `${profile.settings.nextVideoNotificationDuration / 1000} ${t('SECONDS')}`;
        },
-        onSelect: (event) => {
+        onSelect: (value) => {
            core.transport.dispatch({
                action: 'Ctx',
                args: {
                    action: 'UpdateSettings',
                    args: {
                        ...profile.settings,
-                        nextVideoNotificationDuration: parseInt(event.value, 10)
+                        nextVideoNotificationDuration: parseInt(value, 10)
                    }
                }
            });
--- a/src/routes/Settings/useStreamingServerSettingsInputs.js
+++ b/src/routes/Settings/useStreamingServerSettingsInputs.js
@ -77,15 +77,15 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
                    value: address,
                }))
            ],
-            selected: [streamingServer.settings.content.remoteHttps],
-            onSelect: (event) => {
+            value: streamingServer.settings.content.remoteHttps,
+            onSelect: (value) => {
                core.transport.dispatch({
                    action: 'StreamingServer',
                    args: {
                        action: 'UpdateSettings',
                        args: {
                            ...streamingServer.settings.content,
-                            remoteHttps: event.value,
+                            remoteHttps: value,
                        }
                    }
                });
@ -103,18 +103,18 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
                label: cacheSizeToString(size),
                value: JSON.stringify(size)
            })),
-            selected: [JSON.stringify(streamingServer.settings.content.cacheSize)],
-            renderLabelText: () => {
+            value: JSON.stringify(streamingServer.settings.content.cacheSize),
+            title: () => {
                return cacheSizeToString(streamingServer.settings.content.cacheSize);
            },
-            onSelect: (event) => {
+            onSelect: (value) => {
                core.transport.dispatch({
                    action: 'StreamingServer',
                    args: {
                        action: 'UpdateSettings',
                        args: {
                            ...streamingServer.settings.content,
-                            cacheSize: JSON.parse(event.value),
+                            cacheSize: JSON.parse(value),
                        }
                    }
                });
@ -152,15 +152,15 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
                        :
                        []
                ),
-            selected: [JSON.stringify(selectedTorrentProfile)],
-            onSelect: (event) => {
+            value: JSON.stringify(selectedTorrentProfile),
+            onSelect: (value) => {
                core.transport.dispatch({
                    action: 'StreamingServer',
                    args: {
                        action: 'UpdateSettings',
                        args: {
                            ...streamingServer.settings.content,
-                            ...JSON.parse(event.value),
+                            ...JSON.parse(value),
                        }
                    }
                });
@ -183,15 +183,15 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
                    value: name,
                }))
            ],
-            selected: [streamingServer.settings.content.transcodeProfile],
-            onSelect: (event) => {
+            value: streamingServer.settings.content.transcodeProfile,
+            onSelect: (value) => {
                core.transport.dispatch({
                    action: 'StreamingServer',
                    args: {
                        action: 'UpdateSettings',
                        args: {
                            ...streamingServer.settings.content,
-                            transcodeProfile: event.value,
+                            transcodeProfile: value,
                        }
                    }
                });
--- a/src/services/KeyboardShortcuts/KeyboardShortcuts.js
+++ b/src/services/KeyboardShortcuts/KeyboardShortcuts.js
@ -56,16 +56,6 @@ function KeyboardShortcuts() {
                    window.history.back();
                }

-                break;
-            }
-            case 'KeyF': {
-                event.preventDefault();
-                if (document.fullscreenElement === document.documentElement) {
-                    document.exitFullscreen();
-                } else {
-                    document.documentElement.requestFullscreen();
-                }
-
                break;
            }
        }