Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-10 11:20:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'development' into feat/player-add-video-scale-property

Browse source
This commit is contained in:
Timothy Z. 2026-04-23 17:20:58 +03:00 committed by GitHub
commit cdffeb4fdf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 103 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -18,7 +18,7 @@
"@sentry/browser": "8.42.0",
"@stremio/stremio-colors": "5.2.0",
"@stremio/stremio-core-web": "0.56.4",
"@stremio/stremio-icons": "5.8.0",
"@stremio/stremio-icons": "5.10.0",
"@stremio/stremio-video": "0.0.77",
"a-color-picker": "1.2.1",
"bowser": "2.11.0",

10
pnpm-lock.yaml
View file

@ -21,8 +21,8 @@ importers:
specifier: 0.56.4
version: 0.56.4
'@stremio/stremio-icons':
specifier: 5.8.0
version: 5.8.0
specifier: 5.10.0
version: 5.10.0
'@stremio/stremio-video':
specifier: 0.0.77
version: 0.0.77
@ -1123,8 +1123,8 @@ packages:
'@stremio/stremio-core-web@0.56.4':
resolution: {integrity: sha512-tFAMYgKrJ1bkvHRMpxDykM/844sDjgRPFk6FLhjQiwh01OHIyEgDqGo/NgwFM+CuMR4mW676SDvwNHkK0Xqg3w==}
'@stremio/stremio-icons@5.8.0':
resolution: {integrity: sha512-IVUvQbIWfA4YEHCTed7v/sdQJCJ+OOCf84LTWpkE2W6GLQ+15WHcMEJrVkE1X3ekYJnGg3GjT0KLO6tKSU0P4w==}
'@stremio/stremio-icons@5.10.0':
resolution: {integrity: sha512-Zw/vGC3D2yeQfk8xv/tfMJTDvbCPOI91tBg4XpR2+EgbZSX8Xvm7Vz457PIhFPhTAwdOPHp0VX0M3gzjbt0zOg==}
'@stremio/stremio-video@0.0.77':
resolution: {integrity: sha512-bnKBS5a9R3+M0zx95YpDUiPs1gXcKCsybgdxfZmpWuQaN0RE9bTBAUlIfBSrcEjVhufMOvg+cfXScT+0fBzTTw==}
@ -5874,7 +5874,7 @@ snapshots:
dependencies:
'@babel/runtime': 7.24.1
'@stremio/stremio-icons@5.8.0': {}
'@stremio/stremio-icons@5.10.0': {}
'@stremio/stremio-video@0.0.77':
dependencies:

15
src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
View file

@ -12,7 +12,7 @@ const NavMenu = require('./NavMenu');
const styles = require('./styles');
const { t } = require('i18next');
const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, hdrInfo, ...props }) => {
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
@ -53,6 +53,14 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
null
}
<div className={styles['buttons-container']}>
{
hdrInfo && (hdrInfo.gamma === 'pq' || hdrInfo.gamma === 'hlg') ?
<div className={styles['hdr-indicator']} title={hdrInfo.gamma === 'pq' ? 'HDR10' : 'HLG'}>
<Icon className={styles['icon']} name={'hdr'} />
</div>
:
null
}
{
!isIOSPWA && fullscreenButton ?
<Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
@ -82,7 +90,10 @@ HorizontalNavBar.propTypes = {
backButton: PropTypes.bool,
searchBar: PropTypes.bool,
fullscreenButton: PropTypes.bool,
navMenu: PropTypes.bool
navMenu: PropTypes.bool,
hdrInfo: PropTypes.shape({
gamma: PropTypes.string,
}),
};
module.exports = HorizontalNavBar;

20
src/components/NavBar/HorizontalNavBar/styles.less
View file

@ -57,10 +57,30 @@
.buttons-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
overflow: visible;
}
.hdr-indicator {
flex: none;
display: flex;
align-items: center;
justify-content: center;
height: 3.5rem;
padding: 0 0.5rem;
opacity: 0.6;
user-select: none;
.icon {
flex: none;
width: 3rem;
height: 1.5rem;
color: var(--primary-foreground-color);
opacity: 0.6;
}
}
.button-container {
flex: none;
display: flex;

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

@ -28,6 +28,7 @@ const useVideo = require('./useVideo');
const styles = require('./styles');
const Video = require('./Video');
const { default: Indicator } = require('./Indicator/Indicator');
const { default: useMediaSession } = require('./useMediaSession');
const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
const findTrackById = (tracks, id) => tracks.find((track) => track.id === id);
@ -606,52 +607,7 @@ 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]);
useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested);
onShortcut('seekForward', (combo) => {
if (video.state.time !== null) {
@ -970,6 +926,7 @@ const Player = ({ urlParams, queryParams }) => {
title={player.title !== null ? player.title : ''}
backButton={true}
fullscreenButton={true}
hdrInfo={video.state.hdrInfo}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
/>

2
src/routes/Player/styles.less
View file

@ -65,7 +65,6 @@ html:not(.active-slider-within) {
top: 0;
left: 0;
z-index: -1;
box-shadow: 0 0 8rem 6rem @color-background-dark5;
content: "";
}
@ -102,7 +101,6 @@ html:not(.active-slider-within) {
bottom: 0;
left: 0;
z-index: -1;
box-shadow: 0 0 8rem 8rem @color-background-dark5;
content: "";
}
}

57
src/routes/Player/useMediaSession.ts Normal file
View file

@ -0,0 +1,57 @@
import { useEffect } from 'react';
const useMediaSession = (
videoState: VideoState,
player: Player,
onPlayRequested: () => void,
onPauseRequested: () => void,
onNextVideoRequested: () => void,
) => {
useEffect(() => {
if (!navigator.mediaSession) return;
const playbackState = !videoState.paused ? 'playing' : 'paused';
navigator.mediaSession.playbackState = playbackState;
return () => {
navigator.mediaSession.playbackState = 'none';
};
}, [videoState.paused]);
useEffect(() => {
if (!navigator.mediaSession) return;
const metaItem = player.metaItem && player.metaItem?.type === 'Ready' ? player.metaItem.content as MetaItemPlayer : null;
const videoId = player.selected ? player.selected?.streamRequest?.path?.id : null;
const video = metaItem?.videos.find(({ id }) => id === videoId);
const videoInfo = 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]);
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]);
};
export default useMediaSession;

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

@ -22,6 +22,7 @@ const useVideo = () => {
muted: null,
playbackSpeed: null,
videoParams: null,
hdrInfo: null,
audioTracks: [],
selectedAudioTrackId: null,
subtitlesTracks: [],

3
src/routes/Player/videoState.d.ts vendored Normal file
View file

@ -0,0 +1,3 @@
type VideoState = {
paused?: boolean;
};

1
src/types/models/Player.d.ts vendored
View file

@ -5,7 +5,6 @@ type LibraryItemPlayer = Pick<LibraryItem, '_id'> & {
type VideoPlayer = Video & {
upcoming: boolean,
watched: boolean,
progress: boolean | null,
scheduled: boolean,
deepLinks: VideoDeepLinks,
};