From 5fe4592be6b9f93138f629b8533826a8409e710a Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 22 Apr 2026 15:31:31 +0300 Subject: [PATCH 1/2] feat: player add video scale property --- src/routes/Player/ControlBar/ControlBar.js | 9 +++++++++ src/routes/Player/Indicator/Indicator.tsx | 14 ++++++++++++-- src/routes/Player/Player.js | 13 +++++++++++++ src/routes/Player/useVideo.js | 5 +++++ 4 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index e00f66d00..c9ba5cd7e 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -39,6 +39,9 @@ const ControlBar = React.forwardRef(({ onToggleSpeedMenu, onToggleSideDrawer, onToggleOptionsMenu, + videoScale, + videoScaleLabel, + onVideoScaleChanged, onToggleStatisticsMenu, onTouchEnd, ...props @@ -176,6 +179,9 @@ const ControlBar = React.forwardRef(({ : null } + @@ -194,6 +200,9 @@ ControlBar.propTypes = { volume: PropTypes.number, muted: PropTypes.bool, playbackSpeed: PropTypes.number, + videoScale: PropTypes.string, + videoScaleLabel: PropTypes.string, + onVideoScaleChanged: PropTypes.func, subtitlesTracks: PropTypes.array, audioTracks: PropTypes.array, metaItem: PropTypes.object, diff --git a/src/routes/Player/Indicator/Indicator.tsx b/src/routes/Player/Indicator/Indicator.tsx index 7525fe1cd..b9290ad64 100644 --- a/src/routes/Player/Indicator/Indicator.tsx +++ b/src/routes/Player/Indicator/Indicator.tsx @@ -7,7 +7,13 @@ import styles from './Indicator.less'; type Property = { label: string, - format: (value: number) => string, + format: (value: number | string) => string, +}; + +const VIDEO_SCALE_LABELS: Record = { + 'contain': 'Fit', + 'cover': 'Crop', + 'fill': 'Stretch', }; const PROPERTIES: Record = { @@ -15,9 +21,13 @@ const PROPERTIES: Record = { label: 'SUBTITLES_DELAY', format: (value) => `${(value / 1000).toFixed(2)}s`, }, + 'videoScale': { + label: 'VIDEO_SCALE', + format: (value) => VIDEO_SCALE_LABELS[String(value)] || String(value), + }, }; -type VideoState = Record; +type VideoState = Record; type Props = { className: string, diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 662717b70..add5c0c7c 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -97,6 +97,9 @@ const Player = ({ urlParams, queryParams }) => { const isNavigating = React.useRef(false); + const VIDEO_SCALES = ['contain', 'cover', 'fill']; + const VIDEO_SCALE_LABELS = { contain: 'Fit', cover: 'Crop', fill: 'Stretch' }; + const playbackSpeed = React.useRef(video.state.playbackSpeed || 1); const pressTimer = React.useRef(null); const longPress = React.useRef(false); @@ -235,6 +238,13 @@ const Player = ({ urlParams, queryParams }) => { }, []); + const onVideoScaleChanged = React.useCallback(() => { + const currentScale = video.state.videoScale || 'contain'; + const currentIndex = VIDEO_SCALES.indexOf(currentScale); + const nextScale = VIDEO_SCALES[(currentIndex + 1) % VIDEO_SCALES.length]; + video.setVideoScale(nextScale); + }, [video.state.videoScale]); + const onSubtitlesTrackSelected = React.useCallback((track) => { video.setSubtitlesTrack(track?.id ?? null); streamStateChanged({ @@ -999,6 +1009,9 @@ const Player = ({ urlParams, queryParams }) => { onToggleSubtitlesMenu={toggleSubtitlesMenu} onToggleAudioMenu={toggleAudioMenu} onToggleSpeedMenu={toggleSpeedMenu} + videoScale={video.state.videoScale} + videoScaleLabel={VIDEO_SCALE_LABELS[video.state.videoScale || 'contain']} + onVideoScaleChanged={onVideoScaleChanged} onToggleStatisticsMenu={toggleStatisticsMenu} onToggleSideDrawer={toggleSideDrawer} onMouseMove={onBarMouseMove} diff --git a/src/routes/Player/useVideo.js b/src/routes/Player/useVideo.js index b3a5d2e39..bfc0ec810 100644 --- a/src/routes/Player/useVideo.js +++ b/src/routes/Player/useVideo.js @@ -142,6 +142,10 @@ const useVideo = () => { setProp('extraSubtitlesOffset', offset); }; + const setVideoScale = (scale) => { + setProp('videoScale', scale); + }; + const setSubtitlesTextColor = (color) => { setProp('subtitlesTextColor', color); setProp('extraSubtitlesTextColor', color); @@ -238,6 +242,7 @@ const useVideo = () => { setSubtitlesBackgroundColor, setSubtitlesOutlineColor, setExtraSubtitlesTrack, + setVideoScale, }; }; From ca37d77c2dead0b40ba84004f6222d717051dbf6 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 23 Apr 2026 13:58:02 +0300 Subject: [PATCH 2/2] bump: stremio-video to v0.0.77 --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 4fe8c9adf..4634525f8 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@stremio/stremio-colors": "5.2.0", "@stremio/stremio-core-web": "0.56.4", "@stremio/stremio-icons": "5.8.0", - "@stremio/stremio-video": "0.0.75", + "@stremio/stremio-video": "0.0.77", "a-color-picker": "1.2.1", "bowser": "2.11.0", "buffer": "6.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c9853d5f..7de85f520 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: 5.8.0 version: 5.8.0 '@stremio/stremio-video': - specifier: 0.0.75 - version: 0.0.75 + specifier: 0.0.77 + version: 0.0.77 a-color-picker: specifier: 1.2.1 version: 1.2.1 @@ -1126,8 +1126,8 @@ packages: '@stremio/stremio-icons@5.8.0': resolution: {integrity: sha512-IVUvQbIWfA4YEHCTed7v/sdQJCJ+OOCf84LTWpkE2W6GLQ+15WHcMEJrVkE1X3ekYJnGg3GjT0KLO6tKSU0P4w==} - '@stremio/stremio-video@0.0.75': - resolution: {integrity: sha512-oKXMq156BVagzziWoTsmgNYABCSfwV9hR/TM6+JR4lne5pW4qmUN17ba/Fxsr+USKHeCKUaz1u0asKBj06HfyA==} + '@stremio/stremio-video@0.0.77': + resolution: {integrity: sha512-bnKBS5a9R3+M0zx95YpDUiPs1gXcKCsybgdxfZmpWuQaN0RE9bTBAUlIfBSrcEjVhufMOvg+cfXScT+0fBzTTw==} '@stylistic/eslint-plugin-jsx@4.4.1': resolution: {integrity: sha512-83SInq4u7z71vWwGG+6ViOtlOmZ6tSrDkMPhrvdBBTGMLA0gs22WSdhQ4vZP3oJ5Xg4ythvqeUiFSedvVxzhyA==} @@ -5876,7 +5876,7 @@ snapshots: '@stremio/stremio-icons@5.8.0': {} - '@stremio/stremio-video@0.0.75': + '@stremio/stremio-video@0.0.77': dependencies: buffer: 6.0.3 color: 4.2.3