Merge branch 'development' into feat/989/watched-on-discover-and-details

.github/workflows/build.yml

@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:

.github/workflows/pages_cleanup.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         with:
           ref: gh-pages
           fetch-depth: 0

.github/workflows/release.yml

@@ -9,8 +9,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
-      - name: Install NPM dependencies
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+      - name: Install dependencies
         run: pnpm install
       - name: Build
         env:
@@ -19,7 +24,7 @@ jobs:
       - name: Zip build artifact
         run: zip -r stremio-web.zip ./build
       - name: Upload build artifact to GitHub release assets
-        uses: svenstaro/upload-release-action@2.11.2
+        uses: svenstaro/upload-release-action@2.11.3
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           file: stremio-web.zip

package.json

@@ -1,7 +1,7 @@
 {
     "name": "stremio",
     "displayName": "Stremio",
-    "version": "5.0.0-beta.27",
+    "version": "5.0.0-beta.29",
     "author": "Smart Code OOD",
     "private": true,
     "license": "gpl-2.0",
@@ -17,8 +17,8 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "0.50.0",
+        "@stremio/stremio-core-web": "0.51.1",
-        "@stremio/stremio-icons": "5.7.1",
+        "@stremio/stremio-icons": "5.8.0",
         "@stremio/stremio-video": "0.0.64",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",

pnpm-lock.yaml

@@ -18,11 +18,11 @@ importers:
         specifier: 5.2.0
         version: 5.2.0
       '@stremio/stremio-core-web':
-        specifier: 0.50.0
+        specifier: 0.51.1
-        version: 0.50.0
+        version: 0.51.1
       '@stremio/stremio-icons':
-        specifier: 5.7.1
+        specifier: 5.8.0
-        version: 5.7.1
+        version: 5.8.0
       '@stremio/stremio-video':
         specifier: 0.0.64
         version: 0.0.64
@@ -1302,11 +1302,11 @@ packages:
   '@stremio/stremio-colors@5.2.0':
     resolution: {integrity: sha512-dYlPgu9W/H7c9s1zmW5tiDnRenaUa4Hg1QCyOg1lhOcgSfM/bVTi5nnqX+IfvGTTUNA0zgzh8hI3o3miwnZxTg==}
 
-  '@stremio/stremio-core-web@0.50.0':
+  '@stremio/stremio-core-web@0.51.1':
-    resolution: {integrity: sha512-SRE9nStgYNbhjJAw7mXfmM0wdnSLS4GMSJsSMTXvoGxnUgd+yisJUkN/9Sughe4t2IU7Uct8QWpdx9zFdlil+g==}
+    resolution: {integrity: sha512-BD8i6zkDdMPeCyH50Bb7SB8r4nYx4eJwz4kLEJEl0PFjdr0gOmwHtEIgNa89ShJLNXUjPnpv4sVSNxFRG8fb5Q==}
 
-  '@stremio/stremio-icons@5.7.1':
+  '@stremio/stremio-icons@5.8.0':
-    resolution: {integrity: sha512-Z96p36LLX3G+ewMnFKmNZVsO/AtcHA33WQ3wGOYFubxiYADPRAkcLVU5rHIfiGSC9IUaUVhxQWTPVB9ScY4Q5Q==}
+    resolution: {integrity: sha512-IVUvQbIWfA4YEHCTed7v/sdQJCJ+OOCf84LTWpkE2W6GLQ+15WHcMEJrVkE1X3ekYJnGg3GjT0KLO6tKSU0P4w==}
 
   '@stremio/stremio-video@0.0.64':
     resolution: {integrity: sha512-29w/lwU8BB6ai8LUyCnpRc2F9kPf7cpys40NCobt70MqBP/UqvYISsrnD/ijoBwvtpKdZ6ptv5h9BbDj6rrerw==}
@@ -6561,11 +6561,11 @@ snapshots:
 
   '@stremio/stremio-colors@5.2.0': {}
 
-  '@stremio/stremio-core-web@0.50.0':
+  '@stremio/stremio-core-web@0.51.1':
     dependencies:
       '@babel/runtime': 7.24.1
 
-  '@stremio/stremio-icons@5.7.1': {}
+  '@stremio/stremio-icons@5.8.0': {}
 
   '@stremio/stremio-video@0.0.64':
     dependencies:

src/App/styles.less

@@ -48,7 +48,7 @@
     --color-x: #000000;
     --color-reddit: #FF4500;
     --color-imdb: #f5c518;
-    --color-trakt: #ED2224;
+    --color-trakt: rgb(255, 255, 255);
     --color-placeholder: #60606080;
     --color-placeholder-text: @color-surface-50;
     --color-placeholder-background: @color-surface-dark5-20;

src/common/Toast/ToastItem/styles.less

@@ -27,7 +27,7 @@
     &.error {
         .icon-container {
             .icon {
-                color: var(--color-trakt);
+                color: var(--danger-accent-color);
             }
         }
     }

src/components/ActionsGroup/ActionsGroup.less

@@ -17,6 +17,7 @@
     border-radius: 2rem;
     height: @height;
     width: fit-content;
+    backdrop-filter: blur(5px);
 
     .icon-container {
         display: flex;

src/components/Checkbox/Checkbox.less

@@ -70,7 +70,7 @@
         }
 
         &.error {
-            border-color: var(--color-trakt);
+            border-color: var(--danger-accent-color);
         }
 
         &.checked {

src/components/MetaPreview/MetaLinks/MetaLinks.js

@@ -3,18 +3,18 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { useTranslation } = require('react-i18next');
 const { Button } = require('stremio/components');
+const useTranslate = require('stremio/common/useTranslate');
 const styles = require('./styles');
 
 const MetaLinks = ({ className, label, links }) => {
-    const { t } = useTranslation();
+    const { string, stringWithPrefix } = useTranslate();
     return (
         <div className={classnames(className, styles['meta-links-container'])}>
             {
                 typeof label === 'string' && label.length > 0 ?
                     <div className={styles['label-container']}>
-                        {t(`LINKS_${label.toUpperCase()}`)}
+                        { stringWithPrefix(label.toUpperCase(), 'LINKS') }
                     </div>
                     :
                     null
@@ -24,7 +24,7 @@ const MetaLinks = ({ className, label, links }) => {
                     <div className={styles['links-container']}>
                         {links.map(({ label, href }, index) => (
                             <Button key={index} className={styles['link-container']} title={label} href={href}>
-                                { t(label) }
+                                { string(label) }
                             </Button>
                         ))}
                     </div>

src/components/RadioButton/RadioButton.less

@@ -52,7 +52,7 @@
         }
 
         &.error {
-            border-color: var(--color-trakt);
+            border-color: var(--danger-accent-color);
         }
 
         &.selected {

src/components/ShortcutsGroup/ShortcutsGroup.less

@@ -1,7 +1,7 @@
 .shortcuts-group {
     flex: 1 1 0;
     position: relative;
-    min-width: 30rem;
+    width: 30rem;
     display: flex;
     flex-direction: column;
     gap: 2rem;

src/components/Slider/Slider.js

@@ -142,11 +142,11 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
             <div className={styles['layer']}>
                 <div
                     className={classnames(styles['track-after'], { [styles['audio-boost']]: audioBoost })}
-                    style={{ '--mask-width': `calc(${thumbPosition} * 100%)` }}
+                    style={{ '--mask-width': `calc(${thumbPosition.toFixed(3)} * 100%)` }}
                 />
             </div>
             <div className={styles['layer']}>
-                <div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} />
+                <div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition.toFixed(3)})` }} />
             </div>
         </div>
     );

src/components/Video/Video.js

@@ -73,15 +73,19 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
         const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched;
 
         React.useEffect(() => {
-            selected && !watched && ref.current?.scrollIntoView({
+            if (selected && ref.current) {
-                behavior: 'smooth',
+                if ((progress && watched) || !watched) {
-                block: 'nearest',
+                    ref.current.scrollIntoView({
-                inline: 'start'
+                        behavior: 'smooth',
-            });
+                        block: 'nearest',
+                        inline: 'start'
+                    });
+                }
+            }
         }, [selected]);
 
         return (
-            <Button {...props} ref={ref} className={classnames(className, styles['video-container'])} title={title}>
+            <Button {...props} ref={ref} className={classnames(className, styles['video-container'], { [styles['selected']]: selected })} title={title}>
                 {
                     typeof thumbnail === 'string' && thumbnail.length > 0 ?
                         <div className={styles['thumbnail-container']}>

src/components/Video/styles.less

@@ -19,6 +19,11 @@
     padding: 0.5rem;
     margin-bottom: 0.5rem;
     border-radius: var(--border-radius);
+    border: 0.15rem solid transparent;
+
+    @supports (scroll-margin: 1.25rem) {
+        scroll-margin: 1.25rem;
+    }
 
     &:hover,
     &:focus,
@@ -172,6 +177,20 @@
         }
     }
 
+    &.selected {
+        animation: border 3s ease-in-out forwards;
+    }
+
+    @keyframes border {
+        0% {
+            border: 0.15rem solid var(--primary-accent-color);
+        }
+        100% {
+            border: 0.15rem solid transparent;
+        }
+    }
+
+
     .context-menu-container {
         max-width: calc(90% - 1.5rem);
         z-index: 2;

src/routes/Addons/useSelectableInputs.js

@@ -50,7 +50,7 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
                 remoteAddons.selected !== null ?
                     t.stringWithPrefix(remoteAddons.selected.request.path.type, 'TYPE_')
                     :
-                    typeSelect.title;
+                    t.string('SELECT_TYPE');
         },
         onSelect: (value) => {
             window.location = value;

src/routes/Board/Board.js

@@ -22,11 +22,10 @@ const Board = () => {
     const profile = useProfile();
     const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
-    const streamingServerWarningDismissed = React.useMemo(() => {
+    const showStreamingServerWarning = React.useMemo(() => {
-        return streamingServer.settings !== null && streamingServer.settings.type === 'Ready' || (
+        return streamingServer.settings !== null && streamingServer.settings.type === 'Err' && (
-            !isNaN(profile.settings.streamingServerWarningDismissed.getTime()) &&
+            isNaN(profile.settings.streamingServerWarningDismissed.getTime()) ||
-            profile.settings.streamingServerWarningDismissed.getTime() > Date.now()
+            profile.settings.streamingServerWarningDismissed.getTime() < Date.now());
-        );
     }, [profile.settings, streamingServer.settings]);
     const onVisibleRangeChange = React.useCallback(() => {
         const range = getVisibleChildrenRange(scrollContainerRef.current);
@@ -103,7 +102,7 @@ const Board = () => {
                 </div>
             </MainNavBars>
             {
-                !streamingServerWarningDismissed ?
+                showStreamingServerWarning ?
                     <StreamingServerWarning className={styles['board-warning-container']} />
                     :
                     null

src/routes/Player/OptionsMenu/OptionsMenu.js

@@ -54,8 +54,8 @@ const OptionsMenu = ({ className, stream, playbackDevices, extraSubtitlesTracks,
         }
     }, [streamingUrl, downloadUrl]);
     const onDownloadVideoButtonClick = React.useCallback(() => {
-        if (streamingUrl || downloadUrl) {
+        if (downloadUrl || streamingUrl ) {
-            platform.openExternal(streamingUrl || downloadUrl);
+            platform.openExternal(downloadUrl || streamingUrl);
         }
     }, [streamingUrl, downloadUrl]);
 

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, usePlatform } = require('stremio/common');
+const { onFileDrop, useSettings, useProfile, 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');
@@ -36,7 +36,7 @@ const Player = ({ urlParams, queryParams }) => {
     const forceTranscoding = React.useMemo(() => {
         return queryParams.has('forceTranscoding');
     }, [queryParams]);
-
+    const profile = useProfile();
     const [player, videoParamsChanged, timeChanged, seek, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
@@ -105,13 +105,27 @@ const Player = ({ urlParams, queryParams }) => {
         video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor);
     }, [settings.subtitlesSize, settings.subtitlesOffset, settings.subtitlesTextColor, settings.subtitlesBackgroundColor, settings.subtitlesOutlineColor]);
 
-    const handleNextVideoNavigation = React.useCallback((deepLinks) => {
+    const handleNextVideoNavigation = React.useCallback((deepLinks, bingeWatching, ended) => {
-        if (deepLinks.player) {
+        if (ended) {
-            isNavigating.current = true;
+            if (bingeWatching) {
-            window.location.replace(deepLinks.player);
+                if (deepLinks.player) {
-        } else if (deepLinks.metaDetailsStreams) {
+                    isNavigating.current = true;
-            isNavigating.current = true;
+                    window.location.replace(deepLinks.player);
-            window.location.replace(deepLinks.metaDetailsStreams);
+                } else if (deepLinks.metaDetailsStreams) {
+                    isNavigating.current = true;
+                    window.location.replace(deepLinks.metaDetailsStreams);
+                }
+            } else {
+                window.history.back();
+            }
+        } else {
+            if (deepLinks.player) {
+                isNavigating.current = true;
+                window.location.replace(deepLinks.player);
+            } else if (deepLinks.metaDetailsStreams) {
+                isNavigating.current = true;
+                window.location.replace(deepLinks.metaDetailsStreams);
+            }
         }
     }, []);
 
@@ -127,7 +141,8 @@ const Player = ({ urlParams, queryParams }) => {
             nextVideo();
 
             const deepLinks = window.playerNextVideo.deepLinks;
-            handleNextVideoNavigation(deepLinks);
+            handleNextVideoNavigation(deepLinks, profile.settings.bingeWatching, true);
+
         } else {
             window.history.back();
         }
@@ -257,9 +272,9 @@ const Player = ({ urlParams, queryParams }) => {
             nextVideo();
 
             const deepLinks = player.nextVideo.deepLinks;
-            handleNextVideoNavigation(deepLinks);
+            handleNextVideoNavigation(deepLinks, profile.settings.bingeWatching, false);
         }
-    }, [player.nextVideo, handleNextVideoNavigation]);
+    }, [player.nextVideo, handleNextVideoNavigation, profile.settings]);
 
     const onVideoClick = React.useCallback(() => {
         if (video.state.paused !== null) {
@@ -323,10 +338,10 @@ const Player = ({ urlParams, queryParams }) => {
         setError(null);
         video.unload();
 
-        if (player.selected && streamingServer.settings?.type !== 'Loading') {
+        if (player.selected && player.stream?.type === 'Ready' && streamingServer.settings?.type !== 'Loading') {
             video.load({
                 stream: {
-                    ...player.selected.stream,
+                    ...player.stream.content,
                     subtitles: Array.isArray(player.selected.stream.subtitles) ?
                         player.selected.stream.subtitles.map((subtitles) => ({
                             ...subtitles,
@@ -361,7 +376,7 @@ const Player = ({ urlParams, queryParams }) => {
                 shellTransport: services.shell.active ? services.shell.transport : null,
             });
         }
-    }, [streamingServer.baseUrl, player.selected, forceTranscoding, casting]);
+    }, [streamingServer.baseUrl, player.selected, player.stream, forceTranscoding, casting]);
     React.useEffect(() => {
         if (video.state.stream !== null) {
             const tracks = player.subtitles.map((subtitles) => ({
@@ -412,7 +427,7 @@ const Player = ({ urlParams, queryParams }) => {
     }, [video.state.videoParams]);
 
     React.useEffect(() => {
-        if (!!settings.bingeWatching && player.nextVideo !== null && !nextVideoPopupDismissed.current) {
+        if (player.nextVideo !== null && !nextVideoPopupDismissed.current) {
             if (video.state.time !== null && video.state.duration !== null && video.state.time < video.state.duration && (video.state.duration - video.state.time) <= settings.nextVideoNotificationDuration) {
                 openNextVideoPopup();
             } else {

src/routes/Player/useStatistics.js

@@ -7,11 +7,12 @@ const useStatistics = (player, streamingServer) => {
     const { core } = useServices();
 
     const stream = React.useMemo(() => {
-        return player.selected?.stream ?
+        if (player.stream?.type === 'Ready') {
-            player.selected.stream
+            return player.stream.content;
-            :
+        } else {
-            null;
+            return null;
-    }, [player.selected]);
+        }
+    }, [player.stream]);
 
     const infoHash = React.useMemo(() => {
         return stream?.infoHash ?

src/routes/Player/useVideo.js

@@ -152,7 +152,15 @@ const useVideo = () => {
         video.current.on('extraSubtitlesTrackLoaded', onExtraSubtitlesTrackLoaded);
         video.current.on('extraSubtitlesTrackAdded', onExtraSubtitlesTrackAdded);
 
-        return () => video.current.destroy();
+        return () => {
+            if (video.current) {
+                try {
+                    video.current.destroy();
+                } catch (err) {
+                    console.error('Error destroying video:', err);
+                }
+            }
+        };
     }, []);
 
     return {

src/routes/Settings/Player/Player.tsx

@@ -111,7 +111,6 @@ const Player = forwardRef<HTMLDivElement, Props>(({ profile }: Props, ref) => {
                 <Option label={'SETTINGS_NEXT_VIDEO_POPUP_DURATION'}>
                     <MultiselectMenu
                         className={'multiselect'}
-                        disabled={!profile.settings.bingeWatching}
                         {...nextVideoPopupDurationSelect}
                     />
                 </Option>

src/routes/Settings/Settings.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from '
 import classnames from 'classnames';
 import throttle from 'lodash.throttle';
 import { useRouteFocused } from 'stremio-router';
-import { useProfile, useStreamingServer, withCoreSuspender } from 'stremio/common';
+import { usePlatform, useProfile, useStreamingServer, withCoreSuspender } from 'stremio/common';
 import { MainNavBars } from 'stremio/components';
 import { SECTIONS } from './constants';
 import Menu from './Menu';
@@ -18,6 +18,7 @@ import styles from './Settings.less';
 const Settings = () => {
     const { routeFocused } = useRouteFocused();
     const profile = useProfile();
+    const platform = usePlatform();
     const streamingServer = useStreamingServer();
 
     const sectionsContainerRef = useRef<HTMLDivElement>(null);
@@ -37,14 +38,10 @@ const Settings = () => {
 
     const updateSelectedSectionId = useCallback(() => {
         const container = sectionsContainerRef.current;
-        if (container!.scrollTop + container!.clientHeight >= container!.scrollHeight - 50) {
+        for (const section of sections) {
-            setSelectedSectionId(sections[sections.length - 1].id);
+            const sectionContainer = section.ref.current;
-        } else {
+            if (sectionContainer && (sectionContainer.offsetTop + container!.offsetTop) < container!.scrollTop + 50) {
-            for (let i = sections.length - 1; i >= 0; i--) {
+                setSelectedSectionId(section.id);
-                if (sections[i].ref.current!.offsetTop - container!.offsetTop <= container!.scrollTop) {
-                    setSelectedSectionId(sections[i].id);
-                    break;
-                }
             }
         }
     }, []);
@@ -94,7 +91,9 @@ const Settings = () => {
                         profile={profile}
                         streamingServer={streamingServer}
                     />
-                    <Shortcuts ref={shortcutsSectionRef} />
+                    {
+                        !platform.isMobile && <Shortcuts ref={shortcutsSectionRef} />
+                    }
                     <Info streamingServer={streamingServer} />
                 </div>
             </div>

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

@@ -69,7 +69,7 @@
         .cancel {
             &:hover {
                 .icon {
-                    color: var(--color-trakt);
+                    color: var(--danger-accent-color);
                 }
             }
         }

src/routes/Settings/Streaming/URLsManager/Item/Item.less

@@ -52,7 +52,7 @@
                 }
 
                 &.error {
-                    background-color: var(--color-trakt);
+                    background-color: var(--danger-accent-color);
                 }
             }
 
@@ -92,7 +92,7 @@
                 background-color: var(--overlay-color);
 
                 .icon {
-                    color: var(--color-trakt);
+                    color: var(--danger-accent-color);
                     opacity: 1 !important;
                 }
             }

src/routes/Settings/components/Option/Option.less

@@ -22,8 +22,8 @@
         gap: 0.75rem;
 
         .icon {
-            width: 3rem;
+            width: 4rem;
-            height: 3rem;
+            height: 4rem;
             color: var(--primary-foreground-color);
         }