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

feat: improve detection fullscreen compAtibility

Browse source
This commit is contained in:
Timothy Z. 2026-05-04 19:49:14 +03:00
parent 6065d8bf15
commit 0785fbfc51
4 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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