@streamlayer/sdk-web-notifications 0.1.0

package/README.md

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

package/lib/index.d.ts

@@ -0,0 +1,18 @@
+import { StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
+import { Notifications } from './notifications';
+export { type Notification, type NotificationData, NotificationType, Notifications } from './notifications';
+export { type NotificationsList } from './queue';
+export type NotificationsStore = ReturnType<Notifications['getQueueStore']>;
+declare module '@streamlayer/sdk-web-interfaces' {
+    interface StreamLayerContext {
+        notifications: Notifications;
+        addNotification: Notifications['add'];
+    }
+    interface StreamLayerSDK {
+        getNotificationsStore: Notifications['getQueueStore'];
+    }
+}
+/**
+ * notifications plugin, connect notifications to sdk
+ */
+export declare const notifications: (instance: StreamLayerContext, opts: unknown, done: () => void) => void;

package/lib/index.js

@@ -0,0 +1,11 @@
+import { Notifications } from './notifications';
+export { NotificationType, Notifications } from './notifications';
+/**
+ * notifications plugin, connect notifications to sdk
+ */
+export const notifications = (instance, opts, done) => {
+    instance.notifications = new Notifications();
+    instance.addNotification = instance.notifications.add;
+    instance.sdk.getNotificationsStore = () => instance.notifications.getQueueStore();
+    done();
+};

package/lib/notifications.d.ts

@@ -0,0 +1,57 @@
+import { InstantView, QuestionType, GameSettings } from '@streamlayer/sdk-web-types';
+import { NotificationsQueue, NotificationsQueueOptions } from './queue';
+export type NotificationData = {
+    questionType: QuestionType;
+    question?: {
+        title: string;
+        votedAnswer?: {
+            title?: string;
+            points?: number;
+        };
+        predictionResult?: boolean;
+        correct?: boolean;
+        correctAnswerTitle?: string;
+        questionTitle?: string;
+    };
+    insight?: InstantView;
+    onboarding?: GameSettings;
+    tweet?: {
+        title: string;
+        image: string;
+        body: string;
+        account: {
+            image: string;
+            name: string;
+            userName: string;
+            verified: boolean;
+        };
+    };
+};
+export declare enum NotificationType {
+    ONBOARDING = 1,
+    QUESTION = 2,
+    QUESTION_RESOLVED = 3
+}
+export type Notification<M extends Record<string, Function> = never> = {
+    autoHideDuration: number;
+    delay?: number;
+    hiding?: boolean;
+    type: NotificationType;
+    action?: (...args: unknown[]) => void;
+    close?: (...args: unknown[]) => void;
+    methods?: M;
+    data: NotificationData;
+    id: string;
+};
+/**
+ * @description app notifications (inapp)
+ */
+export declare class Notifications {
+    queue: NotificationsQueue;
+    private storage;
+    constructor(options?: Partial<NotificationsQueueOptions>);
+    add: (notification: Notification) => void;
+    close: (notificationId: string) => void;
+    getQueueStore: () => import("nanostores").WritableAtom<Map<string, Notification> | undefined>;
+    markAsViewed: (notificationId: string) => void;
+}

package/lib/notifications.js

@@ -0,0 +1,35 @@
+import { NotificationsQueue } from './queue';
+import { NotificationStorage } from './storage';
+export var NotificationType;
+(function (NotificationType) {
+    NotificationType[NotificationType["ONBOARDING"] = 1] = "ONBOARDING";
+    NotificationType[NotificationType["QUESTION"] = 2] = "QUESTION";
+    NotificationType[NotificationType["QUESTION_RESOLVED"] = 3] = "QUESTION_RESOLVED";
+})(NotificationType || (NotificationType = {}));
+/**
+ * @description app notifications (inapp)
+ */
+export class Notifications {
+    queue;
+    storage;
+    constructor(options = {}) {
+        this.storage = new NotificationStorage();
+        this.queue = new NotificationsQueue({ concurrency: 1, animationDelay: 1600, ...options });
+    }
+    add = (notification) => {
+        const isViewed = this.storage.isOpened(notification.id);
+        if (!isViewed) {
+            this.queue.addToQueue(notification);
+        }
+    };
+    close = (notificationId) => {
+        this.queue.closeNotification(notificationId);
+        this.markAsViewed(notificationId);
+    };
+    getQueueStore = () => {
+        return this.queue.notificationsList;
+    };
+    markAsViewed = (notificationId) => {
+        this.storage.setOpened(notificationId);
+    };
+}

package/lib/queue/index.d.ts

@@ -0,0 +1,22 @@
+import { SingleStore, createComputedStore } from '@streamlayer/sdk-web-interfaces';
+import { Notification } from '..';
+export type NotificationsQueueOptions = {
+    concurrency: number;
+    animationDelay: number;
+};
+export type NotificationsList = ReturnType<typeof createComputedStore<Notification[]>>;
+export declare class NotificationsQueue {
+    notificationsList: ReturnType<SingleStore<Map<Notification['id'], Notification>>['getStore']>;
+    private notifications;
+    private store;
+    private timeouts;
+    private waitingQueue;
+    private activeQueue;
+    private options;
+    private logger;
+    constructor(options: NotificationsQueueOptions);
+    addToQueue: (notification: Notification) => void;
+    tickWaitingQueue: () => void;
+    tickActiveQueue: (notificationId: string) => void;
+    closeNotification: (notificationId: string) => void;
+}

package/lib/queue/index.js

@@ -0,0 +1,124 @@
+import { SingleStore, createSingleStore } from '@streamlayer/sdk-web-interfaces';
+import { createLogger } from '@streamlayer/sdk-web-logger';
+export class NotificationsQueue {
+    notificationsList;
+    notifications;
+    store;
+    timeouts;
+    waitingQueue;
+    activeQueue;
+    options;
+    logger;
+    constructor(options) {
+        this.options = options;
+        this.logger = createLogger('notifications');
+        this.store = new Map();
+        this.timeouts = new Map();
+        this.waitingQueue = new Set();
+        this.activeQueue = new Set();
+        this.notifications = new SingleStore(createSingleStore(new Map()), 'notifications-queue');
+        this.notificationsList = this.notifications.getStore();
+    }
+    addToQueue = (notification) => {
+        if (this.store.has(notification.id)) {
+            this.logger.debug({ notification }, 'skip existed notification: %o');
+            return;
+        }
+        const close = notification.close;
+        const action = notification.action;
+        this.store.set(notification.id, {
+            ...notification,
+            close: (...args) => {
+                if (close) {
+                    close(...args);
+                }
+                this.closeNotification(notification.id);
+            },
+            action: (...args) => {
+                if (action) {
+                    action(...args);
+                }
+                this.closeNotification(notification.id);
+            },
+        });
+        this.waitingQueue.add(notification.id);
+        /**
+         * Hide an oldest notification if the active queue is full,
+         * and show a new notification on the next tick
+         */
+        if (this.activeQueue.size === this.options.concurrency) {
+            const [job] = this.activeQueue;
+            this.closeNotification(job);
+        }
+        else {
+            this.tickWaitingQueue();
+        }
+    };
+    tickWaitingQueue = () => {
+        if (this.activeQueue.size < this.options.concurrency) {
+            const [job] = this.waitingQueue;
+            if (!job) {
+                return;
+            }
+            this.activeQueue.add(job);
+            this.waitingQueue.delete(job);
+            this.logger.debug({ job }, 'waiting queue tick');
+            this.tickActiveQueue(job);
+        }
+        else {
+            this.logger.debug({ queueSize: this.activeQueue.size, concurrency: this.options.concurrency }, 'waiting queue tick skipped');
+        }
+    };
+    tickActiveQueue = (notificationId) => {
+        if (!notificationId) {
+            return;
+        }
+        const notification = this.store.get(notificationId);
+        if (!notification) {
+            this.logger.debug({ notificationId }, 'active queue tick skipped, notification not exist');
+            return;
+        }
+        const timeout = setTimeout(() => {
+            const closureId = notificationId;
+            const prevQueue = new Map(this.notifications.getValue());
+            prevQueue.set(notification.id, notification);
+            this.notifications.setValue(prevQueue);
+            const timeout = setTimeout(() => {
+                this.logger.debug({ notificationId: closureId, delay: notification.autoHideDuration || 5000 }, 'notification hiding by autoHideDuration');
+                this.closeNotification(closureId);
+            }, notification.autoHideDuration || 5000);
+            this.timeouts.set(closureId, timeout);
+            this.logger.debug({ notificationId: closureId, queue: [...prevQueue.values()] }, 'notification displayed');
+        }, notification.delay || 0);
+        this.timeouts.set(notificationId, timeout);
+        this.logger.debug({ notificationId }, 'active queue tick completed');
+        this.tickWaitingQueue();
+    };
+    closeNotification = (notificationId) => {
+        const prevQueue = new Map(this.notifications.getValue());
+        const notification = prevQueue.get(notificationId);
+        if (notification) {
+            // do not hide notification if we have more than one notification in waiting queue,
+            // because we need to show next notification immediately
+            notification.hiding = !(this.waitingQueue.size >= this.options.concurrency);
+            this.notifications.setValue(prevQueue);
+            const timeout = setTimeout(() => {
+                const prevQueue = new Map(this.notifications.getValue());
+                prevQueue.delete(notificationId);
+                this.notifications.setValue(prevQueue);
+                const timeout = this.timeouts.get(notificationId);
+                if (timeout !== undefined) {
+                    clearTimeout(timeout);
+                    this.timeouts.delete(notificationId);
+                }
+                this.logger.debug({ notificationId }, 'notification hidden');
+            }, this.options.animationDelay || 0);
+            this.timeouts.set(notificationId, timeout);
+        }
+        this.store.delete(notificationId);
+        this.activeQueue.delete(notificationId);
+        this.waitingQueue.delete(notificationId);
+        this.tickWaitingQueue();
+        this.logger.debug({ notificationId }, 'notification hiding');
+    };
+}

package/lib/storage.d.ts

@@ -0,0 +1,7 @@
+import { Storage } from '@streamlayer/sdk-web-storage';
+export declare class NotificationStorage extends Storage {
+    constructor();
+    setOpened: (notificationId: string) => void;
+    isOpened: (notificationId: string) => string | undefined;
+    clearNotification: () => void;
+}

package/lib/storage.js

@@ -0,0 +1,19 @@
+import { Storage } from '@streamlayer/sdk-web-storage';
+var KEY_PREFIX;
+(function (KEY_PREFIX) {
+    KEY_PREFIX["OPENED"] = "opened";
+})(KEY_PREFIX || (KEY_PREFIX = {}));
+export class NotificationStorage extends Storage {
+    constructor() {
+        super('notification');
+    }
+    setOpened = (notificationId) => {
+        this.write(KEY_PREFIX.OPENED, notificationId, 'true');
+    };
+    isOpened = (notificationId) => {
+        return this.read(KEY_PREFIX.OPENED, notificationId);
+    };
+    clearNotification = () => {
+        this.clear();
+    };
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@streamlayer/sdk-web-notifications",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./lib/index.js",
+  "typings": "./lib/index.d.ts",
+  "files": [
+    "lib/",
+    "package.json"
+  ],
+  "peerDependencies": {
+    "@streamlayer/sdk-web-interfaces": "^0.0.1",
+    "@streamlayer/sdk-web-types": "^0.0.1",
+    "@streamlayer/sdk-web-logger": "^0.0.1",
+    "@streamlayer/sdk-web-storage": "^0.0.4"
+  },
+  "exports": {
+    ".": {
+      "module": "./lib/index.js",
+      "require": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
+  "devDependencies": {
+    "tslib": "^2.6.2",
+    "@nx/playwright": "17.1.1",
+    "@playwright/test": "^1.39.0",
+    "@nx/webpack": "17.0.3",
+    "webpack": "^5.89.0"
+  }
+}