@streamlayer/feature-advertisement 0.1.0

package/README.md

@@ -0,0 +1,7 @@
+# feature-advertisement
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build feature-advertisement` to build the library.

package/lib/advertisement.d.ts

@@ -0,0 +1,12 @@
+import { AbstractFeatureUnit, StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
+import { externalPauseAd, type ExternalPauseAdOptions } from './units/external-pause-ad';
+export type ExternalPauseAdStore = ReturnType<ReturnType<typeof externalPauseAd>>;
+export declare class Advertisement extends AbstractFeatureUnit {
+    getExternalPauseAd: (adUrl: string, options: ExternalPauseAdOptions) => [ExternalPauseAdStore, string];
+    private externalPauseAdStores;
+    private externalPauseAdEnabled;
+    private log;
+    constructor(instance: StreamLayerContext);
+    connect: () => void;
+    disconnect: () => void;
+}

package/lib/advertisement.js

@@ -0,0 +1,49 @@
+import { AbstractFeatureUnit, createSingleStore } from '@streamlayer/sdk-web-interfaces';
+import { createLogger } from '@streamlayer/sdk-web-logger';
+import { externalPauseAd } from './units/external-pause-ad';
+export class Advertisement extends AbstractFeatureUnit {
+    getExternalPauseAd;
+    externalPauseAdStores = new Map();
+    externalPauseAdEnabled = new Map();
+    log;
+    constructor(instance) {
+        super();
+        this.log = createLogger('advertisement');
+        const externalPauseAdGenerator = externalPauseAd(instance);
+        this.getExternalPauseAd = (adUrl, options) => {
+            if (this.externalPauseAdStores.has(adUrl)) {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const $enabled = this.externalPauseAdEnabled.get(adUrl);
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const $store = this.externalPauseAdStores.get(adUrl);
+                const shouldRevalidate = $enabled.get() === false && options.$enabled === true;
+                $enabled.set(options.$enabled);
+                if (shouldRevalidate) {
+                    window.requestAnimationFrame(() => {
+                        $store.revalidate();
+                    });
+                }
+                return [$store, adUrl];
+            }
+            const $enabled = createSingleStore(options.$enabled);
+            const store = externalPauseAdGenerator(adUrl, $enabled, options);
+            this.externalPauseAdEnabled.set(adUrl, $enabled);
+            this.externalPauseAdStores.set(adUrl, store);
+            return [store, adUrl];
+        };
+    }
+    connect = () => {
+        this.log.debug('connect');
+    };
+    disconnect = () => {
+        this.log.debug('disconnect');
+        this.externalPauseAdStores.forEach((store) => {
+            store.off();
+        });
+        this.externalPauseAdEnabled.forEach((enabled) => {
+            enabled.off();
+        });
+        this.externalPauseAdEnabled.clear();
+        this.externalPauseAdStores.clear();
+    };
+}

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+import { StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
+declare module '@streamlayer/sdk-web-interfaces' {
+    interface StreamLayerSDK {
+        advertisement: import('./advertisement').Advertisement;
+    }
+}
+export { type ExternalPauseAdStore } from './advertisement';
+export { type GAMStaticCore } from './units/external-pause-ad';
+export declare const advertisement: (instance: StreamLayerContext, _opts: unknown, done: () => void) => void;

package/lib/index.js

@@ -0,0 +1,11 @@
+import { Advertisement } from './advertisement';
+export const advertisement = (instance, _opts, done) => {
+    instance.sdk.advertisement = new Advertisement(instance);
+    instance.sdk.onMount({ name: 'advertisement' }, () => {
+        instance.sdk.advertisement.connect();
+        return () => {
+            instance.sdk.advertisement.disconnect();
+        };
+    });
+    done();
+};

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

@@ -0,0 +1,15 @@
+import { createSingleStore, StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
+import '@streamlayer/sdk-web-api';
+export type GAMStaticCore = {
+    id: string;
+    parentId: string;
+    url: string;
+    imageSrc?: string;
+    adUrl?: string;
+};
+export type ExternalPauseAdOptions = {
+    refetchInterval: number;
+    prefetch: boolean;
+    $enabled: boolean;
+};
+export declare const externalPauseAd: (instance: StreamLayerContext) => (gamUrl: string, $enabled: ReturnType<typeof createSingleStore<boolean>>, options: ExternalPauseAdOptions) => import("@nanostores/query").FetcherStore<GAMStaticCore | undefined, any>;

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

@@ -0,0 +1,96 @@
+import { eventBus } from '@streamlayer/sdk-web-interfaces';
+import { createLogger } from '@streamlayer/sdk-web-logger';
+import '@streamlayer/sdk-web-api';
+import { VASTClient } from '@dailymotion/vast-client';
+const vastClient = new VASTClient();
+const log = createLogger('ui:gam-static');
+const preloadImage = (src) => {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => resolve(src);
+        image.onerror = () => reject();
+        image.src = src;
+    });
+};
+export const externalPauseAd = (instance) => {
+    return (gamUrl, $enabled, options) => instance.transport.nanoquery.createFetcherStore([gamUrl, $enabled], {
+        dedupeTime: options.prefetch ? options.refetchInterval : Infinity,
+        revalidateInterval: options.refetchInterval > 0 ? options.refetchInterval : 0,
+        fetcher: async (adUrl) => {
+            if (!adUrl || typeof adUrl !== 'string') {
+                throw new Error('no_valid_ad');
+            }
+            eventBus.emit('exposedPauseAd', {
+                action: 'load',
+                payload: {},
+            });
+            try {
+                const parsedVAST = await vastClient.get(adUrl);
+                const validAd = parsedVAST.ads.find((ads) => ads.creatives.length > 0);
+                if (validAd) {
+                    const parentId = validAd.id || '';
+                    log.debug(validAd, 'validAd');
+                    const nonlinear = validAd.creatives.find((creative) => creative.type === 'nonlinear');
+                    if (nonlinear) {
+                        const id = nonlinear.adId || nonlinear.id || parentId;
+                        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;
+                        if (staticResource) {
+                            await preloadImage(staticResource);
+                            eventBus.emit('exposedPauseAd', {
+                                action: 'loaded',
+                                payload: {
+                                    id,
+                                    parentId,
+                                },
+                            });
+                            return {
+                                id,
+                                parentId,
+                                url: adUrl,
+                                imageSrc: staticResource,
+                                adUrl: adUrlTemplate,
+                            };
+                        }
+                    }
+                    const companion = validAd.creatives.find((creative) => creative.type === 'companion');
+                    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 id = companion.adId || companion.id || parentId;
+                        await preloadImage(staticResource);
+                        eventBus.emit('exposedPauseAd', {
+                            action: 'loaded',
+                            payload: {
+                                id,
+                                parentId,
+                            },
+                        });
+                        return {
+                            id,
+                            parentId,
+                            url: adUrl,
+                            imageSrc: staticResource,
+                            adUrl: adUrlTemplate,
+                        };
+                    }
+                }
+                throw new Error('no_valid_ad');
+            }
+            catch (err) {
+                console.error(err, 'err');
+                throw new Error('no_valid_ad');
+            }
+        },
+    });
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@streamlayer/feature-advertisement",
+  "version": "0.1.0",
+  "peerDependencies": {
+    "@dailymotion/vast-client": "^6.4.2",
+    "@streamlayer/sl-eslib": "^5.228.0",
+    "nanostores": "^1.1.0",
+    "@streamlayer/sdk-web-core": "^1.19.0",
+    "@streamlayer/sdk-web-api": "^1.15.0",
+    "@streamlayer/sdk-web-interfaces": "^1.9.0",
+    "@streamlayer/sdk-web-types": "^1.16.9",
+    "@streamlayer/sdk-web-logger": "^1.0.94"
+  },
+  "devDependencies": {
+    "@types/vast-client": "^3.0.4"
+  },
+  "type": "module",
+  "main": "./lib/index.js",
+  "typings": "./lib/index.d.ts",
+  "files": [
+    "lib/",
+    "package.json"
+  ]
+}