Merge branch 'Stremio:development' into development

.github/workflows/build.yml

@@ -27,7 +27,7 @@ jobs:
           version: 10
           run_install: false
       - name: Setup node
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version-file: .nvmrc
           cache: "pnpm"

.github/workflows/pages_cleanup.yml

@@ -9,7 +9,7 @@ permissions:
   contents: write
 
 jobs:
-  build:
+  cleanup:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -18,13 +18,30 @@ jobs:
           ref: gh-pages
           fetch-depth: 0
 
-      - name: Delete directories older than 1 year
+      - name: Delete directories that don't have existing branch
         run: |
-          for dir in $(find . -mindepth 1 -maxdepth 2 -type d -not -path '*/\.*'); do
-            if ! git log -1 --since="1 year ago" -- "$dir" | grep -q .; then
-              echo "Deleting $dir"
-              rm -rf "$dir"
-            fi
+          branches=( $(git branch -r | grep origin | grep -v HEAD | sed 's|origin/||') )
+          declare -p branches
+
+          find . -mindepth 1 -maxdepth 2 -type d -not -path '*/\.*' | while read -r dir; do
+              path="${dir#./}"
+
+              if [[ " ${branches[*]} " =~ " $path " ]]; then
+                  continue
+              fi
+
+              keep_parent=false
+              for branch in "${branches[@]}"; do
+                  if [[ "$branch" == "$path/"* ]]; then
+                      keep_parent=true
+                      break
+                  fi
+              done
+
+              if ! $keep_parent; then
+                  echo "Deleting $dir"
+                  rm -rf "$dir"
+              fi
           done
 
       - name: Commit and push

CODE_OF_CONDUCT.md

@@ -29,10 +29,10 @@ Project maintainers are responsible for enforcing this code of conduct. They can
 ## Suggestions for newbies
 
 - Contributors are welcomed to use AI models as "help" in solving issues, but you must always double check the code that you're submitting.
-- Refrain from excesive comments generated by AI.
+- Refrain from excessive comments generated by AI.
 - Refrain from docs generated entirely by AI.
 - Always check what files you are committing and submitting to the PR when you are using any agent for help or an AI model.
-- If you don't how to tackle a problem and AI can't help you, please just ask or look in Stack Overlflow, Google, Medium etc.
+- If you don't know how to tackle a problem and AI can't help you, please just ask or look in Stack Overlflow, Google, Medium etc.
 - Learning how to code is fun and easier when using AI, but sometimes it might be just too much ... what are you going to learn, if AI does everything for you and you don't know what the code you are submitting actually does?!
 
 ## Scope

Dockerfile

@@ -3,29 +3,39 @@
 ARG NODE_VERSION=20-alpine
 FROM node:$NODE_VERSION AS base
 
+# Setup pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+RUN corepack enable
+RUN apk add --no-cache git
+
 # Meta
 LABEL Description="Stremio Web" Vendor="Smart Code OOD" Version="1.0.0"
 
 RUN mkdir -p /var/www/stremio-web
 WORKDIR /var/www/stremio-web
 
-# Install app dependencies
-FROM base AS prebuild
+# Setup app
+FROM base AS app
 
-RUN apk update && apk upgrade && \
-    apk add --no-cache git
-WORKDIR /var/www/stremio-web
-COPY . .
-RUN npm install
-RUN npm run build
+COPY package.json pnpm-lock.yaml /var/www/stremio-web
+RUN pnpm i --frozen-lockfile
 
-# Bundle app source
-FROM base AS final
+COPY . /var/www/stremio-web
+RUN pnpm build
 
-WORKDIR /var/www/stremio-web
-COPY . .
-COPY --from=prebuild /var/www/stremio-web/node_modules ./node_modules
-COPY --from=prebuild /var/www/stremio-web/build ./build
+# Setup server
+FROM base AS server
+
+RUN pnpm i express@4
+
+# Finalize
+FROM base
+
+COPY http_server.js /var/www/stremio-web
+COPY --from=server /var/www/stremio-web/node_modules /var/www/stremio-web/node_modules
+COPY --from=app /var/www/stremio-web/build /var/www/stremio-web/build
 
 EXPOSE 8080
 CMD ["node", "http_server.js"]

README.md

@@ -1,6 +1,6 @@
 # Stremio - Freedom to Stream
 
-![Build](https://github.com/stremio/stremio-web/workflows/Build/badge.svg?branch=development)
+[![Build](https://github.com/Stremio/stremio-web/actions/workflows/build.yml/badge.svg)](https://github.com/Stremio/stremio-web/actions/workflows/build.yml)
 [![Github Page](https://img.shields.io/website?label=Page&logo=github&up_message=online&down_message=offline&url=https%3A%2F%2Fstremio.github.io%2Fstremio-web%2F)](https://stremio.github.io/stremio-web/development)
 
 Stremio is a modern media center that's a one-stop solution for your video entertainment. You discover, watch and organize video content from easy to install addons.

package.json

@@ -17,9 +17,9 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "0.49.4",
+        "@stremio/stremio-core-web": "0.50.0",
         "@stremio/stremio-icons": "5.7.1",
-        "@stremio/stremio-video": "0.0.62",
+        "@stremio/stremio-video": "0.0.64",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",
@@ -41,7 +41,7 @@
         "react-i18next": "^15.1.3",
         "react-is": "18.3.1",
         "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-        "stremio-translations": "github:Stremio/stremio-translations#abe7684165a031755e9aee39da26daa806ba7824",
+        "stremio-translations": "github:Stremio/stremio-translations#01aaa201e419782b26b9f2cbe4430795021426e5",
         "url": "0.11.4",
         "use-long-press": "^3.2.0"
     },

pnpm-lock.yaml

@@ -18,14 +18,14 @@ importers:
         specifier: 5.2.0
         version: 5.2.0
       '@stremio/stremio-core-web':
-        specifier: 0.49.4
-        version: 0.49.4
+        specifier: 0.50.0
+        version: 0.50.0
       '@stremio/stremio-icons':
         specifier: 5.7.1
         version: 5.7.1
       '@stremio/stremio-video':
-        specifier: 0.0.62
-        version: 0.0.62
+        specifier: 0.0.64
+        version: 0.0.64
       a-color-picker:
         specifier: 1.2.1
         version: 1.2.1
@@ -90,8 +90,8 @@ importers:
         specifier: github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6
         version: https://codeload.github.com/Stremio/spatial-navigation/tar.gz/64871b1422466f5f45d24ebc8bbd315b2ebab6a6
       stremio-translations:
-        specifier: github:Stremio/stremio-translations#abe7684165a031755e9aee39da26daa806ba7824
-        version: https://codeload.github.com/Stremio/stremio-translations/tar.gz/abe7684165a031755e9aee39da26daa806ba7824
+        specifier: github:Stremio/stremio-translations#01aaa201e419782b26b9f2cbe4430795021426e5
+        version: https://codeload.github.com/Stremio/stremio-translations/tar.gz/01aaa201e419782b26b9f2cbe4430795021426e5
       url:
         specifier: 0.11.4
         version: 0.11.4
@@ -1302,14 +1302,14 @@ packages:
   '@stremio/stremio-colors@5.2.0':
     resolution: {integrity: sha512-dYlPgu9W/H7c9s1zmW5tiDnRenaUa4Hg1QCyOg1lhOcgSfM/bVTi5nnqX+IfvGTTUNA0zgzh8hI3o3miwnZxTg==}
 
-  '@stremio/stremio-core-web@0.49.4':
-    resolution: {integrity: sha512-K9LJGKXs8juV3pZOHH6thWTwOShAhjFt9bLL6K1VlORAe6AiieZ2uRp9wdOwFmPX+UgzWLIOd0r2aFXJ4OsJCw==}
+  '@stremio/stremio-core-web@0.50.0':
+    resolution: {integrity: sha512-SRE9nStgYNbhjJAw7mXfmM0wdnSLS4GMSJsSMTXvoGxnUgd+yisJUkN/9Sughe4t2IU7Uct8QWpdx9zFdlil+g==}
 
   '@stremio/stremio-icons@5.7.1':
     resolution: {integrity: sha512-Z96p36LLX3G+ewMnFKmNZVsO/AtcHA33WQ3wGOYFubxiYADPRAkcLVU5rHIfiGSC9IUaUVhxQWTPVB9ScY4Q5Q==}
 
-  '@stremio/stremio-video@0.0.62':
-    resolution: {integrity: sha512-lzm1sWLVN9Z3qr8mZm3MRLw7S9v7QYIe6swWava3Ao4sjhVc8jVlwzF5un0LcHxY8hQe0OjK7TDCvPRbw+spBQ==}
+  '@stremio/stremio-video@0.0.64':
+    resolution: {integrity: sha512-29w/lwU8BB6ai8LUyCnpRc2F9kPf7cpys40NCobt70MqBP/UqvYISsrnD/ijoBwvtpKdZ6ptv5h9BbDj6rrerw==}
 
   '@stylistic/eslint-plugin-jsx@4.4.1':
     resolution: {integrity: sha512-83SInq4u7z71vWwGG+6ViOtlOmZ6tSrDkMPhrvdBBTGMLA0gs22WSdhQ4vZP3oJ5Xg4ythvqeUiFSedvVxzhyA==}
@@ -4527,9 +4527,9 @@ packages:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
-  stremio-translations@https://codeload.github.com/Stremio/stremio-translations/tar.gz/abe7684165a031755e9aee39da26daa806ba7824:
-    resolution: {tarball: https://codeload.github.com/Stremio/stremio-translations/tar.gz/abe7684165a031755e9aee39da26daa806ba7824}
-    version: 1.44.12
+  stremio-translations@https://codeload.github.com/Stremio/stremio-translations/tar.gz/01aaa201e419782b26b9f2cbe4430795021426e5:
+    resolution: {tarball: https://codeload.github.com/Stremio/stremio-translations/tar.gz/01aaa201e419782b26b9f2cbe4430795021426e5}
+    version: 1.44.13
 
   string-length@4.0.2:
     resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
@@ -6561,13 +6561,13 @@ snapshots:
 
   '@stremio/stremio-colors@5.2.0': {}
 
-  '@stremio/stremio-core-web@0.49.4':
+  '@stremio/stremio-core-web@0.50.0':
     dependencies:
       '@babel/runtime': 7.24.1
 
   '@stremio/stremio-icons@5.7.1': {}
 
-  '@stremio/stremio-video@0.0.62':
+  '@stremio/stremio-video@0.0.64':
     dependencies:
       buffer: 6.0.3
       color: 4.2.3
@@ -10283,7 +10283,7 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  stremio-translations@https://codeload.github.com/Stremio/stremio-translations/tar.gz/abe7684165a031755e9aee39da26daa806ba7824: {}
+  stremio-translations@https://codeload.github.com/Stremio/stremio-translations/tar.gz/01aaa201e419782b26b9f2cbe4430795021426e5: {}
 
   string-length@4.0.2:
     dependencies:

src/App/App.js

@@ -6,11 +6,12 @@ const { useTranslation } = require('react-i18next');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, DragAndDrop, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
 const { NotFound } = require('stremio/routes');
-const { FileDropProvider, PlatformProvider, ToastProvider, TooltipProvider, CONSTANTS, withCoreSuspender, useShell } = require('stremio/common');
+const { FileDropProvider, PlatformProvider, ToastProvider, TooltipProvider, ShortcutsProvider, CONSTANTS, withCoreSuspender, useShell, useBinaryState } = require('stremio/common');
 const ServicesToaster = require('./ServicesToaster');
 const DeepLinkHandler = require('./DeepLinkHandler');
 const SearchParamsHandler = require('./SearchParamsHandler');
 const { default: UpdaterBanner } = require('./UpdaterBanner');
+const { default: ShortcutsModal } = require('./ShortcutsModal');
 const ErrorDialog = require('./ErrorDialog');
 const withProtectedRoutes = require('./withProtectedRoutes');
 const routerViewsConfig = require('./routerViewsConfig');
@@ -38,6 +39,14 @@ const App = () => {
         };
     }, []);
     const [initialized, setInitialized] = React.useState(false);
+    const [shortcutModalOpen,, closeShortcutsModal, toggleShortcutModal] = useBinaryState(false);
+
+    const onShortcut = React.useCallback((name) => {
+        if (name === 'shortcuts') {
+            toggleShortcutModal();
+        }
+    }, [toggleShortcutModal]);
+
     React.useEffect(() => {
         let prevPath = window.location.hash.slice(1);
         const onLocationHashChange = () => {
@@ -159,7 +168,8 @@ const App = () => {
             services.core.transport.dispatch({
                 action: 'Ctx',
                 args: {
-                    action: 'PullUserFromAPI'
+                    action: 'PullUserFromAPI',
+                    args: {}
                 }
             });
             services.core.transport.dispatch({
@@ -203,15 +213,20 @@ const App = () => {
                                 <ToastProvider className={styles['toasts-container']}>
                                     <TooltipProvider className={styles['tooltip-container']}>
                                         <FileDropProvider className={styles['file-drop-container']}>
-                                            <ServicesToaster />
-                                            <DeepLinkHandler />
-                                            <SearchParamsHandler />
-                                            <UpdaterBanner className={styles['updater-banner-container']} />
-                                            <RouterWithProtectedRoutes
-                                                className={styles['router']}
-                                                viewsConfig={routerViewsConfig}
-                                                onPathNotMatch={onPathNotMatch}
-                                            />
+                                            <ShortcutsProvider onShortcut={onShortcut}>
+                                                {
+                                                    shortcutModalOpen && <ShortcutsModal onClose={closeShortcutsModal}/>
+                                                }
+                                                <ServicesToaster />
+                                                <DeepLinkHandler />
+                                                <SearchParamsHandler />
+                                                <UpdaterBanner className={styles['updater-banner-container']} />
+                                                <RouterWithProtectedRoutes
+                                                    className={styles['router']}
+                                                    viewsConfig={routerViewsConfig}
+                                                    onPathNotMatch={onPathNotMatch}
+                                                />
+                                            </ShortcutsProvider>
                                         </FileDropProvider>
                                     </TooltipProvider>
                                 </ToastProvider>

src/App/ShortcutsModal/ShortcutsModal.tsx

@@ -0,0 +1,59 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import Icon from '@stremio/stremio-icons/react';
+import { useShortcuts } from 'stremio/common';
+import { Button, ShortcutsGroup } from 'stremio/components';
+import styles from './styles.less';
+
+type Props = {
+    onClose: () => void,
+};
+
+const ShortcutsModal = ({ onClose }: Props) => {
+    const { t } = useTranslation();
+    const { grouped } = useShortcuts();
+
+    useEffect(() => {
+        const onKeyDown = ({ key }: KeyboardEvent) => {
+            key === 'Escape' && onClose();
+        };
+
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, []);
+
+    return createPortal((
+        <div className={styles['shortcuts-modal']}>
+            <div className={styles['backdrop']} onClick={onClose} />
+
+            <div className={styles['container']}>
+                <div className={styles['header']}>
+                    <div className={styles['title']}>
+                        {t('SETTINGS_NAV_SHORTCUTS')}
+                    </div>
+
+                    <Button className={styles['close-button']} title={t('BUTTON_CLOSE')} onClick={onClose}>
+                        <Icon className={styles['icon']} name={'close'} />
+                    </Button>
+                </div>
+
+                <div className={styles['content']}>
+                    {
+                        grouped.map(({ name, label, shortcuts }) => (
+                            <ShortcutsGroup
+                                key={name}
+                                label={label}
+                                shortcuts={shortcuts}
+                            />
+                        ))
+                    }
+                </div>
+            </div>
+        </div>
+    ), document.body);
+};
+
+export default ShortcutsModal;

src/App/ShortcutsModal/index.ts

@@ -0,0 +1,2 @@
+import ShortcutsModal from './ShortcutsModal';
+export default ShortcutsModal;

src/App/ShortcutsModal/styles.less

@@ -0,0 +1,91 @@
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+
+.shortcuts-modal {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .backdrop {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: @color-background-dark5-40;
+        cursor: pointer;
+    }
+
+    .container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        max-height: 80%;
+        max-width: 80%;
+        border-radius: var(--border-radius);
+        background-color: var(--modal-background-color);
+        box-shadow: var(--outer-glow);
+        overflow-y: auto;
+
+        .header {
+            flex: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 5rem;
+            padding-left: 2.5rem;
+            padding-right: 1rem;
+
+            .title {
+                position: relative;
+                font-size: 1.5rem;
+                font-weight: 500;
+                color: var(--primary-foreground-color);
+            }
+
+            .close-button {
+                position: relative;
+                width: 3rem;
+                height: 3rem;
+                padding: 0.5rem;
+                border-radius: var(--border-radius);
+                z-index: 2;
+
+                .icon {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    color: var(--primary-foreground-color);
+                    opacity: 0.4;
+                }
+
+                &:hover, &:focus {
+                    .icon {
+                        opacity: 1;
+                        color: var(--primary-foreground-color);
+                    }
+                }
+
+                &:focus {
+                    outline-color: var(--primary-foreground-color);
+                }
+            }
+        }
+
+        .content {
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: 3rem;
+            padding: 0 2.5rem;
+            padding-bottom: 2rem;
+            overflow-y: auto;
+        }
+    }
+}

src/App/styles.less

@@ -35,7 +35,7 @@
 @top-overlay-size: 5.25rem;
 @bottom-overlay-size: 0rem;
 @overlap-size: 3rem;
-@transparency-grandient-pad: 6rem;
+@transparency-gradient-pad: 6rem;
 
 :root {
     --landscape-shape-ratio: 0.5625;
@@ -69,7 +69,7 @@
     --top-overlay-size: @top-overlay-size;
     --bottom-overlay-size: @bottom-overlay-size;
     --overlap-size: @overlap-size;
-    --transparency-grandient-pad: @transparency-grandient-pad;
+    --transparency-gradient-pad: @transparency-gradient-pad;
     --safe-area-inset-top: @safe-area-inset-top;
     --safe-area-inset-right: @safe-area-inset-right;
     --safe-area-inset-bottom: @safe-area-inset-bottom;

src/common/FileDrop/FileDrop.tsx

@@ -42,7 +42,7 @@ const FileDropProvider = ({ className, children }: Props) => {
                 .then((buffer) => {
                     listeners
                         .filter(([type]) => file.type ? type === file.type : isFileType(buffer, type))
-                        .forEach(([, listerner]) => listerner(file.name, buffer));
+                        .forEach(([, listener]) => listener(file.name, buffer));
                 });
         }
 

src/common/Shortcuts/Shortcuts.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, useCallback, useContext, useEffect } from 'react';
+import shortcuts from './shortcuts.json';
+
+const SHORTCUTS = shortcuts.map(({ shortcuts }) => shortcuts).flat();
+
+export type ShortcutName = string;
+export type ShortcutListener = () => void;
+
+interface ShortcutsContext {
+    grouped: ShortcutGroup[],
+}
+
+const ShortcutsContext = createContext<ShortcutsContext>({} as ShortcutsContext);
+
+type Props = {
+    children: JSX.Element,
+    onShortcut: (name: ShortcutName) => void,
+};
+
+const ShortcutsProvider = ({ children, onShortcut }: Props) => {
+    const onKeyDown = useCallback(({ ctrlKey, shiftKey, key }: KeyboardEvent) => {
+        SHORTCUTS.forEach(({ name, combos }) => combos.forEach((keys) => {
+            const modifers = (keys.includes('Ctrl') ? ctrlKey : true)
+                && (keys.includes('Shift') ? shiftKey : true);
+
+            if (modifers && keys.includes(key.toUpperCase())) {
+                onShortcut(name as ShortcutName);
+            }
+        }));
+    }, [onShortcut]);
+
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onKeyDown]);
+
+    return (
+        <ShortcutsContext.Provider value={{ grouped: shortcuts }}>
+            {children}
+        </ShortcutsContext.Provider>
+    );
+};
+
+const useShortcuts = () => {
+    return useContext(ShortcutsContext);
+};
+
+export {
+    ShortcutsProvider,
+    useShortcuts
+};

src/common/Shortcuts/index.ts

@@ -0,0 +1,5 @@
+import { ShortcutsProvider, useShortcuts } from './Shortcuts';
+export {
+    ShortcutsProvider,
+    useShortcuts,
+};

src/common/Shortcuts/shortcuts.json

@@ -0,0 +1,89 @@
+[
+    {
+        "name": "general",
+        "label": "SETTINGS_NAV_GENERAL",
+        "shortcuts": [
+            {
+                "name": "navigateTabs",
+                "label": "SETTINGS_SHORTCUT_NAVIGATE_MENUS",
+                "combos": [["1", "2", "3", "4", "5", "6"]]
+            },
+            {
+                "name": "navigateSearch",
+                "label": "SETTINGS_SHORTCUT_GO_TO_SEARCH",
+                "combos": [["0"]]
+            },
+            {
+                "name": "fullscreen",
+                "label": "SETTINGS_SHORTCUT_FULLSCREEN",
+                "combos": [["F"]]
+            },
+            {
+                "name": "exit",
+                "label": "SETTINGS_SHORTCUT_EXIT_BACK",
+                "combos": [["Escape"]]
+            },
+            {
+                "name": "shortcuts",
+                "label": "SETTINGS_SHORTCUT_SHORTCUTS",
+                "combos": [["Ctrl", "/"]]
+            }
+        ]
+    },
+    {
+        "name": "player",
+        "label": "SETTINGS_NAV_PLAYER",
+        "shortcuts": [
+            {
+                "name": "playPause",
+                "label": "SETTINGS_SHORTCUT_PLAY_PAUSE",
+                "combos": [["Space"]]
+            },
+            {
+                "name": "seekForward",
+                "label": "SETTINGS_SHORTCUT_SEEK_FORWARD",
+                "combos": [["ArrowRight"], ["Shift", "ArrowRight"]]
+            },
+            {
+                "name": "seekBackward",
+                "label": "SETTINGS_SHORTCUT_SEEK_BACKWARD",
+                "combos": [["ArrowLeft"], ["Shift", "ArrowLeft"]]
+            },
+            {
+                "name": "volumeUp",
+                "label": "SETTINGS_SHORTCUT_VOLUME_UP",
+                "combos": [["ArrowUp"]]
+            },
+            {
+                "name": "volumeDown",
+                "label": "SETTINGS_SHORTCUT_VOLUME_DOWN",
+                "combos": [["ArrowDown"]]
+            },
+            {
+                "name": "subtitlesSize",
+                "label": "SETTINGS_SHORTCUT_SUBTITLES_SIZE",
+                "combos": [["-"], ["="]]
+            },
+            {
+                "name": "subtitlesDelay",
+                "label": "SETTINGS_SHORTCUT_SUBTITLES_DELAY",
+                "combos": [["G"], ["H"]]
+            },
+            {
+                "name": "subtitlesMenu",
+                "label": "SETTINGS_SHORTCUT_MENU_SUBTITLES",
+                "combos": [["S"]]
+            },
+            {
+                "name": "audioMenu",
+                "label": "SETTINGS_SHORTCUT_MENU_AUDIO",
+                "combos": [["A"]]
+            },
+            {
+                "name": "infoMenu",
+                "label": "SETTINGS_SHORTCUT_MENU_INFO",
+                "combos": [["I"]]
+            }
+        ]
+    }
+]

src/common/Shortcuts/types.d.ts

@@ -0,0 +1,11 @@
+type Shortcut = {
+    name: string,
+    label: string,
+    combos: string[][],
+};
+
+type ShortcutGroup = {
+    name: string,
+    label: string,
+    shortcuts: Shortcut[],
+};

src/common/index.js

@@ -4,6 +4,7 @@ const { FileDropProvider, onFileDrop } = require('./FileDrop');
 const { PlatformProvider, usePlatform } = require('./Platform');
 const { ToastProvider, useToast } = require('./Toast');
 const { TooltipProvider, Tooltip } = require('./Tooltips');
+const { ShortcutsProvider, useShortcuts } = require('./Shortcuts');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
 const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
@@ -35,6 +36,8 @@ module.exports = {
     onFileDrop,
     PlatformProvider,
     usePlatform,
+    ShortcutsProvider,
+    useShortcuts,
     ToastProvider,
     useToast,
     TooltipProvider,

src/common/interfaceLanguages.json

@@ -51,6 +51,10 @@
         "name": "فارسی",
         "codes": ["fa-IR", "fas"]
     },
+    {
+        "name": "Suomi",
+        "codes": ["fi-FI", "fin"]
+    },
     {
         "name": "Français",
         "codes": ["fr-FR", "fre"]
@@ -119,13 +123,17 @@
         "name": "português",
         "codes": ["pt-PT", "por"]
     },
+    {
+        "name": "Română",
+        "codes": ["ro-RO", "ron"]
+    },
     {
         "name": "русский язык",
         "codes": ["ru-RU", "rus"]
     },
     {
-        "name": "Svenska",
-        "codes": ["sv-SE", "swe"]
+        "name": "Slovenčina",
+        "codes": ["sk-SK", "slk"]
     },
     {
         "name": "slovenski jezik",
@@ -135,6 +143,10 @@
         "name": "српски језик",
         "codes": ["sr-RS", "srp"]
     },
+    {
+        "name": "Svenska",
+        "codes": ["sv-SE", "swe"]
+    },
     {
         "name": "తెలుగు",
         "codes": ["te-IN", "tel"]

src/common/useFullscreen.ts

@@ -10,11 +10,15 @@ const useFullscreen = () => {
 
     const [fullscreen, setFullscreen] = useState(false);
 
-    const requestFullscreen = useCallback(() => {
+    const requestFullscreen = useCallback(async () => {
         if (shell.active) {
             shell.send('win-set-visibility', { fullscreen: true });
         } else {
-            document.documentElement.requestFullscreen();
+            try {
+                await document.documentElement.requestFullscreen();
+            } catch (err) {
+                console.error('Error enabling fullscreen', err);
+            }
         }
     }, []);
 

src/common/useNotifications.d.ts

@@ -1,2 +1,2 @@
-declare const useNotifcations: () => Notifications;
-export = useNotifcations;
+declare const useNotifications: () => Notifications;
+export = useNotifications;

src/components/BottomSheet/BottomSheet.less

@@ -86,7 +86,7 @@
     }
 }
 
-@media only screen and (min-width: @small) and (orientation: portait) {
+@media only screen and (min-width: @small) and (orientation: portrait) {
     .bottom-sheet {
         display: none;
     }

src/components/ColorInput/ColorPicker/ColorPicker.js

@@ -21,7 +21,7 @@ const ColorPicker = ({ className, value, onInput }) => {
             showRGB: false,
             showAlpha: true
         });
-        const pickerClipboard = pickerElementRef.current.querySelector('.a-color-picker-clipbaord');
+        const pickerClipboard = pickerElementRef.current.querySelector('.a-color-picker-clipboard');
         if (pickerClipboard instanceof HTMLElement) {
             pickerClipboard.tabIndex = -1;
         }

src/components/ColorInput/ColorPicker/styles.less

@@ -16,7 +16,7 @@
         box-shadow: 0 0 .2rem var(--color-surfacedark);
     }
 
-    :global(.a-color-picker-clipbaord) {
+    :global(.a-color-picker-clipboard) {
         pointer-events: none;
     }
 }

src/components/ContinueWatchingItem/index.js

@@ -1,5 +1,5 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
-const ContineWatchingItem = require('./ContinueWatchingItem');
+const ContinueWatchingItem = require('./ContinueWatchingItem');
 
-module.exports = ContineWatchingItem;
+module.exports = ContinueWatchingItem;

src/components/MetaPreview/ActionButton/styles.less

@@ -66,6 +66,15 @@
 
         .icon-container {
             width: 2rem;
+
+            .icon {
+                width: 2rem;
+                height: 2rem;
+            }
+        }
+
+        .label-container {
+            display: none;
         }
     }
 }

src/components/ShortcutsGroup/Combos/Combos.less

@@ -0,0 +1,22 @@
+.combos {
+    position: relative;
+    display: flex;
+    overflow: visible;
+
+    .combo {
+        position: relative;
+        display: flex;
+        overflow: visible;
+
+        .separator {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 3.5rem;
+            font-size: 1rem;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
+        }
+    }
+}

src/components/ShortcutsGroup/Combos/Combos.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Keys from './Keys';
+import styles from './Combos.less';
+
+type Props = {
+    combos: string[][],
+};
+
+const Combos = ({ combos }: Props) => {
+    const { t } = useTranslation();
+
+    return (
+        <div className={styles['combos']}>
+            {
+                combos.map((keys, index) => (
+                    <div className={styles['combo']} key={index}>
+                        <Keys keys={keys} />
+                        {
+                            index < (combos.length - 1) && (
+                                <div className={styles['separator']}>
+                                    { t('SETTINGS_SHORTCUT_OR') }
+                                </div>
+                            )
+                        }
+                    </div>
+                ))
+            }
+        </div>
+    );
+};
+
+export default Combos;

src/components/ShortcutsGroup/Combos/Keys/Keys.less

@@ -0,0 +1,26 @@
+kbd {
+    flex: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    min-width: 2.5rem;
+    padding: 0 1rem;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--primary-foreground-color);
+    border-radius: 0.25em;
+    box-shadow: 0 4px 0 1px rgba(255, 255, 255, 0.1);
+    background-color: var(--overlay-color);
+}
+
+.separator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    font-size: 1rem;
+    color: var(--primary-foreground-color);
+}

src/components/ShortcutsGroup/Combos/Keys/Keys.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './Keys.less';
+
+type Props = {
+    keys: string[],
+};
+
+const Keys = ({ keys }: Props) => {
+    const { t } = useTranslation();
+
+    const keyLabelMap: Record<string, string> = useMemo(() => ({
+        'Shift': `⇧ ${t('SETTINGS_SHORTCUT_SHIFT')}`,
+        'Space': t('SETTINGS_SHORTCUT_SPACE'),
+        'Ctrl': t('SETTINGS_SHORTCUT_CTRL'),
+        'Escape': t('SETTINGS_SHORTCUT_ESC'),
+        'ArrowUp': '↑',
+        'ArrowDown': '↓',
+        'ArrowLeft': '←',
+        'ArrowRight': '→',
+    }), [t]);
+
+    const isRange = useMemo(() => {
+        return keys.length > 1 && keys.every((key) => !Number.isNaN(parseInt(key)));
+    }, [keys]);
+
+    const filteredKeys = useMemo(() => {
+        return isRange ? [keys[0], keys[keys.length - 1]] : keys;
+    }, [keys, isRange]);
+
+    return (
+        filteredKeys.map((key, index) => (
+            <Fragment key={key}>
+                <kbd>
+                    {keyLabelMap[key] ?? key.toUpperCase()}
+                </kbd>
+                {
+                    index < (filteredKeys.length - 1) && (
+                        <div className={styles['separator']}>
+                            {
+                                isRange ? t('SETTINGS_SHORTCUT_TO') : '+'
+                            }
+                        </div>
+                    )
+                }
+            </Fragment>
+        ))
+    );
+};
+
+export default Keys;

src/components/ShortcutsGroup/Combos/Keys/index.ts

@@ -0,0 +1,2 @@
+import Keys from './Keys';
+export default Keys;

src/components/ShortcutsGroup/Combos/index.ts

@@ -0,0 +1,2 @@
+import Combos from './Combos';
+export default Combos;

src/components/ShortcutsGroup/ShortcutsGroup.less

@@ -0,0 +1,44 @@
+.shortcuts-group {
+    flex: 1 1 0;
+    position: relative;
+    min-width: 30rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    overflow: visible;
+
+    .title {
+        flex: none;
+        display: flex;
+        font-size: 1rem;
+        font-weight: 400;
+        color: var(--primary-foreground-color);
+        opacity: 0.6;
+    }
+
+    .shortcuts {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        overflow: visible;
+
+        .shortcut {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 2rem;
+            overflow: visible;
+
+            .label {
+                position: relative;
+                font-size: 1rem;
+                color: var(--primary-foreground-color);
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+    }
+}

src/components/ShortcutsGroup/ShortcutsGroup.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import Combos from './Combos';
+import styles from './ShortcutsGroup.less';
+
+type Props = {
+    className?: string,
+    label: string,
+    shortcuts: Shortcut[],
+};
+
+const ShortcutsGroup = ({ className, label, shortcuts }: Props) => {
+    const { t } = useTranslation();
+
+    return (
+        <div className={classNames(className, styles['shortcuts-group'])}>
+            <div className={styles['title']}>
+                {t(label)}
+            </div>
+
+            <div className={styles['shortcuts']}>
+                {
+                    shortcuts.map(({ name, label, combos }) => (
+                        <div className={styles['shortcut']} key={name}>
+                            <div className={styles['label']}>
+                                {t(label)}
+                            </div>
+                            <Combos combos={combos} />
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    );
+};
+
+export default ShortcutsGroup;

src/components/ShortcutsGroup/index.ts

@@ -0,0 +1,2 @@
+import ShortcutsGroup from './ShortcutsGroup';
+export default ShortcutsGroup;

src/components/Video/Video.js

@@ -12,11 +12,12 @@ const useProfile = require('stremio/common/useProfile');
 const VideoPlaceholder = require('./VideoPlaceholder');
 const styles = require('./styles');
 
-const Video = React.forwardRef(({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }, ref) => {
+const Video = ({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, selected, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }) => {
     const routeFocused = useRouteFocused();
     const profile = useProfile();
     const { t } = useTranslation();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
+
     const popupLabelOnMouseUp = React.useCallback((event) => {
         if (!event.nativeEvent.togglePopupPrevented) {
             if (event.nativeEvent.ctrlKey || event.nativeEvent.button === 2) {
@@ -68,27 +69,19 @@ const Video = React.forwardRef(({ className, id, title, thumbnail, season, episo
             }
         }
     }, [deepLinks]);
-    const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ref: popupRef, ...props }) {
+    const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ref, ...props }) {
         const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched;
-        const handleRef = React.useCallback((node) => {
-            if (popupRef) {
-                if (typeof popupRef === 'function') {
-                    popupRef(node);
-                } else {
-                    popupRef.current = node;
-                }
-            }
-            if (ref) {
-                if (typeof ref === 'function') {
-                    ref(node);
-                } else {
-                    ref.current = node;
-                }
-            }
-        }, [popupRef]);
+
+        React.useEffect(() => {
+            selected && !watched && ref.current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'start'
+            });
+        }, [selected]);
 
         return (
-            <Button {...props} className={classnames(className, styles['video-container'])} title={title} ref={handleRef}>
+            <Button {...props} ref={ref} className={classnames(className, styles['video-container'])} title={title}>
                 {
                     typeof thumbnail === 'string' && thumbnail.length > 0 ?
                         <div className={styles['thumbnail-container']}>
@@ -159,7 +152,7 @@ const Video = React.forwardRef(({ className, id, title, thumbnail, season, episo
                 {children}
             </Button>
         );
-    }, []);
+    }, [selected]);
     const renderMenu = React.useMemo(() => function renderMenu() {
         return (
             <div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>
@@ -203,7 +196,7 @@ const Video = React.forwardRef(({ className, id, title, thumbnail, season, episo
             renderMenu={renderMenu}
         />
     );
-});
+};
 
 Video.Placeholder = VideoPlaceholder;
 
@@ -220,6 +213,7 @@ Video.propTypes = {
     progress: PropTypes.number,
     scheduled: PropTypes.bool,
     seasonWatched: PropTypes.bool,
+    selected: PropTypes.bool,
     deepLinks: PropTypes.shape({
         metaDetailsStreams: PropTypes.string,
         player: PropTypes.string

src/components/index.ts

@@ -25,6 +25,7 @@ import RadioButton from './RadioButton';
 import SearchBar from './SearchBar';
 import SharePrompt from './SharePrompt';
 import Slider from './Slider';
+import ShortcutsGroup from './ShortcutsGroup';
 import TextInput from './TextInput';
 import Toggle from './Toggle';
 import Transition from './Transition';
@@ -59,6 +60,7 @@ export {
     SearchBar,
     SharePrompt,
     Slider,
+    ShortcutsGroup,
     TextInput,
     Toggle,
     Transition,

src/routes/Calendar/Table/Cell/Cell.less

@@ -2,6 +2,25 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
+.disable-cell-items() {
+    .cell {
+        .items {
+            .item {
+                pointer-events: none;
+            }
+        }
+    }
+}
+
+.compact-items() {
+    .cell {
+        .items {
+            padding: 1px;
+            gap: 0.15rem;
+        }
+    }
+}
+
 .cell {
     position: relative;
     display: flex;
@@ -27,12 +46,9 @@
     }
 
     .heading {
-        flex: none;
         position: relative;
-        height: 3rem;
         display: flex;
-        align-items: center;
-        padding: 0 1rem;
+        align-items: flex-start;
 
         .day {
             flex: none;
@@ -50,12 +66,15 @@
     }
 
     .items {
-        flex: 0 1 10rem;
         position: relative;
         display: flex;
         flex-direction: row;
-        gap: 1rem;
-        padding: 0 0.5rem 0.5rem 0.5rem;
+        gap: 0.2rem;
+        padding: 0.1rem;
+        flex: 1 1 60%;
+        overflow-x: auto;
+        overflow-y: hidden; 
+        min-width: 0;
 
         .item {
             flex: none;
@@ -64,7 +83,9 @@
             justify-content: center;
             height: 100%;
             aspect-ratio: 2 / 3;
-            border-radius: var(--border-radius);
+            border-radius: calc(var(--border-radius) / 2);
+            max-height: 100%;
+            max-width: 100%;
 
             .icon {
                 flex: none;
@@ -80,13 +101,11 @@
             }
 
             .poster {
-                flex: auto;
-                z-index: 0;
-                position: relative;
-                height: 100%;
-                width: 100%;
+                height: auto;
+                max-height: 100%;
+                aspect-ratio: 2 / 3;
                 object-fit: cover;
-                opacity: 1;
+                border-radius: inherit
             }
 
             .icon, .poster {
@@ -117,8 +136,11 @@
 
     &.today {
         .heading {
+            padding: 0.3rem;
             .day {
                 background-color: var(--primary-accent-color);
+                height: 1.5rem;
+                width: 1.5rem;
             }
         }
     }
@@ -134,56 +156,55 @@
     }
 }
 
-@media only screen and (max-height: @minimum) and (orientation: portrait) {
-    .cell {
-        .heading {
-            justify-content: center;
-        }
-
-        .items {
-            display: none;
-        }
-
-        .more {
-            display: flex;
-        }
-    }
+@media only screen and (max-width: @minimum) {
+    .disable-cell-items();
 }
 
-@media only screen and (max-height: @xxsmall) and (orientation: landscape) {
+@media @phone-portrait {
+    .cell {
+        flex-direction: column;
+        display: grid;
+    }
+    .compact-items();
+    .disable-cell-items();
+}
+
+@media @phone-landscape {
     .cell {
         flex-direction: row;
-        align-items: center;
-
-        .items {
-            display: none;
-        }
-
-        .more {
-            display: flex;
-        }
     }
+    .compact-items();
+    .disable-cell-items();
 }
 
-@media only screen and (max-height: @xsmall) and (max-width: @xsmall) {
+@media only screen and (max-height: @medium) and (max-width: @medium) and (orientation: landscape) {
     .cell {
         gap: 0;
 
         .heading {
-            height: 2rem;
-
             .day {
+                padding: 0;
                 font-size: 0.875rem;
             }
         }
 
         .items {
-            padding: 0.25rem;
-
-            .item {
-                pointer-events: none;
-                border-radius: calc(var(--border-radius) / 2);
-            }
+            width: 100%;
+            padding-left: 0.5rem;
         }
     }
-}
+}
+
+@media only screen and (max-width: @minimum) and (orientation: portrait) and (pointer: fine) {
+    .cell {
+        display: flex;
+
+        .heading {
+            flex: 1 1 33%;
+        }
+    }
+}
+
+@media screen and (max-width: @small) and (orientation: portrait) {
+    .disable-cell-items();
+}

src/routes/Calendar/Table/Table.less

@@ -45,6 +45,7 @@
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         gap: 1px;
+        grid-auto-rows: 1fr;
     }
 }
 

src/routes/Intro/Intro.js

@@ -387,7 +387,7 @@ const Intro = ({ queryParams }) => {
                     {
                         state.form === SIGNUP_FORM ?
                             <Button className={classnames(styles['form-button'], styles['login-form-button'])} onClick={switchFormOnClick}>
-                                <div className={classnames(styles['label'], styles['uppercase'])}>{t('LOG_IN')}</div>
+                                <div className={styles['label']}>{t('LOG_IN')}</div>
                             </Button>
                             :
                             null
@@ -395,7 +395,7 @@ const Intro = ({ queryParams }) => {
                     {
                         state.form === LOGIN_FORM ?
                             <Button className={classnames(styles['form-button'], styles['signup-form-button'])} onClick={switchFormOnClick}>
-                                <div className={classnames(styles['label'], styles['uppercase'])}>{t('SIGN_UP_EMAIL')}</div>
+                                <div className={styles['label']}>{t('SIGN_UP_EMAIL')}</div>
                             </Button>
                             :
                             null
@@ -403,7 +403,7 @@ const Intro = ({ queryParams }) => {
                     {
                         state.form === SIGNUP_FORM ?
                             <Button className={classnames(styles['form-button'], styles['guest-login-button'])} onClick={loginAsGuest}>
-                                <div className={classnames(styles['label'], styles['uppercase'])}>{t('GUEST_LOGIN')}</div>
+                                <div className={styles['label']}>{t('GUEST_LOGIN')}</div>
                             </Button>
                             :
                             null

src/routes/Intro/styles.less

@@ -101,10 +101,6 @@
                 color: var(--primary-foreground-color);
                 text-align: center;
             }
-
-            .uppercase {
-                text-transform: uppercase;
-            }
         }
 
         .submit-button, .guest-login-button, .signup-form-button, .login-form-button {

src/routes/MetaDetails/MetaDetails.js

@@ -190,6 +190,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                 metaItem={metaDetails.metaItem}
                                 libraryItem={metaDetails.libraryItem}
                                 season={season}
+                                selectedVideoId={metaDetails.libraryItem?.state?.video_id}
                                 seasonOnSelect={seasonOnSelect}
                                 toggleNotifications={toggleNotifications}
                             />

src/routes/MetaDetails/VideosList/VideosList.js

@@ -11,9 +11,10 @@ const SeasonsBar = require('./SeasonsBar');
 const { default: EpisodePicker } = require('../EpisodePicker');
 const styles = require('./styles');
 
-const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => {
+const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, selectedVideoId, toggleNotifications }) => {
     const { core } = useServices();
     const profile = useProfile();
+
     const showNotificationsToggle = React.useMemo(() => {
         return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
     }, [metaItem]);
@@ -178,6 +179,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                                                 deepLinks={video.deepLinks}
                                                 scheduled={video.scheduled}
                                                 seasonWatched={seasonWatched}
+                                                selected={video.id === selectedVideoId}
                                                 onMarkVideoAsWatched={onMarkVideoAsWatched}
                                                 onMarkSeasonAsWatched={onMarkSeasonAsWatched}
                                             />
@@ -195,6 +197,7 @@ VideosList.propTypes = {
     metaItem: PropTypes.object,
     libraryItem: PropTypes.object,
     season: PropTypes.number,
+    selectedVideoId: PropTypes.string,
     seasonOnSelect: PropTypes.func,
     toggleNotifications: PropTypes.func,
 };

src/routes/Player/Player.js

@@ -8,7 +8,7 @@ const langs = require('langs');
 const { useTranslation } = require('react-i18next');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { onFileDrop, useSettings, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell } = require('stremio/common');
+const { onFileDrop, useSettings, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS, useShell, usePlatform } = require('stremio/common');
 const { HorizontalNavBar, Transition, ContextMenu } = require('stremio/components');
 const BufferingLoader = require('./BufferingLoader');
 const VolumeChangeIndicator = require('./VolumeChangeIndicator');
@@ -43,6 +43,7 @@ const Player = ({ urlParams, queryParams }) => {
     const statistics = useStatistics(player, streamingServer);
     const video = useVideo();
     const routeFocused = useRouteFocused();
+    const platform = usePlatform();
     const toast = useToast();
 
     const [seeking, setSeeking] = React.useState(false);
@@ -345,6 +346,8 @@ const Player = ({ urlParams, queryParams }) => {
                 forceTranscoding: forceTranscoding || casting,
                 maxAudioChannels: settings.surroundSound ? 32 : 2,
                 hardwareDecoding: settings.hardwareDecoding,
+                videoMode: settings.videoMode,
+                platform: platform.name,
                 streamingServerURL: streamingServer.baseUrl ?
                     casting ?
                         streamingServer.baseUrl
@@ -532,6 +535,53 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
 
+    // Media Session PlaybackState
+    React.useEffect(() => {
+        if (!navigator.mediaSession) return;
+
+        const playbackState = !video.state.paused ? 'playing' : 'paused';
+        navigator.mediaSession.playbackState = playbackState;
+
+        return () => navigator.mediaSession.playbackState = 'none';
+    }, [video.state.paused]);
+
+    // Media Session Metadata
+    React.useEffect(() => {
+        if (!navigator.mediaSession) return;
+
+        const metaItem = player.metaItem && player.metaItem?.type === 'Ready' ? player.metaItem.content : null;
+        const videoId = player.selected ? player.selected?.streamRequest?.path?.id : null;
+        const video = metaItem ? metaItem.videos.find(({ id }) => id === videoId) : null;
+
+        const videoInfo = video && video.season && video.episode ? ` (${video.season}x${video.episode})`: null;
+        const videoTitle = video ? `${video.title}${videoInfo}` : null;
+        const metaTitle = metaItem ? metaItem.name : null;
+        const imageUrl = metaItem ? metaItem.logo : null;
+
+        const title = videoTitle ?? metaTitle;
+        const artist = videoTitle ? metaTitle : undefined;
+        const artwork = imageUrl ? [{ src: imageUrl }] : undefined;
+
+        if (title) {
+            navigator.mediaSession.metadata = new MediaMetadata({
+                title,
+                artist,
+                artwork,
+            });
+        }
+    }, [player.metaItem, player.selected]);
+
+    // Media Session Actions
+    React.useEffect(() => {
+        if (!navigator.mediaSession) return;
+
+        navigator.mediaSession.setActionHandler('play', onPlayRequested);
+        navigator.mediaSession.setActionHandler('pause', onPauseRequested);
+
+        const nexVideoCallback = player.nextVideo ? onNextVideoRequested : null;
+        navigator.mediaSession.setActionHandler('nexttrack', nexVideoCallback);
+    }, [player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested]);
+
     React.useLayoutEffect(() => {
         const onKeyDown = (event) => {
             switch (event.code) {

src/routes/Player/SideDrawer/SideDrawer.tsx

@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import { useServices } from 'stremio/services';
@@ -21,7 +21,8 @@ type Props = {
 const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, selected, ...props }: Props, ref) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
-    const selectedVideoRef = useRef<HTMLDivElement>(null);
+    const [selectedVideoId, setSelectedVideoId] = useState<string | null>(null);
+
     const metaItem = useMemo(() => {
         return seriesInfo ?
             {
@@ -78,11 +79,9 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
         event.stopPropagation();
     };
 
-    const onTransitionEnd = () => {
-        selectedVideoRef.current?.scrollIntoView({
-            behavior: 'smooth',
-        });
-    };
+    const onTransitionEnd = useCallback(() => {
+        setSelectedVideoId(selected);
+    }, [selected]);
 
     return (
         <div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown} onTransitionEnd={onTransitionEnd}>
@@ -114,7 +113,6 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                             {videos.map((video, index) => (
                                 <Video
                                     key={index}
-                                    ref={video.id === selected ? selectedVideoRef : null}
                                     className={styles['video']}
                                     id={video.id}
                                     title={video.title}
@@ -128,6 +126,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                                     progress={video.progress}
                                     deepLinks={video.deepLinks}
                                     scheduled={video.scheduled}
+                                    selected={video.id === selectedVideoId}
                                     onMarkVideoAsWatched={onMarkVideoAsWatched}
                                     onMarkSeasonAsWatched={onMarkSeasonAsWatched}
                                 />

src/routes/Player/SubtitlesMenu/SubtitlesMenu.js

@@ -228,7 +228,7 @@ const SubtitlesMenu = React.memo((props) => {
                     />
                     <Stepper
                         className={styles['stepper']}
-                        label={'PLAYER_SUBTITLES_VERTICAL_POSIITON'}
+                        label={'PLAYER_SUBTITLES_VERTICAL_POSITION'}
                         value={props.selectedSubtitlesTrackId ? props.subtitlesOffset : props.selectedExtraSubtitlesTrackId ? props.extraSubtitlesOffset : null}
                         unit={'%'}
                         step={1}

src/routes/Settings/Player/Player.tsx

@@ -3,6 +3,7 @@ import { ColorInput, MultiselectMenu, Toggle } from 'stremio/components';
 import { useServices } from 'stremio/services';
 import { Category, Option, Section } from '../components';
 import usePlayerOptions from './usePlayerOptions';
+import { usePlatform } from 'stremio/common';
 
 type Props = {
     profile: Profile,
@@ -10,6 +11,7 @@ type Props = {
 
 const Player = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
     const { shell } = useServices();
+    const platform = usePlatform();
 
     const {
         subtitlesLanguageSelect,
@@ -26,6 +28,7 @@ const Player = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
         bingeWatchingToggle,
         playInBackgroundToggle,
         hardwareDecodingToggle,
+        videoModeSelect,
         pauseOnMinimizeToggle,
     } = usePlayerOptions(profile);
 
@@ -129,6 +132,15 @@ const Player = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
                             />
                         </Option>
                 }
+                {
+                    shell.active && platform.name === 'windows' &&
+                        <Option label={'SETTINGS_VIDEO_MODE'}>
+                            <MultiselectMenu
+                                className={'multiselect'}
+                                {...videoModeSelect}
+                            />
+                        </Option>
+                }
                 {
                     shell.active &&
                         <Option label={'SETTINGS_PAUSE_MINIMIZED'}>

src/routes/Settings/Player/usePlayerOptions.ts

@@ -287,6 +287,38 @@ const usePlayerOptions = (profile: Profile) => {
         }
     }), [profile.settings]);
 
+    const videoModeSelect = useMemo(() => ({
+        options: [
+            {
+                value: null,
+                label: t('SETTINGS_VIDEO_MODE_DEFAULT'),
+            },
+            {
+                value: 'legacy',
+                label: t('SETTINGS_VIDEO_MODE_LEGACY'),
+            }
+        ],
+        value: profile.settings.videoMode,
+        title: () => {
+            return profile.settings.videoMode === 'legacy' ?
+                t('SETTINGS_VIDEO_MODE_LEGACY')
+                :
+                t('SETTINGS_VIDEO_MODE_DEFAULT');
+        },
+        onSelect: (value: string | null) => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        videoMode: value,
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+
     const pauseOnMinimizeToggle = useMemo(() => ({
         checked: profile.settings.pauseOnMinimize,
         onClick: () => {
@@ -318,6 +350,7 @@ const usePlayerOptions = (profile: Profile) => {
         bingeWatchingToggle,
         playInBackgroundToggle,
         hardwareDecodingToggle,
+        videoModeSelect,
         pauseOnMinimizeToggle,
     };
 };

src/routes/Settings/Shortcuts/Shortcuts.less

@@ -1,27 +1,4 @@
-.shortcut-container {
-    display: flex;
-    align-items: center;
-    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: var(--primary-foreground-color);
-        border-radius: 0.25em;
-        box-shadow: 0 4px 0 1px var(--modal-background-color);
-        background-color: var(--overlay-color);
-    }
-
-    .label {
-        flex: none;
-        margin: 0 1rem;
-        white-space: nowrap;
-        color: var(--primary-foreground-color);
-    }
+.shortcuts-group {
+    width: 100%;
+    margin-bottom: 3rem;
 }

src/routes/Settings/Shortcuts/Shortcuts.tsx

@@ -1,97 +1,24 @@
 import React, { forwardRef } from 'react';
-import { Section, Option } from '../components';
+import { Section } from '../components';
+import { ShortcutsGroup } from 'stremio/components';
+import { useShortcuts } from 'stremio/common';
 import styles from './Shortcuts.less';
-import { useTranslation } from 'react-i18next';
 
 const Shortcuts = forwardRef<HTMLDivElement>((_, ref) => {
-    const { t } = useTranslation();
+    const { grouped } = useShortcuts();
 
     return (
         <Section ref={ref} label={'SETTINGS_NAV_SHORTCUTS'}>
-            <Option label={'SETTINGS_SHORTCUT_PLAY_PAUSE'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>{t('SETTINGS_SHORTCUT_SPACE')}</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_SEEK_FORWARD'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>→</kbd>
-                    <div className={styles['label']}>{t('SETTINGS_SHORTCUT_OR')}</div>
-                    <kbd>⇧ {t('SETTINGS_SHORTCUT_SHIFT')}</kbd>
-                    <div className={styles['label']}>+</div>
-                    <kbd>→</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_SEEK_BACKWARD'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>←</kbd>
-                    <div className={styles['label']}>{t('SETTINGS_SHORTCUT_OR')}</div>
-                    <kbd>⇧ {t('SETTINGS_SHORTCUT_SHIFT')}</kbd>
-                    <div className={styles['label']}>+</div>
-                    <kbd>←</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_VOLUME_UP'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>↑</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_VOLUME_DOWN'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>↓</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_MENU_SUBTITLES'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>S</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_MENU_AUDIO'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>A</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_MENU_INFO'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>I</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_FULLSCREEN'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>F</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_SUBTITLES_SIZE'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>-</kbd>
-                    <div className={styles['label']}>{ t('SETTINGS_SHORTCUT_AND') }</div>
-                    <kbd>=</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_SUBTITLES_DELAY'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>G</kbd>
-                    <div className={styles['label']}>{ t('SETTINGS_SHORTCUT_AND') }</div>
-                    <kbd>H</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_NAVIGATE_MENUS'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>1</kbd>
-                    <div className={styles['label']}>{t('SETTINGS_SHORTCUT_TO')}</div>
-                    <kbd>6</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_GO_TO_SEARCH'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>0</kbd>
-                </div>
-            </Option>
-            <Option label={'SETTINGS_SHORTCUT_EXIT_BACK'}>
-                <div className={styles['shortcut-container']}>
-                    <kbd>{t('SETTINGS_SHORTCUT_ESC')}</kbd>
-                </div>
-            </Option>
+            {
+                grouped.map(({ name, label, shortcuts }) => (
+                    <ShortcutsGroup
+                        key={name}
+                        className={styles['shortcuts-group']}
+                        label={label}
+                        shortcuts={shortcuts}
+                    />
+                ))
+            }
         </Section>
     );
 });

src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.tsx

@@ -17,7 +17,7 @@ const AddItem = ({ onCancel, handleAddUrl }: Props) => {
         setInputValue(target.value);
     }, []);
 
-    const onSumbit = useCallback(() => {
+    const onSubmit = useCallback(() => {
         handleAddUrl(inputValue);
     }, [inputValue]);
 
@@ -27,11 +27,11 @@ const AddItem = ({ onCancel, handleAddUrl }: Props) => {
                 className={styles['input']}
                 value={inputValue}
                 onChange={handleValueChange}
-                onSubmit={onSumbit}
+                onSubmit={onSubmit}
                 placeholder={'Enter URL'}
             />
             <div className={styles['actions']}>
-                <Button className={styles['add']} onClick={onSumbit}>
+                <Button className={styles['add']} onClick={onSubmit}>
                     <Icon name={'checkmark'} className={styles['icon']} />
                 </Button>
                 <Button className={styles['cancel']} onClick={onCancel}>

src/types/models/Ctx.d.ts

@@ -19,6 +19,7 @@ type Settings = {
     autoFrameRateMatching: boolean,
     bingeWatching: boolean,
     hardwareDecoding: boolean,
+    videoMode: string | null,
     escExitFullscreen: boolean,
     interfaceLanguage: string,
     quitOnClose: boolean,

src/types/models/Player.d.ts

@@ -3,7 +3,7 @@ type LibraryItemPlayer = Pick<LibraryItem, '_id'> & {
 };
 
 type VideoPlayer = Video & {
-    upcomming: boolean,
+    upcoming: boolean,
     watched: boolean,
     progress: boolean | null,
     scheduled: boolean,

tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "lib": [ "ES2016", "DOM", "DOM.Iterable"],
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
         "jsx": "react",
         "baseUrl": "./src",
         "outDir": "./dist",

webpack.config.js

@@ -12,7 +12,7 @@ const WorkboxPlugin = require('workbox-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
-const pachageJson = require('./package.json');
+const packageJson = require('./package.json');
 
 const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
 
@@ -215,7 +215,7 @@ module.exports = (env, argv) => ({
             ...env,
             SERVICE_WORKER_DISABLED: false,
             DEBUG: argv.mode !== 'production',
-            VERSION: pachageJson.version,
+            VERSION: packageJson.version,
             COMMIT_HASH
         }),
         new webpack.ProvidePlugin({