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

.github/workflows/build.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - development
     tags-ignore:
-      - '**'
+      - "**"
   pull_request:
     branches:
       - development
@@ -21,19 +21,25 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v5
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
       - name: Setup node
         uses: actions/setup-node@v5
         with:
           node-version-file: .nvmrc
+          cache: "pnpm"
       - name: Install NPM dependencies
-        run: npm ci
+        run: pnpm install
       - name: Build
-        run: npm run build
+        run: pnpm build
       - name: Test
-        run: npm test
+        run: pnpm test
       - name: Lint
-        run: npm run lint
-      # Create recursivelly the destiantion dir with
+        run: pnpm lint
+      # Create recursively the destination dir with
       # "--parrents where no error if existing, make parent directories as needed."
       - run: mkdir -p ./build/${{ github.head_ref || github.ref_name }}
       - name: Deploy to GitHub Pages

.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

.github/workflows/release.yml

@@ -11,11 +11,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v5
       - name: Install NPM dependencies
-        run: npm install
+        run: pnpm install
       - name: Build
         env:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
-        run: npm run build
+        run: pnpm build
       - name: Zip build artifact
         run: zip -r stremio-web.zip ./build
       - name: Upload build artifact to GitHub release assets
@@ -25,4 +25,4 @@ jobs:
           file: stremio-web.zip
           asset_name: stremio-web.zip
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

CODE_OF_CONDUCT.md

@@ -32,7 +32,7 @@ Project maintainers are responsible for enforcing this code of conduct. They can
 - Refrain from excesive 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

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.
@@ -10,24 +10,31 @@ Stremio is a modern media center that's a one-stop solution for your video enter
 ### Prerequisites
 
 * Node.js 12 or higher
-* npm 6 or higher
+* [pnpm](https://pnpm.io/installation) 10 or higher
 
 ### Install dependencies
 
 ```bash
-npm install
+pnpm install
 ```
 
 ### Start development server
 
 ```bash
-npm start
+pnpm start
 ```
 
 ### Production build
 
 ```bash
-npm run build
+pnpm run build
+```
+
+### Run with Docker
+
+```bash
+docker build -t stremio-web .
+docker run -p 8080:8080 stremio-web
 ```
 
 ## Screenshots

eslint.config.mjs

@@ -82,7 +82,7 @@ export default [
             '@stylistic/semi-spacing': 'error',
             '@stylistic/space-before-blocks': 'error',
             '@stylistic/no-trailing-spaces': 'error',
-            '@stylistic/func-call-spacing': 'error',
+            '@stylistic/function-call-spacing': 'error',
             '@stylistic/semi': 'error',
             '@stylistic/no-extra-semi': 'error',
             '@stylistic/eol-last': 'error',

package.json

@@ -11,7 +11,7 @@
         "build": "webpack --mode production",
         "test": "jest",
         "lint": "eslint src",
-        "scan-translations": "npx jest ./tests/i18nScan.test.js"
+        "scan-translations": "pnpx jest ./tests/i18nScan.test.js"
     },
     "dependencies": {
         "@babel/runtime": "7.26.0",
@@ -50,8 +50,8 @@
         "@babel/preset-env": "7.26.0",
         "@babel/preset-react": "7.26.3",
         "@eslint/js": "^9.16.0",
-        "@stylistic/eslint-plugin": "^2.11.0",
-        "@stylistic/eslint-plugin-jsx": "^2.11.0",
+        "@stylistic/eslint-plugin": "^5.4.0",
+        "@stylistic/eslint-plugin-jsx": "^4.4.1",
         "@types/hat": "^0.0.4",
         "@types/lodash.isequal": "^4.5.8",
         "@types/lodash.throttle": "^4.1.9",

src/components/MetaPreview/ActionButton/styles.less

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

src/index.js

@@ -36,7 +36,7 @@ i18n
 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(<App />);
 
-if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+if (process.env.NODE_ENV === 'production' && process.env.SERVICE_WORKER_DISABLED !== 'true' && process.env.SERVICE_WORKER_DISABLED !== true && 'serviceWorker' in navigator) {
     window.addEventListener('load', () => {
         navigator.serviceWorker.register('service-worker.js')
             .catch((registrationError) => {

src/routes/Intro/useAppleLogin.ts

@@ -49,7 +49,7 @@ const useAppleLogin = (): [() => Promise<AppleLoginResponse>, () => void] => {
                 timeout.current && clearTimeout(timeout.current);
                 timeout.current = setTimeout(() => {
                     if (tries >= MAX_TRIES)
-                        return reject(new Error('Failed to authenticate with Apple'));
+                        return reject(new Error('Failed to authenticate with Apple', { cause: 'Number of allowed tries exceeded!' }));
 
                     tries++;
 

src/routes/Intro/useFacebookLogin.ts

@@ -39,7 +39,7 @@ const useFacebookLogin = () => {
                 timeout.current && clearTimeout(timeout.current);
                 timeout.current = setTimeout(() => {
                     if (tries >= MAX_TRIES)
-                        return reject(new Error('Failed to authenticate with facebook'));
+                        return reject(new Error('Failed to authenticate with facebook', { cause: 'Number of allowed tries exceeded!' }));
 
                     tries++;
 

src/routes/Player/Player.js

@@ -594,6 +594,36 @@ const Player = ({ urlParams, queryParams }) => {
 
                     break;
                 }
+                case 'MediaPlayPause': {
+                    if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) {
+                        event.preventDefault();
+                        if (video.state.paused) {
+                            onPlayRequested();
+                            setSeeking(false);
+                        } else {
+                            onPauseRequested();
+                        }
+                    }
+
+                    break;
+                }
+                case 'MediaPlay': {
+                    if (!menusOpen && !nextVideoPopupOpen && video.state.paused === true) {
+                        event.preventDefault();
+                        onPlayRequested();
+                        setSeeking(false);
+                    }
+
+                    break;
+                }
+                case 'MediaPause': {
+                    if (!menusOpen && !nextVideoPopupOpen && video.state.paused === false) {
+                        event.preventDefault();
+                        onPauseRequested();
+                    }
+
+                    break;
+                }
                 case 'ArrowRight': {
                     if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) {
                         const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;

src/services/Chromecast/ChromecastTransport.js

@@ -21,7 +21,7 @@ const initialize = () => {
             if (castAPIAvailable) {
                 resolve();
             } else {
-                reject(new Error('window.cast api not available'));
+                reject(new Error('window.cast api not available', { cause: 'castAPIAvailable is null.' }));
             }
         }
         if (castAPIAvailable !== null) {
@@ -167,7 +167,7 @@ function ChromecastTransport() {
                 });
             }));
         } else {
-            return Promise.reject(new Error('Session not started'));
+            return Promise.reject(new Error('Session not started', { cause: 'castSession is null.' }));
         }
     };
 }

src/services/Shell/Shell.js

@@ -63,7 +63,7 @@ function Shell() {
         } catch (e) {
             console.error(e);
             active = false;
-            error = new Error(e);
+            error = new Error('Failed to initialize shell transport', { cause: e });
             starting = false;
             onStateChanged();
             transport = null;

src/types/global.d.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-var */
-
 type QtTransportMessage = {
     data: string;
 };
@@ -28,4 +26,4 @@ declare global {
     var chrome: Chrome | undefined;
 }
 
-export {};
+export { };

tsconfig.json

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

webpack.config.js

@@ -213,6 +213,7 @@ module.exports = (env, argv) => ({
         new webpack.EnvironmentPlugin({
             SENTRY_DSN: null,
             ...env,
+            SERVICE_WORKER_DISABLED: false,
             DEBUG: argv.mode !== 'production',
             VERSION: pachageJson.version,
             COMMIT_HASH