@maestro_io/maestro-web-sdk 2.1.0 → 2.1.2

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

@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import KeyPlayCardView from './KeyPlayCardView';
+import './KeyPlaysView.styles.css';
+import KeyPlayErrorStateView from './KeyPlayErrorStateView';
+import SDK from '@/index';
+import { setFocus } from '@/external/spatial-navigation';
+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.vm.playKeyPlay(index);
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel().keyPlaysViewModel;
+        const rawSections = this.vm.items.value;
+        this.state = {
+            scrollableContainer: null,
+            playbackProgress: this.vm.currentClipPlaybackProgress.value ?? null,
+            playbackIndex: this.vm.currentlyPlayingClipIndex.value ?? null,
+            items: rawSections.map((section) => ({
+                title: section.title,
+                items: section.items.map((item) => ({
+                    id: item.id,
+                    clipID: item.clipID,
+                    awayTeamScore: item.awayTeamScore,
+                    homeTeamScore: item.homeTeamScore,
+                    awayTeamName: item.awayTeamName,
+                    homeTeamName: item.homeTeamName,
+                    description: item.description,
+                    playerImageUrl: item.playerImageUrl || '',
+                    teamImageUrl: item.teamImageUrl || '',
+                    thumbnailImageUrl: item.thumbnailImageUrl || '',
+                })),
+            })),
+        };
+    }
+    componentDidMount() {
+        this.playbackProgressUnsub = this.vm.currentClipPlaybackProgress.subscribe((value) => {
+            this.setState({ playbackProgress: value ?? null });
+        });
+        this.playbackIndexUnsub = this.vm.currentlyPlayingClipIndex.subscribe((value) => {
+            this.setState({ playbackIndex: value ?? null });
+        });
+        this.itemsUnsub = this.vm.items.subscribe((rawSections) => {
+            this.setState({
+                items: rawSections.map((section) => ({
+                    title: section.title,
+                    items: section.items.map((item) => ({
+                        id: item.id,
+                        clipID: item.clipID,
+                        awayTeamScore: item.awayTeamScore,
+                        homeTeamScore: item.homeTeamScore,
+                        awayTeamName: item.awayTeamName,
+                        homeTeamName: item.homeTeamName,
+                        description: item.description,
+                        playerImageUrl: item.playerImageUrl || '',
+                        teamImageUrl: item.teamImageUrl || '',
+                        thumbnailImageUrl: item.thumbnailImageUrl || '',
+                    })),
+                })),
+            });
+        });
+        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" },
+                    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);
+                        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.vm.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.vm.userRequestedNewKeyPlaysData();
+                setFocus('PANEL_NAV_BUTTON_0');
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel().keyPlaysViewModel;
+        this.state = { errorState: this.vm.errorState.value };
+    }
+    componentDidMount() {
+        this.errorStateUnsub = this.vm.errorState.subscribe((value) => {
+            this.setState({ errorState: value });
+        });
+    }
+    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/modules/key-plays/view-model/KeyPlaysViewModel.js

@@ -0,0 +1,182 @@
+import SDK from '@/index';
+import { Observable } from '@/helpers/Observable';
+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([])
+        });
+    }
+    isCurrentlyPlaying(index) {
+        return index === this.currentlyPlayingClipIndex.value;
+    }
+    async setKeyPlays(items) {
+        if (items === null) {
+            this.errorState.value = 'tabLoadFailure';
+            return;
+        }
+        this.items.value = this.parseNetworkResponse(items);
+        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.allItems.length) {
+            this.errorState.value = 'unpopulatedEvent';
+        }
+    }
+    async playKeyPlay(atIndex) {
+        const mevm = SDK.getMaestroEventViewModel();
+        mevm.delegate.playClip(atIndex);
+    }
+    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');
+        if (!homeTeam || !awayTeam) {
+            console.warn('Could not find home or away team');
+            return [];
+        }
+        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 ? playTeam.logoRef : undefined;
+                const playerImageUrl = athlete ? athlete.headshot : undefined;
+                const thumbnailImageUrl = keyPlay.thumbnailType !== 'headshot' ? keyPlay.thumbnail : 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 randomId = Math.random().toString(36).substring(2, 15);
+                const keyPlayData = {
+                    id: randomId,
+                    description: keyPlay.description ? keyPlay.description : '',
+                    homeTeamName: homeTeam ? homeTeam.shortName : '',
+                    awayTeamName: awayTeam ? awayTeam.shortName : '',
+                    homeTeamScore,
+                    awayTeamScore,
+                    clipID: keyPlay.clipID,
+                    teamImageUrl,
+                    playerImageUrl,
+                    thumbnailImageUrl,
+                    section: section.title,
+                };
+                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/modules/stats/interfaces/IStats.d.ts

@@ -0,0 +1,163 @@
+export interface TeamStatistic {
+    $key: string;
+    value: number;
+    displayValue: string;
+    displayName: string;
+}
+export interface Team {
+    id: string;
+    uid: string;
+    slug?: string;
+    location?: string;
+    name?: string;
+    abbreviation: string;
+    displayName: string;
+    shortDisplayName?: string;
+    color?: string;
+    alternateColor?: string;
+    logo: string;
+    statistics?: TeamStatistic[];
+    homeAway?: string;
+    record?: string;
+    displayOrder?: number;
+}
+interface AthleteLink {
+    rel: string[];
+    href: string;
+    text: string;
+}
+interface AthletePosition {
+    name?: string;
+    displayName?: string;
+    abbreviation: string;
+}
+export interface Athlete {
+    id: string;
+    uid: string;
+    guid: string;
+    displayName: string;
+    shortName: string;
+    jersey: string;
+    headshot: string;
+    links: AthleteLink[];
+    position: AthletePosition;
+    statistics?: {
+        $key: string;
+        value?: number;
+        displayValue: string;
+    }[];
+}
+export interface EntityMap<T> {
+    [id: string]: T;
+}
+interface LeaderStatistic {
+    displayValue: string;
+    abbreviation: string;
+}
+interface LeaderAthlete {
+    $key: string;
+    statistics?: LeaderStatistic[];
+}
+interface LeaderTeam {
+    team: {
+        $key: string;
+    };
+    athlete: LeaderAthlete;
+}
+export interface Leader {
+    displayName: string;
+    name: string;
+    home: LeaderTeam;
+    away: LeaderTeam;
+}
+interface LineScore {
+    displayValue: string;
+}
+interface HeaderTeam {
+    $key: string;
+    score?: string;
+    linescores: LineScore[];
+}
+export interface Header {
+    teams: HeaderTeam[];
+    linescoresHeader: string[];
+}
+export interface PredictorTeam {
+    team: {
+        $key: string;
+    };
+    gameProjection: string;
+    teamChanceLoss: string;
+}
+export interface Predictor {
+    header: string;
+    imageUrl: string;
+    homeTeam: PredictorTeam;
+    awayTeam: PredictorTeam;
+}
+export interface WinProbabilityTeam {
+    team: {
+        $key: string;
+    };
+    winPercentage: string;
+}
+export interface WinProbability {
+    imageUrl: string;
+    homeTeam: WinProbabilityTeam;
+    awayTeam: WinProbabilityTeam;
+}
+interface ActiveAthletesTeam {
+    team: {
+        $key: string;
+    };
+    athletes: unknown[];
+}
+export interface ActiveAthletes {
+    displayText: string;
+    teams: ActiveAthletesTeam[];
+}
+export interface Meta {
+    gp_topic: string;
+    picker_topic: string;
+    lastUpdatedAt?: string;
+    firstPlayWallClock?: string;
+    lastPlayWallClock?: string;
+    gameState: string;
+    syncUrl?: string;
+}
+export interface StatsPromotion {
+    title: string;
+    description: string;
+    logo: string;
+    qrCode: string;
+    backgroundImage: string;
+}
+export interface StatsApiResponse {
+    entities: {
+        teams: EntityMap<Team>;
+        athletes: EntityMap<Athlete>;
+    };
+    leaders: Leader[];
+    header: Header;
+    predictor: Predictor;
+    winProbability: WinProbability;
+    gameState: string;
+    activeAthletes?: ActiveAthletes;
+    meta: Meta;
+    promotion?: StatsPromotion;
+    previousGames?: {
+        displayOrder: number;
+        team: {
+            $key: string;
+        };
+        events: {
+            team: {
+                $key: string;
+                homeAway: string;
+            };
+            score: string;
+            gameResult: string;
+        }[];
+    }[];
+}
+export {};

package/dist/modules/stats/interfaces/IStats.js

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

package/dist/modules/stats/mocks.d.ts

@@ -0,0 +1,2 @@
+import { StatsApiResponse } from './interfaces/IStats';
+export declare const MOCK_STATS_API_PRE_GAME_RESPONSE: StatsApiResponse;