@maestro_io/maestro-web-sdk 5.1.2 → 5.2.1

package/dist/src/modules/fox/components/TabLoadError/TabLoadError.d.ts

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

package/dist/src/modules/fox/components/TabLoadError/TabLoadError.js

@@ -0,0 +1,19 @@
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+import './TabLoadError.styles.css';
+import ActionButton from '@/components/molecules/ActionButton';
+const TabLoadErrorView = (props) => {
+    const { focused, onEnterPress } = props;
+    const setHeight = (element) => {
+        if (!element)
+            return;
+        const rect = element.getBoundingClientRect();
+        element.style.height = `${window.innerHeight - rect.top}px`;
+    };
+    return (React.createElement("div", { className: "tab-load-error", ref: setHeight },
+        React.createElement("h3", { className: "T70" }, "Oops! Something went wrong."),
+        React.createElement("p", { className: "T20" }, 'We are having trouble loading Multiview right now. Please try again'),
+        React.createElement("div", { className: "fox" },
+            React.createElement(ActionButton, { "data-focused": focused, onEnterPress: onEnterPress }, "Try Again"))));
+};
+export default withFocusable()(TabLoadErrorView);

package/dist/src/modules/fox/components/TabLoadError/index.d.ts

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

package/dist/src/modules/fox/components/TabLoadError/index.js

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

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

@@ -0,0 +1,3 @@
+export interface IMultiViewViewModel {
+    cleanup(): void;
+}

package/dist/src/modules/fox/multi-view/interfaces/IMultiViewViewModel.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,104 @@
+import { HttpMethod } from '@/services/NetworkManager/NetworkManager';
+import { MultiViewLayout } from '../types';
+export type ProductAPIData = {
+    url: string;
+    method: HttpMethod;
+    headers: Record<string, string>;
+    callback?: (error: ProductAPIErrorPayload) => void;
+};
+export type ProductAPIErrorPayload = {
+    code: number;
+    message: string;
+    success: false;
+    data?: unknown;
+};
+export type MultiViewListingRequest = {
+    layoutId: string;
+    listings: Array<{
+        listingId: string;
+        callsign: string;
+    }>;
+};
+export type MultiViewListingResponse = {
+    multiviewId?: string;
+    callbackSeconds?: number;
+};
+export interface CuratedMultiviewResponse {
+    status: boolean;
+    data?: {
+        items?: CuratedMultiviewResponseItem[];
+    };
+}
+export interface CuratedMultiviewResponseItem {
+    entity_id?: string;
+    type?: string;
+    title?: string;
+    is_multiview?: boolean;
+    is_multiview_eligible?: boolean;
+    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?: 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
+ */
+declare class MultiViewService {
+    private networkManager;
+    private productAPI;
+    constructor();
+    /**
+     * Fetch available multi-view layouts
+     *
+     * @returns Promise resolving to layouts data
+     */
+    getLayouts(): Promise<MultiViewLayout[]> | null;
+    /**
+     * Set the product API configuration
+     *
+     * @param productAPI - The product API endpoint, method, and headers
+     */
+    setProductAPIData(productAPI: ProductAPIData): void;
+    /**
+     * Start polling curated multiviews using the product API configuration.
+     * Returns null if no product API has been set.
+     *
+     * @param interval - Polling interval in milliseconds
+     * @param onData - Callback invoked with the data on each successful poll
+     * @param onError - Optional callback invoked on error
+     * @returns Object with a stop function, or null if no productAPI is configured
+     */
+    pollCuratedMultiviews(interval: number, onData: (data: CuratedMultiviewResponse) => void, onError?: (error: Error) => void): {
+        stop: () => void;
+    } | null;
+    /**
+     * Request an existing or new custom multiview.
+     * If the multiview exists, the response will include a multiviewId.
+     * If the multiview needs to be created, the response will include
+     * callbackSeconds indicating when to retry.
+     *
+     * @param config - The layout ID and listings for the multiview
+     * @param headers - Request headers (e.g. x-access-token, Content-Type)
+     * @returns Promise resolving to the multiview listing response
+     */
+    getOrCreateCustomMultiview(config: MultiViewListingRequest, headers?: Record<string, string>): Promise<MultiViewListingResponse>;
+}
+export default MultiViewService;

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

@@ -0,0 +1,97 @@
+import NetworkManager, { HttpMethod, } from '@/services/NetworkManager/NetworkManager';
+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.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) &&
+        (!data.callback || typeof data.callback === 'function'));
+};
+/**
+ * Service for handling multi-view API calls
+ */
+class MultiViewService {
+    constructor() {
+        Object.defineProperty(this, "networkManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "productAPI", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.networkManager = new NetworkManager();
+    }
+    /**
+     * Fetch available multi-view layouts
+     *
+     * @returns Promise resolving to layouts data
+     */
+    getLayouts() {
+        if (!this.productAPI) {
+            return null;
+        }
+        return this.networkManager.externalApiRequest({
+            endpoint: `${MULTIVIEW_BASE_URL}/mvlm/v1/layouts`,
+            headers: this.productAPI.headers,
+        });
+    }
+    /**
+     * Set the product API configuration
+     *
+     * @param productAPI - The product API endpoint, method, and headers
+     */
+    setProductAPIData(productAPI) {
+        this.productAPI = productAPI;
+    }
+    /**
+     * Start polling curated multiviews using the product API configuration.
+     * Returns null if no product API has been set.
+     *
+     * @param interval - Polling interval in milliseconds
+     * @param onData - Callback invoked with the data on each successful poll
+     * @param onError - Optional callback invoked on error
+     * @returns Object with a stop function, or null if no productAPI is configured
+     */
+    pollCuratedMultiviews(interval, onData, onError) {
+        if (!this.productAPI) {
+            return null;
+        }
+        return this.networkManager.pollExternalApiRequest({
+            endpoint: this.productAPI.url,
+            interval,
+            method: this.productAPI.method,
+            headers: this.productAPI.headers,
+            onData,
+            onError,
+        });
+    }
+    /**
+     * Request an existing or new custom multiview.
+     * If the multiview exists, the response will include a multiviewId.
+     * If the multiview needs to be created, the response will include
+     * callbackSeconds indicating when to retry.
+     *
+     * @param config - The layout ID and listings for the multiview
+     * @param headers - Request headers (e.g. x-access-token, Content-Type)
+     * @returns Promise resolving to the multiview listing response
+     */
+    getOrCreateCustomMultiview(config, headers = {}) {
+        return this.networkManager.externalApiRequest({
+            endpoint: `${MULTIVIEW_BASE_URL}/mvlm/v1/mvlisting`,
+            method: HttpMethod.POST,
+            data: config,
+            headers,
+        });
+    }
+}
+export default MultiViewService;

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

@@ -1,62 +1,68 @@
 /**
  * @description Represents a single stream/camera listing available for multi-view
  */
-export interface Listing {
+export interface CuratedMultiviewListing {
     id: string;
-    title: string;
-    thumbnailUrl: string;
-    streamUrl: string;
-    homeTeam?: {
-        name: string;
-        abbreviation: string;
-        logoUrl: string;
-        score?: number;
-    };
-    awayTeam?: {
-        name: string;
-        abbreviation: string;
-        logoUrl: string;
-        score?: number;
-    };
-    status?: 'live' | 'upcoming' | 'ended';
-    metadata?: Record<string, unknown>;
+    description: string;
+    backgroundImage: string;
+    type: string;
 }
 /**
- * @description Defines a multi-view layout configuration with positioned slots
+ * @description Position data for a single window within a layout
+ */
+export interface LayoutPosition {
+    w: number;
+    h: number;
+    x: number;
+    y: number;
+}
+/**
+ * @description Defines a multi-view layout configuration with positioned windows
  */
 export interface MultiViewLayout {
-    id: string;
+    layoutId: string;
+    description: string;
+    positions: Record<string, LayoutPosition>;
     name: string;
-    type: '50-50' | '60-40' | '70-30' | 'pip' | 'quad';
-    slots: Array<{
-        index: number;
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    }>;
+    windowCount: number;
+    positionsOrder: string[];
+}
+/**
+ * @description Child listing with position for new multiview event payload (PRD: SDK to pass event to client)
+ */
+export interface NewMultiviewChildListing {
+    listingId: string;
+    callsign: string;
+    position: LayoutPosition;
 }
 /**
- * @description Current multi-view state including listings and layout
+ * @description Payload for fox-multiview:new-multiview panel event when a curated multiview is selected
  */
-export interface MultiViewConfig {
-    listings: Listing[];
-    layout: MultiViewLayout;
-    primaryAudioSlot?: number;
+export interface NewMultiviewPayload {
+    multiviewID: string;
+    childListings: NewMultiviewChildListing[];
 }
+export type BuildYourOwnTab = 'streams' | 'layouts';
 /**
- * @description Represents a pre-configured curated multiview experience
+ * @description Represents a single camera angle within a stream
  */
-export interface CuratedMultiview {
+export type Camera = {
     id: string;
-    title: string;
-    description?: string;
-    thumbnailUrl?: string;
-    listings: Listing[];
-    defaultLayout: MultiViewLayout;
-    metadata?: Record<string, unknown>;
+    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
  */
-export declare const LAYOUTS_BY_COUNT: Record<2 | 3 | 4, MultiViewLayout[]>;
+export declare const DEFAULT_LAYOUTS_BY_LISTINGS_QUANTITY: Record<number, MultiViewLayout>;

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/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;