@maestro_io/maestro-web-sdk 5.1.1 → 5.1.2

package/dist/src/interfaces/IMaestroEventDelegate.d.ts

@@ -8,7 +8,14 @@ export type RequestLoginPanelEvent = {
         onLoginSuccess: () => void;
     };
 };
-export type PanelEvent = RequestLoginPanelEvent;
+/**
+ * Generic panel event type that supports client-specific events
+ * without exposing specific event structures in the SDK interface
+ */
+export type PanelEvent = {
+    type: string;
+    payload: unknown;
+};
 /**
  * @description Interface for the client app to implement in order to handle Maestro TV SDK events.
  */

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

@@ -154,8 +154,10 @@ export class FantasyViewModel {
         await this.fetchData();
     }
     async fetchData() {
+        this.isDataLoading.value = true;
         const isAuthenticated = await this.delegate.userIsAuthenticated();
         if (!isAuthenticated) {
+            this.isDataLoading.value = false;
             this.append({
                 id: 'not-logged-in',
                 type: 'notLoggedIn',
@@ -211,8 +213,11 @@ export class FantasyViewModel {
         this.itemToLeagueKey.clear();
         this._fantasyLeagues = [];
         this._tournamentChallenges = [];
+        this._promoItem = null;
         this._tcProcessingCount = 0;
         this.isLoadingTc.value = false;
+        this.fantasyItems.value = [];
+        this.hasEverSuccessfullyLoaded.value = false;
     }
     /**
      * Track panel view event
@@ -334,6 +339,7 @@ export class FantasyViewModel {
             // Mark successful load
             this.hasEverSuccessfullyLoaded.value = true;
             this.errorState.value = 'none';
+            this.isDataLoading.value = false;
             // Initial rebuild even if empty, to ensure state is clean
             this.rebuildFantasyItems();
         }
@@ -342,6 +348,7 @@ export class FantasyViewModel {
                 context: 'FantasyViewModel.processFantasy',
             });
             console.error('[FANTASY] Error processing fantasy data:', error);
+            this.isDataLoading.value = false;
             if (!this.hasEverSuccessfullyLoaded.value) {
                 this.errorState.value = 'tabLoadFailure';
             }

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

@@ -0,0 +1,62 @@
+/**
+ * @description Represents a single stream/camera listing available for multi-view
+ */
+export interface Listing {
+    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 Defines a multi-view layout configuration with positioned slots
+ */
+export interface MultiViewLayout {
+    id: string;
+    name: string;
+    type: '50-50' | '60-40' | '70-30' | 'pip' | 'quad';
+    slots: Array<{
+        index: number;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+}
+/**
+ * @description Current multi-view state including listings and layout
+ */
+export interface MultiViewConfig {
+    listings: Listing[];
+    layout: MultiViewLayout;
+    primaryAudioSlot?: number;
+}
+/**
+ * @description Represents a pre-configured curated multiview experience
+ */
+export interface CuratedMultiview {
+    id: string;
+    title: string;
+    description?: string;
+    thumbnailUrl?: string;
+    listings: Listing[];
+    defaultLayout: MultiViewLayout;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * @description Available layouts organized by stream count
+ */
+export declare const LAYOUTS_BY_COUNT: Record<2 | 3 | 4, MultiViewLayout[]>;

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

@@ -0,0 +1,89 @@
+/**
+ * @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 },
+            ],
+        },
+        {
+            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 },
+            ],
+        },
+        {
+            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 },
+            ],
+        },
+        {
+            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 },
+            ],
+        },
+    ],
+};

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 = {
+    streamCount: 2 | 3 | 4;
+    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,43 @@
+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';
+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-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 { streamCount, selectedLayoutId, onLayoutSelect } = props;
+    const layouts = LAYOUTS_BY_COUNT[streamCount] || [];
+    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 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 })))))));
+};
+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/package.json

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