@maestro_io/maestro-web-sdk 3.3.1 → 4.0.0-beta.2

package/dist/src/view-models/OverlayViewModel.js

@@ -0,0 +1,222 @@
+import { Observable } from '../helpers/Observable';
+import { ViewModel } from './ViewModel';
+import { OverlayType, } from '../types/OverlayTypes';
+const AUTO_DISMISS_TIMEOUT = 10400; // 10.4 seconds
+export class OverlayViewModel extends ViewModel {
+    constructor(analyticsService) {
+        super();
+        Object.defineProperty(this, "_isVisible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "_currentOverlay", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(null)
+        });
+        Object.defineProperty(this, "_autoDismiss", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(true)
+        });
+        Object.defineProperty(this, "_overlayQueue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "_hasTrackedView", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "autoDismissTimeout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.analyticsService = analyticsService;
+    }
+    get isVisible() {
+        return this._isVisible;
+    }
+    get currentOverlay() {
+        return this._currentOverlay;
+    }
+    get autoDismiss() {
+        return this._autoDismiss;
+    }
+    get overlayQueue() {
+        return this._overlayQueue;
+    }
+    get overlayTitle() {
+        const overlay = this._currentOverlay.value;
+        if (!overlay)
+            return '';
+        switch (overlay.type) {
+            case OverlayType.WinningBet:
+                return 'You won your bet!';
+            case OverlayType.FantasyPlayerEvent:
+                return overlay.fantasy?.title ?? 'Fantasy Update';
+            default:
+                return '';
+        }
+    }
+    get overlayMetadata() {
+        const overlay = this._currentOverlay.value;
+        if (!overlay)
+            return '';
+        switch (overlay.type) {
+            case OverlayType.WinningBet:
+                return (overlay.winningBet?.notificationText ??
+                    'Click OK to view your winning bets.');
+            case OverlayType.FantasyPlayerEvent:
+                return overlay.fantasy?.metadata ?? 'New Player Activity';
+            default:
+                return '';
+        }
+    }
+    showOverlay(overlayEvent) {
+        // If an overlay is already visible, queue this one
+        if (this._isVisible.value) {
+            const currentQueue = this._overlayQueue.value;
+            this._overlayQueue.value = [...currentQueue, overlayEvent];
+            return;
+        }
+        // Show the overlay
+        this._currentOverlay.value = overlayEvent;
+        this._isVisible.value = true;
+        this._hasTrackedView.value = false;
+        this._autoDismiss.value = true;
+        // Set up auto-dismiss
+        this.setupAutoDismiss();
+    }
+    hideOverlay() {
+        // Clear auto-dismiss timeout
+        if (this.autoDismissTimeout) {
+            clearTimeout(this.autoDismissTimeout);
+            this.autoDismissTimeout = null;
+        }
+        // Check if there are queued overlays
+        const queue = this._overlayQueue.value;
+        if (queue.length > 0) {
+            // Show next overlay in queue
+            const nextOverlay = queue[0];
+            const remainingQueue = queue.slice(1);
+            this._overlayQueue.value = remainingQueue;
+            this._currentOverlay.value = nextOverlay;
+            this._hasTrackedView.value = false;
+            this._autoDismiss.value = true; // Reset auto-dismiss for queued overlay
+            // Keep _isVisible as true since we're showing another overlay
+            // Set up auto-dismiss for next overlay
+            this.setupAutoDismiss();
+        }
+        else {
+            // No more overlays, hide completely
+            this._isVisible.value = false;
+            this._currentOverlay.value = null;
+        }
+    }
+    handleOverlayClick() {
+        const overlay = this._currentOverlay.value;
+        if (!overlay)
+            return;
+        // Track click event
+        this.trackOverlayClicked();
+        // Handle overlay-specific actions
+        switch (overlay.type) {
+            case OverlayType.WinningBet:
+                this._autoDismiss.value = false;
+                // TODO: Navigate to bets panel and deep link to specific bet
+                break;
+            case OverlayType.FantasyPlayerEvent:
+                // Fantasy overlay handled
+                break;
+        }
+        // Hide current overlay
+        this.hideOverlay();
+    }
+    trackOverlayViewed() {
+        if (this._hasTrackedView.value)
+            return;
+        const overlay = this._currentOverlay.value;
+        if (!overlay)
+            return;
+        this._hasTrackedView.value = true;
+        const event = {
+            eventName: 'overlayViewed',
+            attributes: {
+                template: 'espn_bet',
+                templateId: '',
+                instanceName: this.overlayTitle,
+                instanceId: this.getInstanceId(overlay),
+                fullscreen: false,
+                overlayType: overlay.type,
+            },
+        };
+        this.analyticsService.track(event);
+    }
+    trackOverlayClicked() {
+        const overlay = this._currentOverlay.value;
+        if (!overlay)
+            return;
+        const event = {
+            eventName: 'overlayClicked',
+            attributes: {
+                template: 'espn_bet',
+                templateId: '',
+                instanceName: this.overlayTitle,
+                instanceId: this.getInstanceId(overlay),
+                fullscreen: false,
+                overlayType: overlay.type,
+            },
+        };
+        this.analyticsService.track(event);
+    }
+    handleOverlayViewed(_overlayType) {
+        // Track that the overlay was viewed
+        this.trackOverlayViewed();
+    }
+    handleOverlayAction(_overlayType) {
+        // Track that the overlay was clicked/actioned
+        this.trackOverlayClicked();
+    }
+    cleanup() {
+        if (this.autoDismissTimeout) {
+            clearTimeout(this.autoDismissTimeout);
+            this.autoDismissTimeout = null;
+        }
+    }
+    setupAutoDismiss() {
+        if (this.autoDismissTimeout) {
+            clearTimeout(this.autoDismissTimeout);
+        }
+        this.autoDismissTimeout = setTimeout(() => {
+            if (this._autoDismiss.value) {
+                this.hideOverlay();
+            }
+        }, AUTO_DISMISS_TIMEOUT);
+    }
+    getInstanceId(overlay) {
+        switch (overlay.type) {
+            case OverlayType.WinningBet:
+                return overlay.winningBet?.serverID ?? '';
+            case OverlayType.FantasyPlayerEvent:
+                return overlay.fantasy?.athleteId ?? '';
+            default:
+                return '';
+        }
+    }
+}

package/dist/src/view-models/PanelManagerViewModel.js

@@ -0,0 +1,212 @@
+import { Observable } from '../helpers/Observable';
+import { MaestroPanelType } from '../models/IPanel';
+import { UserSettingsManager } from '../services/UserSettingsManager';
+import SDK from '../index';
+export class PanelManagerViewModel {
+    getAvailablePanelsFromConfig() {
+        const config = SDK.getPageConfig();
+        if (config && Array.isArray(config.panels) && config.panels.length > 0) {
+            // Map config.panel types to MaestroPanelType, filter out unknowns
+            return config.panels
+                .filter((p) => p.renderer?.supported_platforms?.bbd !== false)
+                .map((panel) => {
+                switch (panel.panel_type) {
+                    case 'espnKeyPlays':
+                        return {
+                            type: MaestroPanelType.KEY_PLAYS,
+                            title: panel.panel_name,
+                        };
+                    case 'espnBet':
+                        return {
+                            type: MaestroPanelType.BETS,
+                            title: panel.panel_name,
+                        };
+                    case 'espnStats':
+                        return {
+                            type: MaestroPanelType.STATS,
+                            title: panel.panel_name,
+                        };
+                    case 'espnFantasy':
+                        return {
+                            type: MaestroPanelType.FANTASY,
+                            title: panel.panel_name,
+                        };
+                    case 'espnShop':
+                        return {
+                            type: MaestroPanelType.SHOP,
+                            title: panel.panel_name,
+                        };
+                    default:
+                        return null;
+                }
+            })
+                .filter((panelType) => panelType !== null);
+        }
+        return this.ALL_PANELS;
+    }
+    constructor() {
+        Object.defineProperty(this, "_panels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "_currentPanel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(null)
+        });
+        Object.defineProperty(this, "settingsManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "settingsUnsubscribe", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        // All available panels (before filtering)
+        Object.defineProperty(this, "ALL_PANELS", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: [
+                {
+                    type: MaestroPanelType.KEY_PLAYS,
+                    title: 'Key Plays',
+                },
+                {
+                    type: MaestroPanelType.BETS,
+                    title: 'Bets',
+                },
+                {
+                    type: MaestroPanelType.STATS,
+                    title: 'Stats',
+                },
+                {
+                    type: MaestroPanelType.FANTASY,
+                    title: 'Fantasy',
+                },
+                {
+                    type: MaestroPanelType.SHOP,
+                    title: 'Shop',
+                },
+            ]
+        });
+        this.settingsManager = UserSettingsManager.getInstance();
+        this.initializePanels();
+        this.subscribeToSettingsChanges();
+    }
+    /**
+     * Initialize panels based on current settings
+     */
+    initializePanels() {
+        const filteredPanels = this.filterPanels();
+        this._panels.value = filteredPanels;
+        this.updateActivePanel();
+    }
+    /**
+     * Subscribe to settings changes to update panels dynamically
+     */
+    subscribeToSettingsChanges() {
+        this.settingsUnsubscribe = this.settingsManager.settings.subscribe(() => {
+            this.updatePanelsBasedOnSettings();
+        });
+    }
+    /**
+     * Filter panels based on user settings and page config
+     */
+    filterPanels() {
+        const availablePanels = this.getAvailablePanelsFromConfig();
+        return availablePanels.filter((panel) => {
+            return !this.settingsManager.isPanelHidden(panel.type);
+        });
+    }
+    updateActivePanel() {
+        if (!this.currentPanel && this.panels[0]) {
+            this.currentPanel = this.panels[0].type;
+        }
+        // If current panel is now hidden, switch to first visible panel
+        if (this.panels.length > 0 &&
+            this._currentPanel.value &&
+            !this.panels.find((p) => p.type === this._currentPanel.value)) {
+            this._currentPanel.value = this.panels[0].type;
+        }
+    }
+    /**
+     * Update panels when settings change
+     */
+    updatePanelsBasedOnSettings() {
+        const filteredPanels = this.filterPanels();
+        this._panels.value = filteredPanels;
+        this.updateActivePanel();
+    }
+    /**
+     * Cleanup subscriptions
+     */
+    cleanup() {
+        if (this.settingsUnsubscribe) {
+            this.settingsUnsubscribe();
+            this.settingsUnsubscribe = null;
+        }
+    }
+    // Getter for panels
+    get panels() {
+        return this._panels.value;
+    }
+    // Getter for panels observable
+    get panelsObservable() {
+        return this._panels;
+    }
+    // Getter for currentPanel
+    get currentPanel() {
+        return this._currentPanel.value;
+    }
+    // Setter for currentPanel
+    set currentPanel(value) {
+        this._currentPanel.value = value;
+    }
+    // Getter for currentPanel as Observable
+    get currentPanelObservable() {
+        return this._currentPanel;
+    }
+    setActivePanel(panelType) {
+        if (panelType === this.currentPanel ||
+            this.panels.find((p) => p.type === panelType) === undefined) {
+            return;
+        }
+        this.currentPanel = panelType;
+        this.updateActivePanel();
+    }
+    // Get the index of a specific panel type
+    getIndex(forPanelType) {
+        const index = this.panels.findIndex((p) => p.type === forPanelType);
+        return index !== -1 ? index : null;
+    }
+    // Get the panel type at a specific index
+    getPanelType(atIndex) {
+        return this.panels[atIndex]?.type || null;
+    }
+    // Computed property for panel to the left
+    get panelTypeToLeft() {
+        if (!this.currentPanel)
+            return null;
+        const currentIndex = this.getIndex(this.currentPanel);
+        if (currentIndex === null || currentIndex === 0)
+            return null;
+        return this.getPanelType(currentIndex - 1);
+    }
+    // Computed property for panel to the right
+    get panelTypeToRight() {
+        if (!this.currentPanel)
+            return null;
+        const currentIndex = this.getIndex(this.currentPanel);
+        if (currentIndex === null || currentIndex === this.panels.length - 1)
+            return null;
+        return this.getPanelType(currentIndex + 1);
+    }
+}

package/dist/src/view-models/ViewModel.js

@@ -0,0 +1,32 @@
+import { Observable } from '../helpers/Observable';
+/**
+ * Base view model that implements reactive properties
+ */
+export class ViewModel {
+    constructor() {
+        Object.defineProperty(this, "_isLoading", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "_error", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(null)
+        });
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get error() {
+        return this._error;
+    }
+    setLoading(loading) {
+        this._isLoading.value = loading;
+    }
+    setError(error) {
+        this._error.value = error;
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maestro_io/maestro-web-sdk",
   "private": false,
-  "version": "3.3.1",
+  "version": "4.0.0-beta.2",
   "type": "commonjs",
   "license": "MIT",
   "main": "dist/maestro-web-sdk.umd.js",