Merge branch 'development' of https://github.com/Stremio/stremio-web into chore/update-pull-user-from-api-action

.github/workflows/auto_assign.yml

@@ -13,8 +13,8 @@ jobs:
     steps:
       # Auto assign PR to author
       - name: Auto Assign PR to Author
-        if: github.event_name == 'pull_request' && github.actor != 'dependabot[bot]'
-        uses: actions/github-script@v7
+        if: github.event.pull_request.head.repo.fork == false && github.event_name == 'pull_request' && github.actor != 'dependabot[bot]'
+        uses: actions/github-script@v8
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
@@ -31,10 +31,10 @@ jobs:
 
       # Dynamic labeling based on PR/Issue title
       - name: Label PRs and Issues
-        if: github.actor != 'dependabot[bot]'
+        if: github.event.pull_request.head.repo.fork == false && github.actor != 'dependabot[bot]'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.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@v4
+        uses: actions/setup-node@v6
         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

@@ -2,35 +2,42 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and community a harassment-free experience for everyone, regardless of age, level of experience, education, nationality or race.
+We as contributors and maintainers want to make contributing to our project and community a nice experience for everyone.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment include:
+Examples of positive behavior:
 
-- Using welcoming and inclusive language.
-- Being respectful of differing viewpoints and experiences.
+- Using welcoming language.
+- Being respectful.
 - Accepting constructive criticism.
-- Focusing on what is best for the community.
-- Showing empathy towards other community members.
 
-Examples of unacceptable behavior by participants include:
+Examples of bad behavior:
 
-- The use of sexualized language or imagery and unwelcome sexual attention or advances.
-- Trolling, insulting/derogatory comments, and personal or political attacks.
+- Use of sexualized language.
+- Trolling, insulting comments, and personal or political attacks.
 - Public or private harassment.
 - Publishing others’ private information, such as a physical or electronic address, without explicit permission.
-- Other conduct which could reasonably be considered inappropriate in a professional setting.
+- Submitting entirely generated by AI PRs with agents such as Devin, Claude Code, Cursor Agent etc.
+- Submitting PRs which in majority contain only AI generated code (including docs & comments) and do not solve an actual issue.
+- Spamming issues because of no ETAs on issues.
 
 ## Our Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+Project maintainers are responsible for enforcing this code of conduct. They can remove or edit comments, code, and other contributions that don't follow these rules. They can also ban users who behave inappropriately.
 
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, pull requests, and other contributions that do not align with this Code of Conduct, as well as to temporarily or permanently ban any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+## 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 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 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
 
-This Code of Conduct applies within all `stremio-web` spaces, and also applies when an individual is officially representing the project or its community in public spaces.
+This Code of Conduct applies everywhere in `stremio-web` repository, and also applies when an individual is officially representing the project or its community in other spaces.
 
 ## Enforcement
 

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

@@ -1,7 +1,7 @@
 {
     "name": "stremio",
     "displayName": "Stremio",
-    "version": "5.0.0-beta.26",
+    "version": "5.0.0-beta.27",
     "author": "Smart Code OOD",
     "private": true,
     "license": "gpl-2.0",
@@ -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",
@@ -19,7 +19,7 @@
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.49.4",
         "@stremio/stremio-icons": "5.7.1",
-        "@stremio/stremio-video": "0.0.61",
+        "@stremio/stremio-video": "0.0.62",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",
@@ -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/App/SearchParamsHandler.js

@@ -36,7 +36,13 @@ const SearchParamsHandler = () => {
                     },
                 },
             });
-
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'AddServerUrl',
+                    args: streamingServerUrl,
+                },
+            });
             toast.show({
                 type: 'success',
                 title: `Using streaming server at ${streamingServerUrl}`,

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

@@ -138,11 +138,11 @@ const Intro = ({ queryParams }) => {
     }, []);
     const loginWithEmail = React.useCallback(() => {
         if (typeof state.email !== 'string' || state.email.length === 0 || !emailRef.current.validity.valid) {
-            dispatch({ type: 'error', error: 'Invalid email' });
+            dispatch({ type: 'error', error: t('INVALID_EMAIL') });
             return;
         }
         if (typeof state.password !== 'string' || state.password.length === 0) {
-            dispatch({ type: 'error', error: 'Invalid password' });
+            dispatch({ type: 'error', error: t('INVALID_PASSWORD') });
             return;
         }
         openLoaderModal();
@@ -160,26 +160,26 @@ const Intro = ({ queryParams }) => {
     }, [state.email, state.password]);
     const loginAsGuest = React.useCallback(() => {
         if (!state.termsAccepted) {
-            dispatch({ type: 'error', error: 'You must accept the Terms of Service' });
+            dispatch({ type: 'error', error: t('MUST_ACCEPT_TERMS') });
             return;
         }
         window.location = '#/';
     }, [state.termsAccepted]);
     const signup = React.useCallback(() => {
         if (typeof state.email !== 'string' || state.email.length === 0 || !emailRef.current.validity.valid) {
-            dispatch({ type: 'error', error: 'Invalid email' });
+            dispatch({ type: 'error', error: t('INVALID_EMAIL') });
             return;
         }
         if (typeof state.password !== 'string' || state.password.length === 0) {
-            dispatch({ type: 'error', error: 'Invalid password' });
+            dispatch({ type: 'error', error: t('INVALID_PASSWORD') });
             return;
         }
         if (state.password !== state.confirmPassword) {
-            dispatch({ type: 'error', error: 'Passwords do not match' });
+            dispatch({ type: 'error', error: t('PASSWORDS_NOMATCH') });
             return;
         }
         if (!state.termsAccepted) {
-            dispatch({ type: 'error', error: 'You must accept the Terms of Service' });
+            dispatch({ type: 'error', error: t('MUST_ACCEPT_TERMS') });
             return;
         }
         if (!state.privacyPolicyAccepted) {

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

@@ -532,6 +532,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/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