Merge branch 'development' into fix/player-next-video-behaviour

.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,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Install NPM dependencies
         run: pnpm install
       - name: Build
@@ -19,7 +19,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

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
+# Setup app
-FROM base AS prebuild
+FROM base AS app
 
-RUN apk update && apk upgrade && \
+COPY package.json pnpm-lock.yaml /var/www/stremio-web
-    apk add --no-cache git
+RUN pnpm i --frozen-lockfile
-WORKDIR /var/www/stremio-web
-COPY . .
-RUN npm install
-RUN npm run build
 
-# Bundle app source
+COPY . /var/www/stremio-web
-FROM base AS final
+RUN pnpm build
 
-WORKDIR /var/www/stremio-web
+# Setup server
-COPY . .
+FROM base AS server
-COPY --from=prebuild /var/www/stremio-web/node_modules ./node_modules
+
-COPY --from=prebuild /var/www/stremio-web/build ./build
+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"]

package.json

@@ -17,8 +17,8 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/player-next-video-behaviour/dev/stremio-stremio-core-web-0.50.0.tgz",
+        "@stremio/stremio-core-web": "0.51.0",
-        "@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

@@ -21,8 +21,8 @@ importers:
         specifier: https://stremio.github.io/stremio-core/stremio-core-web/fix/player-next-video-behaviour/dev/stremio-stremio-core-web-0.50.0.tgz
         version: https://stremio.github.io/stremio-core/stremio-core-web/fix/player-next-video-behaviour/dev/stremio-stremio-core-web-0.50.0.tgz
       '@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
@@ -1306,8 +1306,8 @@ packages:
     resolution: {tarball: https://stremio.github.io/stremio-core/stremio-core-web/fix/player-next-video-behaviour/dev/stremio-stremio-core-web-0.50.0.tgz}
     version: 0.50.0
 
-  '@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==}
@@ -6566,7 +6566,7 @@ snapshots:
     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/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/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) {
+        React.useEffect(() => {
-                if (typeof popupRef === 'function') {
+            selected && !watched && ref.current?.scrollIntoView({
-                    popupRef(node);
+                behavior: 'smooth',
-                } else {
+                block: 'nearest',
-                    popupRef.current = node;
+                inline: 'start'
-                }
+            });
-            }
+        }, [selected]);
-            if (ref) {
-                if (typeof ref === 'function') {
-                    ref(node);
-                } else {
-                    ref.current = node;
-                }
-            }
-        }, [popupRef]);
 
         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/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

@@ -564,8 +564,8 @@ const Player = ({ urlParams, queryParams }) => {
     React.useEffect(() => {
         if (!navigator.mediaSession) return;
 
-        const metaItem = player.metaItem && player.metaItem.type === 'Ready' ? player.metaItem.content : null;
+        const metaItem = player.metaItem && player.metaItem?.type === 'Ready' ? player.metaItem.content : null;
-        const videoId = player.selected ? player.selected.streamRequest.path.id : 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;

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 = () => {
+    const onTransitionEnd = useCallback(() => {
-        selectedVideoRef.current?.scrollIntoView({
+        setSelectedVideoId(selected);
-            behavior: 'smooth',
+    }, [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/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 {