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

Merge branch 'development' of https://github.com/Stremio/stremio-web into refactor/shortcuts-logic

Browse source
This commit is contained in:
Tim 2026-05-08 14:46:27 +02:00
commit 145a498101
10 changed files with 49 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -17,7 +17,7 @@
"@babel/runtime": "7.29.2",
"@sentry/browser": "8.42.0",
"@stremio/stremio-colors": "5.2.0",
"@stremio/stremio-core-web": "0.56.4",
"@stremio/stremio-core-web": "0.57.0",
"@stremio/stremio-icons": "5.10.0",
"@stremio/stremio-video": "0.0.78",
"a-color-picker": "1.2.1",

10
pnpm-lock.yaml
View file

@ -18,8 +18,8 @@ importers:
specifier: 5.2.0
version: 5.2.0
'@stremio/stremio-core-web':
specifier: 0.56.4
version: 0.56.4
specifier: 0.57.0
version: 0.57.0
'@stremio/stremio-icons':
specifier: 5.10.0
version: 5.10.0
@ -1394,8 +1394,8 @@ packages:
'@stremio/stremio-colors@5.2.0':
resolution: {integrity: sha512-dYlPgu9W/H7c9s1zmW5tiDnRenaUa4Hg1QCyOg1lhOcgSfM/bVTi5nnqX+IfvGTTUNA0zgzh8hI3o3miwnZxTg==}
'@stremio/stremio-core-web@0.56.4':
resolution: {integrity: sha512-tFAMYgKrJ1bkvHRMpxDykM/844sDjgRPFk6FLhjQiwh01OHIyEgDqGo/NgwFM+CuMR4mW676SDvwNHkK0Xqg3w==}
'@stremio/stremio-core-web@0.57.0':
resolution: {integrity: sha512-go8GZwGm6MFfjez6J/T1HrGNY2330EU3VoVinDYR0rE331aay6fenViLyCYLE829FTebW2eglrmc7MdHjmhqSA==}
'@stremio/stremio-icons@5.10.0':
resolution: {integrity: sha512-Zw/vGC3D2yeQfk8xv/tfMJTDvbCPOI91tBg4XpR2+EgbZSX8Xvm7Vz457PIhFPhTAwdOPHp0VX0M3gzjbt0zOg==}
@ -6444,7 +6444,7 @@ snapshots:
'@stremio/stremio-colors@5.2.0': {}
'@stremio/stremio-core-web@0.56.4':
'@stremio/stremio-core-web@0.57.0':
dependencies:
'@babel/runtime': 7.24.1

1
src/common/Fullscreen/FullscreenContext.ts
View file

@ -7,6 +7,7 @@ export type FullscreenContextValue = readonly [
requestFullscreen: () => Promise<void> | void,
exitFullscreen: () => void,
toggleFullscreen: () => void,
supported: boolean,
];
const FullscreenContext = createContext<FullscreenContextValue | null>(null);

6
src/common/Fullscreen/FullscreenProvider.tsx
View file

@ -79,9 +79,11 @@ const FullscreenProvider = ({ children }: Props) => {
};
}, [shell, toggleFullscreen, exitFullscreen, escExitFullscreen]);
const supported = shell.active || document.fullscreenEnabled === true;
const value = useMemo<FullscreenContextValue>(
() => [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen],
[fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen]
() => [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen, supported],
[fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen, supported]
);
return (

10
src/common/Shortcuts/shortcuts.json
View file

@ -18,11 +18,6 @@
"label": "SETTINGS_SHORTCUT_NAVIGATE_HISTORY",
"combos": [["Backspace"], ["Ctrl", "Backspace"]]
},
{
"name": "exit",
"label": "SETTINGS_SHORTCUT_EXIT_BACK",
"combos": [["Backspace"]]
},
{
"name": "fullscreen",
"label": "SETTINGS_SHORTCUT_FULLSCREEN",
@ -128,6 +123,11 @@
"name": "playNext",
"label": "SETTINGS_SHORTCUT_PLAY_NEXT",
"combos": [["Shift", "N"]]
},
{
"name": "exit",
"label": "SETTINGS_SHORTCUT_EXIT_BACK",
"combos": [["Escape"]]
}
]
}

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

@ -6,7 +6,6 @@ const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image } = require('stremio/components');
const { useFullscreen } = require('stremio/common/Fullscreen');
const usePWA = require('stremio/common/usePWA');
const { useHorizontalNavGamepadNavigation } = require('stremio/services/GamepadNavigation');
const SearchBar = require('./SearchBar');
const NavMenu = require('./NavMenu');
@ -17,8 +16,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const [isIOSPWA] = usePWA();
const [fullscreen, requestFullscreen, exitFullscreen, , supported] = useFullscreen();
const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
<Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
<Icon className={styles['icon']} name={'person-outline'} />
@ -64,7 +62,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
null
}
{
!isIOSPWA && fullscreenButton ?
supported && fullscreenButton ?
<Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
<Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
</Button>

6
src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
View file

@ -23,8 +23,8 @@ const NavMenuContent = ({ onClick }) => {
const streamingServer = useStreamingServer();
const { handlePlayUrl } = usePlayUrl();
const toast = useToast();
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const [isIOSPWA, isAndroidPWA] = usePWA();
const [fullscreen, requestFullscreen, exitFullscreen, , supported] = useFullscreen();
const [, isAndroidPWA] = usePWA();
const streamingServerWarningDismissed = React.useMemo(() => {
return streamingServer.settings !== null && streamingServer.settings.type === 'Ready' || (
!isNaN(profile.settings.streamingServerWarningDismissed.getTime()) &&
@ -79,7 +79,7 @@ const NavMenuContent = ({ onClick }) => {
</div>
</div>
{
!isIOSPWA && !isAndroidPWA ?
supported && !isAndroidPWA ?
<div className={styles['nav-menu-section']}>
<Button className={styles['nav-menu-option-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
<Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />

17
src/routes/Player/SideDrawer/SideDrawer.less
View file

@ -7,6 +7,11 @@
action-buttons-container: action-buttons-container;
}
:import('~stremio/components/MultiselectMenu/Dropdown/Dropdown.less') {
dropdown: dropdown;
open: open;
}
@padding: 1rem;
.side-drawer {
@ -69,6 +74,7 @@
.info {
padding: @padding;
min-height: 0;
overflow-y: auto;
.side-drawer-meta-preview {
@ -89,8 +95,11 @@
flex: 2;
display: flex;
flex-direction: column;
min-height: 0;
.videos {
flex: 1;
min-height: 0;
overflow-y: auto;
}
}
@ -109,6 +118,14 @@
@media @phone-landscape {
.side-drawer {
max-width: 50dvw;
.info {
max-height: 40dvh;
}
.dropdown.open {
max-height: calc(3rem * 4);
}
}
}

10
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 } from 'react';
import React, { useMemo, useCallback, useState, useRef, forwardRef, memo } from 'react';
import classNames from 'classnames';
import Icon from '@stremio/stremio-icons/react';
import { useCore } from 'stremio/core';
@ -22,6 +22,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
const core = useCore();
const [season, setSeason] = useState<number>(seriesInfo?.season);
const [selectedVideoId, setSelectedVideoId] = useState<string | null>(null);
const videosRef = useRef<HTMLDivElement>(null);
const metaItem = useMemo(() => {
return seriesInfo ?
@ -47,8 +48,9 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
.sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
}, [props.metaItem.videos]);
const seasonOnSelect = useCallback((event: { value: string }) => {
setSeason(parseInt(event.value));
const seasonOnSelect = useCallback((event: { value: string | number }) => {
setSeason(parseInt(String(event.value), 10));
videosRef.current?.scrollTo({ top: 0, left: 0 });
}, []);
const seasonWatched = React.useMemo(() => {
@ -109,7 +111,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
seasons={seasons}
onSelect={seasonOnSelect}
/>
<div className={styles['videos']}>
<div ref={videosRef} className={styles['videos']}>
{videos.map((video, index) => (
<Video
key={index}

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

@ -55,6 +55,8 @@ html:not(.active-slider-within) {
}
&.nav-bar-layer {
left: var(--safe-area-inset-left);
right: var(--safe-area-inset-right);
bottom: initial;
background: transparent;
overflow: visible;
@ -95,9 +97,11 @@ html:not(.active-slider-within) {
}
&.control-bar-layer {
left: var(--safe-area-inset-left);
right: var(--safe-area-inset-right);
top: initial;
overflow: visible;
padding-bottom: 0.5rem;
padding-bottom: calc(0.5rem + var(--safe-area-inset-bottom));
&::before {
position: absolute;