@maestro_io/maestro-web-sdk 5.2.0 → 5.2.1

package/dist/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",

package/dist/src/modules/espn/bets/services/BetsService.js

@@ -25,7 +25,7 @@ class BetsService {
         return this.networkManager.externalApiRequest({
             endpoint: this.nonPersonalizedBetsEndpoint(eventID),
             method: HttpMethod.GET,
-            params: {},
+            params: { deviceType: 'ictv' },
             headers: {},
         });
     }
@@ -41,7 +41,7 @@ class BetsService {
         return this.networkManager.externalApiRequest({
             endpoint: this.personalizedBetsEndpoint(eventID),
             method: HttpMethod.GET,
-            params: { swid },
+            params: { swid, deviceType: 'ictv' },
             headers: { 'x-p13n-auth': jwt },
         });
     }
@@ -57,7 +57,7 @@ class BetsService {
         return this.networkManager.externalApiRequestWithHeaders({
             endpoint: this.personalizedBetsEndpoint(eventID),
             method: HttpMethod.GET,
-            params: { swid },
+            params: { swid, deviceType: 'ictv' },
             headers: { 'x-p13n-auth': jwt },
         });
     }
@@ -77,7 +77,7 @@ class BetsService {
             endpoint: this.personalizedBetsEndpoint(eventID),
             interval,
             method: HttpMethod.GET,
-            params: { swid },
+            params: { swid, deviceType: 'ictv' },
             headers: { 'x-p13n-auth': jwt },
             onData,
             onError,
@@ -99,7 +99,7 @@ class BetsService {
             endpoint: this.personalizedBetsEndpoint(eventID),
             interval,
             method: HttpMethod.GET,
-            params: { swid },
+            params: { swid, deviceType: 'ictv' },
             headers: { 'x-p13n-auth': jwt },
             onData,
             onError,

package/dist/src/modules/espn/fantasy/services/FantasyService.js

@@ -68,6 +68,7 @@ class FantasyService {
                 featureFlags: 'challengeEntries',
                 filterType: 'FANTASY_CTV',
                 platform: 'fantasyictv_bbd',
+                deviceType: 'ictv',
                 swid,
                 eventId,
             },
@@ -85,6 +86,7 @@ class FantasyService {
             params: {
                 view: 'ictv_scoreboard',
                 platform: 'fantasyictv_bbd',
+                deviceType: 'ictv',
                 proGameId,
                 teamId,
             },
@@ -117,6 +119,7 @@ class FantasyService {
                 competitionId,
                 view: 'ictv_scoreboard',
                 platform: 'fantasyictv_bbd',
+                deviceType: 'ictv',
             },
         });
     }

package/dist/src/modules/espn/fantasy/view/FantasyView.js

@@ -203,9 +203,10 @@ class FantasyView extends Component {
         this.viewModel.cleanup();
     }
     render() {
+        const isError = this.state.errorState === 'tabLoadFailure';
         return (React.createElement(ScrollableContainer, { scrollableContainerRef: this.container, containerTopOffset: this.getMaxHeaderHeight() || 40, "data-has-error": this.state.errorState !== 'none' },
             React.createElement("div", { className: "fantasy-view", ref: this.setContainerRef },
-                this.renderItems(),
+                isError ? (React.createElement(TabLoadErrorView, { onEnterPress: this.clearTabLoadFailure, onArrowPress: this.onArrowPress })) : (this.renderItems()),
                 React.createElement("div", { className: "fantasy-bottom-padding" }))));
     }
 }

package/dist/src/modules/espn/fantasy/view-model/FantasyViewModel.FantasyPolling.d.ts

@@ -7,7 +7,7 @@ export default class FantasyPolling {
     /**
      * Refresh polling for fantasy data
      */
-    refresh(params: FantasyPollingParams, callback: (data: IFantasyResponse) => void): Promise<void>;
+    refresh(params: FantasyPollingParams, callback: (data: IFantasyResponse) => void, errorCallback: (error: Error) => void): Promise<void>;
     /**
      * Stop polling for fantasy data
      */

package/dist/src/modules/espn/fantasy/view-model/FantasyViewModel.FantasyPolling.js

@@ -25,11 +25,11 @@ export default class FantasyPolling {
     /**
      * Refresh polling for fantasy data
      */
-    async refresh(params, callback) {
+    async refresh(params, callback, errorCallback) {
         // First stop any existing polling
         this.stop();
         // Start the poll loop
-        await this.start(params, callback);
+        await this.start(params, callback, errorCallback);
     }
     /**
      * Stop polling for fantasy data
@@ -43,12 +43,15 @@ export default class FantasyPolling {
     removeLastResponseHash() {
         this.polling.lastResponseHash = null;
     }
-    async start(params, callback) {
+    async start(params, callback, errorCallback) {
         try {
             this.polling.task = this.fantasyService.pollFantasy(params, this.polling.interval, (response) => {
-                this.updateInterval(params, response.headers, callback);
+                this.updateInterval(params, response.headers, callback, errorCallback);
                 this.processPolledData(response.data, callback);
-            }, (error) => this.handlePollingError(error, params.swid));
+            }, (error) => {
+                this.handlePollingError(error, params.swid);
+                errorCallback(error);
+            });
         }
         catch (error) {
             captureException(error, {
@@ -61,7 +64,7 @@ export default class FantasyPolling {
      * @description Update polling interval checking either response header or panel config.
      * Refresh polling if necessary.
      */
-    updateInterval(params, headers, callback) {
+    updateInterval(params, headers, callback, errorCallback) {
         const headerInterval = this.getResponseHeaderPollingIntervalValue(headers);
         const panelConfigInterval = this.getPanelConfigInterval();
         const newInterval = headerInterval || panelConfigInterval; // order matters here
@@ -70,7 +73,7 @@ export default class FantasyPolling {
             console.log(`[Fantasy] Updating fantasy polling interval from ${this.polling.interval}ms to ${newInterval}ms`);
             this.polling.interval = newInterval;
             // Restart polling with the new interval
-            this.refresh(params, callback);
+            this.refresh(params, callback, errorCallback);
         }
     }
     getResponseHeaderPollingIntervalValue(headers) {

package/dist/src/modules/espn/fantasy/view-model/FantasyViewModel.LeagueManagerPolling.d.ts

@@ -7,7 +7,7 @@ export default class LeagueManagerPolling {
     /**
      * Refresh polling for league manager data
      */
-    refresh(key: string, params: LeagueManagerPollingParams, callback: (data: ILeagueManagerResponse | ILeagueManagerRotoResponse) => void): void;
+    refresh(key: string, params: LeagueManagerPollingParams, callback: (data: ILeagueManagerResponse | ILeagueManagerRotoResponse) => void, errorCallback: (error: Error) => void): void;
     /**
      * Stop polling for fantasy data
      */

package/dist/src/modules/espn/fantasy/view-model/FantasyViewModel.LeagueManagerPolling.js

@@ -21,7 +21,7 @@ export default class LeagueManagerPolling {
     /**
      * Refresh polling for league manager data
      */
-    refresh(key, params, callback) {
+    refresh(key, params, callback, errorCallback) {
         // First stop any existing polling
         this.stop(key);
         // Initialize polling state if it doesn't exist
@@ -33,7 +33,7 @@ export default class LeagueManagerPolling {
             };
         }
         // Start the poll loop
-        this.start(key, params, callback);
+        this.start(key, params, callback, errorCallback);
     }
     /**
      * Stop polling for fantasy data
@@ -44,12 +44,15 @@ export default class LeagueManagerPolling {
             this.polling[key].task = null;
         }
     }
-    start(key, params, callback) {
+    start(key, params, callback, errorCallback) {
         try {
             this.polling[key].task = this.fantasyService.pollLeagueManager(params, this.polling[key].interval, (response) => {
-                this.updateInterval(key, params, callback, response.headers);
+                this.updateInterval(key, params, callback, response.headers, errorCallback);
                 this.processPolledData(key, response.data, callback);
-            }, (error) => this.handlePollingError(error, key, params));
+            }, (error) => {
+                this.handlePollingError(error, key, params);
+                errorCallback(error);
+            });
         }
         catch (error) {
             captureException(error, {
@@ -76,7 +79,7 @@ export default class LeagueManagerPolling {
      * @description Update polling interval checking either response header or panel config.
      * Refresh polling if necessary.
      */
-    updateInterval(key, params, callback, headers) {
+    updateInterval(key, params, callback, headers, errorCallback) {
         const headerInterval = this.getResponseHeaderPollingIntervalValue(headers);
         const panelConfigInterval = this.getPanelConfigInterval();
         const newInterval = headerInterval || panelConfigInterval; // order matters here
@@ -85,7 +88,7 @@ export default class LeagueManagerPolling {
             console.log(`[Fantasy] Updating league manager polling interval from ${this.polling[key]?.interval}ms to ${newInterval}ms`);
             this.polling[key].interval = newInterval;
             // Restart polling with the new interval
-            this.refresh(key, params, callback);
+            this.refresh(key, params, callback, errorCallback);
         }
     }
     getResponseHeaderPollingIntervalValue(headers) {

package/dist/src/modules/espn/fantasy/view-model/FantasyViewModel.TournamentPolling.d.ts

@@ -7,7 +7,7 @@ export default class TournamentPolling {
     /**
      * Refresh polling for tournament challenge data
      */
-    refresh(key: string, params: TournamentChallengePollingParams, callback: (data: TournamentChallenge) => void): void;
+    refresh(key: string, params: TournamentChallengePollingParams, callback: (data: TournamentChallenge) => void, errorCallback: (error: Error) => void): void;
     /**
      * Stop polling for tournament challenge data
      */

package/dist/src/modules/espn/fantasy/view-model/FantasyViewModel.TournamentPolling.js

@@ -21,7 +21,7 @@ export default class TournamentPolling {
     /**
      * Refresh polling for tournament challenge data
      */
-    refresh(key, params, callback) {
+    refresh(key, params, callback, errorCallback) {
         // First stop any existing polling
         this.stop(key);
         // Initialize polling state if it doesn't exist
@@ -33,7 +33,7 @@ export default class TournamentPolling {
             };
         }
         // Start the poll loop
-        this.start(key, params, callback);
+        this.start(key, params, callback, errorCallback);
     }
     /**
      * Stop polling for tournament challenge data
@@ -44,12 +44,15 @@ export default class TournamentPolling {
             this.polling[key].task = null;
         }
     }
-    start(key, params, callback) {
+    start(key, params, callback, errorCallback) {
         try {
             this.polling[key].task = this.fantasyService.pollTournamentChallenge(params, this.polling[key].interval, (response) => {
-                this.updateInterval(key, params, callback, response.headers);
+                this.updateInterval(key, params, callback, response.headers, errorCallback);
                 this.processPolledData(key, response.data, callback);
-            }, (error) => this.handlePollingError(error, key, params));
+            }, (error) => {
+                this.handlePollingError(error, key, params);
+                errorCallback(error);
+            });
         }
         catch (error) {
             captureException(error, {
@@ -62,7 +65,7 @@ export default class TournamentPolling {
      * @description Update polling interval checking either response header or panel config.
      * Refresh polling if necessary.
      */
-    updateInterval(key, params, callback, headers) {
+    updateInterval(key, params, callback, headers, errorCallback) {
         const headerInterval = this.getResponseHeaderPollingIntervalValue(headers);
         const panelConfigInterval = this.getPanelConfigInterval();
         const newInterval = headerInterval || panelConfigInterval; // order matters here
@@ -71,7 +74,7 @@ export default class TournamentPolling {
             console.log(`[TOURNAMENT] Updating tournament polling interval from ${this.polling[key]?.interval}ms to ${newInterval}ms`);
             this.polling[key].interval = newInterval;
             // Restart polling with the new interval
-            this.refresh(key, params, callback);
+            this.refresh(key, params, callback, errorCallback);
         }
     }
     getResponseHeaderPollingIntervalValue(headers) {

package/dist/src/modules/espn/fantasy/view-model/FantasyViewModel.d.ts

@@ -137,6 +137,7 @@ export declare class FantasyViewModel {
      * Initialize the ViewModel and start data fetching
      */
     init(): Promise<void>;
+    private handleFetchError;
     private fetchData;
     onEngage(type: FantasyItem['type']): void;
     onAskLogin(): void;

package/dist/src/modules/espn/fantasy/view-model/FantasyViewModel.js

@@ -153,32 +153,45 @@ export class FantasyViewModel {
         this.trackPanelView();
         await this.fetchData();
     }
-    async fetchData() {
-        this.isDataLoading.value = true;
-        const isAuthenticated = await this.delegate.userIsAuthenticated();
-        if (!isAuthenticated) {
-            this.isDataLoading.value = false;
-            this.append({
-                id: 'not-logged-in',
-                type: 'notLoggedIn',
-            });
-            return;
-        }
-        else if (this.fantasyItems.value.find((i) => i.type === 'notLoggedIn')) {
-            this.fantasyItems.value = [];
+    handleFetchError(error, context = 'FantasyViewModel.fetchData') {
+        captureException(error, { context });
+        console.error('[FANTASY] Error in ' + context + ':', error);
+        this.isDataLoading.value = false;
+        if (!this.hasEverSuccessfullyLoaded.value) {
+            this.errorState.value = 'tabLoadFailure';
         }
-        const swid = (await this.delegate.getUserSWID()) || '';
-        const jwt = (await this.delegate.getUserToken()) || '';
-        if (this.useMockData) {
-            await this.fetchMockData();
-            return;
+    }
+    async fetchData() {
+        try {
+            this.isDataLoading.value = true;
+            const isAuthenticated = await this.delegate.userIsAuthenticated();
+            if (!isAuthenticated) {
+                this.isDataLoading.value = false;
+                this.append({
+                    id: 'not-logged-in',
+                    type: 'notLoggedIn',
+                });
+                return;
+            }
+            else if (this.fantasyItems.value.find((i) => i.type === 'notLoggedIn')) {
+                this.fantasyItems.value = [];
+            }
+            const swid = (await this.delegate.getUserSWID()) || '';
+            const jwt = (await this.delegate.getUserToken()) || '';
+            if (this.useMockData) {
+                await this.fetchMockData();
+                return;
+            }
+            else {
+                await this.fantasyPolling.refresh({
+                    eventId: this.eventId,
+                    swid,
+                    jwt,
+                }, this.processFantasy.bind(this), this.handleFetchError.bind(this));
+            }
         }
-        else {
-            await this.fantasyPolling.refresh({
-                eventId: this.eventId,
-                swid,
-                jwt,
-            }, this.processFantasy.bind(this));
+        catch (error) {
+            this.handleFetchError(error);
         }
     }
     onEngage(type) {
@@ -269,6 +282,8 @@ export class FantasyViewModel {
                                 this.isLoadingTc.value = false;
                                 this.rebuildFantasyItems();
                             }
+                        }, (error) => {
+                            this.handleFetchError(error, 'FantasyViewModel.processFantasy.tournamentChallenge');
                         });
                     }
                 });
@@ -334,6 +349,8 @@ export class FantasyViewModel {
                             }
                         }
                     }
+                }, (error) => {
+                    this.handleFetchError(error, 'FantasyViewModel.processFantasy.leagueManager');
                 });
             }
             // Mark successful load
@@ -344,14 +361,7 @@ export class FantasyViewModel {
             this.rebuildFantasyItems();
         }
         catch (error) {
-            captureException(error, {
-                context: 'FantasyViewModel.processFantasy',
-            });
-            console.error('[FANTASY] Error processing fantasy data:', error);
-            this.isDataLoading.value = false;
-            if (!this.hasEverSuccessfullyLoaded.value) {
-                this.errorState.value = 'tabLoadFailure';
-            }
+            this.handleFetchError(error, 'FantasyViewModel.processFantasy');
         }
     }
     parseRoto(data, preference) {

package/dist/src/modules/espn/shop/services/ShopService.js

@@ -34,7 +34,7 @@ class ShopService {
             endpoint: `/apis/site/v2/events/${this.eventId}/shop`,
             interval,
             method: HttpMethod.GET,
-            params: {},
+            params: { deviceType: 'ictv' },
             headers: {},
             onData,
             onError,

package/dist/src/modules/espn/stats/services/StatsService.js

@@ -32,7 +32,7 @@ class StatsService {
         return this.networkManager.externalApiRequest({
             endpoint: this.getSyncEndpoint(timeCode),
             method: HttpMethod.GET,
-            params: {},
+            params: { deviceType: 'ictv' },
             headers: {},
         });
     }
@@ -50,7 +50,7 @@ class StatsService {
             endpoint: this.getSyncEndpoint(timeCode),
             interval,
             method: HttpMethod.GET,
-            params: {},
+            params: { deviceType: 'ictv' },
             headers: {},
             onData,
             onError,

package/dist/src/modules/fox/multi-view/services/MultiViewService.d.ts

@@ -1,9 +1,10 @@
 import { HttpMethod } from '@/services/NetworkManager/NetworkManager';
 import { MultiViewLayout } from '../types';
 export type ProductAPIData = {
-    endpoint: string;
+    url: string;
     method: HttpMethod;
     headers: Record<string, string>;
+    callback?: (error: ProductAPIErrorPayload) => void;
 };
 export type ProductAPIErrorPayload = {
     code: number;
@@ -25,10 +26,10 @@ export type MultiViewListingResponse = {
 export interface CuratedMultiviewResponse {
     status: boolean;
     data?: {
-        items?: CuratedMultiviewItem[];
+        items?: CuratedMultiviewResponseItem[];
     };
 }
-interface CuratedMultiviewItem {
+export interface CuratedMultiviewResponseItem {
     entity_id?: string;
     type?: string;
     title?: string;
@@ -37,21 +38,25 @@ interface CuratedMultiviewItem {
     is_sportingevent?: boolean;
     images?: {
         still?: string;
+        series_list?: string;
     };
+    location?: {
+        city?: string;
+        state?: string;
+    };
+    start_time?: string;
+    associated_listings?: Array<{
+        entity_id?: string;
+        title?: string;
+    }>;
     multiview?: string[];
-    multiview_metadata?: CuratedMultiviewMetadata[];
-}
-interface CuratedMultiviewMetadata {
-    entity_id: string;
-    type: string;
-    is_sportingevent: boolean;
-    images: Record<string, unknown>;
-    left_team: Team;
-    right_team: Team;
-}
-interface Team {
-    abbreviation: string;
+    multiview_metadata?: CuratedMultiviewResponseItem[];
+    left_team?: CuratedMultiviewResponseItemTeam;
+    right_team?: CuratedMultiviewResponseItemTeam;
 }
+type CuratedMultiviewResponseItemTeam = {
+    abbreviation?: string;
+};
 export declare const isProductAPIValid: (data: any) => data is ProductAPIData;
 /**
  * Service for handling multi-view API calls

package/dist/src/modules/fox/multi-view/services/MultiViewService.js

@@ -3,11 +3,14 @@ const MULTIVIEW_BASE_URL = 'https://qa-mvlm.api.shared.digitalvideoplatform.com'
 export const isProductAPIValid = (data) => {
     if (!data || typeof data !== 'object')
         return false;
-    return (typeof data.endpoint === 'string' &&
+    return (typeof data.url === 'string' &&
+        data.url.length > 0 &&
         typeof data.method === 'string' &&
+        Object.values(HttpMethod).includes(data.method) &&
         data.headers !== null &&
         typeof data.headers === 'object' &&
-        !Array.isArray(data.headers));
+        !Array.isArray(data.headers) &&
+        (!data.callback || typeof data.callback === 'function'));
 };
 /**
  * Service for handling multi-view API calls
@@ -64,7 +67,7 @@ class MultiViewService {
             return null;
         }
         return this.networkManager.pollExternalApiRequest({
-            endpoint: this.productAPI.endpoint,
+            endpoint: this.productAPI.url,
             interval,
             method: this.productAPI.method,
             headers: this.productAPI.headers,

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

@@ -42,6 +42,26 @@ export interface NewMultiviewPayload {
     multiviewID: string;
     childListings: NewMultiviewChildListing[];
 }
+export type BuildYourOwnTab = 'streams' | 'layouts';
+/**
+ * @description Represents a single camera angle within a stream
+ */
+export type Camera = {
+    id: string;
+    name: string;
+    isActive: boolean;
+};
+/**
+ * @description Represents a stream with its cameras and metadata, used in Build Your Own
+ */
+export interface CustomMultiviewStream {
+    listing: CuratedMultiviewListing;
+    totalCameras: number;
+    activeCameraCount: number;
+    currentTime?: string;
+    location?: string;
+    cameras: Camera[];
+}
 /**
  * @description Available layouts organized by stream count
  */

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

@@ -0,0 +1,7 @@
+import { CustomMultiviewStream } from '../../types';
+import './BuildYourOwn.styles.css';
+type BuildYourOwnProps = {
+    streams: CustomMultiviewStream[];
+};
+declare const BuildYourOwn: (props: BuildYourOwnProps) => JSX.Element;
+export default BuildYourOwn;

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

@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import SDK from '@/index';
+import BuildYourOwnTabs from '../components/BuildYourOwnTabs';
+import LayoutSelector from '../components/LayoutSelector';
+import CustomMultiviewStreamsCard from '../components/CustomMultiviewStreamsCard';
+import './BuildYourOwn.styles.css';
+const BuildYourOwn = (props) => {
+    const { streams } = props;
+    const vm = useRef(null);
+    // UI-only state
+    const [activeTab, setActiveTab] = useState('streams');
+    const [expandedStreamId, setExpandedStreamId] = useState(null);
+    const [focusedCameraIndex, setFocusedCameraIndex] = useState(0);
+    // Data from VM (subscribed via Observable)
+    const [layouts, setLayouts] = useState([]);
+    const [selectedLayoutId, setSelectedLayoutId] = useState(null);
+    useEffect(() => {
+        const mvvm = SDK.getMaestroEventViewModel()
+            .multiViewViewModel;
+        if (!mvvm)
+            return;
+        vm.current = mvvm;
+        setLayouts(mvvm.getLayoutsObservable().value);
+        const unsubLayouts = mvvm.getLayoutsObservable().subscribe(setLayouts);
+        setSelectedLayoutId(mvvm.getSelectedLayoutId().value);
+        const unsubSelectedLayout = mvvm
+            .getSelectedLayoutId()
+            .subscribe(setSelectedLayoutId);
+        return () => {
+            unsubLayouts();
+            unsubSelectedLayout();
+        };
+    }, []);
+    const onLayoutSelect = useCallback((layout) => {
+        vm.current?.onSelectLayout(layout.layoutId);
+    }, []);
+    const onStreamEnterPress = useCallback((streamId, cameras) => () => {
+        if (expandedStreamId === streamId) {
+            const camera = cameras[focusedCameraIndex];
+            if (camera) {
+                vm.current?.onToggleCamera(streamId, camera.id);
+            }
+        }
+        else {
+            setExpandedStreamId(streamId);
+            setFocusedCameraIndex(0);
+        }
+    }, [expandedStreamId, focusedCameraIndex]);
+    const onStreamArrowPress = useCallback((streamId, cameras) => (d) => {
+        if (d === 'left') {
+            SDK.getMaestroEventViewModel().deliverFocus();
+            return false;
+        }
+        if (expandedStreamId === streamId) {
+            if (d === 'down') {
+                if (focusedCameraIndex < cameras.length - 1) {
+                    setFocusedCameraIndex((prev) => prev + 1);
+                }
+                return false;
+            }
+            if (d === 'up') {
+                if (focusedCameraIndex > 0) {
+                    setFocusedCameraIndex((prev) => prev - 1);
+                }
+                else {
+                    setExpandedStreamId(null);
+                }
+                return false;
+            }
+        }
+    }, [expandedStreamId, focusedCameraIndex]);
+    const onStreamBackPress = useCallback((streamId) => () => {
+        if (expandedStreamId === streamId) {
+            setExpandedStreamId(null);
+        }
+        else {
+            SDK.getMaestroEventViewModel().navigation.setFocus('PANEL_NAVIGATION');
+        }
+    }, [expandedStreamId]);
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case 'streams':
+                return (React.createElement("div", { className: "build-your-own-streams" }, streams.map((stream) => {
+                    const streamId = stream.listing.id;
+                    const cameras = stream.cameras || [];
+                    return (React.createElement(CustomMultiviewStreamsCard, { key: streamId, focusKey: `byo-stream-${streamId}`, listing: stream.listing, totalCameras: stream.totalCameras, activeCameraCount: stream.activeCameraCount, currentTime: stream.currentTime, location: stream.location, cameras: cameras, expanded: expandedStreamId === streamId, focusedCameraIndex: expandedStreamId === streamId ? focusedCameraIndex : -1, onToggleCamera: (camera) => vm.current?.onToggleCamera(streamId, camera.id), onEnterPress: onStreamEnterPress(streamId, cameras), onArrowPress: onStreamArrowPress(streamId, cameras), onBackPress: onStreamBackPress(streamId) }));
+                })));
+            case 'layouts':
+                return (React.createElement(LayoutSelector, { layouts: layouts, selectedLayoutId: selectedLayoutId || undefined, onLayoutSelect: onLayoutSelect }));
+            default:
+                return null;
+        }
+    };
+    return (React.createElement("div", { className: "build-your-own" },
+        React.createElement("div", { className: "build-your-own-header T10" }, "Build Your Own Multiview"),
+        React.createElement(BuildYourOwnTabs, { activeTab: activeTab, onSelectTab: setActiveTab }),
+        renderTabContent()));
+};
+export default BuildYourOwn;

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

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

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

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