@maestro_io/maestro-web-sdk 5.1.2 → 5.2.0

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

@@ -1,89 +1,86 @@
 /**
  * @description Available layouts organized by stream count
  */
-export const LAYOUTS_BY_COUNT = {
-    2: [
-        {
-            id: 'layout-2-50-50',
-            name: '50/50',
-            type: '50-50',
-            slots: [
-                { index: 0, x: 0, y: 0, width: 50, height: 100 },
-                { index: 1, x: 50, y: 0, width: 50, height: 100 },
-            ],
+export const DEFAULT_LAYOUTS_BY_LISTINGS_QUANTITY = {
+    2: {
+        layoutId: 'LR',
+        description: 'Two equal-sized windows side by side',
+        positions: {
+            L: {
+                w: 0.4766,
+                h: 0.4766,
+                x: 0.259,
+                y: 0.5,
+            },
+            R: {
+                w: 0.4766,
+                h: 0.4766,
+                x: 0.7409,
+                y: 0.5,
+            },
         },
-        {
-            id: 'layout-2-60-40',
-            name: '60/40',
-            type: '60-40',
-            slots: [
-                { index: 0, x: 0, y: 0, width: 60, height: 100 },
-                { index: 1, x: 60, y: 0, width: 40, height: 100 },
-            ],
+        name: '50/50',
+        windowCount: 2,
+        positionsOrder: ['L', 'R'],
+    },
+    3: {
+        layoutId: 'TLTRB',
+        description: 'Three equal-sized windows in T layout',
+        positions: {
+            B: {
+                w: 0.458,
+                h: 0.458,
+                x: 0.5,
+                y: 0.266,
+            },
+            TL: {
+                w: 0.458,
+                h: 0.458,
+                x: 0.268,
+                y: 0.7335,
+            },
+            TR: {
+                w: 0.458,
+                h: 0.458,
+                x: 0.732,
+                y: 0.7335,
+            },
         },
-        {
-            id: 'layout-2-70-30',
-            name: '70/30',
-            type: '70-30',
-            slots: [
-                { index: 0, x: 0, y: 0, width: 70, height: 100 },
-                { index: 1, x: 70, y: 0, width: 30, height: 100 },
-            ],
+        name: 'Triple T',
+        windowCount: 3,
+        positionsOrder: ['TL', 'TR', 'B'],
+    },
+    4: {
+        layoutId: 'TLTRBLBR',
+        description: 'Four equal-sized windows in 2x2 grid',
+        positions: {
+            BL: {
+                w: 0.4766,
+                h: 0.4766,
+                x: 0.259,
+                y: 0.257,
+            },
+            BR: {
+                w: 0.4766,
+                h: 0.4766,
+                x: 0.741,
+                y: 0.257,
+            },
+            TL: {
+                w: 0.4766,
+                h: 0.4766,
+                x: 0.259,
+                y: 0.743,
+            },
+            TR: {
+                w: 0.4766,
+                h: 0.4766,
+                x: 0.741,
+                y: 0.743,
+            },
         },
-        {
-            id: 'layout-2-pip',
-            name: 'PIP',
-            type: 'pip',
-            slots: [
-                { index: 0, x: 0, y: 0, width: 100, height: 100 },
-                { index: 1, x: 70, y: 70, width: 25, height: 25 },
-            ],
-        },
-    ],
-    3: [
-        {
-            id: 'layout-3-main-side',
-            name: 'Main + Side',
-            type: '60-40',
-            slots: [
-                { index: 0, x: 0, y: 0, width: 60, height: 100 },
-                { index: 1, x: 60, y: 0, width: 40, height: 50 },
-                { index: 2, x: 60, y: 50, width: 40, height: 50 },
-            ],
-        },
-        {
-            id: 'layout-3-horizontal',
-            name: 'Horizontal',
-            type: '50-50',
-            slots: [
-                { index: 0, x: 0, y: 0, width: 100, height: 33.33 },
-                { index: 1, x: 0, y: 33.33, width: 100, height: 33.33 },
-                { index: 2, x: 0, y: 66.66, width: 100, height: 33.34 },
-            ],
-        },
-    ],
-    4: [
-        {
-            id: 'layout-4-quad',
-            name: 'Quad',
-            type: 'quad',
-            slots: [
-                { index: 0, x: 0, y: 0, width: 50, height: 50 },
-                { index: 1, x: 50, y: 0, width: 50, height: 50 },
-                { index: 2, x: 0, y: 50, width: 50, height: 50 },
-                { index: 3, x: 50, y: 50, width: 50, height: 50 },
-            ],
-        },
-        {
-            id: 'layout-4-main-grid',
-            name: 'Main + Grid',
-            type: '60-40',
-            slots: [
-                { index: 0, x: 0, y: 0, width: 60, height: 100 },
-                { index: 1, x: 60, y: 0, width: 40, height: 33.33 },
-                { index: 2, x: 60, y: 33.33, width: 40, height: 33.33 },
-                { index: 3, x: 60, y: 66.66, width: 40, height: 33.34 },
-            ],
-        },
-    ],
+        name: '2x2 Grid',
+        windowCount: 4,
+        positionsOrder: ['TL', 'TR', 'BL', 'BR'],
+    },
 };

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

@@ -0,0 +1,8 @@
+import './CuratedMultiviews.styles.css';
+import { CuratedMultiviewItem } from '../../view-model/MultiViewViewModel';
+type Props = {
+    onSelect: (item: CuratedMultiviewItem) => void;
+    items: CuratedMultiviewItem[];
+};
+declare const CuratedMultiviews: (props: Props) => JSX.Element;
+export default CuratedMultiviews;

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

@@ -0,0 +1,91 @@
+import React, { useState, useRef, useCallback, useLayoutEffect } from 'react';
+import CuratedMultiviewCard from '../components/curated-multiview-card';
+import './CuratedMultiviews.styles.css';
+import SDK from '@/index';
+const CuratedMultiviews = (props) => {
+    const [maxHeight, setMaxHeight] = useState('auto');
+    const [scrolled, setScrolled] = useState(false);
+    const refsArray = useRef([]);
+    const headerRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const hasInitialized = useRef(false);
+    const getHeaderHeight = useCallback(() => {
+        if (!headerRef.current)
+            return 0;
+        return headerRef.current.offsetHeight;
+    }, []);
+    // Compute max-height after render when refs are populated, and when items change
+    useLayoutEffect(() => {
+        if (!refsArray.current || refsArray.current.length === 0) {
+            setMaxHeight('auto');
+            hasInitialized.current = false;
+            return;
+        }
+        const headerHeight = getHeaderHeight();
+        const totalHeight = refsArray.current.reduce((prev, curr) => {
+            if (!curr)
+                return prev;
+            return prev + curr.clientHeight;
+        }, headerHeight);
+        if (totalHeight > 0) {
+            setMaxHeight(`${totalHeight}px`);
+            hasInitialized.current = true;
+        }
+        else {
+            setMaxHeight('auto');
+            hasInitialized.current = false;
+        }
+    }, [props.items, getHeaderHeight]);
+    // Calculate max-height from focused index to end
+    const updateMaxHeight = useCallback((focusedIndex) => {
+        const headerHeight = getHeaderHeight();
+        const items = refsArray.current.slice(focusedIndex);
+        const totalHeight = items.reduce((prev, curr) => {
+            if (!curr)
+                return prev;
+            return prev + curr.clientHeight;
+        }, headerHeight);
+        setMaxHeight(`${totalHeight}px`);
+    }, []);
+    // Scroll to element after transition
+    const scrollToElement = useCallback((focusedIndex) => {
+        const element = refsArray.current[focusedIndex];
+        if (!element || !wrapperRef.current)
+            return;
+        if (focusedIndex === 0) {
+            wrapperRef.current.scrollTop = 0;
+            setScrolled(false);
+            return;
+        }
+        const wrapperRect = wrapperRef.current.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const scrollTop = elementRect.top -
+            wrapperRect.top +
+            wrapperRef.current.scrollTop -
+            getHeaderHeight();
+        wrapperRef.current.scrollTop = scrollTop;
+        setScrolled(scrollTop > 0);
+    }, [getHeaderHeight]);
+    const handleBecameFocused = useCallback((focusedIndex) => () => {
+        updateMaxHeight(focusedIndex);
+        scrollToElement(focusedIndex);
+    }, [updateMaxHeight, scrollToElement]);
+    const onArrowPress = (d) => {
+        if (d === 'left') {
+            SDK.getMaestroEventViewModel().deliverFocus();
+        }
+    };
+    const onBackPress = () => {
+        SDK.getMaestroEventViewModel().navigation.setFocus('PANEL_NAVIGATION');
+    };
+    const onSelectCuratedMultiview = (item) => () => {
+        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"),
+        props.items.map((item, index) => (React.createElement("div", { key: item.id, ref: (ref) => {
+                refsArray.current[index] = ref;
+            } },
+            React.createElement(CuratedMultiviewCard, { onEnterPress: onSelectCuratedMultiview(item), onBackPress: onBackPress, onArrowPress: onArrowPress, onBecameFocused: handleBecameFocused(index), selected: item.isSelected, listings: item.listings }))))));
+};
+export default CuratedMultiviews;

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

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

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

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

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

@@ -1,2 +1,3 @@
+import './FoxMultiView.styles.css';
 declare const FoxMultiView: () => JSX.Element;
 export default FoxMultiView;

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

@@ -1,5 +1,65 @@
-import React from 'react';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+import SDK from '@/index';
+import React, { useRef, useState, useEffect } from 'react';
+import './FoxMultiView.styles.css';
+import TabLoadErrorView from '../../components/TabLoadError';
+import CuratedMultiviews from './CuratedMultiview/CuratedMultiviews';
 const FoxMultiView = () => {
-    return React.createElement("div", { style: { marginTop: '36px' } }, "Fox MultiView Coming Soon!");
+    const vm = useRef(null);
+    const [items, setItems] = useState([]);
+    const [error, setError] = useState(null);
+    const [scrollableContainer, setScrollableContainer,] = useState(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (containerRef.current) {
+            setScrollableContainer(containerRef.current);
+        }
+        const mvvm = SDK.getMaestroEventViewModel()
+            .multiViewViewModel;
+        if (mvvm) {
+            vm.current = mvvm;
+            setItems(vm.current.items.value);
+            const removeItemsListener = vm.current.items.subscribe((newItems) => {
+                setItems(newItems);
+            });
+            setError(vm.current.error.value);
+            const removeErrorListener = vm.current.error.subscribe((error) => {
+                setError(error);
+            });
+            vm.current.init();
+            return () => {
+                removeItemsListener();
+                removeErrorListener();
+            };
+        }
+    }, []);
+    const clearTabLoadFailure = () => {
+        vm.current?.clearTabLoadFailure();
+    };
+    const onArrowPress = (d) => {
+        if (d === 'left') {
+            SDK.getMaestroEventViewModel().deliverFocus();
+        }
+    };
+    const onSelectCuratedMultiview = (item) => {
+        vm.current?.onSelectCuratedMultiview(item);
+    };
+    const renderItems = () => {
+        if (error) {
+            return (React.createElement(TabLoadErrorView, { onEnterPress: clearTabLoadFailure, onArrowPress: onArrowPress }));
+        }
+        return items.map((item) => {
+            switch (item.type) {
+                case 'curated-multiviews':
+                    return (React.createElement(CuratedMultiviews, { key: item.type, items: item.items, onSelect: onSelectCuratedMultiview }));
+                default:
+                    return null;
+            }
+        });
+    };
+    return (React.createElement("div", { className: "fox-multiview-view" },
+        React.createElement(ScrollableContainer, { scrollableContainerRef: scrollableContainer },
+            renderItems(),
+            React.createElement("div", { className: "fox-multi-view-bottom-padding" }))));
 };
 export default FoxMultiView;

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

@@ -0,0 +1,122 @@
+/// <reference types="prop-types" />
+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;
+};
+export type CustomMultiviewStreamsCardProps = {
+    /** Primary listing displayed on this card */
+    listing: CuratedMultiviewListing;
+    /** Total number of available camera listings */
+    totalCameras: number;
+    /** Number of currently active cameras */
+    activeCameraCount?: number;
+    /** Current match time display (e.g. "42'") */
+    currentTime?: string;
+    /** Match location (e.g. "Miami, FL") */
+    location?: string;
+    /** List of available cameras for the expanded view */
+    cameras?: Camera[];
+    /** Callback when a camera radio is toggled */
+    onToggleCamera?: (camera: Camera) => void;
+    /** Whether the card is in expanded state */
+    expanded?: boolean;
+    /** Index of the currently focused camera in expanded view */
+    focusedCameraIndex?: number;
+};
+declare const CustomMultiviewStreamsCard: {
+    new (props: (CustomMultiviewStreamsCardProps & WithFocusableProps) | Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>): {
+        state: import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../../external/spatial-navigation/utils").Direction, details?: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<CustomMultiviewStreamsCardProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>) => import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: CustomMultiviewStreamsCardProps & WithFocusableProps, context: any): {
+        state: import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../../external/spatial-navigation/utils").Direction, details?: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<CustomMultiviewStreamsCardProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>) => import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CustomMultiviewStreamsCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default CustomMultiviewStreamsCard;

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

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import './CustomMultiviewStreamsCard.style.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { FocusableItem } from '@/components/core/ScrollableContainer';
+import Image from '@/components/atoms/Image';
+import Icon from '@/components/atoms/SvgIcon';
+const CustomMultiviewStreamsCardComponent = (props) => {
+    const { listing, totalCameras, activeCameraCount = 0, currentTime, location, focusable, focused, cameras = [], onToggleCamera, expanded = false, focusedCameraIndex = -1, } = props;
+    const handleCameraToggle = useCallback((camera) => {
+        if (onToggleCamera) {
+            onToggleCamera(camera);
+        }
+    }, [onToggleCamera]);
+    const { backgroundImage, description } = listing;
+    return (React.createElement(FocusableItem, null,
+        React.createElement("div", { className: "custom-multiview-streams-card focus-ring", "data-focusable": focusable, "data-focused": focused, "data-expanded": expanded },
+            React.createElement("div", { className: "custom-multiview-streams-card-container" },
+                React.createElement("div", { className: "custom-multiview-streams-card-row custom-multiview-streams-card-row-first" },
+                    React.createElement("div", { className: "custom-multiview-streams-row-content" },
+                        React.createElement("div", { className: "custom-multiview-streams-status-badge" },
+                            React.createElement("span", { className: "custom-multiview-streams-status-dot" }),
+                            React.createElement("span", { className: "custom-multiview-streams-status-text" }, "LIVE")),
+                        currentTime && (React.createElement("div", { className: "custom-multiview-streams-time" }, currentTime)),
+                        location && (React.createElement("div", { className: "custom-multiview-streams-location" }, location.toUpperCase())))),
+                React.createElement("div", { className: "custom-multiview-streams-card-row custom-multiview-streams-card-row-second" },
+                    React.createElement("div", { className: "custom-multiview-streams-row-content" },
+                        React.createElement("div", { className: "custom-multiview-streams-thumbnail-container" }, backgroundImage ? (React.createElement(Image, { src: backgroundImage, alt: description, className: "custom-multiview-streams-thumbnail" })) : (React.createElement("div", { className: "custom-multiview-streams-thumbnail custom-multiview-streams-thumbnail-placeholder" }))),
+                        React.createElement("div", { className: "custom-multiview-streams-info-container" },
+                            React.createElement("div", { className: "custom-multiview-streams-teams" }, description),
+                            React.createElement("div", { className: "custom-multiview-streams-cameras" },
+                                activeCameraCount,
+                                "/",
+                                totalCameras,
+                                ' ',
+                                totalCameras === 1 ? 'Camera' : 'Cameras',
+                                " Active")),
+                        React.createElement("div", { className: "custom-multiview-streams-chevron-container" },
+                            React.createElement("div", { className: "custom-multiview-streams-chevron" },
+                                React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                                    React.createElement("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })))))),
+                React.createElement("div", { className: "custom-multiview-streams-camera-list" }, cameras.map((camera, index) => (React.createElement("div", { key: camera.id, className: "custom-multiview-streams-camera-row", "data-focused": expanded && index === focusedCameraIndex, onClick: (e) => {
+                        e.stopPropagation();
+                        handleCameraToggle(camera);
+                    } },
+                    React.createElement("div", { className: "custom-multiview-streams-camera-row-inner" },
+                        React.createElement("div", { className: "custom-multiview-streams-camera-name T01 FONT_BOLD" }, camera.name),
+                        React.createElement("div", { className: "custom-multiview-streams-camera-radio-cell" },
+                            React.createElement("div", { className: "custom-multiview-streams-camera-radio", "data-active": camera.isActive }, camera.isActive ? (React.createElement(Icon, { iconName: "checkmark", width: 22.5, height: 22 })) : (React.createElement(Icon, { iconName: "add", width: 21, height: 21 })))))))))))));
+};
+const CustomMultiviewStreamsCard = withFocusable()(CustomMultiviewStreamsCardComponent);
+export default CustomMultiviewStreamsCard;

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

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

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

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

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

@@ -3,7 +3,7 @@ import { WithFocusableProps } from '@/external/spatial-navigation';
 import { Direction } from '@/external/spatial-navigation/utils';
 import { MultiViewLayout } from '../../../types';
 export type LayoutSelectorProps = {
-    streamCount: 2 | 3 | 4;
+    layouts: MultiViewLayout[];
     selectedLayoutId?: string;
     onLayoutSelect?: (layout: MultiViewLayout) => void;
     onLayoutArrowPress?: (direction: Direction) => void;

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

@@ -3,20 +3,21 @@ import './LayoutSelector.style.css';
 import { withFocusable, } from '@/external/spatial-navigation';
 import { FocusableItem, useScrollableContainer, } from '@/components/core/ScrollableContainer';
 import SDK from '@/index';
-import { LAYOUTS_BY_COUNT } from '../../../types';
 const LayoutOptionRowComponent = (props) => {
     const { layout, selected, focusable, focused } = props;
-    console.log('selected', selected);
     return (React.createElement(FocusableItem, null,
         React.createElement("div", { className: "layout-selector-option-focus focus-ring", "data-focusable": focusable, "data-focused": focused },
             React.createElement("div", { className: "layout-selector-row" },
                 React.createElement("div", { className: "layout-selector-cell layout-selector-cell-preview" },
-                    React.createElement("div", { className: "layout-selector-preview" }, layout.slots.map((slot) => (React.createElement("div", { key: `${layout.id}-slot-${slot.index}`, className: "layout-selector-slot", style: {
-                            left: `${slot.x}%`,
-                            top: `${slot.y}%`,
-                            width: `${slot.width}%`,
-                            height: `${slot.height}%`,
-                        } }))))),
+                    React.createElement("div", { className: "layout-selector-preview" }, layout.positionsOrder.map((key) => {
+                        const pos = layout.positions[key];
+                        return (React.createElement("div", { key: `${layout.layoutId}-pos-${key}`, className: "layout-selector-slot", style: {
+                                left: `${pos.x * 100}%`,
+                                top: `${pos.y * 100}%`,
+                                width: `${pos.w * 100}%`,
+                                height: `${pos.h * 100}%`,
+                            } }));
+                    }))),
                 React.createElement("div", { className: "layout-selector-cell layout-selector-cell-label" },
                     React.createElement("div", { className: "layout-selector-label T30 FONT_BOLD" }, layout.name)),
                 React.createElement("div", { className: "layout-selector-cell layout-selector-cell-radio" },
@@ -25,8 +26,7 @@ const LayoutOptionRowComponent = (props) => {
 const LayoutOptionRow = withFocusable()(LayoutOptionRowComponent);
 const LayoutSelector = (props) => {
     const { scrollToFocusedElement } = useScrollableContainer();
-    const { streamCount, selectedLayoutId, onLayoutSelect } = props;
-    const layouts = LAYOUTS_BY_COUNT[streamCount] || [];
+    const { layouts, selectedLayoutId, onLayoutSelect } = props;
     const onBecameFocused = useCallback((layout) => {
         scrollToFocusedElement(layout);
     }, [scrollToFocusedElement]);
@@ -35,9 +35,6 @@ const LayoutSelector = (props) => {
             SDK.getMaestroEventViewModel().deliverFocus();
         }
     }, []);
-    return (React.createElement(React.Fragment, null, layouts.length === 0 ? (React.createElement("div", { className: "layout-selector-empty T10" },
-        "No layouts available for ",
-        streamCount,
-        " streams.")) : (React.createElement("div", { className: "layout-selector-options" }, layouts.map((layout) => (React.createElement(LayoutOptionRow, { key: layout.id, focusKey: `fox-multiview-layout-${layout.id}`, layout: layout, selected: layout.id === selectedLayoutId, onEnterPress: () => onLayoutSelect?.(layout), onArrowPress: onArrowPress, onBecameFocused: onBecameFocused })))))));
+    return (React.createElement(React.Fragment, null, layouts.length === 0 ? (React.createElement("div", { className: "layout-selector-empty T10" }, "No layouts available.")) : (React.createElement("div", { className: "layout-selector-options" }, layouts.map((layout) => (React.createElement(LayoutOptionRow, { key: layout.layoutId, focusKey: `fox-multiview-layout-${layout.layoutId}`, layout: layout, selected: layout.layoutId === selectedLayoutId, onEnterPress: () => onLayoutSelect?.(layout), onArrowPress: onArrowPress, onBecameFocused: onBecameFocused })))))));
 };
 export default LayoutSelector;