@namiml/web-sdk 1.4.0 → 1.5.0

package/dist/services/video.service.d.ts

@@ -0,0 +1,17 @@
+import { NamiPaywallAction } from "src/types/externals/paywall";
+export declare class VideoService {
+    video: HTMLVideoElement;
+    playing: boolean;
+    muted: boolean;
+    muteByDefault: boolean;
+    loopVideo: boolean;
+    autoplayVideo: boolean;
+    videoComponentName: string;
+    videoComponentId: string;
+    static instance: VideoService;
+    constructor(video: HTMLVideoElement, muteByDefault: boolean, loopVideo: boolean, autoplayVideo: boolean, name?: string, id?: string);
+    togglePlayVideo(): void;
+    toggleMuteVideo(): void;
+    videoPlayingAction(): NamiPaywallAction.VIDEO_STARTED | NamiPaywallAction.VIDEO_PAUSED | NamiPaywallAction.VIDEO_RESUMED | NamiPaywallAction.VIDEO_ENDED | NamiPaywallAction.UNKNOWN;
+    handlePlayerAnalytics(action?: NamiPaywallAction): void;
+}

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

@@ -2,13 +2,29 @@ import { NamiSKU } from "../../types/externals/sku";
 import { TBaseComponent, TComponent, TContainer, TTestObject } from ".";
 import { TImageComponent, TSpacerComponent, TTextComponent, TTextListComponent } from "./elements";
 export type THeaderFooter = (TContainer | TButtonContainer | TSpacerComponent | TTextComponent)[];
-export type TButtonContainer = TBaseComponent & {
+type Button = TBaseComponent & {
     id?: string;
-    component: "button";
     sku?: NamiSKU;
     components: Array<TTextComponent | TTextListComponent | TSpacerComponent | TImageComponent>;
     screenreaderText?: string;
 };
+export type TButtonContainer = Button & {
+    component: "button";
+};
+export type TPlayPauseButton = Button & {
+    component: "playPauseButton";
+    pausedOnTap: UserAction;
+    playingOnTap: UserAction;
+    pausedComponents: TComponent[];
+    playingComponents: TComponent[];
+};
+export type TVolumeButton = Button & {
+    component: "volumeButton";
+    mutedComponents: TComponent[];
+    volumeComponents: TComponent[];
+    mutedOnTap: UserAction;
+    volumeOnTap: UserAction;
+};
 export type UserAction = {
     function: string;
     parameters?: UserActionParameters;
@@ -31,6 +47,10 @@ export type TCarouselContainer = Omit<TContainer, "component"> & {
     activeIndicatorColor: string;
     autoplay: boolean;
     autoplaySeconds: number;
+    loopSource?: any[];
+    loopVariable?: string;
+    loopSourceConditions: TTestObject[];
+    showIndicators?: boolean;
 };
 export type TCarouselSlidesState = {
     [groupId: string]: {
@@ -77,4 +97,6 @@ export type TResponsiveGrid = TBaseComponent & {
     components: any;
     loopVariable?: string;
     loopSource?: any[];
+    loopSourceConditions: TTestObject[];
 };
+export {};

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

@@ -1,4 +1,4 @@
-import { TButtonContainer, TCarouselContainer, TCarouselSlide, TCollapseContainer, TFlexProductContainer, TProductContainer, TResponsiveGrid, TStack, UserAction } from "./containers";
+import { TButtonContainer, TCarouselContainer, TCarouselSlide, TCollapseContainer, TFlexProductContainer, TPlayPauseButton, TProductContainer, TResponsiveGrid, TStack, TVolumeButton, UserAction } from "./containers";
 import { TConditionalComponent, TImageComponent, TSegmentPicker, TSegmentPickerItem, TSpacerComponent, TSvgImageComponent, TSymbolComponent, TTextComponent, TTextListComponent, TVideoComponent } from "./elements";
 export interface TBaseComponent {
     id?: string;
@@ -15,6 +15,8 @@ export interface TBaseComponent {
     direction?: DirectionType;
     spacing?: number;
     alignment?: AlignmentType;
+    horizontalAlignment?: AlignmentType;
+    verticalAlignment?: AlignmentType;
     leftPadding?: number;
     rightPadding?: number;
     topPadding?: number;
@@ -64,7 +66,7 @@ export interface TBaseComponent {
     fixedWidth?: number | "fitContent";
     hidden?: boolean;
 }
-export type TComponent = TButtonContainer | TContainer | TTextListComponent | TTextComponent | TSpacerComponent | TImageComponent | TSvgImageComponent | TSymbolComponent | TCarouselContainer | TProductContainer | TFlexProductContainer | TStack | TConditionalComponent | TSegmentPicker | TSegmentPickerItem | TVideoComponent | TCollapseContainer | TResponsiveGrid;
+export type TComponent = TButtonContainer | TContainer | TTextListComponent | TTextComponent | TSpacerComponent | TImageComponent | TSvgImageComponent | TSymbolComponent | TCarouselContainer | TProductContainer | TFlexProductContainer | TStack | TConditionalComponent | TSegmentPicker | TSegmentPickerItem | TVideoComponent | TCollapseContainer | TResponsiveGrid | TVolumeButton | TPlayPauseButton;
 export type DirectionType = "vertical" | "horizontal";
 export type AlignmentType = "center" | "right" | "left" | "top" | "bottom";
 export type BorderLocationType = "upperLeft" | "upperRight" | "lowerLeft" | "lowerRight";

package/dist/types/externals/paywall.d.ts

@@ -67,6 +67,7 @@ export type NamiPaywallEvent = {
      * From rendering paywall to clicking on close button of paywall
      */
     timeSpentOnPaywall?: number;
+    videoMetaData?: NamiPaywallEventVideoMetadata;
 };
 export type NamiPaywallActionHandler = (event: NamiPaywallEvent) => void;
 /**

package/dist/types/paywall.d.ts

@@ -7,7 +7,7 @@ import { PaywallSKU } from "./sku";
 import { NamiPurchase } from "./externals/purchase";
 import { Optional } from "./utils";
 import { LaunchCampaignError } from "./externals/errors";
-import { NamiPaywallAction, NamiPaywallComponentChange, NamiPaywallLaunchContext } from "./externals/paywall";
+import { NamiPaywallAction, NamiPaywallComponentChange, NamiPaywallEventVideoMetadata, NamiPaywallLaunchContext } from "./externals/paywall";
 import { NamiSKU } from "./externals/sku";
 export type TPaywallContext = TInitialState & {
     paywallId: string;
@@ -173,6 +173,7 @@ export declare enum PaywallManagerEvents {
 export type PaywallActionEvent = {
     action: NamiPaywallAction;
     sku?: NamiSKU;
+    videoMetaData: NamiPaywallEventVideoMetadata;
     timeSpentOnPaywall?: number;
     componentChange?: NamiPaywallComponentChange;
     purchaseError?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@namiml/web-sdk",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "source": "src/nami-web.ts",
   "description": "Nami Web SDK makes subscriptions & in-app purchases easy, with powerful built-in paywalls and A/B testing",
   "scripts": {
@@ -85,7 +85,8 @@
     "hls.js": "^1.5.15",
     "lit": "^3.1.3",
     "lodash-es": "^4.17.21",
-    "marked": "^12.0.2"
+    "marked": "^12.0.2",
+    "swiper": "^11.1.12"
   },
   "homepage": "https://www.namiml.com",
   "bugs": {