fix safari fullscreen

2 years ago · d51603a382
5 changed files with 9 additions and 7 deletions
--- a/src/video/components/VideoPlayerBase.tsx
+++ b/src/video/components/VideoPlayerBase.tsx
@ -39,7 +39,7 @@ function VideoPlayerBaseWithState(props: VideoPlayerBaseProps) {
				@@ -39,7 +39,7 @@ function VideoPlayerBaseWithState(props: VideoPlayerBaseProps) {
      <div
        ref={ref}
        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
            ? "[border-left:env(safe-area-inset-left)_solid_transparent] [border-right:env(safe-area-inset-right)_solid_transparent]"
            : "",
--- a/src/video/components/internal/VideoElementInternal.tsx
+++ b/src/video/components/internal/VideoElementInternal.tsx
@ -41,7 +41,7 @@ function VideoElement(props: Props) {
				@@ -41,7 +41,7 @@ function VideoElement(props: Props) {
      autoPlay={props.autoPlay}
      muted={mediaPlaying.volume === 0}
      playsInline
-      className="h-full w-full"
+      className="absolute inset-0 z-0 h-full w-full"
    />
  );
 }
--- a/src/video/state/providers/videoStateProvider.ts
+++ b/src/video/state/providers/videoStateProvider.ts
@ -277,7 +277,9 @@ export function createVideoStateProvider(
				@@ -277,7 +277,9 @@ export function createVideoStateProvider(
        updateMediaPlaying(descriptor, state);
      };
      const fullscreenchange = () => {
-        state.interface.isFullscreen = !!document.fullscreenElement;
+        state.interface.isFullscreen =
+          !!document.fullscreenElement || // other browsers
+          !!(document as any).webkitFullscreenElement; // safari
        updateInterface(descriptor, state);
      };
      const volumechange = async () => {
--- a/src/views/developer/VideoTesterView.tsx
+++ b/src/views/developer/VideoTesterView.tsx
@ -50,7 +50,7 @@ export function VideoTesterView() {
				@@ -50,7 +50,7 @@ export function VideoTesterView() {

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

  return (
-    <div className="fixed top-0 left-0 h-[100dvh] w-screen">
+    <div className="fixed top-0 left-0 h-full w-screen">
      <Helmet>
        <html data-full="true" />
      </Helmet>