@streamlayer/feature-advertisement 0.3.2 → 0.4.0

package/lib/advertisement.d.ts

@@ -1,15 +1,19 @@
 import { AbstractFeatureUnit, StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
 import { externalAd, type ExternalAdOptions } from './units/external-ad';
 import { externalPauseAd, type ExternalPauseAdOptions } from './units/external-pause-ad';
+import { type PauseAdListOptions, type PauseAdStore } from './units/pause-ad';
 export type ExternalAdStore = ReturnType<ReturnType<typeof externalAd>>;
 export type ExternalPauseAdStore = ReturnType<ReturnType<typeof externalPauseAd>>;
 export declare class Advertisement extends AbstractFeatureUnit {
     getExternalAd: (adUrl: string, options: ExternalAdOptions) => [ExternalAdStore, string];
     getExternalPauseAd: (adUrl: string, options: ExternalPauseAdOptions) => [ExternalPauseAdStore, string];
+    getPauseAdList: (options: PauseAdListOptions) => PauseAdStore;
     private externalAdStores;
     private externalAdEnabled;
     private externalPauseAdStores;
     private externalPauseAdEnabled;
+    private pauseAdStore;
+    private pauseAdEnabled;
     private log;
     constructor(instance: StreamLayerContext);
     connect: () => void;

package/lib/advertisement.js

@@ -2,19 +2,42 @@ import { AbstractFeatureUnit, createSingleStore } from '@streamlayer/sdk-web-int
 import { createLogger } from '@streamlayer/sdk-web-logger';
 import { externalAd } from './units/external-ad';
 import { externalPauseAd } from './units/external-pause-ad';
+import { pauseAdListStore } from './units/pause-ad';
 export class Advertisement extends AbstractFeatureUnit {
     getExternalAd;
     getExternalPauseAd;
+    getPauseAdList;
     externalAdStores = new Map();
     externalAdEnabled = new Map();
     externalPauseAdStores = new Map();
     externalPauseAdEnabled = new Map();
+    pauseAdStore = null;
+    pauseAdEnabled = null;
     log;
     constructor(instance) {
         super();
         this.log = createLogger('advertisement');
         const externalAdGenerator = externalAd(instance);
         const externalPauseAdGenerator = externalPauseAd(instance);
+        const pauseAdGenerator = pauseAdListStore(instance);
+        this.getPauseAdList = (options) => {
+            if (this.pauseAdStore) {
+                const $enabled = this.pauseAdEnabled;
+                const wasDisabled = $enabled.get() === false;
+                $enabled.set(options.$enabled);
+                if (wasDisabled && options.$enabled) {
+                    window.requestAnimationFrame(() => {
+                        if (this.pauseAdStore)
+                            this.pauseAdStore.$list.revalidate();
+                    });
+                }
+                return this.pauseAdStore;
+            }
+            const $enabled = createSingleStore(options.$enabled);
+            this.pauseAdEnabled = $enabled;
+            this.pauseAdStore = pauseAdGenerator($enabled, options);
+            return this.pauseAdStore;
+        };
         this.getExternalAd = (adUrl, options) => {
             if (this.externalAdStores.has(adUrl)) {
                 const $enabled = this.externalAdEnabled.get(adUrl);
@@ -75,5 +98,12 @@ export class Advertisement extends AbstractFeatureUnit {
         });
         this.externalPauseAdEnabled.clear();
         this.externalPauseAdStores.clear();
+        if (this.pauseAdStore) {
+            this.pauseAdStore.$list.off();
+            this.pauseAdStore.$index.off();
+            this.pauseAdEnabled?.off();
+            this.pauseAdStore = null;
+            this.pauseAdEnabled = null;
+        }
     };
 }

package/lib/index.d.ts

@@ -7,4 +7,5 @@ declare module '@streamlayer/sdk-web-interfaces' {
 export { type ExternalAdStore, type ExternalPauseAdStore } from './advertisement';
 export { type GAMStaticAdCore } from './units/external-ad';
 export { type GAMStaticCore } from './units/external-pause-ad';
+export { type PauseAdCard, type PauseAdStore } from './units/pause-ad';
 export declare const advertisement: (instance: StreamLayerContext, _opts: unknown, done: () => void) => void;

package/lib/units/external-pause-ad.d.ts

@@ -6,6 +6,9 @@ export type GAMStaticCore = {
     url: string;
     imageSrc?: string;
     adUrl?: string;
+    ad?: any;
+    creative?: any;
+    variation?: any;
 };
 export type ExternalPauseAdOptions = {
     refetchInterval: number;

package/lib/units/external-pause-ad.js

@@ -36,10 +36,9 @@ export const externalPauseAd = (instance) => {
                         log.debug(nonlinear, 'nonlinear');
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-ignore
-                        const staticResource = nonlinear.variations?.[0]?.staticResource;
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-                        const adUrlTemplate = nonlinear.variations?.[0]?.nonlinearClickThroughURLTemplate;
+                        const variation = nonlinear.variations?.[0];
+                        const staticResource = variation?.staticResource;
+                        const adUrlTemplate = variation?.nonlinearClickThroughURLTemplate;
                         if (staticResource) {
                             await preloadImage(staticResource);
                             eventBus.emit('exposedPauseAd', {
@@ -55,6 +54,9 @@ export const externalPauseAd = (instance) => {
                                 url: adUrl,
                                 imageSrc: staticResource,
                                 adUrl: adUrlTemplate,
+                                ad: validAd,
+                                creative: nonlinear,
+                                variation,
                             };
                         }
                     }
@@ -62,11 +64,12 @@ export const externalPauseAd = (instance) => {
                     log.debug(companion, 'companion');
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
-                    const staticResource = companion?.variations?.[0]?.staticResources?.[0]?.url;
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    const adUrlTemplate = companion?.variations?.[0]?.companionClickThroughURLTemplate;
-                    if (staticResource) {
+                    const variation = companion?.variations?.[0];
+                    const staticResource = variation?.staticResources?.[0]?.url;
+                    const adUrlTemplate = variation?.companionClickThroughURLTemplate;
+                    // `&& companion` is for TS narrowing only (companion.adId access below);
+                    // it is runtime-redundant since staticResource derives from companion.
+                    if (staticResource && companion) {
                         const id = companion.adId || companion.id || parentId;
                         await preloadImage(staticResource);
                         eventBus.emit('exposedPauseAd', {
@@ -82,6 +85,9 @@ export const externalPauseAd = (instance) => {
                             url: adUrl,
                             imageSrc: staticResource,
                             adUrl: adUrlTemplate,
+                            ad: validAd,
+                            creative: companion,
+                            variation,
                         };
                     }
                 }

package/lib/units/pause-ad.d.ts

@@ -0,0 +1,30 @@
+import { createSingleStore, StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
+import '@streamlayer/sdk-web-api';
+import '@streamlayer/sdk-web-core/store';
+export type PauseAdLayout = 'left' | 'center' | 'image';
+export type PauseAdCard = {
+    id: string;
+    parentId: string;
+    backgroundImageSrc: string;
+    layout: PauseAdLayout;
+    isInteractive: boolean;
+    logoSrc?: string;
+    title?: string;
+    description?: string;
+    ctaLabel?: string;
+    ctaUrl?: string;
+    qrCodeUrl?: string;
+    qrCodeLabel?: string;
+};
+export type PauseAdListOptions = {
+    refetchInterval: number;
+    $enabled: boolean;
+};
+export declare const pauseAdListStore: (instance: StreamLayerContext) => ($enabled: ReturnType<typeof createSingleStore<boolean>>, options: PauseAdListOptions) => {
+    $list: import("@nanostores/query").FetcherStore<PauseAdCard[], any>;
+    $index: import("nanostores").PreinitializedWritableAtom<number> & object;
+    next: () => void;
+    reset: () => void;
+    getCurrent: () => PauseAdCard | undefined;
+};
+export type PauseAdStore = ReturnType<ReturnType<typeof pauseAdListStore>>;

package/lib/units/pause-ad.js

@@ -0,0 +1,94 @@
+import { createLogger } from '@streamlayer/sdk-web-logger';
+import { atom } from 'nanostores';
+import '@streamlayer/sdk-web-api';
+import '@streamlayer/sdk-web-core/store';
+import { CardFormat, NotificationSponsorLogoMode, PauseAdLayout as PauseAdLayoutProto, PromotionButtonType, PromotionFormat, QRCode, UseGeneralLogo, UserAccountInfo, } from '@streamlayer/sl-eslib/interactive/interactive.common_pb';
+import { Feed } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
+const log = createLogger('advertisement:pause-ad');
+const parsePauseAdCard = (question) => {
+    const backgroundImageSrc = question.backgroundImage?.landscapeUrl;
+    if (!backgroundImageSrc) {
+        return null;
+    }
+    const promotionOptions = question.options?.options.case === 'promotion' ? question.options.options.value : undefined;
+    const pauseAdOptions = promotionOptions?.pauseAdOptions;
+    const optionsSponsor = promotionOptions?.sponsor;
+    const layoutProto = pauseAdOptions?.layout ?? PauseAdLayoutProto.UNSET;
+    const layout = layoutProto === PauseAdLayoutProto.CENTER ? 'center' : layoutProto === PauseAdLayoutProto.IMAGE ? 'image' : 'left';
+    const isInteractive = promotionOptions?.buttonType === PromotionButtonType.SEND_TO_USER;
+    const hasQr = pauseAdOptions?.qrCode === QRCode.QR_CODE_ENABLED && !!pauseAdOptions?.qrCodeUrl;
+    let ctaLabel;
+    let ctaUrl;
+    if (isInteractive && promotionOptions?.buttonOptions.case === 'sendToUserOptions') {
+        const accountInfo = promotionOptions.buttonOptions.value.userAccountInfo;
+        const isPhone = accountInfo === UserAccountInfo.PHONE;
+        ctaUrl = isPhone ? 'sendToPhone:' : 'sendToEmail:';
+        ctaLabel = isPhone ? 'Send info to account phone' : 'Send info to account email';
+    }
+    const logoSrc = optionsSponsor?.logoPosition === NotificationSponsorLogoMode.NOTIFICATION_SPONSOR_LOGO_NONE
+        ? undefined
+        : optionsSponsor?.useGeneralLogo === UseGeneralLogo.ENABLED
+            ? question.promotion?.generalTabMetadata?.advertiserTransparentLogo || undefined
+            : optionsSponsor?.centerLogo || undefined;
+    return {
+        id: question.id,
+        parentId: question.eventId || question.id,
+        backgroundImageSrc,
+        layout,
+        logoSrc,
+        title: promotionOptions?.banner?.title || undefined,
+        description: promotionOptions?.banner?.body || undefined,
+        isInteractive,
+        ctaLabel: ctaLabel || undefined,
+        ctaUrl: ctaUrl || undefined,
+        qrCodeUrl: hasQr ? (pauseAdOptions?.qrCodeUrl ?? undefined) : undefined,
+        qrCodeLabel: hasQr ? (pauseAdOptions?.qrCodeLabel ?? undefined) : undefined,
+    };
+};
+export const pauseAdListStore = (instance) => {
+    const $slStreamId = instance.stores.slStreamId.getAtomStore();
+    return ($enabled, options) => {
+        const { client, queryKey } = instance.transport.createPromiseClient(Feed, {
+            method: 'pauseAdList',
+            params: [$slStreamId, $enabled],
+        });
+        const $list = instance.transport.nanoquery.createFetcherStore(queryKey, {
+            dedupeTime: 0,
+            revalidateInterval: options.refetchInterval > 0 ? options.refetchInterval : 0,
+            fetcher: async (_, __, eventId, isEnabled) => {
+                if (!eventId || typeof eventId !== 'string' || !isEnabled) {
+                    return [];
+                }
+                log.debug({ eventId }, 'fetching pause ad list');
+                const res = await client.pauseAdList({ eventId });
+                const questions = res.data ?? [];
+                const cards = questions
+                    .filter((q) => {
+                    const opts = q.options?.options.case === 'promotion' ? q.options.options.value : undefined;
+                    return opts?.format === PromotionFormat.FULL_BLEED || q.format === CardFormat.FULL_BLEED;
+                })
+                    .map((q) => parsePauseAdCard(q))
+                    .filter((c) => c !== null);
+                log.debug({ count: cards.length }, 'parsed %d fullbleed pause ad cards');
+                return cards;
+            },
+        });
+        const $index = atom(0);
+        const next = () => {
+            const list = $list.get().data;
+            if (!list?.length)
+                return;
+            $index.set(($index.get() + 1) % list.length);
+        };
+        const reset = () => {
+            $index.set(0);
+        };
+        const getCurrent = () => {
+            const list = $list.get().data;
+            if (!list?.length)
+                return undefined;
+            return list[$index.get()];
+        };
+        return { $list, $index, next, reset, getCurrent };
+    };
+};

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@streamlayer/feature-advertisement",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "peerDependencies": {
     "@dailymotion/vast-client": "^6.4.2",
     "@streamlayer/sl-eslib": "^5.229.1",
     "nanostores": "^1.1.0",
-    "@streamlayer/sdk-web-core": "^1.22.2",
-    "@streamlayer/sdk-web-api": "^1.17.2",
-    "@streamlayer/sdk-web-interfaces": "^1.10.2",
-    "@streamlayer/sdk-web-types": "^1.18.2",
-    "@streamlayer/sdk-web-logger": "^1.1.2"
+    "@streamlayer/sdk-web-core": "^1.22.3",
+    "@streamlayer/sdk-web-api": "^1.17.3",
+    "@streamlayer/sdk-web-interfaces": "^1.10.3",
+    "@streamlayer/sdk-web-types": "^1.18.3",
+    "@streamlayer/sdk-web-logger": "^1.1.3"
   },
   "devDependencies": {
     "@types/vast-client": "^3.0.4"