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

fix: use translation keys for video scale and hide indicator on initial load

Browse source
This commit is contained in:
Timothy Z. 2026-04-23 20:11:36 +03:00
commit 08c7141e67
2 changed files with 38 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/routes/Player/Indicator/Indicator.tsx
View file

@ -10,10 +10,10 @@ type Property = {
format: (value: number | string) => string, format: (value: number | string) => string,
}; };
const VIDEO_SCALE_LABELS: Record<string, string> = { const VIDEO_SCALE_KEYS: Record<string, string> = {
'contain': 'Fit', 'contain': 'PLAYER_SCALE_FIT',
'cover': 'Crop', 'cover': 'PLAYER_SCALE_CROP',
'fill': 'Stretch', 'fill': 'PLAYER_SCALE_STRETCH',
}; };
const PROPERTIES: Record<string, Property> = { const PROPERTIES: Record<string, Property> = {
@ -23,7 +23,7 @@ const PROPERTIES: Record<string, Property> = {
}, },
'videoScale': { 'videoScale': {
label: 'VIDEO_SCALE', label: 'VIDEO_SCALE',
format: (value) => VIDEO_SCALE_LABELS[String(value)] || String(value), format: (value) => t(VIDEO_SCALE_KEYS[String(value)] || String(value)),
}, },
}; };
@ -38,6 +38,7 @@ type Props = {
const Indicator = ({ className, videoState, disabled }: Props) => { const Indicator = ({ className, videoState, disabled }: Props) => {
const timeout = useRef<NodeJS.Timeout | null>(null); const timeout = useRef<NodeJS.Timeout | null>(null);
const prevVideoState = useRef<VideoState>(videoState); const prevVideoState = useRef<VideoState>(videoState);
const initialized = useRef<Set<string>>(new Set());
const [shown, show, hide] = useBinaryState(false); const [shown, show, hide] = useBinaryState(false);
const [current, setCurrent] = useState<string | null>(null); const [current, setCurrent] = useState<string | null>(null);
@ -59,11 +60,15 @@ const Indicator = ({ className, videoState, disabled }: Props) => {
const next = videoState[property]; const next = videoState[property];
if (next && next !== prev) { if (next && next !== prev) {
setCurrent(property); if (!initialized.current.has(property)) {
show(); initialized.current.add(property);
} else {
setCurrent(property);
show();
timeout.current && clearTimeout(timeout.current); timeout.current && clearTimeout(timeout.current);
timeout.current = setTimeout(hide, 1000); timeout.current = setTimeout(hide, 1000);
}
} }
} }

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

@ -99,7 +99,7 @@ const Player = ({ urlParams, queryParams }) => {
const isNavigating = React.useRef(false); const isNavigating = React.useRef(false);
const VIDEO_SCALES = ['contain', 'cover', 'fill']; const VIDEO_SCALES = ['contain', 'cover', 'fill'];
const VIDEO_SCALE_LABELS = { contain: 'Fit', cover: 'Crop', fill: 'Stretch' }; const VIDEO_SCALE_LABELS = { contain: t('PLAYER_SCALE_FIT'), cover: t('PLAYER_SCALE_CROP'), fill: t('PLAYER_SCALE_STRETCH') };
const playbackSpeed = React.useRef(video.state.playbackSpeed || 1); const playbackSpeed = React.useRef(video.state.playbackSpeed || 1);
const pressTimer = React.useRef(null); const pressTimer = React.useRef(null);
@ -609,6 +609,29 @@ const Player = ({ urlParams, queryParams }) => {
useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested); useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested);
React.useEffect(() => {
const onMediaKey = (action) => {
switch (action) {
case 'play-pause':
video.state.paused ? onPlayRequested() : onPauseRequested();
break;
case 'next-track':
if (player.nextVideo !== null) {
video.setTime(0);
onNextVideoRequested();
}
break;
case 'previous-track':
if (video.state.time !== null && video.state.time > 5000) {
onSeekRequested(0);
}
break;
}
};
shell.on('media-key', onMediaKey);
return () => shell.off('media-key', onMediaKey);
}, [video.state.paused, video.state.time, player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested, onSeekRequested]);
onShortcut('seekForward', (combo) => { onShortcut('seekForward', (combo) => {
if (video.state.time !== null) { if (video.state.time !== null) {
const seekDuration = combo === 1 ? settings.seekShortTimeDuration : settings.seekTimeDuration; const seekDuration = combo === 1 ? settings.seekShortTimeDuration : settings.seekTimeDuration;