@revenuecat/purchases-ui-js 2.0.5 → 2.0.6

package/dist/components/tabs/tabs-context.d.ts

@@ -5,6 +5,7 @@ interface TabsContext {
     control: Readable<TabControl>;
     selectedTabId: Readable<TabProps["id"]>;
     selectTab: SelectTab;
+    isActive: Readable<boolean>;
 }
 export declare function setTabsContext(context: TabsContext): void;
 export declare function getTabsContext(): TabsContext;

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

@@ -0,0 +1,267 @@
+<script module lang="ts">
+  import Video from "./Video.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const { Story } = defineMeta({
+    title: "Components/Video",
+    component: Video,
+    decorators: [componentDecorator()],
+    parameters: {
+      chromatic: { disableSnapshot: true },
+    },
+    args: {
+      type: "video",
+      id: "video",
+      name: "Video",
+      fit_mode: "fill",
+      auto_play: true,
+      loop: true,
+      mute_audio: true,
+      show_controls: true,
+      size: {
+        width: { type: "fill" },
+        height: { type: "fill" },
+      },
+      source: {
+        dark: null,
+        light: {
+          width: 1920,
+          height: 1080,
+          url: "https://videos.pexels.com/video-files/10288594/10288594-hd_1920_1080_25fps.mp4",
+          url_low_res:
+            "https://videos.pexels.com/video-files/10288594/10288594-hd_1920_1080_25fps.mp4",
+        },
+      },
+    },
+  });
+</script>
+
+<Story
+  name="Rectangle"
+  args={{
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 0,
+        bottom_leading: 0,
+        bottom_trailing: 0,
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Rounded Rectangle"
+  args={{
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 32,
+        top_trailing: 32,
+        bottom_leading: 32,
+        bottom_trailing: 32,
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Circle"
+  args={{
+    mask_shape: { type: "circle" },
+  }}
+/>
+
+<Story
+  name="Concave"
+  args={{
+    mask_shape: { type: "concave" },
+  }}
+/>
+
+<Story
+  name="Convex"
+  args={{
+    mask_shape: { type: "convex" },
+  }}
+/>
+
+<Story
+  name="With Controls"
+  args={{
+    show_controls: true,
+    auto_play: false,
+    mute_audio: false,
+  }}
+/>
+
+<Story
+  name="Autoplay Muted"
+  args={{
+    show_controls: false,
+    auto_play: true,
+    mute_audio: true,
+    loop: true,
+  }}
+/>
+
+<Story
+  name="With Fallback Image"
+  args={{
+    source: null,
+    fallback_source: {
+      dark: null,
+      light: {
+        width: 1920,
+        height: 1080,
+        original:
+          "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+        heic: "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+        heic_low_res:
+          "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+        webp: "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+        webp_low_res:
+          "https://placehold.co/1920x1080/blue/white?text=Video+Not+Available",
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Overlay Radial Gradient"
+  args={{
+    color_overlay: {
+      light: {
+        type: "radial",
+        points: [
+          {
+            percent: 0,
+            color: "#020024ff",
+          },
+          {
+            percent: 100,
+            color: "#00d4ff00",
+          },
+        ],
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Overlay Linear Gradient"
+  args={{
+    color_overlay: {
+      light: {
+        degrees: 180,
+        points: [
+          {
+            percent: 0,
+            color: "#020024ff",
+          },
+          {
+            percent: 100,
+            color: "#00d4ff00",
+          },
+        ],
+        type: "linear",
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Overlay Solid"
+  args={{
+    color_overlay: {
+      light: {
+        type: "hex",
+        value: "#e7c00069",
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Complex"
+  args={{
+    size: {
+      width: { type: "fixed", value: 400 },
+      height: { type: "fixed", value: 300 },
+    },
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 16,
+        bottom_trailing: 32,
+        bottom_leading: 64,
+      },
+    },
+    fit_mode: "fill",
+    padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+    margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+    color_overlay: {
+      light: {
+        type: "linear",
+        degrees: 180,
+        points: [
+          { percent: 0, color: "#ff000080" },
+          { percent: 100, color: "#ff00ff00" },
+        ],
+      },
+    },
+    border: {
+      width: 3,
+      color: {
+        light: { type: "hex", value: "#00ff0080" },
+      },
+    },
+    shadow: {
+      x: 0,
+      y: 0,
+      radius: 16,
+      color: {
+        light: { type: "hex", value: "#0000ff80" },
+      },
+    },
+    show_controls: true,
+    auto_play: false,
+    mute_audio: false,
+    loop: false,
+  }}
+/>
+
+<Story
+  name="Fixed Size"
+  args={{
+    size: {
+      width: { type: "fixed", value: 320 },
+      height: { type: "fixed", value: 240 },
+    },
+  }}
+/>
+
+<Story
+  name="Fit Mode - Contain"
+  args={{
+    fit_mode: "fit",
+    size: {
+      width: { type: "fixed", value: 400 },
+      height: { type: "fixed", value: 300 },
+    },
+  }}
+/>
+
+<Story
+  name="Fit Mode - Cover"
+  args={{
+    fit_mode: "fill",
+    size: {
+      width: { type: "fixed", value: 400 },
+      height: { type: "fixed", value: 300 },
+    },
+  }}
+/>

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

@@ -0,0 +1,19 @@
+import Video from "./Video.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Video: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Video = InstanceType<typeof Video>;
+export default Video;

package/dist/components/video/Video.svelte

@@ -0,0 +1,248 @@
+<script lang="ts">
+  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,
+    mapColor,
+    mapColorMode,
+    mapFitMode,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import ClipPath from "../image/ClipPath.svelte";
+  import Overlay from "../image/Overlay.svelte";
+
+  const props: VideoProps = $props();
+
+  const selectedState = getSelectedStateContext();
+  const {
+    id,
+    source,
+    fallback_source,
+    size,
+    mask_shape,
+    fit_mode,
+    padding,
+    margin,
+    color_overlay,
+    border,
+    shadow,
+    auto_play,
+    loop,
+    mute_audio,
+    show_controls,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+  const video: VideoFiles | null = $derived(
+    source ? (mapColorMode(colorMode, source as any) as VideoFiles) : null,
+  );
+  const fallbackImage: ImageFiles | null = $derived(
+    fallback_source
+      ? (mapColorMode(colorMode, fallback_source as any) as ImageFiles)
+      : null,
+  );
+
+  let wrapperWidth = $state(0);
+  let videoSize = $state({
+    height: 0,
+    width: 0,
+  });
+  let videoElement = $state<HTMLVideoElement | null>(null);
+  let hasVideoError = $state(false);
+
+  // Load video or fallback image metadata to get dimensions
+  $effect(() => {
+    // If we have a video, load its dimensions
+    if (video) {
+      if (video.width && video.height) {
+        videoSize = {
+          height: video.height,
+          width: video.width,
+        };
+        return;
+      }
+
+      // If dimensions aren't provided, try to load them from the video element
+      if (videoElement) {
+        const onLoadedMetadata = () => {
+          videoSize = {
+            height: videoElement?.videoHeight ?? 0,
+            width: videoElement?.videoWidth ?? 0,
+          };
+        };
+
+        const onError = () => {
+          hasVideoError = true;
+        };
+
+        videoElement.addEventListener("loadedmetadata", onLoadedMetadata);
+        videoElement.addEventListener("error", onError);
+
+        return () => {
+          videoElement?.removeEventListener("loadedmetadata", onLoadedMetadata);
+          videoElement?.removeEventListener("error", onError);
+        };
+      }
+    }
+    // If we don't have a video but have a fallback image, use its dimensions
+    else if (fallbackImage) {
+      if (fallbackImage.width && fallbackImage.height) {
+        videoSize = {
+          height: fallbackImage.height,
+          width: fallbackImage.width,
+        };
+        return;
+      }
+
+      // If dimensions aren't provided, load them from the image
+      const img = new window.Image();
+      img.src = fallbackImage.original;
+
+      const onImageLoad = () => {
+        videoSize = {
+          height: img.height,
+          width: img.width,
+        };
+      };
+
+      img.addEventListener("load", onImageLoad);
+      return () => {
+        img.removeEventListener("load", onImageLoad);
+      };
+    }
+  });
+
+  const height = $derived.by(() => {
+    if (size.height.type === "fixed") {
+      return size.height.value;
+    }
+    return Math.round(wrapperWidth * (videoSize.height / videoSize.width));
+  });
+
+  const style = $derived(
+    css({
+      width: mapSize(size.width),
+      height: `${height}px`,
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      "line-height": 0,
+      "flex-shrink": size.width.type === "fixed" ? 0 : 1,
+    }),
+  );
+
+  let svgRect = $state<DOMRect | null>(null);
+
+  const [svgWidth, svgHeight] = $derived.by(() => {
+    return [svgRect?.width ?? 0, svgRect?.height ?? 0];
+  });
+
+  const viewBox = $derived.by(() => {
+    return `0 0 ${svgWidth} ${svgHeight}`;
+  });
+
+  const svgStyle = $derived.by(() => {
+    if (!shadow?.color) {
+      return "";
+    }
+
+    const { x, y, radius, color } = shadow;
+    const shadowColor = mapColor(colorMode, color);
+    return `filter: drop-shadow(${x}px ${y}px ${radius}px ${shadowColor})`;
+  });
+
+  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>
+
+      <Overlay id={`${id}-overlay`} {overlay} />
+    </defs>
+
+    {#if border && border.width > 0}
+      <use href={`#${id}-border`} fill="transparent" />
+    {/if}
+
+    <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)`}
+        />
+      {/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>
+
+<style>
+  video,
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
+</style>

package/dist/components/video/Video.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { VideoProps } from "../../types/components/video";
+declare const Video: import("svelte").Component<VideoProps, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";
 export { type UIConfig } from "./types/ui-config";

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export {} from "./types/paywall";
 export {} from "./types/ui-config";

package/dist/types/component.d.ts

@@ -6,7 +6,8 @@ import type { ImageProps } from "./components/image";
 import type { PackageProps } from "./components/package";
 import type { PurchaseButtonProps } from "./components/purchase-button";
 import type { StackProps } from "./components/stack";
-import type { TabControlButtonProps, TabControlProps, TabsProps } from "./components/tabs";
+import type { TabControlButtonProps, TabControlProps, TabControlToggleProps, TabsProps } from "./components/tabs";
 import type { TextNodeProps } from "./components/text";
 import type { TimelineProps } from "./components/timeline";
-export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps;
+import type { VideoProps } from "./components/video";
+export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;

package/dist/types/components/tabs.d.ts

@@ -1,6 +1,7 @@
 import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "..";
 import type { Background } from "../background";
 import type { BaseComponent } from "../base";
+import type { ColorGradientScheme } from "../colors";
 import type { Overrides } from "../overrides";
 import type { StackProps } from "./stack";
 type TabControlType = "buttons" | "toggle";
@@ -43,4 +44,13 @@ export interface TabControlButtonProps extends BaseComponent {
      */
     tab_index: number;
 }
+export interface TabControlToggleProps extends BaseComponent {
+    type: "tab_control_toggle";
+    default_value: boolean;
+    thumb_color_on: ColorGradientScheme;
+    thumb_color_off: ColorGradientScheme;
+    track_color_on: ColorGradientScheme;
+    track_color_off: ColorGradientScheme;
+    overrides?: Overrides<TabControlToggleProps>;
+}
 export {};

package/dist/types/components/video.d.ts

@@ -0,0 +1,35 @@
+import type { BorderType, CircleShape, ConcaveShape, ConvexShape, RectangleShape, ShadowType, SizeType, Spacing } from "..";
+import type { BaseComponent } from "../base";
+import type { ColorGradientScheme } from "../colors";
+import type { FitMode, ImageInfo, VideoInfo } from "../media";
+import type { Overrides } from "../overrides";
+export type VideoObjectFit = "fit" | "fill";
+export type VideoMaskShape = {
+    type: "rectangle" | "circle" | "concave" | "convex";
+    corners?: {
+        top_leading?: number;
+        top_trailing?: number;
+        bottom_leading?: number;
+        bottom_trailing?: number;
+    } | null;
+};
+export interface VideoProps extends BaseComponent {
+    type: "video";
+    visible?: boolean | null;
+    source: VideoInfo | null;
+    fallback_source?: ImageInfo | null;
+    override_source_lid?: string | null;
+    size: SizeType;
+    mask_shape?: RectangleShape | CircleShape | ConcaveShape | ConvexShape | null;
+    fit_mode: FitMode;
+    padding?: Spacing | null;
+    margin?: Spacing | null;
+    color_overlay?: ColorGradientScheme | null;
+    border?: BorderType | null;
+    shadow?: ShadowType | null;
+    overrides?: Overrides<VideoProps>;
+    auto_play: boolean;
+    loop: boolean;
+    mute_audio: boolean;
+    show_controls: boolean;
+}

package/dist/types/components/video.js

@@ -0,0 +1 @@
+export {};

package/dist/types/media.d.ts

@@ -1,4 +1,4 @@
-type ImageFiles = {
+export type ImageFiles = {
     width: number;
     height: number;
     original: string;
@@ -11,9 +11,22 @@ export type ImageInfo = {
     light: ImageFiles;
     dark?: ImageFiles | null;
 };
+export type VideoFiles = {
+    width: number;
+    height: number;
+    url: string;
+    url_low_res: string;
+    checksum?: {
+        algo: string;
+        value: string;
+    } | null;
+    checksum_low_res?: {
+        algo: string;
+        value: string;
+    } | null;
+};
 export type VideoInfo = {
-    light: string;
-    dark: string | null;
+    light: VideoFiles;
+    dark?: VideoFiles | null;
 };
 export type FitMode = "fit" | "fill";
-export {};

package/package.json

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