@maestro_io/maestro-web-sdk 5.0.0 → 5.1.0

package/dist/src/modules/espn/key-plays/view/KeyPlayErrorStateView.js

@@ -0,0 +1,65 @@
+import './KeyPlayErrorStateView.styles.css';
+import React from 'react';
+import SDK from '@/index';
+import TabLoadErrorView from '@/components/molecules/TabLoadError';
+import { useMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';
+const UnpopulatedEvent = () => {
+    const maxHeightRef = useMaxHeightToBottom();
+    return (React.createElement("div", { ref: maxHeightRef, className: "sdk--key-play-error-state-unpopulatedEvent" },
+        React.createElement("div", { className: "main-content" },
+            React.createElement("h3", { className: "T70" }, "Good things come to those who wait!"),
+            React.createElement("p", { className: "T20" }, "When a key play occurs we will serve them up for you here.")),
+        React.createElement("div", { className: "unpopulatedEvent-examples" }, Array.from({ length: 4 }).map((_, i) => (React.createElement("div", { key: i, className: "example" },
+            React.createElement("div", { className: "image" }),
+            React.createElement("div", { className: "content" },
+                React.createElement("div", { className: "headline" }),
+                React.createElement("div", { className: "body" }))))))));
+};
+class UnsupportedEvent extends React.Component {
+    render() {
+        return (React.createElement("div", { className: "sdk--key-play-error-state-unsupportedEvent" },
+            React.createElement("h3", { className: "T70" }, "No Key Plays Available"),
+            React.createElement("svg", { viewBox: "0 0 520 359", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("g", { opacity: "0.16" },
+                    React.createElement("path", { d: "M146.334 219.427V244.686L168.723 198.187V38.0215L165.279 40.3178V188.427L146.334 219.427Z", fill: "#6D6D6D" }),
+                    React.createElement("rect", { x: "94.6687", y: "219.427", width: "51.6662", height: "25.259", fill: "#777777" }),
+                    React.createElement("rect", { x: "145.187", y: "39.1694", width: "20.6665", height: "149.258", fill: "#666666" }),
+                    React.createElement("path", { d: "M146.335 219.427H94.6687L143.465 187.279H167.001L146.335 219.427Z", fill: "#666666" }),
+                    React.createElement("path", { d: "M375.389 219.427V244.686L353 198.187V38.0215L356.445 40.3178V188.427L375.389 219.427Z", fill: "#6D6D6D" }),
+                    React.createElement("rect", { width: "51.6662", height: "25.259", transform: "matrix(-1 0 0 1 427.055 219.427)", fill: "#777777" }),
+                    React.createElement("rect", { width: "20.6665", height: "149.258", transform: "matrix(-1 0 0 1 376.537 39.1694)", fill: "#666666" }),
+                    React.createElement("path", { d: "M375.389 219.427H427.055L378.259 187.279H354.722L375.389 219.427Z", fill: "#666666" }),
+                    React.createElement("path", { d: "M23.4844 141.354H496.517L410.981 121.835H93.5208L23.4844 141.354Z", fill: "#B1B1B1" }),
+                    React.createElement("rect", { x: "23.4844", y: "141.354", width: "473.033", height: "19.5183", fill: "#777777" }),
+                    React.createElement("rect", { x: "72.8545", y: "51.7993", width: "374.293", height: "45.9255", fill: "#CDCDCD" })))));
+    }
+}
+class KeyPlayErrorStateView extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+    }
+    render() {
+        const { errorState, onRetry } = this.props;
+        if (errorState === 'unsupportedEvent') {
+            return React.createElement(UnsupportedEvent, null);
+        }
+        if (errorState === 'unpopulatedEvent') {
+            return React.createElement(UnpopulatedEvent, null);
+        }
+        if (errorState === 'tabLoadFailure') {
+            return (React.createElement(TabLoadErrorView, { onEnterPress: onRetry, onArrowPress: this.onArrowPress }));
+        }
+        return null;
+    }
+}
+export default KeyPlayErrorStateView;

package/dist/src/modules/espn/key-plays/view/KeyPlaysView.d.ts

@@ -0,0 +1,39 @@
+import { Component } from 'react';
+import './KeyPlaysView.styles.css';
+import { KeyPlaysErrorState } from '../interfaces/IKeyPlays';
+import KeyPlaysViewModel, { KeyPlayItem } from '../view-model/KeyPlaysViewModel';
+interface IKeyPlaysState {
+    playbackProgress: number | null;
+    playbackIndex: number | null;
+    items: KeyPlayItem[];
+    scrollableContainer: HTMLDivElement | null;
+}
+export declare class KeyPlays extends Component<{}, IKeyPlaysState> {
+    private container;
+    private playbackProgressUnsub;
+    private playbackIndexUnsub;
+    private itemsUnsub;
+    private maxHeightCleanup;
+    private vm;
+    constructor(props: {});
+    get viewModel(): KeyPlaysViewModel;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private handlePlayClip;
+    setContainerRef: (e: HTMLDivElement | null) => void;
+    render(): JSX.Element;
+}
+interface KeyPlaysWithErrorStateState {
+    errorState: KeyPlaysErrorState;
+}
+export default class KeyPlaysWithErrorState extends Component<{}, KeyPlaysWithErrorStateState> {
+    private errorStateUnsub;
+    private vm;
+    constructor(props: {});
+    get viewModel(): KeyPlaysViewModel;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private handleRetry;
+    render(): JSX.Element;
+}
+export {};

package/dist/src/modules/espn/key-plays/view/KeyPlaysView.js

@@ -0,0 +1,179 @@
+import React, { Component } from 'react';
+import KeyPlayCardView from './KeyPlayCardView';
+import './KeyPlaysView.styles.css';
+import KeyPlayErrorStateView from './KeyPlayErrorStateView';
+import SDK from '@/index';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+import { setupMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';
+const STICKY_HEADER_HEIGHT = 32;
+export class KeyPlays extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "playbackProgressUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "playbackIndexUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "itemsUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "maxHeightCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "handlePlayClip", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => async () => {
+                await this.viewModel.playKeyPlay(index);
+            }
+        });
+        Object.defineProperty(this, "setContainerRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                if (e && !this.container) {
+                    this.container = e;
+                }
+                if (this.container !== e) {
+                    this.container = e;
+                    if (this.maxHeightCleanup) {
+                        this.maxHeightCleanup();
+                    }
+                    if (this.container) {
+                        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
+                    }
+                }
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel()
+            .keyPlaysViewModel;
+        this.state = {
+            scrollableContainer: null,
+            playbackProgress: this.viewModel.currentClipPlaybackProgress.value ?? null,
+            playbackIndex: this.viewModel.currentlyPlayingClipIndex.value ?? null,
+            items: this.viewModel.filteredItems.value ?? [],
+        };
+    }
+    get viewModel() {
+        if (!this.vm) {
+            throw new Error('KeyPlaysViewModel is not initialized');
+        }
+        return this.vm;
+    }
+    componentDidMount() {
+        this.playbackProgressUnsub = this.viewModel.currentClipPlaybackProgress.subscribe((value) => {
+            this.setState({ playbackProgress: value ?? null });
+        });
+        this.playbackIndexUnsub = this.viewModel.currentlyPlayingClipIndex.subscribe((value) => {
+            this.setState({ playbackIndex: value ?? null });
+        });
+        this.itemsUnsub = this.viewModel.filteredItems.subscribe((items) => {
+            this.setState({
+                items,
+            });
+        });
+        this.setState({
+            scrollableContainer: this.container,
+        });
+        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
+    }
+    componentWillUnmount() {
+        this.playbackProgressUnsub && this.playbackProgressUnsub();
+        this.playbackIndexUnsub && this.playbackIndexUnsub();
+        this.itemsUnsub && this.itemsUnsub();
+        this.maxHeightCleanup && this.maxHeightCleanup();
+    }
+    render() {
+        const { playbackProgress, playbackIndex, items, scrollableContainer, } = this.state;
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: scrollableContainer, containerTopOffset: STICKY_HEADER_HEIGHT },
+            React.createElement("div", { ref: this.setContainerRef, className: "key-plays-view" },
+                items.map((section, sectionIndex) => (React.createElement("div", { key: `section-${sectionIndex}`, className: "key-plays-section" },
+                    section.title && (React.createElement("h3", { className: "key-plays-section-title T10" }, section.title)),
+                    React.createElement("div", { className: "key-plays-section-items" }, section.items.map((item) => {
+                        const absoluteIndex = this.vm?.allItems.findIndex((vmItem) => vmItem.id === item.id) ?? -1;
+                        return (React.createElement(KeyPlayCardView, { key: item.id, id: item.id, clipID: item.clipID, description: item.description, awayTeamName: item.awayTeamName, homeTeamName: item.homeTeamName, awayTeamScore: item.awayTeamScore, homeTeamScore: item.homeTeamScore, playerImageUrl: item.playerImageUrl, teamImageUrl: item.teamImageUrl, thumbnailImageUrl: item.thumbnailImageUrl, isPlaying: this.viewModel.isCurrentlyPlaying(absoluteIndex), isScoring: Boolean(item.awayTeamScore && item.homeTeamScore), playbackProgress: absoluteIndex === playbackIndex
+                                ? playbackProgress
+                                : null, onEnterPress: this.handlePlayClip(absoluteIndex) }));
+                    }))))),
+                React.createElement("div", { className: "key-plays-bottom-padding" }))));
+    }
+}
+export default class KeyPlaysWithErrorState extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "errorStateUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "handleRetry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: async () => {
+                await this.viewModel.userRequestedNewKeyPlaysData();
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel()
+            .keyPlaysViewModel;
+        this.state = {
+            errorState: this.viewModel.errorState.value,
+        };
+    }
+    get viewModel() {
+        if (!this.vm) {
+            throw new Error('KeyPlaysViewModel is not initialized');
+        }
+        return this.vm;
+    }
+    componentDidMount() {
+        this.errorStateUnsub = this.viewModel.errorState.subscribe((value) => {
+            this.setState({ errorState: value });
+        });
+        this.viewModel.init();
+    }
+    componentWillUnmount() {
+        this.errorStateUnsub && this.errorStateUnsub();
+    }
+    render() {
+        const { errorState } = this.state;
+        if (errorState) {
+            return (React.createElement(KeyPlayErrorStateView, { errorState: errorState, onRetry: this.handleRetry }));
+        }
+        return React.createElement(KeyPlays, null);
+    }
+}

package/dist/src/modules/espn/key-plays/view-model/KeyPlaysViewModel.d.ts

@@ -0,0 +1,37 @@
+import IMaestroKeyPlaysResponse from '../interfaces/IKeyPlaysResponse';
+import IKeyPlay, { KeyPlayLoadFailureStatus, KeyPlaysErrorState } from '../interfaces/IKeyPlays';
+import { Observable } from '@/helpers/Observable';
+import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
+export type KeyPlayItem = {
+    title?: string;
+    items: IKeyPlay[];
+};
+declare class KeyPlaysViewModel {
+    currentlyPlayingClipIndex: Observable<number | null>;
+    lastPlayedClipIndex: Observable<number | null>;
+    currentClipPlaybackProgress: Observable<number | null>;
+    errorState: Observable<KeyPlaysErrorState | null>;
+    failedClips: Observable<{
+        [key: string]: KeyPlayLoadFailureStatus;
+    }>;
+    items: Observable<KeyPlayItem[]>;
+    filteredItems: Observable<KeyPlayItem[]>;
+    analyticsService: AnalyticsService;
+    constructor(analyticsService: AnalyticsService);
+    onUpdatePlayerTimeCode(playerTimeCode: number | null): void;
+    private filterItemsByPlayerTimeCode;
+    private shouldShowKeyPlay;
+    isCurrentlyPlaying(index: number): boolean;
+    setKeyPlays(items: IMaestroKeyPlaysResponse | null, playerTimeCode: number | null): Promise<void>;
+    private cleanErrors;
+    playKeyPlay(atIndex: number): Promise<void>;
+    init(): Promise<void>;
+    parseNetworkResponse(response: IMaestroKeyPlaysResponse): KeyPlayItem[];
+    get allItems(): IKeyPlay[];
+    clipID(forKeyPlayAtIndex: number): string | undefined;
+    handleKeyPlayLoadFailure(forKeyPlayAtIndex: number): void;
+    loadFailureStatus(forKeyPlayAtIndex: number): KeyPlayLoadFailureStatus;
+    clearLoadFailureStatus(forKeyPlayAtIndex: number): void;
+    userRequestedNewKeyPlaysData(): Promise<void>;
+}
+export default KeyPlaysViewModel;

package/dist/src/modules/espn/key-plays/view-model/KeyPlaysViewModel.js

@@ -0,0 +1,245 @@
+import SDK from '@/index';
+import { Observable } from '@/helpers/Observable';
+import { setImageDimensions } from '@/helpers/url';
+class KeyPlaysViewModel {
+    constructor(analyticsService) {
+        Object.defineProperty(this, "currentlyPlayingClipIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(null)
+        });
+        Object.defineProperty(this, "lastPlayedClipIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(null)
+        });
+        Object.defineProperty(this, "currentClipPlaybackProgress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(null)
+        });
+        Object.defineProperty(this, "errorState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('unpopulatedEvent')
+        });
+        Object.defineProperty(this, "failedClips", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable({})
+        });
+        Object.defineProperty(this, "items", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "filteredItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.analyticsService = analyticsService;
+    }
+    onUpdatePlayerTimeCode(playerTimeCode) {
+        this.filterItemsByPlayerTimeCode(playerTimeCode);
+        this.cleanErrors();
+    }
+    filterItemsByPlayerTimeCode(playerTimeCode) {
+        if (!playerTimeCode) {
+            this.filteredItems.value = this.items.value;
+            return;
+        }
+        const filteredItems = [];
+        for (const item of this.items.value) {
+            const filteredKeyPlays = item.items.filter((keyPlay) => this.shouldShowKeyPlay(keyPlay, playerTimeCode));
+            if (filteredKeyPlays.length > 0) {
+                filteredItems.push({
+                    title: item.title,
+                    items: filteredKeyPlays,
+                });
+            }
+        }
+        this.filteredItems.value = filteredItems;
+    }
+    shouldShowKeyPlay(keyPlay, playerTimeCode) {
+        if (!keyPlay.wallClock || !playerTimeCode) {
+            return true;
+        }
+        const timestamp = new Date(playerTimeCode);
+        const wallClockTimestamp = new Date(keyPlay.wallClock);
+        return wallClockTimestamp <= timestamp;
+    }
+    isCurrentlyPlaying(index) {
+        return index === this.currentlyPlayingClipIndex.value;
+    }
+    async setKeyPlays(items, playerTimeCode) {
+        if (items === null) {
+            this.errorState.value = 'tabLoadFailure';
+            return;
+        }
+        this.items.value = this.parseNetworkResponse(items);
+        this.filterItemsByPlayerTimeCode(playerTimeCode);
+        this.cleanErrors();
+    }
+    cleanErrors() {
+        if (this.errorState.value === 'tabLoadFailure') {
+            this.errorState.value = null;
+        }
+        if (this.errorState.value === 'unpopulatedEvent' && this.allItems.length) {
+            this.errorState.value = null;
+        }
+        if (!this.filteredItems.value.length) {
+            this.errorState.value = 'unpopulatedEvent';
+        }
+    }
+    async playKeyPlay(atIndex) {
+        const keyPlay = this.allItems[atIndex];
+        if (!keyPlay) {
+            console.warn('Key play not found at index:', atIndex);
+            return;
+        }
+        const mevm = SDK.getMaestroEventViewModel();
+        mevm.delegate.playClip(atIndex);
+        this.analyticsService.panelClick({
+            type: 'espnKeyPlays',
+            name: 'key_play_clicked',
+            metadata: {
+                action: 'play clip',
+                clip: keyPlay.clipID,
+                key_play: keyPlay.description,
+            },
+        });
+    }
+    async init() {
+        await this.analyticsService.panelView('espnKeyPlays');
+    }
+    parseNetworkResponse(response) {
+        const teams = Object.values(response.entities?.team || {});
+        const athletes = Object.values(response.entities?.athlete || {});
+        const homeTeam = teams.find((team) => team.homeAway === 'home');
+        const awayTeam = teams.find((team) => team.homeAway === 'away');
+        const items = [];
+        const result = [];
+        for (const section of response.sections) {
+            for (const keyPlay of section.items) {
+                const playTeam = keyPlay.team
+                    ? teams.find((team) => team.id === keyPlay.team)
+                    : undefined;
+                const athlete = keyPlay.athlete
+                    ? athletes.find((a) => a.id === keyPlay.athlete)
+                    : undefined;
+                const teamImageUrl = playTeam?.logoRef
+                    ? setImageDimensions(playTeam.logoRef, 184, 144)
+                    : undefined;
+                const playerImageUrl = athlete?.headshot
+                    ? setImageDimensions(athlete.headshot, 184, 144)
+                    : undefined;
+                const thumbnailImageUrl = keyPlay.thumbnailType !== 'headshot' && keyPlay.thumbnail
+                    ? setImageDimensions(keyPlay.thumbnail, 184, 144)
+                    : undefined;
+                const homeScore = keyPlay.homeScore ? keyPlay.homeScore : '0';
+                const awayScore = keyPlay.awayScore ? keyPlay.awayScore : '0';
+                const homeTeamScore = keyPlay.scoringPlay
+                    ? parseInt(homeScore)
+                    : undefined;
+                const awayTeamScore = keyPlay.scoringPlay
+                    ? parseInt(awayScore)
+                    : undefined;
+                const keyPlayData = {
+                    id: `${section.title || ''}-${keyPlay.clipID}`,
+                    description: keyPlay.description ? keyPlay.description : '',
+                    homeTeamName: homeTeam ? homeTeam.shortName : '',
+                    awayTeamName: awayTeam ? awayTeam.shortName : '',
+                    homeTeamScore,
+                    awayTeamScore,
+                    clipID: keyPlay.clipID,
+                    teamImageUrl,
+                    playerImageUrl,
+                    thumbnailImageUrl,
+                    section: section.title,
+                    wallClock: keyPlay.wallClock,
+                };
+                items.push(keyPlayData);
+            }
+            // Only add the section if it has items
+            if (items.length) {
+                const sectionTitle = section.title;
+                const existingSection = result.find((item) => item.title === sectionTitle);
+                if (existingSection) {
+                    existingSection.items.push(...items);
+                }
+                else {
+                    result.push({
+                        title: sectionTitle,
+                        items: [...items],
+                    });
+                }
+                // Reset items for the next section
+                items.length = 0;
+            }
+        }
+        return result;
+    }
+    get allItems() {
+        return this.items.value.reduce((acc, section) => {
+            return acc.concat(section.items);
+        }, []);
+    }
+    clipID(forKeyPlayAtIndex) {
+        const item = this.allItems[forKeyPlayAtIndex];
+        if (!item) {
+            return undefined;
+        }
+        return this.allItems[forKeyPlayAtIndex].clipID;
+    }
+    handleKeyPlayLoadFailure(forKeyPlayAtIndex) {
+        const clipID = this.clipID(forKeyPlayAtIndex);
+        if (clipID) {
+            const newFailedClips = this.failedClips.value;
+            newFailedClips[clipID] = 'recentFailure';
+            this.failedClips.value = newFailedClips;
+            setTimeout(() => {
+                if (this.loadFailureStatus(forKeyPlayAtIndex) === 'recentFailure') {
+                    const newFailedClips = this.failedClips.value;
+                    newFailedClips[clipID] = 'nonRecentFailure';
+                    this.failedClips.value = newFailedClips;
+                }
+            }, 5000);
+        }
+    }
+    loadFailureStatus(forKeyPlayAtIndex) {
+        const clipID = this.clipID(forKeyPlayAtIndex);
+        const newFailedClips = this.failedClips.value;
+        if (!newFailedClips) {
+            return 'noFailure';
+        }
+        return clipID ? this.failedClips.value[clipID] : 'noFailure';
+    }
+    clearLoadFailureStatus(forKeyPlayAtIndex) {
+        const clipID = this.clipID(forKeyPlayAtIndex);
+        if (clipID && this.failedClips) {
+            this.failedClips.value = {
+                ...this.failedClips.value,
+                [clipID]: 'noFailure',
+            };
+        }
+    }
+    async userRequestedNewKeyPlaysData() {
+        const mevm = SDK.getMaestroEventViewModel();
+        await mevm.delegate.userRequestedNewKeyPlaysData();
+    }
+}
+export default KeyPlaysViewModel;

package/dist/src/modules/espn/shop/mocks.d.ts

@@ -0,0 +1,22 @@
+import { IShopResponse } from './types';
+/**
+ * Mock shop data for NFL game with multiple sections
+ * Covers: regular products, sale products, and browse card
+ */
+export declare const MOCK_SHOP_NFL_RESPONSE: IShopResponse;
+/**
+ * Mock shop data for NBA game
+ */
+export declare const MOCK_SHOP_NBA_RESPONSE: IShopResponse;
+/**
+ * Mock shop data for NCAA Football
+ */
+export declare const MOCK_SHOP_NCF_RESPONSE: IShopResponse;
+/**
+ * Mock shop data with empty sections
+ */
+export declare const MOCK_SHOP_EMPTY_RESPONSE: IShopResponse;
+/**
+ * Mock shop data with single section
+ */
+export declare const MOCK_SHOP_SINGLE_SECTION_RESPONSE: IShopResponse;