@revenuecat/purchases-ui-js 2.0.4 → 2.0.6

package/dist/components/tabs/Tabs.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Tabs from "./Tabs.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 Tabs: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tabs = InstanceType<typeof Tabs>;
+export default Tabs;

package/dist/components/tabs/Tabs.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { TabsProps } from "../../types/components/tabs";
+  import { mapBackground } from "../../utils/background-utils";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapShadow,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import { derived, readable, writable } from "svelte/store";
+  import Stack from "../stack/Stack.svelte";
+  import { setTabsContext, type SelectTab } from "./tabs-context";
+
+  const props: TabsProps = $props();
+  const { control, tabs, default_tab_id } = props;
+
+  const selectedState = getSelectedStateContext();
+  const { size, padding, margin, background, shape, border, shadow } =
+    $derived.by(() => {
+      return {
+        ...props,
+        ...getActiveStateProps($selectedState, props.overrides),
+      };
+    });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const styles = $derived(
+    css({
+      width: mapSize(size.width),
+      height: mapSize(size.height),
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      ...mapBackground(colorMode, null, background),
+      border: mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
+    }),
+  );
+
+  const selectedTabIndex = writable(
+    Math.max(
+      0,
+      tabs.findIndex((tab) => tab.id === default_tab_id),
+    ),
+  );
+
+  const tab = derived(selectedTabIndex, (value) => tabs[value]);
+
+  const selectTab: SelectTab = (tabId, tabIndex) => {
+    const foundIndex = tabs.findIndex((tab) => tab.id === tabId);
+    const nextIndex = foundIndex !== -1 ? foundIndex : tabIndex;
+    if (nextIndex >= 0 && nextIndex < tabs.length) {
+      selectedTabIndex.set(tabIndex);
+    }
+  };
+
+  setTabsContext({
+    control: readable(control),
+    selectedTabId: derived(tab, (tab) => tab.id),
+    selectTab,
+    isActive: derived(selectedTabIndex, (value) => value === 1),
+  });
+</script>
+
+<div style={styles}>
+  {#if $tab !== undefined}
+    <Stack {...$tab.stack} />
+  {/if}
+</div>

package/dist/components/tabs/Tabs.svelte.d.ts

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

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

@@ -0,0 +1,12 @@
+import type { TabControl, TabProps } from "../../types/components/tabs";
+import type { Readable } from "svelte/store";
+export type SelectTab = (tabId: string, tabIndex: number) => void;
+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;
+export {};

package/dist/components/tabs/tabs-context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+const key = Symbol("selected");
+export function setTabsContext(context) {
+    setContext(key, context);
+}
+export function getTabsContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("Tabs context not found");
+    }
+    return context;
+}

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/stores/selected.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from "svelte/store";
 type SelectedContext = Readable<boolean>;
-export declare function setSelectedStateContext(packageId: string): void;
+export declare function setSelectedStateContext(context: SelectedContext): void;
 export declare function getSelectedStateContext(): SelectedContext;
 export {};