@streamlayer/sdk-web-core 1.4.2 → 1.5.0

package/lib/ui/index.d.ts

@@ -1,4 +1,4 @@
-import { StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
+import { createMapStore, StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
 import { QuestionType } from '@streamlayer/sdk-web-types';
 export type UIData = {
     stage: 'activate' | 'deactivate';
@@ -8,22 +8,34 @@ export type UIData = {
     type: 'advertisement' | 'insight' | 'poll' | 'trivia' | 'prediction' | 'tweet' | 'question';
 };
 export type OnContentActivateCallback = (renderData: UIData) => void;
+export type UIState = {
+    promotionSidebar?: boolean;
+    promotionOverlay?: boolean;
+    promotionBanner?: boolean;
+    promotionNotification?: boolean;
+    app?: boolean;
+    appNotification?: boolean;
+};
 export interface UIContext {
-    state: Set<string>;
+    disableApp: () => void;
+    enableApp: () => void;
+    disableAppNotification: () => void;
+    enableAppNotification: () => void;
     onContentActivate?: OnContentActivateCallback;
 }
 declare module '@streamlayer/sdk-web-interfaces' {
     interface StreamLayerContext {
         ui: UIContext;
-    }
-    interface StreamLayerSDK {
-        onAdvertisementActivate: (params: Omit<UIData, 'type'>) => void;
         onQuestionActivate: (params: Omit<UIData, 'type'> & {
             type?: string;
             questionType?: QuestionType;
         }) => void;
     }
+    interface StreamLayerSDK {
+        uiState: ReturnType<typeof createMapStore<UIState>>;
+    }
 }
 export declare const ui: (instance: StreamLayerContext, opts: {
     onContentActivate?: OnContentActivateCallback;
+    withAdNotification?: boolean;
 }, done: () => void) => void;

package/lib/ui/index.js

@@ -1,3 +1,4 @@
+import { createMapStore, eventBus, } from '@streamlayer/sdk-web-interfaces';
 import { QuestionType } from '@streamlayer/sdk-web-types';
 const questionTypes = {
     [QuestionType.FACTOID]: 'insight',
@@ -7,25 +8,123 @@ const questionTypes = {
     [QuestionType.TWEET]: 'tweet',
 };
 export const ui = (instance, opts, done) => {
+    instance.sdk.uiState = createMapStore({});
     instance.ui = {
-        state: new Set(),
+        enableAppNotification: function () {
+            instance.sdk.uiState.setKey('appNotification', true);
+        },
+        disableAppNotification: function () {
+            if (!instance.sdk.uiState.get().app) {
+                instance.sdk.uiState.setKey('appNotification', false);
+            }
+        },
+        enableApp: function () {
+            instance.sdk.uiState.set({
+                app: true,
+                appNotification: true,
+            });
+        },
+        disableApp: function () {
+            instance.sdk.uiState.set({
+                ...instance.sdk.uiState.get(),
+                appNotification: false,
+                app: false,
+            });
+        },
     };
     if (opts.onContentActivate) {
         instance.ui.onContentActivate = opts.onContentActivate;
     }
-    instance.sdk.onAdvertisementActivate = (params) => {
+    const onAdvertisementActivate = (params) => {
         if (instance.ui.onContentActivate) {
             instance.ui.onContentActivate({ ...params, type: 'advertisement' });
         }
     };
-    instance.sdk.onQuestionActivate = ({ questionType, ...params }) => {
+    instance.onQuestionActivate = ({ questionType, ...params }) => {
         if (instance.ui.onContentActivate) {
             const type = params.type || (questionType && questionTypes[questionType]) || 'question';
-            // temporary skip other question types
-            if (type === 'insight') {
-                instance.ui.onContentActivate({ ...params, type });
-            }
+            instance.ui.onContentActivate({ ...params, type });
         }
     };
+    instance.sdk.onMount({ name: 'ui' }, () => {
+        const listener = (event) => {
+            if (event.slEventBus?.type === 'notification') {
+                const action = event.slEventBus.action;
+                switch (action) {
+                    case 'received':
+                        instance.ui.enableAppNotification();
+                        break;
+                    case 'closed':
+                        instance.ui.disableAppNotification();
+                        break;
+                }
+            }
+            if (event.slEventBus?.type === 'advertisement') {
+                const ctx = event.slEventBus;
+                const { hasNotification, id, isViewed } = ctx.payload;
+                switch (ctx.action) {
+                    case 'received':
+                        instance.sdk.closeFeature();
+                        onAdvertisementActivate({
+                            stage: 'activate',
+                            id,
+                            hasNotification,
+                            isViewed,
+                        });
+                        if (!opts.withAdNotification) {
+                            instance.sdk.uiState.set({
+                                promotionBanner: true,
+                                promotionOverlay: true,
+                                promotionSidebar: true,
+                            });
+                            break;
+                        }
+                        if (hasNotification) {
+                            instance.sdk.uiState.set({
+                                promotionNotification: true,
+                            });
+                        }
+                        else {
+                            instance.sdk.uiState.set({
+                                promotionBanner: true,
+                                promotionOverlay: true,
+                                promotionSidebar: true,
+                            });
+                        }
+                        break;
+                    case 'closed':
+                        instance.sdk.uiState.set({
+                            ...instance.sdk.uiState.get(),
+                            promotionNotification: false,
+                            promotionBanner: false,
+                            promotionOverlay: false,
+                            promotionSidebar: false,
+                        });
+                        onAdvertisementActivate({
+                            stage: 'deactivate',
+                            id,
+                            hasNotification,
+                            isViewed,
+                        });
+                        break;
+                }
+            }
+        };
+        const cancel1 = eventBus.listen(listener);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const cancel2 = instance.activeFeature.subscribe((feature) => {
+            if (feature) {
+                instance.ui.enableApp();
+            }
+            else {
+                instance.ui.disableApp();
+            }
+        });
+        return () => {
+            cancel1();
+            cancel2();
+        };
+    });
     done();
 };

package/package.json

@@ -5,13 +5,13 @@
   },
   "peerDependencies": {
     "@nanostores/query": "^0.2.10",
-    "@streamlayer/sl-eslib": "^5.123.1",
+    "@streamlayer/sl-eslib": "^5.130.0",
     "nanostores": "^0.10.3",
-    "@streamlayer/sdk-web-api": "^1.5.2",
-    "@streamlayer/sdk-web-interfaces": "^1.1.14",
-    "@streamlayer/sdk-web-logger": "^1.0.19",
-    "@streamlayer/sdk-web-types": "^1.6.2",
-    "@streamlayer/sdk-web-storage": "^1.0.19"
+    "@streamlayer/sdk-web-api": "^1.6.0",
+    "@streamlayer/sdk-web-interfaces": "^1.2.0",
+    "@streamlayer/sdk-web-logger": "^1.0.21",
+    "@streamlayer/sdk-web-storage": "^1.0.21",
+    "@streamlayer/sdk-web-types": "^1.7.0"
   },
   "exports": {
     ".": {
@@ -40,7 +40,7 @@
       "default": "./lib/auth/index.js"
     }
   },
-  "version": "1.4.2",
+  "version": "1.5.0",
   "type": "module",
   "main": "./lib/index.js",
   "module": "./lib/index.js",