@maestro_io/maestro-web-sdk 3.3.1 → 4.0.0-beta.2

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

@@ -0,0 +1,151 @@
+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.js

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