Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Timothy Z. 2025-11-27 14:49:15 +02:00 committed by GitHub
commit 5fe0353be5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 77 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/workflows/build.yml vendored
View file

@ -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:

2
.github/workflows/pages_cleanup.yml vendored
View file

@ -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

4
.github/workflows/release.yml vendored
View file

@ -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

38
Dockerfile
View file

@ -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"]

4
package.json
View file

@ -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-icons": "5.7.1",
"@stremio/stremio-core-web": "0.51.0",
"@stremio/stremio-icons": "5.8.0",
"@stremio/stremio-video": "0.0.64",
"a-color-picker": "1.2.1",
"bowser": "2.11.0",

10
pnpm-lock.yaml
View file

@ -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
version: 5.7.1
specifier: 5.8.0
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':
resolution: {integrity: sha512-Z96p36LLX3G+ewMnFKmNZVsO/AtcHA33WQ3wGOYFubxiYADPRAkcLVU5rHIfiGSC9IUaUVhxQWTPVB9ScY4Q5Q==}
'@stremio/stremio-icons@5.8.0':
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:

8
src/components/MetaPreview/MetaLinks/MetaLinks.js
View file

@ -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>

36
src/components/Video/Video.js
View file

@ -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

1
src/routes/MetaDetails/MetaDetails.js
View file

@ -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}
/>

5
src/routes/MetaDetails/VideosList/VideosList.js
View file

@ -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,
};

4
src/routes/Player/Player.js
View file

@ -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 videoId = player.selected ? player.selected.streamRequest.path.id : null;
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;

15
src/routes/Player/SideDrawer/SideDrawer.tsx
View file

@ -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}
/>

10
src/routes/Player/useVideo.js
View file

@ -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 {