@maestro_io/maestro-web-sdk 5.1.1 → 5.2.0

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

@@ -0,0 +1,86 @@
+/**
+ * @description Available layouts organized by stream count
+ */
+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,
+            },
+        },
+        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,
+            },
+        },
+        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,
+            },
+        },
+        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

@@ -0,0 +1,13 @@
+import './LayoutSelector.style.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { Direction } from '@/external/spatial-navigation/utils';
+import { MultiViewLayout } from '../../../types';
+export type LayoutSelectorProps = {
+    layouts: MultiViewLayout[];
+    selectedLayoutId?: string;
+    onLayoutSelect?: (layout: MultiViewLayout) => void;
+    onLayoutArrowPress?: (direction: Direction) => void;
+    className?: string;
+};
+declare const LayoutSelector: (props: LayoutSelectorProps & WithFocusableProps) => JSX.Element;
+export default LayoutSelector;

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import './LayoutSelector.style.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { FocusableItem, useScrollableContainer, } from '@/components/core/ScrollableContainer';
+import SDK from '@/index';
+const LayoutOptionRowComponent = (props) => {
+    const { layout, selected, focusable, focused } = props;
+    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.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" },
+                    React.createElement("div", { className: `layout-selector-radio ${selected ? 'selected' : ''}`, "aria-hidden": true }, selected ? (React.createElement("span", { className: "layout-selector-radio-check" }, "\u2713")) : null))))));
+};
+const LayoutOptionRow = withFocusable()(LayoutOptionRowComponent);
+const LayoutSelector = (props) => {
+    const { scrollToFocusedElement } = useScrollableContainer();
+    const { layouts, selectedLayoutId, onLayoutSelect } = props;
+    const onBecameFocused = useCallback((layout) => {
+        scrollToFocusedElement(layout);
+    }, [scrollToFocusedElement]);
+    const onArrowPress = useCallback((d, _props) => {
+        if (d === 'left') {
+            SDK.getMaestroEventViewModel().deliverFocus();
+        }
+    }, []);
+    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;

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

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

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

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

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

@@ -0,0 +1,101 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './CuratedMultiviewCard.style.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { CuratedMultiviewListing } from '../../../types';
+export type CuratedMultiviewCardProps = {
+    listings: CuratedMultiviewListing[];
+    selected: boolean;
+};
+declare const _default: {
+    new (props: (CuratedMultiviewCardProps & WithFocusableProps) | Readonly<CuratedMultiviewCardProps & 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<CuratedMultiviewCardProps & 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<CuratedMultiviewCardProps & 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<CuratedMultiviewCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: CuratedMultiviewCardProps & 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<CuratedMultiviewCardProps & 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<CuratedMultiviewCardProps & 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<CuratedMultiviewCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CuratedMultiviewCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CuratedMultiviewCardProps & 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 _default;