@ericchen1990/pano-view 3.4.0 → 3.4.2

package/dist/index.d.mts

@@ -229,6 +229,10 @@ type VideoHotspotProps = HotspotCommonProps & {
     loop?: boolean;
     muted?: boolean;
     volume?: number;
+    /**
+     * Keep playback in the page. Defaults to true, including the WebKit and
+     * X5 attributes for iPhone Safari, WeChat, QQ, and UC.
+     */
     playsInline?: boolean;
     preload?: "none" | "metadata" | "auto";
     crossOrigin?: "" | "anonymous" | "use-credentials";
@@ -1298,6 +1302,10 @@ type PanoVideoProps = {
     muted?: boolean;
     volume?: number;
     autoPlay?: boolean;
+    /**
+     * Keep playback in the page. Defaults to true, including the WebKit and
+     * X5 attributes for iPhone Safari, WeChat, QQ, and UC.
+     */
     playsInline?: boolean;
     preload?: "none" | "metadata" | "auto";
     crossOrigin?: "" | "anonymous" | "use-credentials";

package/dist/index.d.ts

@@ -229,6 +229,10 @@ type VideoHotspotProps = HotspotCommonProps & {
     loop?: boolean;
     muted?: boolean;
     volume?: number;
+    /**
+     * Keep playback in the page. Defaults to true, including the WebKit and
+     * X5 attributes for iPhone Safari, WeChat, QQ, and UC.
+     */
     playsInline?: boolean;
     preload?: "none" | "metadata" | "auto";
     crossOrigin?: "" | "anonymous" | "use-credentials";
@@ -1298,6 +1302,10 @@ type PanoVideoProps = {
     muted?: boolean;
     volume?: number;
     autoPlay?: boolean;
+    /**
+     * Keep playback in the page. Defaults to true, including the WebKit and
+     * X5 attributes for iPhone Safari, WeChat, QQ, and UC.
+     */
     playsInline?: boolean;
     preload?: "none" | "metadata" | "auto";
     crossOrigin?: "" | "anonymous" | "use-credentials";

package/dist/index.mjs

@@ -3404,7 +3404,9 @@ function KeyboardControls({
       return;
     }
     const previousTabIndex = element.getAttribute("tabindex");
+    const previousOutline = element.style.outline;
     element.tabIndex = 0;
+    element.style.outline = "none";
     const syncKeyboardActive = () => {
       let continuous = false;
       for (const action of pressedRef.current) {
@@ -3488,6 +3490,7 @@ function KeyboardControls({
       } else {
         element.setAttribute("tabindex", previousTabIndex);
       }
+      element.style.outline = previousOutline;
       clearPressed();
     };
   }, [controlsRef, enabled, gl, keyMap]);
@@ -9110,6 +9113,56 @@ function useWebVRPointerLock(enabled, element) {
 // src/webvr/wakelock.ts
 import { useEffect as useEffect19 } from "react";
 
+// src/video/inline-playback.ts
+var INLINE_VIDEO_ATTRIBUTES = [
+  ["playsinline", "true"],
+  ["webkit-playsinline", "true"],
+  ["x5-playsinline", "true"],
+  ["x5-video-player-type", "h5-page"],
+  ["x5-video-player-fullscreen", "false"]
+];
+function applyInlineVideoPlayback(video, inline) {
+  video.controls = false;
+  video.playsInline = inline;
+  video.disablePictureInPicture = true;
+  video.disableRemotePlayback = true;
+  video.setAttribute("disablepictureinpicture", "");
+  video.setAttribute("disableremoteplayback", "");
+  video.setAttribute("x-webkit-airplay", "deny");
+  video.setAttribute(
+    "controlsList",
+    "nodownload nofullscreen noremoteplayback"
+  );
+  if (inline) {
+    for (const [name, value] of INLINE_VIDEO_ATTRIBUTES) {
+      video.setAttribute(name, value);
+    }
+    return;
+  }
+  for (const [name] of INLINE_VIDEO_ATTRIBUTES) {
+    video.removeAttribute(name);
+  }
+}
+function mountTextureVideo(video, canvas) {
+  const parent = canvas.closest("[data-pano-viewer]") ?? canvas.parentElement;
+  if (!parent) {
+    return;
+  }
+  video.tabIndex = -1;
+  video.setAttribute("aria-hidden", "true");
+  video.setAttribute("data-pano-texture-video", "");
+  video.style.position = "absolute";
+  video.style.top = "0";
+  video.style.left = "0";
+  video.style.width = "1px";
+  video.style.height = "1px";
+  video.style.opacity = "0";
+  video.style.pointerEvents = "none";
+  if (video.parentElement !== parent) {
+    parent.appendChild(video);
+  }
+}
+
 // src/webvr/wakelock-fallback.ts
 var WEBVR_WAKELOCK_FALLBACK_VIDEO_BASE64 = "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";
 
@@ -9135,17 +9188,12 @@ function decodeBase64(value) {
 function createFallbackVideo() {
   const video = document.createElement("video");
   video.autoplay = true;
-  video.controls = false;
   video.defaultMuted = true;
   video.loop = true;
   video.muted = true;
-  video.playsInline = true;
   video.tabIndex = -1;
   video.ariaHidden = "true";
-  video.disablePictureInPicture = true;
-  video.setAttribute("playsinline", "");
-  video.setAttribute("webkit-playsinline", "");
-  video.setAttribute("disablepictureinpicture", "");
+  applyInlineVideoPlayback(video, true);
   video.style.cssText = "pointer-events:none;position:fixed;bottom:0;left:0;width:1px;height:1px;opacity:0;";
   const src = URL.createObjectURL(
     new Blob([decodeBase64(WEBVR_WAKELOCK_FALLBACK_VIDEO_BASE64)], {
@@ -11129,7 +11177,6 @@ function PanoVideo({
   usePanoMediaActivationIntent(autoPlay);
   const gl = useThree16((state) => state.gl);
   const host = useContext23(PanoVideoHostContext);
-  const overlay = useContext23(PanoChromeOverlayContext);
   const variants = useMemo17(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
@@ -11207,9 +11254,7 @@ function PanoVideo({
     }
     const video = document.createElement("video");
     video.muted = true;
-    video.playsInline = true;
-    video.setAttribute("playsinline", "true");
-    video.setAttribute("webkit-playsinline", "true");
+    applyInlineVideoPlayback(video, true);
     video.preload = "metadata";
     const texture = new VideoTexture(video);
     applyEquirectangularLayout(texture, 1);
@@ -11239,22 +11284,15 @@ function PanoVideo({
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  useEffect25(() => {
-    if (!resource || !overlay?.overlayElement) {
+  useLayoutEffect3(() => {
+    if (!resource) {
       return;
     }
-    const { video } = resource;
-    video.setAttribute("data-pano-video", "");
-    video.style.position = "absolute";
-    video.style.width = "1px";
-    video.style.height = "1px";
-    video.style.opacity = "0";
-    video.style.pointerEvents = "none";
-    overlay.overlayElement.appendChild(video);
+    mountTextureVideo(resource.video, gl.domElement);
     return () => {
-      video.remove();
+      resource.video.remove();
     };
-  }, [overlay?.overlayElement, resource]);
+  }, [gl, resource]);
   const resolvedVariantId = resolvePanoVideoVariantId(variants, variantId);
   const activeVariant = variants.find((variant) => variant.id === resolvedVariantId) ?? variants[0];
   const mediaKey = activeVariant ? `${activeVariant.id}:${activeVariant.sources.map((source) => source.src).join("|")}:${tracks.map((track) => `${panoVideoTrackId(track)}:${track.src}`).join("|")}:${crossOrigin ?? ""}` : "";
@@ -11544,7 +11582,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  useEffect25(() => {
+  useLayoutEffect3(() => {
     if (!resource) {
       return;
     }
@@ -11554,14 +11592,7 @@ function PanoVideo({
     if (mediaCapabilitiesRef.current.volumeAdjustable) {
       video.volume = clampVolume(volume);
     }
-    video.playsInline = playsInline;
-    if (playsInline) {
-      video.setAttribute("playsinline", "true");
-      video.setAttribute("webkit-playsinline", "true");
-    } else {
-      video.removeAttribute("playsinline");
-      video.removeAttribute("webkit-playsinline");
-    }
+    applyInlineVideoPlayback(video, playsInline);
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
   useEffect25(() => {
@@ -15957,7 +15988,7 @@ function SequenceHotspot({
 
 // src/hotspot/video-hotspot.tsx
 import { useThree as useThree27 } from "@react-three/fiber";
-import { useEffect as useEffect38, useRef as useRef39, useState as useState20 } from "react";
+import { useEffect as useEffect38, useLayoutEffect as useLayoutEffect7, useRef as useRef39, useState as useState20 } from "react";
 import {
   ClampToEdgeWrapping as ClampToEdgeWrapping6,
   LinearFilter as LinearFilter9,
@@ -16033,6 +16064,7 @@ function useVideoResource({
   poster,
   src
 }) {
+  const gl = useThree27((state) => state.gl);
   const [resource, setResource] = useState20(null);
   const onEndedRef = useRef39(onEnded);
   const onErrorRef = useRef39(onError);
@@ -16050,12 +16082,7 @@ function useVideoResource({
     if (crossOrigin !== void 0) {
       video.crossOrigin = crossOrigin;
     }
-    const inline = playsInline ?? true;
-    video.playsInline = inline;
-    if (inline) {
-      video.setAttribute("playsinline", "true");
-      video.setAttribute("webkit-playsinline", "true");
-    }
+    applyInlineVideoPlayback(video, playsInline ?? true);
     video.poster = poster ?? "";
     const texture = new VideoTexture2(video);
     texture.colorSpace = SRGBColorSpace8;
@@ -16097,6 +16124,7 @@ function useVideoResource({
     video.addEventListener("error", reportError);
     video.addEventListener("pause", handlePause);
     video.addEventListener("play", handlePlay);
+    mountTextureVideo(video, gl.domElement);
     setResource({ video, texture, ready: false });
     video.src = src;
     video.load();
@@ -16110,9 +16138,19 @@ function useVideoResource({
       video.pause();
       video.removeAttribute("src");
       video.load();
+      video.remove();
       texture.dispose();
     };
-  }, [crossOrigin, id, playsInline, poster, src]);
+  }, [crossOrigin, gl, id, playsInline, poster, src]);
+  useLayoutEffect7(() => {
+    if (!resource) {
+      return;
+    }
+    mountTextureVideo(resource.video, gl.domElement);
+    return () => {
+      resource.video.remove();
+    };
+  }, [gl, resource]);
   return resource;
 }
 function VideoHotspot({
@@ -16151,21 +16189,14 @@ function VideoHotspot({
   const onPlaybackStateChangeRef = useRef39(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  useEffect38(() => {
+  useLayoutEffect7(() => {
     if (!resource) {
       return;
     }
     resource.video.loop = loop;
     resource.video.muted = muted;
     resource.video.volume = clampVolume2(volume);
-    resource.video.playsInline = playsInline;
-    if (playsInline) {
-      resource.video.setAttribute("playsinline", "true");
-      resource.video.setAttribute("webkit-playsinline", "true");
-    } else {
-      resource.video.removeAttribute("playsinline");
-      resource.video.removeAttribute("webkit-playsinline");
-    }
+    applyInlineVideoPlayback(resource.video, playsInline);
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
   useEffect38(() => {