@maestro_io/maestro-web-sdk 5.1.2 → 5.2.1

package/dist/src/modules/fox/multi-view/view-model/MultiViewViewModel.js

@@ -0,0 +1,509 @@
+import { ViewModel } from '@/view-models/ViewModel';
+import { Observable } from '@/helpers/Observable';
+import { stringHashCode } from '@/helpers/strings';
+import { DEFAULT_LAYOUTS_BY_LISTINGS_QUANTITY, } from '../types';
+import MultiViewService, { isProductAPIValid, } from '../services/MultiViewService';
+import { AuthError } from '@/services/NetworkManager/errors';
+import { captureException } from '@/sentry';
+import SDK from '@/index';
+const DEFAULT_POLLING_INTERVAL = 30000;
+export class MultiViewViewModel extends ViewModel {
+    constructor(eventId, delegate, analyticsService) {
+        super();
+        Object.defineProperty(this, "_layouts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "_isPolling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "service", {
+            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, "eventId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isDataLoading", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "pollingTask", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pollingInterval", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_POLLING_INTERVAL
+        });
+        Object.defineProperty(this, "items", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "hasEverSuccessfullyLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "onAuthError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_selectedLayoutId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(null)
+        });
+        Object.defineProperty(this, "lastResponseHash", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.eventId = eventId;
+        this.delegate = delegate;
+        this.analyticsService = analyticsService;
+        this.service = new MultiViewService();
+    }
+    getLayouts() {
+        return this._layouts.value;
+    }
+    getIsPolling() {
+        return this._isPolling;
+    }
+    getIsDataLoading() {
+        return this.isDataLoading;
+    }
+    getEventId() {
+        return this.eventId;
+    }
+    updateBuildYourOwnItem(updater) {
+        this.items.value = this.items.value.map((i) => i.type === 'build-your-own' ? updater(i) : i);
+    }
+    calculateElapsedTime(startTime) {
+        const elapsedMinutes = Math.floor((Date.now() - new Date(startTime).getTime()) / 60000);
+        if (elapsedMinutes < 0)
+            return '';
+        return `${elapsedMinutes}'`;
+    }
+    buildStreamsFromItems(items) {
+        return items
+            .filter((item) => item.is_multiview_eligible === true)
+            .map((item) => {
+            const cameras = [
+                {
+                    id: item.entity_id || '',
+                    name: 'Main Broadcast',
+                    isActive: true,
+                },
+            ];
+            if (item.associated_listings &&
+                Array.isArray(item.associated_listings)) {
+                for (const al of item.associated_listings) {
+                    cameras.push({
+                        id: al.entity_id || '',
+                        name: al.title || '',
+                        isActive: false,
+                    });
+                }
+            }
+            const location = item.location?.city && item.location?.state
+                ? `${item.location.city}, ${item.location.state}`
+                : undefined;
+            const currentTime = item.start_time
+                ? this.calculateElapsedTime(item.start_time)
+                : undefined;
+            return {
+                listing: {
+                    id: item.entity_id || '',
+                    description: item.title || '',
+                    backgroundImage: item.images?.series_list || '',
+                    type: item.type || 'unknown',
+                },
+                totalCameras: cameras.length,
+                activeCameraCount: cameras.filter((c) => c.isActive).length,
+                currentTime,
+                location,
+                cameras,
+            };
+        });
+    }
+    mergeStreams(existing, incoming) {
+        const existingMap = new Map(existing.map((s) => [s.listing.id, s]));
+        return incoming.map((newStream) => {
+            const prev = existingMap.get(newStream.listing.id);
+            if (!prev)
+                return newStream;
+            const prevCameraMap = new Map(prev.cameras.map((c) => [c.id, c.isActive]));
+            const cameras = newStream.cameras.map((c) => ({
+                ...c,
+                isActive: prevCameraMap.has(c.id)
+                    ? prevCameraMap.get(c.id)
+                    : c.isActive,
+            }));
+            const activeCameraCount = cameras.filter((c) => c.isActive).length;
+            return { ...newStream, cameras, activeCameraCount };
+        });
+    }
+    getLayoutsObservable() {
+        return this._layouts;
+    }
+    getSelectedLayoutId() {
+        return this._selectedLayoutId;
+    }
+    onSelectLayout(layoutId) {
+        const layout = this._layouts.value.find((l) => l.layoutId === layoutId);
+        if (!layout)
+            return;
+        this._selectedLayoutId.value = layoutId;
+    }
+    onToggleCamera(streamId, cameraId) {
+        this.updateBuildYourOwnItem((item) => ({
+            ...item,
+            streams: item.streams.map((stream) => {
+                if (stream.listing.id !== streamId)
+                    return stream;
+                const cameras = stream.cameras.map((c) => c.id === cameraId ? { ...c, isActive: !c.isActive } : c);
+                const activeCameraCount = cameras.filter((c) => c.isActive).length;
+                return { ...stream, cameras, activeCameraCount };
+            }),
+        }));
+    }
+    /**
+     * Notify client app about a Product API auth error.
+     * Uses configured callback first, and falls back to onPanelEvent.
+     */
+    notifyProductAPIUnauthorized(error) {
+        if (error.statusCode !== 401) {
+            return;
+        }
+        const payload = {
+            code: error.statusCode,
+            message: error.message || 'Not authorized',
+            success: false,
+            data: error.data,
+        };
+        if (this.onAuthError) {
+            this.onAuthError(payload);
+        }
+    }
+    async trackPanelView() {
+        try {
+            await this.analyticsService.panelView('foxMultiView');
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'MultiViewViewModel.trackPanelView',
+            });
+            console.error('[MULTIVIEW] Error tracking panel view:', error);
+        }
+    }
+    async init() {
+        try {
+            await this.trackPanelView();
+            await this.fetchLayouts();
+            const panelConfigInterval = this.getPanelConfigInterval();
+            if (panelConfigInterval) {
+                this.pollingInterval = panelConfigInterval;
+            }
+            this.refreshPolling();
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to initialize MultiView';
+            this.setError(errorMessage);
+            console.error('[MultiViewViewModel] Initialization error:', error);
+        }
+    }
+    async fetchLayouts() {
+        if (this.getLayouts().length) {
+            return;
+        }
+        try {
+            this.isDataLoading.value = true;
+            const layouts = await this.service.getLayouts();
+            if (layouts && layouts.length > 0) {
+                this._layouts.value = layouts;
+            }
+            else {
+                this._layouts.value = Object.values(DEFAULT_LAYOUTS_BY_LISTINGS_QUANTITY);
+            }
+        }
+        catch (error) {
+            console.log('[MultiViewViewModel] Error fetching layouts:', error);
+            if (error instanceof AuthError) {
+                this.notifyProductAPIUnauthorized(error);
+                return;
+            }
+            if (this._layouts.value.length === 0) {
+                this._layouts.value = Object.values(DEFAULT_LAYOUTS_BY_LISTINGS_QUANTITY);
+            }
+        }
+        finally {
+            this.isDataLoading.value = false;
+        }
+    }
+    async setDataToPanel(data) {
+        try {
+            if (isProductAPIValid(data.productAPIRequest)) {
+                this.service.setProductAPIData(data.productAPIRequest);
+                this.onAuthError = data.productAPIRequest.callback;
+                await this.fetchLayouts();
+                this.refreshPolling();
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to set panel data';
+            console.error('[MultiViewViewModel] Error setting panel data:', error);
+            if (!this.hasEverSuccessfullyLoaded.value) {
+                this.setError(errorMessage);
+            }
+        }
+    }
+    async onSelectCustomMultiview(params) {
+        try {
+            this.setLoading(true);
+            this.setError(null);
+            const response = await this.service.getOrCreateCustomMultiview(params);
+            if (this.delegate) {
+                this.delegate.onPanelEvent({
+                    type: 'fox-multiview:custom-multiview',
+                    payload: response.multiviewId,
+                });
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to select custom multiview';
+            this.setError(errorMessage);
+            console.error('[MultiViewViewModel] Error selecting multiview:', error);
+            throw error;
+        }
+        finally {
+            this.setLoading(false);
+        }
+    }
+    /**
+     * Clean up resources when the ViewModel is no longer needed
+     */
+    cleanup() {
+        this.stopPolling();
+        this.hasEverSuccessfullyLoaded.value = false;
+        this._selectedLayoutId.value = null;
+        this.lastResponseHash = null;
+    }
+    /**
+     * Called when a curated multiview is selected. Notifies the client via onPanelEvent
+     * so the app can switch the video player to the selected multiview.
+     */
+    onSelectCuratedMultiview(item) {
+        if (item.isSelected) {
+            return;
+        }
+        const layout = DEFAULT_LAYOUTS_BY_LISTINGS_QUANTITY[item.listings.length];
+        if (!layout) {
+            return;
+        }
+        const payload = {
+            childListings: item.listings.map((l, listingIndex) => ({
+                callsign: l.type,
+                listingId: l.id,
+                position: layout.positions[layout.positionsOrder[listingIndex]],
+            })),
+            multiviewID: item.id,
+        };
+        this.delegate.onPanelEvent({
+            type: 'fox-multiview:new-multiview',
+            payload,
+        });
+    }
+    /**
+     * @description Update polling interval from panel config.
+     * Refresh polling if necessary.
+     */
+    updatePollingInterval() {
+        const panelConfigInterval = this.getPanelConfigInterval();
+        if (panelConfigInterval && panelConfigInterval !== this.pollingInterval) {
+            this.pollingInterval = panelConfigInterval;
+            this.refreshPolling();
+        }
+    }
+    getPanelConfigInterval() {
+        const intervalInSeconds = SDK.getPageConfig()?.panels?.find((p) => p.panel_type === 'foxMultiView')?.renderer?.block_data?.product_api_polling_interval;
+        if (intervalInSeconds == null) {
+            return null;
+        }
+        const parsedInterval = parseInt(String(intervalInSeconds), 10);
+        if (Number.isFinite(parsedInterval) && parsedInterval > 0) {
+            return parsedInterval * 1000; // Convert seconds to milliseconds
+        }
+        return null;
+    }
+    /**
+     * Stop polling for multiview data
+     */
+    stopPolling() {
+        if (this.pollingTask) {
+            this.pollingTask.stop();
+            this.pollingTask = null;
+        }
+        if (this.isDataLoading.value) {
+            this.isDataLoading.value = false;
+        }
+    }
+    /**
+     * Refresh polling for curated multiviews
+     */
+    refreshPolling() {
+        // First stop any existing polling
+        this.stopPolling();
+        // Start the poll loop
+        this.pollingTask = this.service.pollCuratedMultiviews(this.pollingInterval, (data) => {
+            this.updatePollingInterval();
+            this.processCuratedMultiviewData(data);
+        }, (error) => {
+            console.error('[MultiViewViewModel] Error polling data:', error);
+            if (error instanceof AuthError) {
+                this.notifyProductAPIUnauthorized(error);
+            }
+            if (!this.hasEverSuccessfullyLoaded.value) {
+                this.setError(error instanceof Error ? error.message : 'Failed to load data');
+            }
+        });
+    }
+    processCuratedMultiviewData(data) {
+        if (!data || !data.status || !data.data) {
+            return;
+        }
+        if (!Array.isArray(data.data.items)) {
+            return;
+        }
+        // Calculate hash to check if data changed
+        const responseHash = stringHashCode(JSON.stringify(data));
+        if (this.lastResponseHash === responseHash) {
+            console.log('[MULTIVIEW] Response hash unchanged - skipping update');
+            return;
+        }
+        this.lastResponseHash = responseHash;
+        const curatedMultiviewItem = [];
+        for (const item of data.data.items) {
+            const listings = [];
+            if (!item.is_multiview) {
+                continue;
+            }
+            if (item.multiview_metadata && Array.isArray(item.multiview_metadata)) {
+                for (const mv of item.multiview_metadata) {
+                    let description = item.title || '';
+                    if (mv.is_sportingevent &&
+                        mv.left_team &&
+                        mv.right_team &&
+                        mv.left_team.abbreviation &&
+                        mv.right_team.abbreviation) {
+                        description = `${mv.left_team.abbreviation} vs ${mv.right_team.abbreviation}`;
+                    }
+                    listings.push({
+                        id: mv.entity_id || '',
+                        description,
+                        backgroundImage: mv.images?.series_list || '',
+                        type: mv.type || 'unknown',
+                    });
+                }
+            }
+            else {
+                listings.push({
+                    id: item.entity_id || '',
+                    description: item.title || '',
+                    backgroundImage: item.images?.still || '',
+                    type: item.type || 'unknown',
+                });
+            }
+            curatedMultiviewItem.push({
+                id: item.entity_id || '',
+                isSelected: this.eventId === item.entity_id,
+                listings,
+            });
+        }
+        const newItems = [...this.items.value];
+        const existingCuratedMultiviewIndex = newItems.findIndex((i) => i.type === 'curated-multiviews');
+        if (curatedMultiviewItem.length === 0) {
+            // No curated multiview items — remove the section if it was previously present
+            if (existingCuratedMultiviewIndex !== -1) {
+                newItems.splice(existingCuratedMultiviewIndex, 1);
+            }
+        }
+        else if (existingCuratedMultiviewIndex !== -1) {
+            newItems[existingCuratedMultiviewIndex] = {
+                type: 'curated-multiviews',
+                items: curatedMultiviewItem,
+            };
+        }
+        else {
+            newItems.unshift({
+                type: 'curated-multiviews',
+                items: curatedMultiviewItem,
+            });
+        }
+        const newStreams = this.buildStreamsFromItems(data.data.items);
+        const existingByoIndex = newItems.findIndex((i) => i.type === 'build-your-own');
+        if (existingByoIndex !== -1) {
+            const existingByo = newItems[existingByoIndex];
+            const mergedStreams = this.mergeStreams(existingByo.streams, newStreams);
+            newItems[existingByoIndex] = {
+                type: 'build-your-own',
+                streams: mergedStreams,
+            };
+        }
+        else {
+            newItems.push({ type: 'build-your-own', streams: newStreams });
+        }
+        this.items.value = newItems;
+        if (!this.hasEverSuccessfullyLoaded.value) {
+            this.hasEverSuccessfullyLoaded.value = true;
+            if (this.error.value) {
+                this.setError(null);
+            }
+        }
+    }
+    async clearTabLoadFailure() {
+        this.setError(null);
+        this.hasEverSuccessfullyLoaded.value = false;
+        await this.fetchLayouts();
+        this.refreshPolling();
+    }
+}

package/dist/src/modules/fox/multi-view/view-model/index.d.ts

@@ -0,0 +1 @@
+export { MultiViewViewModel } from './MultiViewViewModel';

package/dist/src/modules/fox/multi-view/view-model/index.js

@@ -0,0 +1 @@
+export { MultiViewViewModel } from './MultiViewViewModel';

package/dist/src/services/NetworkManager/NetworkManager.js

@@ -120,7 +120,7 @@ class NetworkManager {
             const status = error.response.status;
             const message = error.response.data?.message || error.message;
             if (status === 401 || status === 403) {
-                throw new AuthError(message);
+                throw new AuthError(status, message, error.response.data);
             }
             else if (status === 404) {
                 throw new NotFoundError(message);

package/dist/src/services/NetworkManager/errors.d.ts

@@ -2,7 +2,9 @@ export declare class NetworkError extends Error {
     constructor(message: string);
 }
 export declare class AuthError extends Error {
-    constructor(message: string);
+    statusCode: number;
+    data?: unknown;
+    constructor(statusCode: number, message: string, data?: unknown);
 }
 export declare class NotFoundError extends Error {
     constructor(message: string);

package/dist/src/services/NetworkManager/errors.js

@@ -6,9 +6,23 @@ export class NetworkError extends Error {
     }
 }
 export class AuthError extends Error {
-    constructor(message) {
+    constructor(statusCode, message, data) {
         super(message);
+        Object.defineProperty(this, "statusCode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.name = 'AuthError';
+        this.statusCode = statusCode;
+        this.data = data;
     }
 }
 export class NotFoundError extends Error {

package/dist/src/services/StaticService/StaticService.js

@@ -5,6 +5,7 @@ import NetworkManager from '../NetworkManager/NetworkManager';
 const SITE_ID_STATIC_BASE_URL_MAP = {
     '664b9c57d59a7a431542d814': 'https://static-prod.us-central1-espn-prod.gcp.maestro.io',
     '6930c214fcb9633b5484de81': 'https://static-prod.us-central1-espn-prod.gcp.maestro.io',
+    '695c05610f99e7584a1b7407': 'https://static-prod.us-central1-fox-prod.gcp.maestro.io', // fox
 };
 export default class StaticService {
     constructor(siteId) {

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

@@ -14,6 +14,7 @@ import { IStatsViewModel } from '../modules/espn/stats/interfaces/IStatsViewMode
 import { IFantasyViewModel } from '@/modules/espn/fantasy/types';
 import { IShopViewModel } from '@/modules/espn/shop/types';
 import { BuilderPanelViewModel } from '@/modules/maestro/builder/view-model/BuilderPanelViewModel';
+import { IMultiViewViewModel } from '@/modules/fox/multi-view/interfaces/IMultiViewViewModel';
 export declare class MaestroEventViewModel extends ViewModel implements IMaestroEvent {
     private _eventId;
     private _pageId;
@@ -29,6 +30,7 @@ export declare class MaestroEventViewModel extends ViewModel implements IMaestro
     statsViewModel: IStatsViewModel | null;
     shopViewModel: IShopViewModel | null;
     builderPanelViewModel: BuilderPanelViewModel | null;
+    multiViewViewModel: IMultiViewViewModel | null;
     panelManagerViewModel: PanelManagerViewModel;
     navigation: SpatialNavigation;
     constructor(eventId: string | undefined, pageId: string | undefined, delegate: IMaestroEventDelegate, analyticsService: AnalyticsService);

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

@@ -92,6 +92,12 @@ export class MaestroEventViewModel extends ViewModel {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "multiViewViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "panelManagerViewModel", {
             enumerable: true,
             configurable: true,
@@ -187,6 +193,15 @@ export class MaestroEventViewModel extends ViewModel {
                 console.warn('Failed to load ShopViewModel:', err);
             }));
         }
+        if (StaticService.isPanelAvailable(pageConfig, 'foxMultiView')) {
+            loadPromises.push(import('@/modules/fox/multi-view/view-model/MultiViewViewModel')
+                .then(({ MultiViewViewModel }) => {
+                this.multiViewViewModel = new MultiViewViewModel(this._eventId.value, this.delegate, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load MultiViewViewModel:', err);
+            }));
+        }
         if (StaticService.isPanelAvailable(pageConfig, 'builderBlockPanel')) {
             const builderPanel = pageConfig?.panels?.find((p) => p.panel_type === 'builderBlockPanel');
             if (builderPanel) {
@@ -239,7 +254,7 @@ export class MaestroEventViewModel extends ViewModel {
             espnShop: this.shopViewModel,
             builderBlockPanel: this.builderPanelViewModel,
             foxKeyPlays: null,
-            foxMultiview: null,
+            foxMultiView: this.multiViewViewModel,
             foxStats: null,
             helloWorld: null,
         };
@@ -266,6 +281,7 @@ export class MaestroEventViewModel extends ViewModel {
         this.fantasyViewModel?.cleanup();
         this.shopViewModel?.cleanup();
         this.builderPanelViewModel?.cleanup();
+        this.multiViewViewModel?.cleanup();
         this.navigation.destroy();
         try {
             await this.didHidePanel();

package/package.json

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