Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2025-01-14 17:19:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix safari fullscreen

Browse Source
This commit is contained in:
frost768 2023-03-22 12:38:12 +03:00
parent cf2060bd32
commit d51603a382
5 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/video/components/VideoPlayerBase.tsx
View File

@ -39,7 +39,7 @@ function VideoPlayerBaseWithState(props: VideoPlayerBaseProps) {
<div <div
ref={ref} ref={ref}
className={[ className={[
"is-video-player popout-location relative h-full w-full select-none overflow-hidden bg-black", "is-video-player popout-location relative h-full w-full select-none bg-black",
props.includeSafeArea || videoInterface.isFullscreen props.includeSafeArea || videoInterface.isFullscreen
? "[border-left:env(safe-area-inset-left)_solid_transparent] [border-right:env(safe-area-inset-right)_solid_transparent]" ? "[border-left:env(safe-area-inset-left)_solid_transparent] [border-right:env(safe-area-inset-right)_solid_transparent]"
: "", : "",

2
src/video/components/internal/VideoElementInternal.tsx
View File

@ -41,7 +41,7 @@ function VideoElement(props: Props) {
autoPlay={props.autoPlay} autoPlay={props.autoPlay}
muted={mediaPlaying.volume === 0} muted={mediaPlaying.volume === 0}
playsInline playsInline
className="h-full w-full" className="absolute inset-0 z-0 h-full w-full"
/> />
); );
} }

4
src/video/state/providers/videoStateProvider.ts
View File

@ -277,7 +277,9 @@ export function createVideoStateProvider(
updateMediaPlaying(descriptor, state); updateMediaPlaying(descriptor, state);
}; };
const fullscreenchange = () => { const fullscreenchange = () => {
state.interface.isFullscreen = !!document.fullscreenElement; state.interface.isFullscreen =
!!document.fullscreenElement || // other browsers
!!(document as any).webkitFullscreenElement; // safari
updateInterface(descriptor, state); updateInterface(descriptor, state);
}; };
const volumechange = async () => { const volumechange = async () => {

6
src/views/developer/VideoTesterView.tsx
View File

@ -50,7 +50,7 @@ export function VideoTesterView() {
if (video) { if (video) {
return ( return (
<div className="fixed top-0 left-0 h-[100dvh] w-screen"> <div className="fixed top-0 left-0 h-full w-screen">
<Helmet> <Helmet>
<html data-full="true" /> <html data-full="true" />
</Helmet> </Helmet>
@ -64,8 +64,8 @@ export function VideoTesterView() {
/> />
<SourceController <SourceController
source={video.streamUrl} source={video.streamUrl}
type={MWStreamType.MP4} type={videoType}
quality={MWStreamQuality.Q720P} quality={MWStreamQuality.QUNKNOWN}
/> />
</VideoPlayer> </VideoPlayer>
</div> </div>

2
src/views/media/MediaView.tsx
View File

@ -132,7 +132,7 @@ export function MediaViewPlayer(props: MediaViewPlayerProps) {
} }
return ( return (
<div className="fixed top-0 left-0 h-[100dvh] w-screen"> <div className="fixed top-0 left-0 h-full w-screen">
<Helmet> <Helmet>
<html data-full="true" /> <html data-full="true" />
</Helmet> </Helmet>