@maestro_io/maestro-web-sdk 4.0.0 → 4.0.2

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

@@ -0,0 +1,304 @@
+import { Observable } from '../helpers/Observable';
+import { ViewModel } from './ViewModel';
+import KeyPlaysViewModel from '../modules/key-plays/view-model/KeyPlaysViewModel';
+import BetsViewModel from '../modules/bets/view-model/BetsViewModel';
+import SpatialNavigation from '@/external/spatial-navigation/spatialNavigation';
+import StatsViewModel from '../modules/stats/view-model/StatsViewModel';
+import { UserSettingsManager } from '../services/UserSettingsManager';
+import { PanelManagerViewModel } from './PanelManagerViewModel';
+import SDK from '..';
+import StaticService from '@/services/StaticService';
+import FantasyViewModel from '@/modules/fantasy/view-model/FantasyViewModel';
+import ShopViewModel from '@/modules/shop/view-model/ShopViewModel';
+export class MaestroEventViewModel extends ViewModel {
+    constructor(eventId = '', delegate) {
+        super();
+        Object.defineProperty(this, "_eventId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('')
+        });
+        Object.defineProperty(this, "_title", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('')
+        });
+        Object.defineProperty(this, "_isLive", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "_isShowingPanel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "playerTimeCode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "delegate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "keyPlaysViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fantasyViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "betsViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "statsViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "shopViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "panelManagerViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "navigation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._eventId.value = eventId;
+        this.delegate = delegate;
+        const pageConfig = SDK.getPageConfig();
+        // Conditionally instantiate view models based on page configuration
+        this.keyPlaysViewModel = StaticService.isPanelAvailable(pageConfig, 'espnKeyPlays')
+            ? new KeyPlaysViewModel()
+            : null;
+        this.betsViewModel = StaticService.isPanelAvailable(pageConfig, 'espnBet')
+            ? new BetsViewModel(eventId, delegate)
+            : null;
+        this.statsViewModel = StaticService.isPanelAvailable(pageConfig, 'espnStats')
+            ? new StatsViewModel(eventId, delegate)
+            : null;
+        this.fantasyViewModel = StaticService.isPanelAvailable(pageConfig, 'espnFantasy')
+            ? new FantasyViewModel(eventId, delegate)
+            : null;
+        this.shopViewModel = StaticService.isPanelAvailable(pageConfig, 'espnShop')
+            ? new ShopViewModel(eventId)
+            : null;
+        this.panelManagerViewModel = new PanelManagerViewModel();
+        this.navigation = new SpatialNavigation();
+    }
+    setActivePanel(panelType) {
+        const index = this.panelManagerViewModel.getIndex(panelType);
+        if (index === null) {
+            console.warn(`Panel type "${panelType}" not found.`);
+            return;
+        }
+        if (!this.navigation.paused) {
+            console.warn('Cannot set active panel while navigation is not paused. Doing so will cause focus issues.');
+            return;
+        }
+        this.panelManagerViewModel.setActivePanel(panelType);
+        this.navigation.focusKey = `PANEL_NAV_BUTTON_${index}`;
+    }
+    updatePlayerTimeCode(timestamp) {
+        const timestampDate = new Date(timestamp);
+        if (isNaN(timestampDate.getTime())) {
+            console.warn('Invalid timestamp provided:', timestamp);
+            console.warn('Make sure the timestamp is a valid number. \nhttps://developers.maestro.io/sdk/web/maestro-event-interface/state/updatePlayerTimeCode');
+            return;
+        }
+        this.playerTimeCode = timestamp;
+        this.keyPlaysViewModel?.onUpdatePlayerTimeCode(this.playerTimeCode);
+        this.statsViewModel?.onUpdatePlayerTimeCode(this.playerTimeCode);
+    }
+    getPlayerTimeCode() {
+        return this.playerTimeCode;
+    }
+    setDataToPanel(panelData) {
+        const panelTypes = Object.keys(panelData);
+        // Map panel types to view model instances
+        const viewModels = {
+            espnStats: this.statsViewModel,
+            espnBet: this.betsViewModel,
+            espnKeyPlays: this.keyPlaysViewModel,
+            espnFantasy: this.fantasyViewModel,
+            espnShop: this.shopViewModel,
+        };
+        for (const panelType of panelTypes) {
+            const data = panelData[panelType];
+            if (!data)
+                continue;
+            const viewModel = viewModels[panelType];
+            if (!viewModel) {
+                // Panel is not initialized, so we ignore the data
+                console.log(`[setDataToPanel] Panel '${panelType}' not initialized/supported. Data ignored.`);
+            }
+            else {
+                // Panel exists, call its setDataToPanel method
+                if (panelType === 'espnStats' && viewModel.setDataToPanel) {
+                    viewModel.setDataToPanel(data);
+                }
+            }
+        }
+    }
+    async deinit() {
+        this.betsViewModel?.cleanup();
+        this.statsViewModel?.cleanup();
+        this.fantasyViewModel?.cleanup();
+        this.shopViewModel?.cleanup();
+        this.navigation.destroy();
+        try {
+            await this.didHidePanel();
+        }
+        catch (error) {
+            console.error('Error during didHidePanel in deinit:', error);
+        }
+    }
+    updateKeyPlaysData(data) {
+        if (!this.keyPlaysViewModel) {
+            return Promise.resolve();
+        }
+        return this.keyPlaysViewModel.setKeyPlays(data, this.playerTimeCode);
+    }
+    updateUserSettings(settings) {
+        return new Promise((resolve) => {
+            UserSettingsManager.getInstance().updateSettings(settings);
+            resolve();
+        });
+    }
+    startFocusManagement() {
+        this.navigation.setCurrentFocusedKey(this.navigation.focusKey || 'PANEL_NAV_BUTTON_0', {});
+        setTimeout(() => {
+            this.navigation.resume();
+        }, 0);
+        return Promise.resolve();
+    }
+    didStartPlayingClip(index) {
+        if (!this.keyPlaysViewModel)
+            return;
+        this.keyPlaysViewModel.lastPlayedClipIndex.value = index;
+        this.keyPlaysViewModel.currentClipPlaybackProgress.value = 0;
+        this.keyPlaysViewModel.currentlyPlayingClipIndex.value = index;
+        this.keyPlaysViewModel.clearLoadFailureStatus(index);
+    }
+    didStopPlayingClip(index) {
+        if (!this.keyPlaysViewModel)
+            return;
+        this.keyPlaysViewModel.lastPlayedClipIndex.value = index;
+        this.keyPlaysViewModel.currentlyPlayingClipIndex.value = null;
+        this.keyPlaysViewModel.currentClipPlaybackProgress.value = null;
+    }
+    didFailToPlayClip(index) {
+        this.keyPlaysViewModel?.handleKeyPlayLoadFailure(index);
+    }
+    didUpdatePlaybackProgressOfClip(index, to) {
+        if (!this.keyPlaysViewModel)
+            return;
+        this.keyPlaysViewModel.currentClipPlaybackProgress.value = to;
+        this.keyPlaysViewModel.clearLoadFailureStatus(index);
+    }
+    async didShowPanel() {
+        this.isShowingPanel = true;
+    }
+    async didHidePanel() {
+        this.isShowingPanel = false;
+        this.navigation.focusKey = null;
+    }
+    didShowOverlay() {
+        throw new Error('Method not implemented.');
+    }
+    didHideOverlay() {
+        throw new Error('Method not implemented.');
+    }
+    currentEventDoesNotSupportKeyPlays() {
+        if (this.keyPlaysViewModel) {
+            this.keyPlaysViewModel.errorState.value = 'unsupportedEvent';
+        }
+    }
+    getCurrentEventID() {
+        return this.eventId.value;
+    }
+    getCurrentlyPlayingClipIndex() {
+        return this.keyPlaysViewModel?.currentlyPlayingClipIndex.value ?? null;
+    }
+    getLastPlayedClipIndex() {
+        return this.keyPlaysViewModel?.lastPlayedClipIndex.value ?? null;
+    }
+    getCurrentClipPlaybackProgress() {
+        return this.keyPlaysViewModel?.currentClipPlaybackProgress.value ?? null;
+    }
+    getKeyPlaysCount() {
+        return this.keyPlaysViewModel?.allItems.length ?? 0;
+    }
+    get eventId() {
+        return this._eventId;
+    }
+    get title() {
+        return this._title;
+    }
+    get isLive() {
+        return this._isLive;
+    }
+    get isShowingPanel() {
+        return this._isShowingPanel.value;
+    }
+    set isShowingPanel(value) {
+        this._isShowingPanel.value = value;
+    }
+    simulateUseCase(useCase, panelType, testData) {
+        switch (panelType) {
+            case 'bets':
+                if (this.betsViewModel) {
+                    this.betsViewModel.simulateUseCase(useCase, testData);
+                }
+                else {
+                    console.warn('BetsViewModel is not initialized');
+                }
+                break;
+            case 'stats':
+                if (this.statsViewModel) {
+                    this.statsViewModel.simulateUseCase(useCase, testData);
+                }
+                else {
+                    console.warn('StatsViewModel is not initialized');
+                }
+                break;
+            default:
+                throw new Error(`Unsupported panel type: ${panelType}`);
+        }
+    }
+    /**
+     * This method is called when the user navigates to the MaestroEventViewModel.
+     * It will pause navigation and start focus management.
+     */
+    deliverFocus() {
+        this.navigation.pause();
+        this.delegate.startFocusManagement();
+    }
+}

package/dist/src/view-models/OverlayViewModel.d.ts

@@ -0,0 +1,33 @@
+import { Observable } from '../helpers/Observable';
+import { ViewModel } from './ViewModel';
+import { IMaestroOverlayEvent, IOverlayAnalyticsEvent } from '../types/OverlayTypes';
+interface IAnalyticsService {
+    track: (event: IOverlayAnalyticsEvent) => void;
+}
+export declare class OverlayViewModel extends ViewModel {
+    private _isVisible;
+    private _currentOverlay;
+    private _autoDismiss;
+    private _overlayQueue;
+    private _hasTrackedView;
+    private autoDismissTimeout;
+    private analyticsService;
+    constructor(analyticsService: IAnalyticsService);
+    get isVisible(): Observable<boolean>;
+    get currentOverlay(): Observable<IMaestroOverlayEvent | null>;
+    get autoDismiss(): Observable<boolean>;
+    get overlayQueue(): Observable<IMaestroOverlayEvent[]>;
+    get overlayTitle(): string;
+    get overlayMetadata(): string;
+    showOverlay(overlayEvent: IMaestroOverlayEvent): void;
+    hideOverlay(): void;
+    handleOverlayClick(): void;
+    trackOverlayViewed(): void;
+    trackOverlayClicked(): void;
+    handleOverlayViewed(_overlayType: string): void;
+    handleOverlayAction(_overlayType: string): void;
+    cleanup(): void;
+    private setupAutoDismiss;
+    private getInstanceId;
+}
+export {};

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.d.ts

@@ -0,0 +1,46 @@
+import { Observable } from '../helpers/Observable';
+import { MaestroPanelType } from '../models/IPanel';
+export type PanelInfo = {
+    type: MaestroPanelType;
+    title: string;
+};
+export declare class PanelManagerViewModel {
+    private _panels;
+    private _currentPanel;
+    private settingsManager;
+    private settingsUnsubscribe;
+    private readonly ALL_PANELS;
+    private getAvailablePanelsFromConfig;
+    constructor();
+    /**
+     * Initialize panels based on current settings
+     */
+    private initializePanels;
+    /**
+     * Subscribe to settings changes to update panels dynamically
+     */
+    private subscribeToSettingsChanges;
+    /**
+     * Filter panels based on user settings and page config
+     */
+    private filterPanels;
+    private updateActivePanel;
+    /**
+     * Update panels when settings change
+     */
+    private updatePanelsBasedOnSettings;
+    /**
+     * Cleanup subscriptions
+     */
+    cleanup(): void;
+    get panels(): PanelInfo[];
+    get panelsObservable(): Observable<PanelInfo[]>;
+    get currentPanel(): MaestroPanelType | null;
+    set currentPanel(value: MaestroPanelType | null);
+    get currentPanelObservable(): Observable<MaestroPanelType | null>;
+    setActivePanel(panelType: MaestroPanelType): void;
+    getIndex(forPanelType: MaestroPanelType): number | null;
+    getPanelType(atIndex: number): MaestroPanelType | null;
+    get panelTypeToLeft(): MaestroPanelType | null;
+    get panelTypeToRight(): MaestroPanelType | null;
+}