@streamlayer/feature-gamification 1.26.1 → 1.27.0

package/lib/advertisement/externalAd/index.d.ts

@@ -1,4 +1,4 @@
-import { AdCampaigns } from '@streamlayer/sdk-web-types';
+import { GamOptions } from '@streamlayer/sdk-web-types';
 export type PalNonceManager = {
     getNonce: () => string;
     sendAdClick: () => void;
@@ -9,8 +9,8 @@ export type GamNonceResult = {
     url: URL;
     manager?: PalNonceManager;
 };
-export declare const processGamAdvertisement: ({ gamOptions, gamBaseUrl }: AdCampaigns) => string;
-export declare const gam: (adContainer: HTMLDivElement, url: string) => () => Promise<{
+export declare const processGamAdvertisement: ({ gamBaseUrl, $typeName: _, ...gamOptions }: GamOptions) => string;
+export declare const gam: (url: string, adContainer?: HTMLDivElement) => () => Promise<{
     url: URL;
     manager: PalNonceManager;
 } | undefined>;

package/lib/advertisement/externalAd/index.js

@@ -7,7 +7,9 @@ const encodeUrl = (urlStr) => {
     const url = new URL(urlStr);
     return url.toString();
 };
-export const processGamAdvertisement = ({ gamOptions, gamBaseUrl }) => {
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const processGamAdvertisement = ({ gamBaseUrl, $typeName: _, ...gamOptions }) => {
     const url = `${gamBaseUrl}?`;
     const params = [];
     for (const rawKey in gamOptions) {
@@ -41,9 +43,10 @@ export const processGamAdvertisement = ({ gamOptions, gamBaseUrl }) => {
             }
         }
     }
+    console.log('url', new URL(url + params.join('&')));
     return url + params.join('&');
 };
-export const gam = (adContainer, url) => {
+export const gam = (url, adContainer) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -78,8 +81,8 @@ export const gam = (adContainer, url) => {
             request.sessionId = deviceId;
             // Player support for VPAID 2.0, OMID 1.0, and SIMID 1.1
             request.supportedApiFrameworks = '2,7,9';
-            request.videoHeight = adContainer.clientHeight;
-            request.videoWidth = adContainer.clientWidth;
+            request.videoHeight = adContainer?.clientHeight ?? 0;
+            request.videoWidth = adContainer?.clientWidth ?? 0;
             const nonceManager = await nonceLoader.loadNonceManager(request);
             if (parsedUrl.searchParams.get('is_lat') === '[placeholder]') {
                 parsedUrl.searchParams.set('is_lat', '1');
@@ -92,9 +95,9 @@ export const gam = (adContainer, url) => {
             }
             parsedUrl.searchParams.set('wta', '1');
             parsedUrl.searchParams.set('givn', nonceManager.getNonce());
+            console.log('res url', new URL(parsedUrl.toString()));
             return {
                 url: parsedUrl,
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                 manager: nonceManager,
             };
         }

package/lib/advertisement/index.d.ts

@@ -16,7 +16,12 @@ export type Advertisement = {
     isPaused?: boolean;
     isMuted?: boolean;
     hasNotification?: boolean;
-    close?: () => void;
+    closeDelay?: number;
+    closePromise?: Promise<void>;
+    setCloseDelay?: (delay: number) => void;
+    close?: (options?: {
+        delay?: number;
+    }) => Promise<void>;
     togglePause?: (flag: boolean) => void;
     error?: string;
     toggleMute?: (flag: boolean) => void;
@@ -38,8 +43,10 @@ export type Advertisement = {
  */
 export declare const advertisement: ($slStreamId: GamificationBackground["slStreamId"], $feedSubscription: GamificationBackground["feedSubscription"], instance: StreamLayerContext) => {
     connect: () => void;
-    hide: (notificationId?: string) => void;
-    show: (advertisementId: string, data?: Awaited<ReturnType<typeof getPromotionDetail>>) => void;
+    hide: (notificationId?: string, options?: {
+        delay?: number;
+    }) => Promise<void>;
+    show: (advertisementId: string, data?: Awaited<ReturnType<typeof getPromotionDetail>>) => Promise<void>;
     open: (options?: {
         fromNotification?: boolean;
     }) => void;

package/lib/advertisement/index.js

@@ -1,11 +1,19 @@
 import { createMapStore, eventBus } from '@streamlayer/sdk-web-interfaces';
 import { QuestionStatus } from '@streamlayer/sdk-web-types';
 import { createLogger } from '@streamlayer/sdk-web-logger';
-import { NotificationEnabled, PromotionType } from '@streamlayer/sl-eslib/interactive/interactive.common_pb';
+import { NotificationEnabled, PromotionType, UseGeneralLogo, } from '@streamlayer/sl-eslib/interactive/interactive.common_pb';
 import { $activePromotionId, getPromotionDetail } from '../queries';
 import { AdvertisementStorage } from './storage';
 import { parsePromotion } from './utils';
 import { processGamAdvertisement } from './externalAd';
+const resolveAdvertisementLogos = (data) => {
+    if (data?.promotion?.sponsor?.useGeneralLogo === UseGeneralLogo.ENABLED) {
+        const generalTab = data.question?.promotion?.generalTabMetadata;
+        data.promotion.sponsor.classicLogo = generalTab?.advertiserLogo ?? data.promotion.sponsor.classicLogo;
+        data.promotion.sponsor.centerLogo = generalTab?.advertiserTransparentLogo ?? data.promotion.sponsor.centerLogo;
+    }
+    return data;
+};
 const adHasBanner = (data) => (data?.promotion?.type === PromotionType.INGAME_IAB11_LBAR ||
     data?.promotion?.type === PromotionType.INGAME_IAB21_LBAR) &&
     !!data.promotion.additionalBanner?.imageUrl;
@@ -23,6 +31,7 @@ const adHasBanner = (data) => (data?.promotion?.type === PromotionType.INGAME_IA
  */
 export const advertisement = ($slStreamId, $feedSubscription, instance) => {
     let connected = false;
+    // let hideTimeout: ReturnType<typeof setTimeout> | null = null
     const transport = instance.transport;
     const logger = createLogger('advertisement');
     const storage = new AdvertisementStorage();
@@ -90,19 +99,37 @@ export const advertisement = ($slStreamId, $feedSubscription, instance) => {
     /**
      * Show advertisement by id
      */
-    const show = (advertisementId, data) => {
+    const show = async (advertisementId, data) => {
+        // if (hideTimeout) {
+        //   clearTimeout(hideTimeout)
+        //   hideTimeout = null
+        // }
+        // close previous ad properly so "closed" event fires via subscribe
+        const current = $store.get();
+        if (current.data && current.data.question.id !== advertisementId) {
+            if (!current.closePromise) {
+                await $store.get().close?.();
+            }
+            else {
+                await current.closePromise;
+            }
+        }
         if (!data) {
             $store.setKey('loading', true);
             void getPromotionDetail(advertisementId, transport)
                 .then((response) => $store.set({
                 loading: false,
                 error: undefined,
-                data: response,
+                data: resolveAdvertisementLogos(response),
                 hasNotification: response?.notification?.enabled === NotificationEnabled.NOTIFICATION_ENABLED,
-                close: () => hide(response?.question.id),
+                close: (options) => {
+                    console.log('close ad 1', response?.question.id);
+                    return hide(response?.question.id, options);
+                },
                 togglePause: (status) => pause(response?.question.id, status),
                 toggleMute: (status) => mute(response?.question.id, status),
                 isViewed: response && !!storage.isViewed(response.question.id),
+                setCloseDelay: (delay) => $store.setKey('closeDelay', delay),
                 fireEvent: (event) => fireEvent(advertisementId, event),
                 isEventFired: (event) => isEventFired(advertisementId, event),
             }))
@@ -115,15 +142,19 @@ export const advertisement = ($slStreamId, $feedSubscription, instance) => {
             }));
         }
         else {
+            const resolvedData = resolveAdvertisementLogos(data);
             $store.set({
                 loading: false,
                 error: undefined,
-                data,
+                data: resolvedData,
                 hasNotification: data?.notification?.enabled === NotificationEnabled.NOTIFICATION_ENABLED,
-                close: () => hide(data.question.id),
+                close: (options) => {
+                    return hide(data.question.id, options);
+                },
                 togglePause: (status) => pause(data.question.id, status),
                 toggleMute: (status) => mute(data.question.id, status),
                 isViewed: !!storage.isViewed(data.question.id),
+                setCloseDelay: (delay) => $store.setKey('closeDelay', delay),
                 fireEvent: (event) => fireEvent(advertisementId, event),
                 isEventFired: (event) => isEventFired(advertisementId, event),
             });
@@ -179,10 +210,36 @@ export const advertisement = ($slStreamId, $feedSubscription, instance) => {
             });
         }
     });
-    const hide = (notificationId) => {
-        if (!notificationId || $store.get()?.data?.question.id === notificationId) {
-            $store.set({});
+    const hide = (notificationId, options) => {
+        const promise = new Promise((resolve) => {
+            try {
+                if (!notificationId || $store.get()?.data?.question.id === notificationId) {
+                    const current = $store.get();
+                    if (current.hiding || !current.data) {
+                        return resolve();
+                    }
+                    const delay = options?.delay ?? current.closeDelay;
+                    if (delay) {
+                        $store.setKey('hiding', true);
+                        setTimeout(() => {
+                            $store.set({});
+                            resolve();
+                        }, delay);
+                    }
+                    else {
+                        resolve();
+                        $store.set({});
+                    }
+                }
+            }
+            catch (err) {
+                console.error(err);
+            }
+        });
+        if ($store.get()?.data?.question.id === notificationId) {
+            $store.setKey('closePromise', promise);
         }
+        return promise;
     };
     const pause = (notificationId, status) => {
         if ($store.get()?.data?.question.id === notificationId) {
@@ -202,7 +259,7 @@ export const advertisement = ($slStreamId, $feedSubscription, instance) => {
         $activeAdvertisement.subscribe((active, prevActive) => {
             if (active.data) {
                 if (!prevActive?.data || active.data.id !== prevActive.data.id) {
-                    show(active.data.question.id, active.data);
+                    void show(active.data.question.id, active.data);
                 }
             }
         });
@@ -212,13 +269,13 @@ export const advertisement = ($slStreamId, $feedSubscription, instance) => {
                 return;
             }
             if (promotion.question.status === QuestionStatus.RESOLVED) {
-                hide(promotion.question.id);
+                void hide(promotion.question.id);
                 logger.debug({ promotion }, 'resolved: %o');
                 return;
             }
             if (promotion.question.status === QuestionStatus.ACTIVE) {
                 logger.debug({ promotion }, 'active: %o');
-                show(promotion.question.id, promotion);
+                void show(promotion.question.id, promotion);
                 return;
             }
             logger.debug({ promotion }, 'skip: %o');

package/lib/advertisement/utils.js

@@ -6,7 +6,6 @@ export const parsePromotion = (response) => {
     }
     const { options, notification, ...question } = questionItem;
     const promotionItem = options?.options.case === 'promotion' ? options.options.value : undefined;
-    // eslint-disable-next-line consistent-return
     return {
         id: question.id,
         question,

package/lib/deepLink.js

@@ -41,7 +41,7 @@ export const deepLink = (transport, $eventId, $externalEventId, $userId) => {
                         loading: false,
                     });
                 }
-                catch (error) {
+                catch (_error) {
                     $store.set({
                         loading: false,
                         error: 'Failed to generate short link',

package/lib/gamification.js

@@ -4,7 +4,7 @@ import { QuestionStatus, QuestionType, FeatureType, SilenceSetting, PickHistoryS
 import { NotificationType } from '@streamlayer/sdk-web-notifications';
 import '@streamlayer/sdk-web-core/store';
 import { onStart } from 'nanostores';
-import { AdUnit, FactoidMediaMode, NotificationEnabled, NotificationUseContentTexts, } from '@streamlayer/sl-eslib/interactive/interactive.common_pb';
+import { AdUnit, FactoidMediaMode, NotificationEnabled, NotificationUseContentTexts, UseGeneralLogo, } from '@streamlayer/sl-eslib/interactive/interactive.common_pb';
 import * as queries from './queries';
 import * as actions from './queries/actions';
 import { leaderboard } from './leaderboard';
@@ -16,6 +16,12 @@ import { $questionByUser, questionByUser } from './queries';
 import { summary } from './userSummary';
 import { friendSummary } from './friendSummary';
 const InteractiveQuestionTypes = new Set([QuestionType.POLL, QuestionType.PREDICTION, QuestionType.TRIVIA]);
+const resolveSponsorLogo = (promotion) => {
+    if (promotion?.sponsor?.useGeneralLogo === UseGeneralLogo.ENABLED) {
+        return promotion.generalTabMetadata?.advertiserTransparentLogo || promotion.sponsor?.logo;
+    }
+    return promotion?.sponsor?.logo;
+};
 /**
  * Gamification (Games) Overlay
  * Includes:
@@ -218,7 +224,7 @@ export class Gamification extends AbstractFeature {
                             }
                             // eslint-disable-next-line no-empty
                         }
-                        catch (e) { }
+                        catch (_e) { }
                         this.feedList.getStore().mutate(feedList);
                     }
                 }
@@ -254,7 +260,7 @@ export class Gamification extends AbstractFeature {
                                 appearance: question.appearance,
                                 sponsorship: question.sponsorship,
                                 adUnit: question?.adUnit,
-                                sponsorLogo: question.promotion?.sponsor?.logo,
+                                sponsorLogo: resolveSponsorLogo(question.promotion),
                             },
                         },
                     });
@@ -301,21 +307,16 @@ export class Gamification extends AbstractFeature {
                                 // @ts-expect-error
                                 attributes: {
                                     ...prev.attributes.attributes,
-                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                     // @ts-ignore
                                     value: {
                                         ...prev.attributes.attributes.value,
                                         ...feedItem.attributes.attributes.value,
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                         // @ts-ignore
                                         answerId: prev.attributes.attributes.value.answerId,
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                         // @ts-ignore
                                         status: prev.attributes.attributes.value.status,
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                         // @ts-ignore
                                         openForVoting: 
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                         // @ts-ignore
                                         prev.attributes.attributes.value.openForVoting === false
                                             ? false
@@ -335,7 +336,6 @@ export class Gamification extends AbstractFeature {
                                 ...prev.attributes,
                                 attributes: {
                                     ...prev.attributes.attributes,
-                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                     // @ts-ignore
                                     value: {
                                         ...prev.attributes.attributes.value,
@@ -640,7 +640,7 @@ export class Gamification extends AbstractFeature {
                                 type: NotificationType.QUESTION,
                                 action: () => this.openQuestion(question.data?.question?.id, question.data?.feedItem),
                                 close: () => this.closeQuestion(question.data?.question?.id),
-                                autoHideDuration: 1000 * 60,
+                                autoHideDuration: isAdUnit ? 0 : 1000 * 60,
                                 id: this.background.getCurrentSessionId({
                                     prefix: 'notification',
                                     entity: question.data.question.id,
@@ -657,7 +657,7 @@ export class Gamification extends AbstractFeature {
                                         appearance: question.data.question.appearance,
                                         sponsorship: question.data.question.sponsorship,
                                         adUnit: question.data.question?.adUnit,
-                                        sponsorLogo: question.data.question.promotion?.sponsor?.logo,
+                                        sponsorLogo: resolveSponsorLogo(question.data.question.promotion),
                                     },
                                 },
                             });
@@ -690,28 +690,33 @@ export class Gamification extends AbstractFeature {
                             url: '',
                         },
                     };
-                    this.notifications.add({
-                        type: NotificationType.QUESTION,
-                        action: () => this.openQuestion(question?.data?.question?.id, question?.data?.feedItem),
-                        close: () => this.closeQuestion(question?.data?.question?.id),
-                        autoHideDuration: 1000 * 120,
-                        emitEvent: true,
-                        id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
-                        data: {
-                            questionId: question.data.question.id,
-                            questionType: question.data.question.type,
-                            insight: instantView,
-                            inApp: {
-                                useMediaFromContent: optionsValue?.useAsNotification === UseAsNotification.ENABLED,
-                                notification: question.data.question.notification,
-                                appearance: question.data.question.appearance,
-                                sponsorship: question.data.question.sponsorship,
-                                adUnit: question.data.question?.adUnit,
-                                sponsorLogo: question.data.question.promotion?.sponsor?.logo,
-                                isVideo: optionsValue?.mode === FactoidMediaMode.VIDEO,
+                    if (question.data.question.notification?.enabled === NotificationEnabled.NOTIFICATION_ENABLED) {
+                        this.notifications.add({
+                            type: NotificationType.QUESTION,
+                            action: () => this.openQuestion(question?.data?.question?.id, question?.data?.feedItem),
+                            close: () => this.closeQuestion(question?.data?.question?.id),
+                            autoHideDuration: isAdUnit ? 0 : 1000 * 120,
+                            emitEvent: true,
+                            id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
+                            data: {
+                                questionId: question.data.question.id,
+                                questionType: question.data.question.type,
+                                insight: instantView,
+                                inApp: {
+                                    useMediaFromContent: optionsValue?.useAsNotification === UseAsNotification.ENABLED,
+                                    notification: question.data.question.notification,
+                                    appearance: question.data.question.appearance,
+                                    sponsorship: question.data.question.sponsorship,
+                                    adUnit: question.data.question?.adUnit,
+                                    sponsorLogo: resolveSponsorLogo(question.data.question.promotion),
+                                    isVideo: optionsValue?.mode === FactoidMediaMode.VIDEO,
+                                },
                             },
-                        },
-                    });
+                        });
+                    }
+                    else {
+                        this.openQuestion(question.data?.question?.id, question.data?.feedItem);
+                    }
                 }
                 else if (question.data.question.type === QuestionType.TWEET &&
                     question.data.question.notification !== undefined) {
@@ -740,24 +745,29 @@ export class Gamification extends AbstractFeature {
                         tweetId: question.data.question.id,
                         tweetMedia,
                     };
-                    this.notifications.add({
-                        type: NotificationType.QUESTION,
-                        action: () => this.openQuestion(question.data?.question?.id, question.data?.feedItem),
-                        close: () => this.closeQuestion(question.data?.question?.id),
-                        autoHideDuration: 1000 * 120,
-                        emitEvent: true,
-                        id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
-                        data: {
-                            questionId: question.data.question.id,
-                            questionType: question.data.question.type,
-                            tweet: tweetView,
-                            inApp: {
-                                notification: question.data.question.notification,
-                                appearance: question.data.question.appearance,
-                                sponsorship: question.data.question.sponsorship,
+                    if (question.data.question.notification?.enabled === NotificationEnabled.NOTIFICATION_ENABLED) {
+                        this.notifications.add({
+                            type: NotificationType.QUESTION,
+                            action: () => this.openQuestion(question.data?.question?.id, question.data?.feedItem),
+                            close: () => this.closeQuestion(question.data?.question?.id),
+                            autoHideDuration: isAdUnit ? 0 : 1000 * 120,
+                            emitEvent: true,
+                            id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
+                            data: {
+                                questionId: question.data.question.id,
+                                questionType: question.data.question.type,
+                                tweet: tweetView,
+                                inApp: {
+                                    notification: question.data.question.notification,
+                                    appearance: question.data.question.appearance,
+                                    sponsorship: question.data.question.sponsorship,
+                                },
                             },
-                        },
-                    });
+                        });
+                    }
+                    else {
+                        this.openQuestion(question.data?.question?.id, question.data?.feedItem);
+                    }
                 }
             }
         }

package/lib/queries/actions.js

@@ -12,9 +12,9 @@ export const submitAnswer = async (transport, data) => {
     catch (error) {
         const cErr = ConnectError.from(error);
         if (cErr?.code === Code.AlreadyExists) {
-            throw new Error(ERROR.ALREADY_VOTED);
+            throw new Error(ERROR.ALREADY_VOTED, { cause: error });
         }
-        throw new Error(ERROR.UNKNOWN);
+        throw new Error(ERROR.UNKNOWN, { cause: error });
     }
 };
 export const submitInplay = (transport, eventId) => {

package/lib/queries/deepLink.js

@@ -16,7 +16,7 @@ export const $deepLink = (transport, params) => {
                 });
                 return res.data?.attributes;
             }
-            catch (error) {
+            catch (_error) {
                 return undefined;
             }
         },

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "peerDependencies": {
     "@bufbuild/protobuf": "^2.2.2",
     "@fastify/deepmerge": "^2.0.0",
     "@streamlayer/sl-eslib": "^5.229.1",
     "uuid": "^11.1.0",
     "nanostores": "^1.1.0",
-    "@streamlayer/sdk-web-api": "^1.16.7",
-    "@streamlayer/sdk-web-core": "^1.21.7",
-    "@streamlayer/sdk-web-interfaces": "^1.9.15",
-    "@streamlayer/sdk-web-logger": "^1.0.109",
-    "@streamlayer/sdk-web-notifications": "^1.3.71",
-    "@streamlayer/sdk-web-storage": "^1.0.109",
-    "@streamlayer/sdk-web-types": "^1.17.7"
+    "@streamlayer/sdk-web-api": "^1.17.0",
+    "@streamlayer/sdk-web-core": "^1.22.0",
+    "@streamlayer/sdk-web-interfaces": "^1.10.0",
+    "@streamlayer/sdk-web-notifications": "^1.4.0",
+    "@streamlayer/sdk-web-logger": "^1.1.0",
+    "@streamlayer/sdk-web-storage": "^1.1.0",
+    "@streamlayer/sdk-web-types": "^1.18.0"
   },
   "devDependencies": {
     "tslib": "^2.7.0"