@maestro_io/maestro-web-sdk 5.0.0 → 5.1.0

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

@@ -0,0 +1,94 @@
+import IMaestroEventDelegate from '../interfaces/IMaestroEventDelegate';
+import IMaestroEvent from '../interfaces/IMaestroEvent';
+import { Observable } from '../helpers/Observable';
+import { ViewModel } from './ViewModel';
+import SpatialNavigation from '@/external/spatial-navigation/spatialNavigation';
+import IMaestroKeyPlaysResponse from '../modules/espn/key-plays/interfaces/IKeyPlaysResponse';
+import { MaestroPanelType } from '@/models/IPanel';
+import { IUserSettings } from '../interfaces/IUserSettings';
+import { PanelManagerViewModel } from './PanelManagerViewModel';
+import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
+import { IKeyPlaysViewModel } from '../modules/espn/key-plays/interfaces/IKeyPlaysViewModel';
+import { IBetsViewModel } from '../modules/espn/bets/interfaces/IBetsViewModel';
+import { IStatsViewModel } from '../modules/espn/stats/interfaces/IStatsViewModel';
+import { IFantasyViewModel } from '@/modules/espn/fantasy/types';
+import { IShopViewModel } from '@/modules/espn/shop/types';
+import { BuilderPanelViewModel } from '@/modules/maestro/builder/view-model/BuilderPanelViewModel';
+export declare class MaestroEventViewModel extends ViewModel implements IMaestroEvent {
+    private _eventId;
+    private _pageId;
+    private _title;
+    private _isLive;
+    private _isShowingPanel;
+    private playerTimeCode;
+    private analyticsService;
+    delegate: IMaestroEventDelegate;
+    keyPlaysViewModel: IKeyPlaysViewModel | null;
+    fantasyViewModel: IFantasyViewModel | null;
+    betsViewModel: IBetsViewModel | null;
+    statsViewModel: IStatsViewModel | null;
+    shopViewModel: IShopViewModel | null;
+    builderPanelViewModel: BuilderPanelViewModel | null;
+    panelManagerViewModel: PanelManagerViewModel;
+    navigation: SpatialNavigation;
+    constructor(eventId: string | undefined, pageId: string | undefined, delegate: IMaestroEventDelegate, analyticsService: AnalyticsService);
+    /**
+     * Initializes view models for enabled panels using dynamic imports (code splitting).
+     *
+     * This method lazily loads view model modules based on the page configuration,
+     * reducing initial bundle size by only loading modules for panels that are enabled.
+     *
+     * @remarks
+     * - Must be called after SDK configuration and before interacting with any view models
+     * - Typically invoked during `userDidStartWatchingEvent()` flow
+     * - Each view model is loaded in parallel for optimal performance
+     *
+     * @remarks Error Handling
+     * - Individual view model loading failures are caught and logged as warnings
+     * - Failed view models remain `null`, allowing other panels to function normally
+     * - The method resolves successfully even if some view models fail to load
+     * - Callers should check for `null` before using any view model property
+     *
+     * @example
+     * ```typescript
+     * await maestroEventViewModel.initViewModels();
+     * // Check if view model loaded before use
+     * if (maestroEventViewModel.betsViewModel) {
+     *   maestroEventViewModel.betsViewModel.startPolling();
+     * }
+     * ```
+     *
+     * @returns Promise that resolves when all view model loading attempts complete
+     */
+    initViewModels(): Promise<void>;
+    setActivePanel(panelType: MaestroPanelType): void;
+    updatePlayerTimeCode(timestamp: number): void;
+    getPlayerTimeCode(): number | null;
+    setDataToPanel(panelData: Record<string, any>): void;
+    deinit(): Promise<void>;
+    updateKeyPlaysData(data: IMaestroKeyPlaysResponse | null): Promise<void>;
+    updateUserSettings(settings: IUserSettings): Promise<void>;
+    startFocusManagement(): Promise<void>;
+    didStartPlayingClip(index: number): void;
+    didStopPlayingClip(index: number): void;
+    didFailToPlayClip(index: number): void;
+    didUpdatePlaybackProgressOfClip(index: number, to: number): void;
+    didShowPanel(): Promise<void>;
+    didHidePanel(): Promise<void>;
+    currentEventDoesNotSupportKeyPlays(): void;
+    getCurrentEventID(): string;
+    getCurrentlyPlayingClipIndex(): number | null;
+    getLastPlayedClipIndex(): number | null;
+    getCurrentClipPlaybackProgress(): number | null;
+    getKeyPlaysCount(): number;
+    get eventId(): Observable<string>;
+    get title(): Observable<string>;
+    get isLive(): Observable<boolean>;
+    get isShowingPanel(): boolean;
+    set isShowingPanel(value: boolean);
+    /**
+     * This method is called when the user navigates to the MaestroEventViewModel.
+     * It will pause navigation and start focus management.
+     */
+    deliverFocus(): void;
+}

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

@@ -0,0 +1,370 @@
+import { Observable } from '../helpers/Observable';
+import { ViewModel } from './ViewModel';
+import SpatialNavigation from '@/external/spatial-navigation/spatialNavigation';
+import { UserSettingsManager } from '../services/UserSettingsManager';
+import { PanelManagerViewModel } from './PanelManagerViewModel';
+import SDK from '..';
+import StaticService from '@/services/StaticService';
+export class MaestroEventViewModel extends ViewModel {
+    constructor(eventId = '', pageId = '', delegate, analyticsService) {
+        super();
+        Object.defineProperty(this, "_eventId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('')
+        });
+        Object.defineProperty(this, "_pageId", {
+            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, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "delegate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "keyPlaysViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "fantasyViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "betsViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "statsViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "shopViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "builderPanelViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        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._pageId.value = pageId;
+        this._eventId.value = eventId;
+        this.delegate = delegate;
+        this.analyticsService = analyticsService;
+        this.panelManagerViewModel = new PanelManagerViewModel();
+        this.navigation = new SpatialNavigation();
+    }
+    /**
+     * Initializes view models for enabled panels using dynamic imports (code splitting).
+     *
+     * This method lazily loads view model modules based on the page configuration,
+     * reducing initial bundle size by only loading modules for panels that are enabled.
+     *
+     * @remarks
+     * - Must be called after SDK configuration and before interacting with any view models
+     * - Typically invoked during `userDidStartWatchingEvent()` flow
+     * - Each view model is loaded in parallel for optimal performance
+     *
+     * @remarks Error Handling
+     * - Individual view model loading failures are caught and logged as warnings
+     * - Failed view models remain `null`, allowing other panels to function normally
+     * - The method resolves successfully even if some view models fail to load
+     * - Callers should check for `null` before using any view model property
+     *
+     * @example
+     * ```typescript
+     * await maestroEventViewModel.initViewModels();
+     * // Check if view model loaded before use
+     * if (maestroEventViewModel.betsViewModel) {
+     *   maestroEventViewModel.betsViewModel.startPolling();
+     * }
+     * ```
+     *
+     * @returns Promise that resolves when all view model loading attempts complete
+     */
+    async initViewModels() {
+        const pageConfig = SDK.getPageConfig();
+        const loadPromises = [];
+        if (StaticService.isPanelAvailable(pageConfig, 'espnKeyPlays')) {
+            loadPromises.push(import('../modules/espn/key-plays/view-model/KeyPlaysViewModel')
+                .then(({ default: KeyPlaysViewModel }) => {
+                this.keyPlaysViewModel = new KeyPlaysViewModel(this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load KeyPlaysViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'espnBet')) {
+            loadPromises.push(import('../modules/espn/bets/view-model/BetsViewModel')
+                .then(({ default: BetsViewModel }) => {
+                this.betsViewModel = new BetsViewModel(this._eventId.value, this.delegate, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load BetsViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'espnStats')) {
+            loadPromises.push(import('../modules/espn/stats/view-model/StatsViewModel')
+                .then(({ default: StatsViewModel }) => {
+                this.statsViewModel = new StatsViewModel(this._eventId.value, this.delegate, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load StatsViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'espnFantasy')) {
+            loadPromises.push(import('@/modules/espn/fantasy/view-model/FantasyViewModel')
+                .then(({ default: FantasyViewModel }) => {
+                this.fantasyViewModel = new FantasyViewModel(this._eventId.value, this.delegate, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load FantasyViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'espnShop')) {
+            loadPromises.push(import('@/modules/espn/shop/view-model/ShopViewModel')
+                .then(({ default: ShopViewModel }) => {
+                this.shopViewModel = new ShopViewModel(this._eventId.value, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load ShopViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'builderBlockPanel')) {
+            const builderPanel = pageConfig?.panels?.find((p) => p.panel_type === 'builderBlockPanel');
+            if (builderPanel) {
+                loadPromises.push(import('@/modules/maestro/builder/view-model/BuilderPanelViewModel')
+                    .then(({ BuilderPanelViewModel }) => {
+                    this.builderPanelViewModel = new BuilderPanelViewModel(builderPanel, this.analyticsService);
+                })
+                    .catch((err) => {
+                    console.warn('Failed to load BuilderPanelViewModel:', err);
+                }));
+            }
+        }
+        await Promise.all(loadPromises);
+    }
+    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,
+            builderBlockPanel: this.builderPanelViewModel,
+            foxKeyPlays: null,
+            foxMultiview: null,
+            foxStats: null,
+            helloWorld: null,
+        };
+        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 (viewModel.setDataToPanel) {
+                    viewModel.setDataToPanel(data);
+                }
+            }
+        }
+    }
+    async deinit() {
+        this.betsViewModel?.cleanup();
+        this.statsViewModel?.cleanup();
+        this.fantasyViewModel?.cleanup();
+        this.shopViewModel?.cleanup();
+        this.builderPanelViewModel?.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;
+    }
+    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;
+    }
+    /**
+     * 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/PanelManagerViewModel.d.ts

@@ -0,0 +1,49 @@
+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 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;
+    /**
+     * @returns Array of PanelInfo for panels defined in config but not listed in MaestroPanelType
+     */
+    getUnlistedPanels(): PanelInfo[];
+}