@maestro_io/maestro-web-sdk 4.0.0-beta.4 → 4.0.0

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

@@ -1,65 +0,0 @@
-import './KeyPlayErrorStateView.styles.css';
-import React from 'react';
-import SDK from '@/index';
-import TabLoadErrorView from '@/components/molecules/TabLoadError';
-class UnpopulatedEvent extends React.Component {
-    render() {
-        return (React.createElement("div", { 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/key-plays/view/KeyPlaysView.d.ts

@@ -1,37 +0,0 @@
-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 vm;
-    constructor(props: {});
-    get viewModel(): KeyPlaysViewModel;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private handlePlayClip;
-    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/key-plays/view/KeyPlaysView.js

@@ -1,151 +0,0 @@
-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';
-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, "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);
-            }
-        });
-        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,
-        });
-    }
-    componentWillUnmount() {
-        this.playbackProgressUnsub && this.playbackProgressUnsub();
-        this.playbackIndexUnsub && this.playbackIndexUnsub();
-        this.itemsUnsub && this.itemsUnsub();
-    }
-    render() {
-        const { playbackProgress, playbackIndex, items, scrollableContainer, } = this.state;
-        return (React.createElement(ScrollableContainer, { scrollableContainerRef: scrollableContainer, containerTopOffset: STICKY_HEADER_HEIGHT },
-            React.createElement("div", { ref: (el) => {
-                    this.container = el;
-                }, 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/key-plays/view-model/KeyPlaysViewModel.d.ts

@@ -1,37 +0,0 @@
-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();
-    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/key-plays/view-model/KeyPlaysViewModel.js

@@ -1,246 +0,0 @@
-import SDK from '@/index';
-import { Observable } from '@/helpers/Observable';
-import { setImageDimensions } from '@/helpers/url';
-import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
-class KeyPlaysViewModel {
-    constructor() {
-        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 = new 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/shop/mocks.d.ts

@@ -1,22 +0,0 @@
-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;