@streamlayer/feature-advertisement 0.2.8 → 0.3.1

package/lib/advertisement.d.ts

@@ -1,8 +1,13 @@
 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';
+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];
+    private externalAdStores;
+    private externalAdEnabled;
     private externalPauseAdStores;
     private externalPauseAdEnabled;
     private log;

package/lib/advertisement.js

@@ -1,20 +1,42 @@
 import { AbstractFeatureUnit, createSingleStore } from '@streamlayer/sdk-web-interfaces';
 import { createLogger } from '@streamlayer/sdk-web-logger';
+import { externalAd } from './units/external-ad';
 import { externalPauseAd } from './units/external-pause-ad';
 export class Advertisement extends AbstractFeatureUnit {
+    getExternalAd;
     getExternalPauseAd;
+    externalAdStores = new Map();
+    externalAdEnabled = new Map();
     externalPauseAdStores = new Map();
     externalPauseAdEnabled = new Map();
     log;
     constructor(instance) {
         super();
         this.log = createLogger('advertisement');
+        const externalAdGenerator = externalAd(instance);
         const externalPauseAdGenerator = externalPauseAd(instance);
+        this.getExternalAd = (adUrl, options) => {
+            if (this.externalAdStores.has(adUrl)) {
+                const $enabled = this.externalAdEnabled.get(adUrl);
+                const $store = this.externalAdStores.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 = externalAdGenerator(adUrl, $enabled, options);
+            this.externalAdEnabled.set(adUrl, $enabled);
+            this.externalAdStores.set(adUrl, store);
+            return [store, adUrl];
+        };
         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);
@@ -37,6 +59,14 @@ export class Advertisement extends AbstractFeatureUnit {
     };
     disconnect = () => {
         this.log.debug('disconnect');
+        this.externalAdStores.forEach((store) => {
+            store.off();
+        });
+        this.externalAdEnabled.forEach((enabled) => {
+            enabled.off();
+        });
+        this.externalAdEnabled.clear();
+        this.externalAdStores.clear();
         this.externalPauseAdStores.forEach((store) => {
             store.off();
         });

package/lib/index.d.ts

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

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

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

package/lib/units/external-ad.js

@@ -0,0 +1,83 @@
+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-ad');
+const preloadImage = (src) => {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => resolve(src);
+        image.onerror = () => reject();
+        image.src = src;
+    });
+};
+export const externalAd = (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('ad url is empty');
+            }
+            try {
+                const parsedVAST = await vastClient.get(adUrl);
+                const validAd = parsedVAST.ads.find((ads) => ads.creatives.length > 0);
+                if (validAd) {
+                    const parentId = validAd.id || '';
+                    const store = {
+                        id: '',
+                        parentId,
+                        url: adUrl,
+                        title: validAd.title || '',
+                        description: validAd.description || '',
+                    };
+                    log.debug(validAd, 'validAd');
+                    const linear = validAd.creatives.find((creative) => creative.type === 'linear');
+                    if (linear) {
+                        store.id = linear.adId || linear.id || parentId;
+                        log.debug(linear, 'linear');
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        store.videoSrc = linear.mediaFiles?.find((mediaFile) => !!mediaFile.fileURL)?.fileURL;
+                    }
+                    const nonlinear = validAd.creatives.find((creative) => creative.type === 'nonlinear');
+                    if (nonlinear) {
+                        store.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
+                        store.adUrl = nonlinear.variations?.[0]?.nonlinearClickThroughURLTemplate;
+                        if (staticResource) {
+                            await preloadImage(staticResource);
+                            store.imageSrc = staticResource;
+                        }
+                    }
+                    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;
+                    if (staticResource) {
+                        await preloadImage(staticResource);
+                        store.sponsorSrc = staticResource;
+                    }
+                    if (store.imageSrc || store.videoSrc) {
+                        return store;
+                    }
+                }
+                throw new Error('no_valid_ad');
+            }
+            catch (err) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                if (err.message !== 'no_valid_ad' && err.message !== 'ad url is empty') {
+                    console.error(err);
+                }
+                throw err;
+            }
+        },
+    });
+};

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@streamlayer/feature-advertisement",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "peerDependencies": {
     "@dailymotion/vast-client": "^6.4.2",
     "@streamlayer/sl-eslib": "^5.229.1",
     "nanostores": "^1.1.0",
-    "@streamlayer/sdk-web-core": "^1.21.8",
-    "@streamlayer/sdk-web-api": "^1.16.8",
-    "@streamlayer/sdk-web-interfaces": "^1.9.16",
-    "@streamlayer/sdk-web-types": "^1.17.8",
-    "@streamlayer/sdk-web-logger": "^1.0.110"
+    "@streamlayer/sdk-web-core": "^1.22.1",
+    "@streamlayer/sdk-web-api": "^1.17.1",
+    "@streamlayer/sdk-web-interfaces": "^1.10.1",
+    "@streamlayer/sdk-web-types": "^1.18.1",
+    "@streamlayer/sdk-web-logger": "^1.1.1"
   },
   "devDependencies": {
     "@types/vast-client": "^3.0.4"