@revenuecat/purchases-ui-js 3.11.0 → 3.11.1

package/dist/components/video/Video.stories.svelte

@@ -107,6 +107,16 @@
   }}
 />
 
+<Story
+  name="Autoplay Unmuted"
+  args={{
+    show_controls: false,
+    auto_play: true,
+    mute_audio: false,
+    loop: true,
+  }}
+/>
+
 <Story
   name="With Fallback Image"
   args={{

package/dist/components/video/Video.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { getColorModeContext } from "../../stores/color-mode";
   import { getSelectedStateContext } from "../../stores/selected";
   import type { VideoProps } from "../../types/components/video";
   import type { VideoFiles, ImageFiles } from "../../types/media";
   import {
     css,
+    mapBorderRadius,
     mapColor,
     mapColorMode,
     mapFitMode,
@@ -59,6 +61,7 @@
   });
   let videoElement = $state<HTMLVideoElement | null>(null);
   let hasVideoError = $state(false);
+  let showControlsFallback = $state(false);
 
   // Load video or fallback image metadata to get dimensions
   $effect(() => {
@@ -157,87 +160,162 @@
 
     const { x, y, radius, color } = shadow;
     const shadowColor = mapColor(colorMode, color);
-    return `filter: drop-shadow(${x}px ${y}px ${radius}px ${shadowColor})`;
+    return `filter:drop-shadow(${x}px ${y}px ${radius}px ${shadowColor})`;
   });
 
+  const wrapperStyle = $derived.by(() => {
+    return svgStyle ? `${style};${svgStyle}` : style;
+  });
+
+  const clipDivStyle = $derived(
+    css({
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      "border-radius": mapBorderRadius(mask_shape),
+      "clip-path":
+        mask_shape?.type === "concave" || mask_shape?.type === "convex"
+          ? `url(#${id}-path)`
+          : "none",
+    }),
+  );
+
   const overlay = $derived(
     color_overlay && mapColorMode(colorMode, color_overlay),
   );
 
   const shouldShowFallback = $derived(hasVideoError || !video);
-</script>
 
-<div {style} bind:clientWidth={wrapperWidth}>
-  <svg
-    bind:contentRect={svgRect}
-    width="100%"
-    height="100%"
-    {viewBox}
-    style={svgStyle}
-  >
-    <defs>
-      <clipPath id={`${id}-path`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </clipPath>
-
-      <g id={`${id}-border`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </g>
+  // Programmatic autoplay (single path; HTML autoplay omitted to avoid iOS quirks).
+  $effect(() => {
+    if (!auto_play) {
+      untrack(() => {
+        showControlsFallback = false;
+      });
+      return;
+    }
 
-      <Overlay id={`${id}-overlay`} {overlay} />
-    </defs>
+    if (shouldShowFallback || !video) {
+      untrack(() => {
+        showControlsFallback = false;
+      });
+      return;
+    }
 
-    {#if border && border.width > 0}
-      <use href={`#${id}-border`} fill="transparent" />
-    {/if}
+    const el = videoElement;
+    if (!el) {
+      return;
+    }
 
-    <g clip-path={`url(#${id}-path)`}>
-      <foreignObject x="0" y="0" width="100%" height="100%">
-        {#if shouldShowFallback && fallbackImage}
-          <img
-            src={fallbackImage.original}
-            style="object-fit:{mapFitMode(fit_mode)}"
-            alt=""
-          />
-        {:else if video}
-          <video
-            bind:this={videoElement}
-            src={video.url}
-            style="object-fit:{mapFitMode(fit_mode)}"
-            autoplay={auto_play}
-            {loop}
-            muted={mute_audio}
-            controls={show_controls}
-            playsinline
-          >
-            <track kind="captions" />
-          </video>
-        {/if}
-      </foreignObject>
-
-      {#if overlay}
-        <rect
-          x="0"
-          y="0"
-          height="100%"
-          width="100%"
-          fill={`url(#${id}-overlay)`}
+    void video.url;
+    void mute_audio;
+
+    untrack(() => {
+      showControlsFallback = false;
+    });
+
+    const playPromise = el.play();
+    if (playPromise !== undefined) {
+      playPromise.catch(() => {
+        untrack(() => {
+          showControlsFallback = true;
+        });
+      });
+    }
+  });
+</script>
+
+<div class="video-outer" style={wrapperStyle} bind:clientWidth={wrapperWidth}>
+  <div class="video-media">
+    <div class="video-clip" style={clipDivStyle}>
+      {#if shouldShowFallback && fallbackImage}
+        <img
+          src={fallbackImage.original}
+          style="object-fit:{mapFitMode(fit_mode)}"
+          alt=""
         />
+      {:else if video}
+        <video
+          bind:this={videoElement}
+          src={video.url}
+          style="object-fit:{mapFitMode(fit_mode)}"
+          {loop}
+          muted={mute_audio}
+          controls={show_controls || showControlsFallback}
+          playsinline
+        >
+          <track kind="captions" />
+        </video>
       {/if}
+    </div>
+
+    <svg
+      class="video-deco"
+      bind:contentRect={svgRect}
+      width="100%"
+      height="100%"
+      {viewBox}
+    >
+      <defs>
+        <clipPath id={`${id}-path`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </clipPath>
+
+        <g id={`${id}-border`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </g>
+
+        <Overlay id={`${id}-overlay`} {overlay} />
+      </defs>
 
       {#if border && border.width > 0}
-        <use
-          href={`#${id}-border`}
-          fill="none"
-          stroke={mapColor(colorMode, border.color)}
-          stroke-width={border.width}
-        />
+        <use href={`#${id}-border`} fill="transparent" />
       {/if}
-    </g>
-  </svg>
+
+      <g clip-path={`url(#${id}-path)`}>
+        {#if overlay}
+          <rect
+            x="0"
+            y="0"
+            height="100%"
+            width="100%"
+            fill={`url(#${id}-overlay)`}
+          />
+        {/if}
+
+        {#if border && border.width > 0}
+          <use
+            href={`#${id}-border`}
+            fill="none"
+            stroke={mapColor(colorMode, border.color)}
+            stroke-width={border.width}
+          />
+        {/if}
+      </g>
+    </svg>
+  </div>
 </div>
 
 <style>
+  .video-outer {
+    position: relative;
+  }
+
+  .video-media {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .video-deco {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
   video,
   img {
     width: 100%;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "3.11.0",
+  "version": "3.11.1",
   "author": {
     "name": "RevenueCat, Inc."
   },