@maestro_io/maestro-web-sdk 5.2.0 → 5.2.1

package/dist/src/modules/fox/multi-view/view/CuratedMultiview/CuratedMultiviews.js

@@ -82,7 +82,8 @@ const CuratedMultiviews = (props) => {
         props.onSelect(item);
     };
     return (React.createElement("div", { className: "curated-multiviews", style: { maxHeight }, ref: wrapperRef, "data-scrolled": scrolled },
-        React.createElement("div", { className: "header", ref: headerRef }, "Curated Multiview"),
+        React.createElement("div", { className: "header", ref: headerRef },
+            React.createElement("div", null, "Curated Multiview")),
         props.items.map((item, index) => (React.createElement("div", { key: item.id, ref: (ref) => {
                 refsArray.current[index] = ref;
             } },

package/dist/src/modules/fox/multi-view/view/FoxMultiView.js

@@ -52,6 +52,9 @@ const FoxMultiView = () => {
             switch (item.type) {
                 case 'curated-multiviews':
                     return (React.createElement(CuratedMultiviews, { key: item.type, items: item.items, onSelect: onSelectCuratedMultiview }));
+                // Hiding this for v5.2.1
+                // case 'build-your-own':
+                //   return <BuildYourOwn key={item.type} streams={item.streams} />;
                 default:
                     return null;
             }

package/dist/src/modules/fox/multi-view/view/components/BuildYourOwnTabs/BuildYourOwnTabs.d.ts

@@ -0,0 +1,8 @@
+import './BuildYourOwnTabs.style.css';
+import { BuildYourOwnTab } from '../../../types';
+type BuildYourOwnTabsProps = {
+    activeTab: BuildYourOwnTab;
+    onSelectTab: (tab: BuildYourOwnTab) => void;
+};
+declare const BuildYourOwnTabs: (props: BuildYourOwnTabsProps) => JSX.Element;
+export default BuildYourOwnTabs;

package/dist/src/modules/fox/multi-view/view/components/BuildYourOwnTabs/BuildYourOwnTabs.js

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import './BuildYourOwnTabs.style.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { FocusableItem } from '@/components/core/ScrollableContainer';
+import SDK from '@/index';
+const TabButtonComponent = (props) => {
+    const { label, isActive, focused } = props;
+    return (React.createElement(FocusableItem, null,
+        React.createElement("div", { className: "byo-tab focus-ring", "data-focused": focused, "data-active": isActive },
+            React.createElement("span", { className: "byo-tab-label T10 FONT_BOLD" }, label))));
+};
+const TabButton = withFocusable()(TabButtonComponent);
+const TABS = [
+    { tab: 'streams', label: 'Streams' },
+    { tab: 'layouts', label: 'Layouts' },
+];
+const BuildYourOwnTabs = (props) => {
+    const { activeTab, onSelectTab } = props;
+    const onBecameFocused = useCallback((tab) => () => {
+        onSelectTab(tab);
+    }, [onSelectTab]);
+    const onArrowPress = useCallback((tab) => (d) => {
+        if (d === 'left' && tab === 'streams') {
+            SDK.getMaestroEventViewModel().deliverFocus();
+            return false;
+        }
+    }, []);
+    return (React.createElement("div", { className: "byo-tabs" }, TABS.map(({ tab, label }) => (React.createElement(TabButton, { key: tab, focusKey: `byo-tab-${tab}`, tab: tab, label: label, isActive: tab === activeTab, onEnterPress: () => onSelectTab(tab), onArrowPress: onArrowPress(tab), onBecameFocused: onBecameFocused(tab) })))));
+};
+export default BuildYourOwnTabs;

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

@@ -0,0 +1,2 @@
+import BuildYourOwnTabs from './BuildYourOwnTabs';
+export default BuildYourOwnTabs;

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

@@ -0,0 +1,2 @@
+import BuildYourOwnTabs from './BuildYourOwnTabs';
+export default BuildYourOwnTabs;

package/dist/src/modules/fox/multi-view/view/components/CustomMultiviewStreamsCard/CustomMultiviewStreamsCard.d.ts

@@ -2,12 +2,8 @@
 import React from 'react';
 import './CustomMultiviewStreamsCard.style.css';
 import { WithFocusableProps } from '@/external/spatial-navigation';
-import { CuratedMultiviewListing } from '../../../types';
-export type Camera = {
-    id: string;
-    name: string;
-    isActive: boolean;
-};
+import { CuratedMultiviewListing, Camera } from '../../../types';
+export type { Camera };
 export type CustomMultiviewStreamsCardProps = {
     /** Primary listing displayed on this card */
     listing: CuratedMultiviewListing;

package/dist/src/modules/fox/multi-view/view/components/curated-multiview-card/CuratedMultiviewCard.js

@@ -2,19 +2,39 @@ import React from 'react';
 import './CuratedMultiviewCard.style.css';
 import { withFocusable, } from '@/external/spatial-navigation';
 import Icon from '@/components/atoms/SvgIcon';
-const StreamScreen = ({ listing }) => {
-    const { backgroundImage, description } = listing;
-    return (React.createElement("div", { className: "curated-multiview-screen", style: {
-            backgroundImage: `url(${backgroundImage})`,
-        } },
-        React.createElement("span", { className: "curated-multiview-screen-title FONT_BOLD" }, description)));
+function getScreenDetails(listings) {
+    const imageLists = [];
+    const descriptionLists = [];
+    listings.forEach((listing) => {
+        if (listing.backgroundImage)
+            imageLists.push({ id: listing.id, image: listing.backgroundImage });
+        if (listing.description)
+            descriptionLists.push({
+                id: listing.id,
+                description: listing.description,
+            });
+    });
+    return {
+        imageLists,
+        descriptionLists,
+    };
+}
+const StreamScreen = ({ screenDetails }) => {
+    const { imageLists, descriptionLists } = screenDetails;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "curated-multiview-screen" },
+            React.createElement("div", null,
+                React.createElement("div", null, imageLists.map((imageList) => (React.createElement("img", { key: imageList.id, src: imageList.image, alt: imageList.id })))))),
+        React.createElement("div", { className: "curated-multiview-screen-description" }, descriptionLists.map((descriptionList) => (React.createElement("span", { key: descriptionList.id }, descriptionList.description))))));
 };
 const CuratedMultiviewCard = (props) => {
     const { listings, selected, focused } = props;
+    const screenDetails = getScreenDetails(listings);
     return (React.createElement("div", { className: "curated-multiview-card focus-ring", "data-focused": focused },
         React.createElement("div", { className: "curated-multiview-card-row" },
             React.createElement("div", { className: "curated-multiview-card-cell curated-multiview-card-cell-screens" },
-                React.createElement("div", { className: "curated-multiview-screens-container" }, listings.slice(0, 2).map((listing) => (React.createElement(StreamScreen, { key: listing.id, listing: listing }))))),
+                React.createElement("div", { className: "curated-multiview-screens-container" },
+                    React.createElement(StreamScreen, { screenDetails: screenDetails }))),
             React.createElement("div", { className: "curated-multiview-card-cell curated-multiview-card-cell-radio" },
                 React.createElement("div", { className: "curated-multiview-radio", "data-selected": selected }, selected && React.createElement(Icon, { iconName: "checkmark", width: 22.5, height: 22 }))))));
 };

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

@@ -1,6 +1,6 @@
 import { ViewModel } from '@/view-models/ViewModel';
 import { Observable } from '@/helpers/Observable';
-import { CuratedMultiviewListing, MultiViewLayout } from '../types';
+import { CuratedMultiviewListing, CustomMultiviewStream, MultiViewLayout } from '../types';
 import IMaestroEventDelegate from '@/interfaces/IMaestroEventDelegate';
 import { CuratedMultiviewResponse, MultiViewListingRequest } from '../services/MultiViewService';
 import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
@@ -13,7 +13,11 @@ export type CuratedMultiviewsItem = {
     type: 'curated-multiviews';
     items: CuratedMultiviewItem[];
 };
-export type MultiviewItem = CuratedMultiviewsItem;
+export type BuildYourOwnItem = {
+    type: 'build-your-own';
+    streams: CustomMultiviewStream[];
+};
+export type MultiviewItem = CuratedMultiviewsItem | BuildYourOwnItem;
 export declare class MultiViewViewModel extends ViewModel {
     private _layouts;
     private _isPolling;
@@ -23,14 +27,25 @@ export declare class MultiViewViewModel extends ViewModel {
     private analyticsService;
     isDataLoading: Observable<boolean>;
     private pollingTask;
-    items: Observable<CuratedMultiviewsItem[]>;
+    private pollingInterval;
+    items: Observable<MultiviewItem[]>;
     private hasEverSuccessfullyLoaded;
     private onAuthError?;
+    private _selectedLayoutId;
+    private lastResponseHash;
     constructor(eventId: string, delegate: IMaestroEventDelegate, analyticsService: AnalyticsService);
     getLayouts(): MultiViewLayout[];
     getIsPolling(): Observable<boolean>;
     getIsDataLoading(): Observable<boolean>;
     getEventId(): string;
+    private updateBuildYourOwnItem;
+    private calculateElapsedTime;
+    private buildStreamsFromItems;
+    private mergeStreams;
+    getLayoutsObservable(): Observable<MultiViewLayout[]>;
+    getSelectedLayoutId(): Observable<string | null>;
+    onSelectLayout(layoutId: string): void;
+    onToggleCamera(streamId: string, cameraId: string): void;
     /**
      * Notify client app about a Product API auth error.
      * Uses configured callback first, and falls back to onPanelEvent.
@@ -51,7 +66,13 @@ export declare class MultiViewViewModel extends ViewModel {
      */
     onSelectCuratedMultiview(item: CuratedMultiviewItem): void;
     /**
-     * Stop polling for bet data
+     * @description Update polling interval from panel config.
+     * Refresh polling if necessary.
+     */
+    private updatePollingInterval;
+    private getPanelConfigInterval;
+    /**
+     * Stop polling for multiview data
      */
     stopPolling(): void;
     /**

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

@@ -1,9 +1,12 @@
 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();
@@ -55,6 +58,12 @@ export class MultiViewViewModel extends ViewModel {
             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,
@@ -73,6 +82,18 @@ export class MultiViewViewModel extends ViewModel {
             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;
@@ -90,6 +111,98 @@ export class MultiViewViewModel extends ViewModel {
     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.
@@ -123,6 +236,10 @@ export class MultiViewViewModel extends ViewModel {
         try {
             await this.trackPanelView();
             await this.fetchLayouts();
+            const panelConfigInterval = this.getPanelConfigInterval();
+            if (panelConfigInterval) {
+                this.pollingInterval = panelConfigInterval;
+            }
             this.refreshPolling();
         }
         catch (error) {
@@ -140,9 +257,12 @@ export class MultiViewViewModel extends ViewModel {
         try {
             this.isDataLoading.value = true;
             const layouts = await this.service.getLayouts();
-            if (layouts) {
+            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);
@@ -150,9 +270,8 @@ export class MultiViewViewModel extends ViewModel {
                 this.notifyProductAPIUnauthorized(error);
                 return;
             }
-            const errorMessage = error instanceof Error ? error.message : 'Failed to fetch layouts';
-            if (!this.hasEverSuccessfullyLoaded.value) {
-                this.setError(errorMessage);
+            if (this._layouts.value.length === 0) {
+                this._layouts.value = Object.values(DEFAULT_LAYOUTS_BY_LISTINGS_QUANTITY);
             }
         }
         finally {
@@ -161,10 +280,9 @@ export class MultiViewViewModel extends ViewModel {
     }
     async setDataToPanel(data) {
         try {
-            const callback = typeof data.callback === 'function' ? data.callback : undefined;
-            if (isProductAPIValid(data)) {
-                this.onAuthError = callback;
-                this.service.setProductAPIData(data);
+            if (isProductAPIValid(data.productAPIRequest)) {
+                this.service.setProductAPIData(data.productAPIRequest);
+                this.onAuthError = data.productAPIRequest.callback;
                 await this.fetchLayouts();
                 this.refreshPolling();
             }
@@ -207,6 +325,8 @@ export class MultiViewViewModel extends ViewModel {
     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
@@ -234,7 +354,29 @@ export class MultiViewViewModel extends ViewModel {
         });
     }
     /**
-     * Stop polling for bet data
+     * @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) {
@@ -252,11 +394,17 @@ export class MultiViewViewModel extends ViewModel {
         // First stop any existing polling
         this.stopPolling();
         // Start the poll loop
-        this.pollingTask = this.service.pollCuratedMultiviews(30000, this.processCuratedMultiviewData.bind(this), (error) => {
+        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) {
@@ -266,6 +414,13 @@ export class MultiViewViewModel extends ViewModel {
         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 = [];
@@ -274,12 +429,18 @@ export class MultiViewViewModel extends ViewModel {
             }
             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: mv.is_sportingevent && mv.left_team && mv.right_team
-                            ? `${mv.left_team.abbreviation} vs ${mv.right_team.abbreviation}`
-                            : item.title || '',
-                        backgroundImage: 'https://placedog.net/640/480',
+                        description,
+                        backgroundImage: mv.images?.series_list || '',
                         type: mv.type || 'unknown',
                     });
                 }
@@ -300,7 +461,13 @@ export class MultiViewViewModel extends ViewModel {
         }
         const newItems = [...this.items.value];
         const existingCuratedMultiviewIndex = newItems.findIndex((i) => i.type === 'curated-multiviews');
-        if (existingCuratedMultiviewIndex !== -1) {
+        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,
@@ -312,6 +479,19 @@ export class MultiViewViewModel extends ViewModel {
                 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;
@@ -322,6 +502,7 @@ export class MultiViewViewModel extends ViewModel {
     }
     async clearTabLoadFailure() {
         this.setError(null);
+        this.hasEverSuccessfullyLoaded.value = false;
         await this.fetchLayouts();
         this.refreshPolling();
     }

package/package.json

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