@vanillaskyai/video 0.5.6 → 0.5.7

package/CHANGELOG.md

@@ -4,6 +4,14 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
 
 ## Unreleased
 
+## 0.5.7
+
+- Keeps one persistent video backdrop element across consecutive iPhone and
+  iPad scenes, cross-fades through the decoded incoming poster during Safari's
+  source reset, avoids detached iOS preload decoders, and removes the CSS
+  poster workaround introduced in 0.5.6. Desktop retains its decoded
+  video-to-video cross-fade.
+
 ## 0.5.6
 
 - Keeps a video's warmed poster painted behind its frame so Mobile Safari

package/dist/{bg-confetti-572VDSYM.js → bg-confetti-SHQI7ATB.js}

@@ -8,7 +8,7 @@ import {
 import "./chunk-L5BTTCZV.js";
 import {
   BrandGradientOverlay
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
@@ -36,7 +36,7 @@ var BgConfettiTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{bg-emoji-T4IEJ6U2.js → bg-emoji-XYFRA63Q.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-L5BTTCZV.js";
 import {
   BrandGradientOverlay
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
@@ -65,7 +65,7 @@ var BgEmojiTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{bg-media-2D5SQSJX.js → bg-media-FEBATBT2.js}

@@ -1,17 +1,19 @@
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
 import {
   ConfettiLayer
 } from "./chunk-CJ7F2CE6.js";
 import "./chunk-QAAO7OAY.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -43,7 +45,7 @@ var BgMediaTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{brand-message-2JCTRIGS.js → brand-message-P56WEJPG.js}

@@ -4,14 +4,16 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   interpolate
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import "./chunk-XWWLKRNU.js";
 
@@ -208,7 +210,7 @@ var BrandMessageTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         // System fonts only — see BrandMessageBubble for the why

package/dist/{chart-bar-GAJMUB2E.js → chart-bar-ZB45ZRKH.js}

@@ -1,20 +1,22 @@
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
+import "./chunk-HT6BGERF.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   SPRING_SNAPPY,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -246,7 +248,7 @@ var ChartBarTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{chart-counter-HYGBGXNX.js → chart-counter-HFYNE4HT.js}

@@ -1,26 +1,28 @@
 import {
   getResponsiveFontSize
 } from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
 import {
   ConfettiLayer
 } from "./chunk-CJ7F2CE6.js";
 import "./chunk-QAAO7OAY.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
+import "./chunk-HT6BGERF.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -207,7 +209,7 @@ var ChartCounterTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{chart-progress-ring-DUUVMJAJ.js → chart-progress-ring-ZKMLRGSB.js}

@@ -5,18 +5,20 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
+import "./chunk-HT6BGERF.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   interpolate
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -233,7 +235,7 @@ var ChartProgressRingTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/check-runtime.js

@@ -1,12 +1,14 @@
 import {
   VideoFrame
-} from "./chunk-3QEKIC6C.js";
+} from "./chunk-NGY3TNND.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import "./chunk-XWWLKRNU.js";
 import "./chunk-SPVTJH3F.js";
 import {
   resolveVideoBrand
 } from "./chunk-XGRA2MUV.js";
+import "./chunk-WJ6FLKNC.js";
 import "./chunk-73NTSFFI.js";
 
 // src/cli/check-runtime.ts

package/dist/{chunk-CTEYFVUY.js → chunk-6M6DATLW.js}

@@ -1,25 +1,21 @@
+import {
+  SceneVideoBackdrop,
+  resolveMediaPosition
+} from "./chunk-HT6BGERF.js";
 import {
   BrandGradientOverlay,
   getBackgroundTransform
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
+import {
+  useExternalVideoBackdrop
+} from "./chunk-C6WVCZRW.js";
 import {
-  limitsConcurrentVideoDecoders,
   resolveMediaType
 } from "./chunk-224QNWRA.js";
 
 // src/visual-system/scene-templates/scene-background.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MEDIA_POSITIONS = {
-  center: "center center",
-  top: "center top",
-  bottom: "center bottom",
-  left: "left center",
-  right: "right center"
-};
-function resolveMediaPosition(value) {
-  return MEDIA_POSITIONS[value] ?? MEDIA_POSITIONS.center;
-}
 function resolveMediaTreatment(value) {
   return value === "subtle" || value === "text-safe" ? value : "cinematic";
 }
@@ -106,10 +102,13 @@ var SceneBackground = ({
   void _height;
   const resolved = resolveMediaType(mediaType, mediaUrl);
   const wantsMedia = resolved !== "gradient" && !!mediaUrl;
+  const externalVideoBackdrop = useExternalVideoBackdrop();
+  const hasExternalVideoBackdrop = externalVideoBackdrop !== false && resolved === "video";
+  const externalVideoFailed = externalVideoBackdrop === "fallback" && resolved === "video";
+  const externalVideoReady = externalVideoBackdrop === "ready" && resolved === "video";
   const [mediaPaint, setMediaPaint] = useState(
     () => initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster)
   );
-  const [decodedVideoUrl, setDecodedVideoUrl] = useState();
   useEffect(() => {
     setMediaPaint(initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster));
     if (!wantsMedia || resolved !== "photo") return;
@@ -141,35 +140,8 @@ var SceneBackground = ({
     progress,
     beatIntensity
   );
-  const videoRef = useRef(null);
-  const videoStarted = useRef(false);
-  useEffect(() => {
-    const vid = videoRef.current;
-    if (!vid) return;
-    if (!isPlaying) {
-      vid.pause();
-      videoStarted.current = false;
-      return;
-    }
-    if (!videoStarted.current) {
-      vid.playbackRate = 1;
-      if (vid.currentTime > 0) vid.currentTime = 0;
-      vid.play().catch(() => {
-      });
-      videoStarted.current = true;
-    }
-  }, [progress, isPlaying]);
-  useEffect(() => {
-    const vid = videoRef.current;
-    return () => {
-      if (!vid) return;
-      vid.pause();
-      vid.removeAttribute("src");
-      vid.load();
-    };
-  }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    (!hasExternalVideoBackdrop || externalVideoFailed) && /* @__PURE__ */ jsx(
       BrandGradientOverlay,
       {
         style,
@@ -178,46 +150,18 @@ var SceneBackground = ({
         seed: gradSeed
       }
     ),
-    showMedia && (resolved === "video" ? /* @__PURE__ */ jsx(
-      "video",
+    showMedia && !hasExternalVideoBackdrop && (resolved === "video" ? /* @__PURE__ */ jsx(
+      SceneVideoBackdrop,
       {
-        ref: videoRef,
-        src: mediaUrl,
-        poster: decodedVideoUrl === mediaUrl ? void 0 : mediaPoster || void 0,
-        muted: true,
-        loop: true,
-        playsInline: true,
-        preload: "auto",
-        onLoadedData: (event) => {
-          setMediaPaint("ready");
-          const video = event.currentTarget;
-          if (!limitsConcurrentVideoDecoders()) {
-            setDecodedVideoUrl(mediaUrl);
-            return;
-          }
-          video.requestVideoFrameCallback?.(() => {
-            if (video.isConnected) setDecodedVideoUrl(mediaUrl);
-          });
-        },
-        onError: () => setMediaPaint("failed"),
-        "data-media-position": mediaPosition,
-        style: {
-          position: "absolute",
-          inset: 0,
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-          objectPosition: resolvedPosition,
-          // Mobile WebKit can briefly make a newly mounted video layer
-          // transparent while handing the decoder over from the previous
-          // scene. Keep the already-warmed poster painted behind the
-          // replaced content so that gap never exposes the gradient.
-          backgroundImage: mediaPoster ? `url(${mediaPoster})` : void 0,
-          backgroundSize: "cover",
-          backgroundPosition: resolvedPosition,
-          transform: bgTransform.transform,
-          transformOrigin: bgTransform.transformOrigin
-        }
+        mediaUrl,
+        mediaPoster,
+        mediaPosition,
+        backgroundEffect,
+        progress,
+        beatIntensity,
+        isPlaying,
+        onReady: () => setMediaPaint("ready"),
+        onError: () => setMediaPaint("failed")
       }
     ) : /* @__PURE__ */ jsx(
       "div",
@@ -234,7 +178,7 @@ var SceneBackground = ({
         }
       }
     )),
-    showTreatment && treatmentLayers.map((layer) => /* @__PURE__ */ jsx(
+    (hasExternalVideoBackdrop ? externalVideoReady : showTreatment) && !externalVideoFailed && treatmentLayers.map((layer) => /* @__PURE__ */ jsx(
       "div",
       {
         "data-media-treatment": resolvedTreatment,

package/dist/chunk-C6WVCZRW.js

@@ -0,0 +1,19 @@
+// src/visual-system/scene-templates/external-video-backdrop.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var sharedContext = globalThis;
+var ExternalVideoBackdropContext = sharedContext.__vanillaskyExternalVideoBackdropContext ??= React.createContext(false);
+function ExternalVideoBackdropProvider({
+  mode,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ExternalVideoBackdropContext.Provider, { value: mode, children });
+}
+function useExternalVideoBackdrop() {
+  return React.useContext(ExternalVideoBackdropContext);
+}
+
+export {
+  ExternalVideoBackdropProvider,
+  useExternalVideoBackdrop
+};

package/dist/chunk-HT6BGERF.js

@@ -0,0 +1,167 @@
+import {
+  getBackgroundTransform
+} from "./chunk-W3VDIBGR.js";
+
+// src/visual-system/scene-templates/scene-video-backdrop.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/visual-system/scene-templates/media-position.ts
+var MEDIA_POSITIONS = {
+  center: "center center",
+  top: "center top",
+  bottom: "center bottom",
+  left: "left center",
+  right: "right center"
+};
+function resolveMediaPosition(value) {
+  return MEDIA_POSITIONS[value] ?? MEDIA_POSITIONS.center;
+}
+
+// src/visual-system/scene-templates/scene-video-backdrop.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SceneVideoBackdrop = ({
+  mediaUrl,
+  mediaPoster,
+  mediaPosition = "center",
+  backgroundEffect,
+  progress,
+  beatIntensity = 0,
+  isPlaying,
+  playbackId = mediaUrl,
+  retainPoster = false,
+  persistent = false,
+  preparedPoster,
+  onReady,
+  onError
+}) => {
+  const resolvedPosition = resolveMediaPosition(mediaPosition);
+  const bgTransform = getBackgroundTransform(backgroundEffect, progress, beatIntensity);
+  const [decodedVideoUrl, setDecodedVideoUrl] = useState();
+  const videoRef = useRef(null);
+  const startedVideoUrl = useRef(void 0);
+  const startedPlaybackId = useRef(void 0);
+  const videoPresentationKey = `${playbackId}\0${mediaUrl}`;
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (!isPlaying) {
+      video.pause();
+      startedVideoUrl.current = void 0;
+      startedPlaybackId.current = void 0;
+      return;
+    }
+    if (startedPlaybackId.current === playbackId) return;
+    const changingSource = startedVideoUrl.current !== void 0 && startedVideoUrl.current !== mediaUrl;
+    video.playbackRate = 1;
+    if (!changingSource && video.currentTime > 0) video.currentTime = 0;
+    video.play().catch(() => {
+    });
+    startedVideoUrl.current = mediaUrl;
+    startedPlaybackId.current = playbackId;
+  }, [isPlaying, mediaUrl, playbackId]);
+  useEffect(() => {
+    const video = videoRef.current;
+    return () => {
+      if (!video) return;
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    };
+  }, []);
+  const mediaStyle = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    objectPosition: resolvedPosition,
+    transform: bgTransform.transform,
+    transformOrigin: bgTransform.transformOrigin,
+    zIndex: persistent ? 1 : void 0
+  };
+  const preparedPosition = preparedPoster ? resolveMediaPosition(preparedPoster.mediaPosition) : resolvedPosition;
+  const preparedTransform = getBackgroundTransform(preparedPoster?.backgroundEffect, 0, 0);
+  const posterPlanes = [
+    ...persistent && mediaPoster ? [{
+      presentationKey: videoPresentationKey,
+      mediaPoster,
+      mediaPosition: resolvedPosition,
+      transform: bgTransform.transform,
+      transformOrigin: bgTransform.transformOrigin,
+      opacity: 1,
+      zIndex: 0,
+      role: "current"
+    }] : [],
+    ...preparedPoster && preparedPoster.presentationKey !== videoPresentationKey ? [{
+      presentationKey: preparedPoster.presentationKey,
+      mediaPoster: preparedPoster.mediaPoster,
+      mediaPosition: preparedPosition,
+      transform: preparedTransform.transform,
+      transformOrigin: preparedTransform.transformOrigin,
+      opacity: preparedPoster.opacity ?? 0,
+      zIndex: 2,
+      role: "prepared"
+    }] : []
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    posterPlanes.map((posterPlane) => /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: posterPlane.mediaPoster,
+        alt: "",
+        "aria-hidden": "true",
+        draggable: false,
+        "data-video-poster-plane": posterPlane.role,
+        "data-video-poster-visible": posterPlane.opacity > 0 ? "true" : "false",
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          objectPosition: posterPlane.mediaPosition,
+          transform: posterPlane.transform,
+          transformOrigin: posterPlane.transformOrigin,
+          zIndex: posterPlane.zIndex,
+          opacity: posterPlane.opacity,
+          pointerEvents: "none"
+        }
+      },
+      posterPlane.presentationKey
+    )),
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: videoRef,
+        src: mediaUrl,
+        poster: retainPoster || decodedVideoUrl !== mediaUrl ? mediaPoster || void 0 : void 0,
+        muted: true,
+        loop: true,
+        playsInline: true,
+        preload: "auto",
+        onLoadedData: (event) => {
+          const video = event.currentTarget;
+          const markPresented = () => {
+            if (!video.isConnected) return;
+            onReady?.();
+            if (!retainPoster) setDecodedVideoUrl(mediaUrl);
+          };
+          if (video.requestVideoFrameCallback) {
+            video.requestVideoFrameCallback(markPresented);
+            return;
+          }
+          markPresented();
+        },
+        onError,
+        "data-media-position": mediaPosition,
+        "data-video-backdrop": persistent ? "persistent" : "scene",
+        style: mediaStyle
+      }
+    )
+  ] });
+};
+
+export {
+  resolveMediaPosition,
+  SceneVideoBackdrop
+};