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

package/dist/src/components/organisms/SegmentController/SegmentController.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import SegmentButton from '@/components/molecules/SegmentButton';
+import './SegmentController.styles.css';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import SDK from '@/index';
+class SegmentController extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                activeIndex: 0,
+                lastActiveIndex: 0,
+            }
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item, i) => (layout) => {
+                if (this.state.lastActiveIndex !== i &&
+                    this.state.lastActiveIndex !== null) {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(`segment-controller-${this.state.lastActiveIndex}`);
+                    return;
+                }
+                this.setState({
+                    activeIndex: i,
+                    lastActiveIndex: null,
+                });
+                item.onEnter();
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item) => () => {
+                item.onEnter();
+            }
+        });
+        Object.defineProperty(this, "handleArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => (direction, _props) => {
+                if (direction === 'down' || direction === 'up') {
+                    this.setState({ lastActiveIndex: this.state.activeIndex });
+                }
+                if (direction === 'left' && index === 0) {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+    }
+    render() {
+        return (React.createElement("div", { className: "segment-controller", style: {
+                backgroundColor: this.props.backgroundColor,
+            } }, this.props.items.map((item, index) => (React.createElement(SegmentButton, { focusKey: `segment-controller-${index}`, key: item.title, onBecameFocused: this.onBecameFocused(item, index), onArrowPress: this.handleArrowPress(index), onEnterPress: this.onEnterPress(item), active: this.state.activeIndex === index }, item.title)))));
+    }
+}
+Object.defineProperty(SegmentController, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default SegmentController;

package/dist/src/components/organisms/SegmentController/index.js

@@ -0,0 +1,2 @@
+import SegmentController from './SegmentController';
+export default SegmentController;

package/dist/src/development/MaestroEventDelegate.js

@@ -0,0 +1,109 @@
+import SDK from '..';
+import { KEY_PLAYS_RESPONSE_MOCK_DATA } from '../modules/key-plays/constants';
+const playbackProgressIntervals = {};
+let keyPlayClipError = true;
+const LOGGED_IN_USER_SWID = '{45636D22-B82E-494E-B0BD-DBF25AB34BB5}';
+const LOGGED_IN_USER_COOKIE = 'AEA916LtQmdBEZaslSodIec3p/BaLeVs//M0vT1/lWr7EB/O3KAYs194dsnz/ytViMfYJw7sw0psPTaLeiDSljkUoZ8oei6NXfyANi2aHiFNzXJVRhVX9RxgBivWJbwMW9+UNriY+OpQAtmvdJ8Z4YImkg8I/ObizzP1p2us9RpqrKByaG0hejzX7qGx3EkkD0gLi5jp19IZxVGrqvXusM8rOSAiKytR0by9elfs0KGCXjdw6M0/qmolfyQviKQpTlwakeixqUsvngwX+Ws/rgm88IuQFwfdg9KWgFkMPhwEFj3LMdu155Gbh4fJM8p2wwtN+/MtynUXQPiGXWoB9AZC';
+const allPlays = KEY_PLAYS_RESPONSE_MOCK_DATA.sections.reduce((prev, curr) => prev + curr.items.length, 0);
+/**
+ * Our own implementation of the IMaestroEventDelegate interface. Useful for Development and Testing
+ */
+export default class MaestroEventDelegate {
+    constructor({ env, loggedIn, } = {
+        env: 'production',
+        loggedIn: true,
+    }) {
+        Object.defineProperty(this, "loggedIn", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "env", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'production'
+        });
+        this.env = env;
+        this.loggedIn = loggedIn;
+    }
+    onPanelEvent(event) {
+        switch (event.type) {
+            case 'fantasy:request:login':
+                this.toggleLogin();
+                event.payload.onLoginSuccess();
+                break;
+            default:
+                console.warn('Unhandled panel event:', event);
+        }
+    }
+    toggleLogin() {
+        this.loggedIn = !this.loggedIn;
+    }
+    trackImpression(impression) {
+        console.log('[Analytics] Impression:', impression);
+    }
+    trackAction(action) {
+        console.log('[Analytics] Action:', action);
+    }
+    getStatsAPIBaseURL() {
+        return this.env === 'production'
+            ? 'https://client.espncdn.com/fauxcast/stats'
+            : 'https://client.espnqa.com/fauxcast/stats';
+    }
+    getBettingAPIBaseURL() {
+        return this.env === 'production'
+            ? 'http://localhost:8080/espn-api-prod'
+            : 'http://localhost:8080/espn-api';
+    }
+    userRequestedNewKeyPlaysData() {
+        throw new Error('Method not implemented.');
+    }
+    startFocusManagement() {
+        return Promise.resolve(SDK.getMaestroEventViewModel().startFocusManagement());
+    }
+    userIsAuthenticated() {
+        return Promise.resolve(this.loggedIn);
+    }
+    getUserSWID() {
+        return this.loggedIn
+            ? Promise.resolve(LOGGED_IN_USER_SWID)
+            : Promise.resolve(null);
+    }
+    getUserToken() {
+        return this.loggedIn
+            ? Promise.resolve(LOGGED_IN_USER_COOKIE)
+            : Promise.resolve(null);
+    }
+    playClip(atIndex) {
+        Object.values(playbackProgressIntervals).forEach((interval) => {
+            clearInterval(interval);
+        });
+        // Do something with the clip index
+        const event = SDK.getMaestroEventViewModel();
+        if (atIndex === 0 && keyPlayClipError) {
+            keyPlayClipError = false;
+            event.didFailToPlayClip(atIndex);
+            this.playClip(atIndex + 1);
+            return;
+        }
+        event.didStartPlayingClip(atIndex);
+        // Simulate playback progress
+        let progress = 0;
+        playbackProgressIntervals[atIndex] = setInterval(() => {
+            progress += 0.002;
+            if (progress >= 1) {
+                clearInterval(playbackProgressIntervals[atIndex]);
+                event.didStopPlayingClip(atIndex);
+                // if index is still under allPlays boundary, play next clip
+                if (atIndex + 1 < allPlays) {
+                    return this.playClip(atIndex + 1);
+                }
+            }
+            else {
+                event.didUpdatePlaybackProgressOfClip(atIndex, progress);
+            }
+        }, 10);
+    }
+}

package/dist/src/development/TimeSeek.js

@@ -0,0 +1,218 @@
+import React from 'react';
+import SDK from '..';
+export default class TimeCodeSeek extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "addMinutesFromTimestamp", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (timestamp, minutes) => {
+                const date = new Date(timestamp);
+                date.setMinutes(date.getMinutes() + minutes);
+                return date.getTime();
+            }
+        });
+        // format timestamp to 2025-05-11T20:40:26Z format
+        Object.defineProperty(this, "formatTimestampToWallClock", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (timestamp) => {
+                const date = new Date(timestamp);
+                return date.toISOString().replace(/\.000Z$/, 'Z');
+            }
+        });
+        // format 2025-05-11T20:40:26Z to timestamp
+        Object.defineProperty(this, "formatWallClockToTimestamp", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (timestamp) => {
+                const date = new Date(timestamp);
+                return date.getTime();
+            }
+        });
+        Object.defineProperty(this, "retreat", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: async (minutes) => {
+                const newCurrentTimeCode = this.addMinutesFromTimestamp(this.timeCode, minutes * -1);
+                this.setState({ currentTimeCode: newCurrentTimeCode });
+                SDK.getMaestroEventViewModel().updatePlayerTimeCode(newCurrentTimeCode);
+            }
+        });
+        Object.defineProperty(this, "advance", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: async (minutes) => {
+                const newCurrentTimeCode = this.addMinutesFromTimestamp(this.timeCode, minutes);
+                this.setState({ currentTimeCode: newCurrentTimeCode });
+                SDK.getMaestroEventViewModel().updatePlayerTimeCode(newCurrentTimeCode);
+            }
+        });
+        Object.defineProperty(this, "setToNow", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const now = Date.now();
+                this.setState({ currentTimeCode: now });
+                SDK.getMaestroEventViewModel().updatePlayerTimeCode(now);
+            }
+        });
+        Object.defineProperty(this, "resetToGameStart", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.state.gameStartTimeCode) {
+                    this.setState({ currentTimeCode: this.state.gameStartTimeCode });
+                    SDK.getMaestroEventViewModel().updatePlayerTimeCode(this.state.gameStartTimeCode);
+                }
+            }
+        });
+        this.state = {
+            currentTimeCode: null,
+            gameStartTimeCode: null,
+        };
+    }
+    componentDidMount() {
+        // Try to fetch initial stats from the local API server on port 8080
+        fetch(`http://localhost:8080/espn-api/v4/events/${this.props.eventId}/stats`)
+            .then((result) => {
+            if (!result.ok) {
+                throw new Error(`HTTP ${result.status}: ${result.statusText}`);
+            }
+            return result.json();
+        })
+            .then((data) => {
+            // Use the game's firstPlayWallClock as the initial timecode (game start time)
+            let initialTimecode;
+            if (data.meta?.firstPlayWallClock) {
+                initialTimecode = this.formatWallClockToTimestamp(data.meta.firstPlayWallClock);
+            }
+            else if (data.meta?.lastPlayWallClock) {
+                // Fallback to lastPlayWallClock if firstPlayWallClock not available
+                initialTimecode = this.formatWallClockToTimestamp(data.meta.lastPlayWallClock);
+            }
+            else {
+                // Fallback to current time if no game timecode available
+                initialTimecode = Date.now();
+            }
+            this.setState({
+                currentTimeCode: initialTimecode,
+                gameStartTimeCode: initialTimecode,
+            });
+            SDK.getMaestroEventViewModel().updatePlayerTimeCode(initialTimecode);
+        })
+            .catch((error) => {
+            console.error('Error fetching initial stats from local API:', error);
+            // Fallback to current time if local API fails
+            const fallbackTimestamp = Date.now();
+            this.setState({
+                currentTimeCode: fallbackTimestamp,
+                gameStartTimeCode: fallbackTimestamp,
+            });
+            SDK.getMaestroEventViewModel().updatePlayerTimeCode(fallbackTimestamp);
+        });
+    }
+    get timeCode() {
+        const timeCode = this.state.currentTimeCode;
+        if (!timeCode) {
+            throw new Error('timecode not set');
+        }
+        return timeCode;
+    }
+    render() {
+        return (React.createElement("div", null,
+            React.createElement("div", { style: {
+                    position: 'fixed',
+                    zIndex: 100,
+                    bottom: 10,
+                    width: '100%',
+                    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                    color: 'white',
+                    padding: '10px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: '10px',
+                    flexWrap: 'wrap',
+                    borderTop: '2px solid #333',
+                } },
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginRight: '20px',
+                        fontSize: '14px',
+                    } },
+                    React.createElement("strong", null, "Current TimeCode:"),
+                    ' ',
+                    this.state.currentTimeCode
+                        ? this.formatTimestampToWallClock(this.state.currentTimeCode)
+                        : 'Not set'),
+                React.createElement("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } },
+                    React.createElement("button", { style: {
+                            height: '40px',
+                            width: '80px',
+                            backgroundColor: '#dc3545',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '5px',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, onClick: () => this.retreat(20) }, "-20m"),
+                    React.createElement("button", { style: {
+                            height: '40px',
+                            width: '80px',
+                            backgroundColor: '#dc3545',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '5px',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, onClick: () => this.retreat(5) }, "-5m"),
+                    React.createElement("button", { style: {
+                            height: '40px',
+                            width: '80px',
+                            backgroundColor: '#28a745',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '5px',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, onClick: () => this.advance(5) }, "+5m"),
+                    React.createElement("button", { style: {
+                            height: '40px',
+                            width: '80px',
+                            backgroundColor: '#28a745',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '5px',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, onClick: () => this.advance(20) }, "+20m"),
+                    React.createElement("button", { style: {
+                            height: '40px',
+                            width: '80px',
+                            backgroundColor: '#007bff',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '5px',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, onClick: this.setToNow }, "NOW"),
+                    React.createElement("button", { style: {
+                            height: '40px',
+                            width: '80px',
+                            backgroundColor: '#6f42c1',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '5px',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, onClick: this.resetToGameStart }, "START")))));
+    }
+}

package/dist/src/development/development.js

@@ -0,0 +1,33 @@
+import ReactDOM from 'react-dom';
+import SDK from '..';
+import MaestroEventDelegate from './MaestroEventDelegate';
+import React from 'react';
+import TimeCodeSeek from './TimeSeek';
+const eventDelegate = new MaestroEventDelegate();
+SDK.configure({
+    siteID: '664b9c57d59a7a431542d814',
+});
+// Get eventId from metadata instead of hardcoding
+const EVENT_ID = '401790363'; // fallback
+/**
+ * SDK Development Setup
+ *
+ * This development setup initializes the Maestro Web SDK with:
+ * - User authentication configuration
+ * - Event watching setup
+ * - Key plays data integration
+ * - Focus management initialization
+ */
+const init = async () => {
+    const keyplays = await (await fetch(`https://site.api.espn.com/apis/site/v2/sports/keyplays/${EVENT_ID}`)).json();
+    await SDK.userDidStartWatchingEvent(EVENT_ID, eventDelegate);
+    SDK.getMaestroEventViewModel().startFocusManagement();
+    await SDK.getMaestroEventViewModel().updateKeyPlaysData(keyplays);
+    setTimeout(async () => {
+        await SDK.renderPanel('panel-manager');
+    }, 0);
+    ReactDOM.render(React.createElement("div", null,
+        React.createElement("div", { id: "panel-manager" }),
+        React.createElement(TimeCodeSeek, { eventId: EVENT_ID })), document.getElementById('root'));
+};
+init();

package/dist/src/external/AxiosNetworkClient.js

@@ -0,0 +1,110 @@
+import axios from 'axios';
+const REQUEST_TIMEOUT = 5000;
+class AxiosNetworkClient {
+    constructor({ baseURL, retries, delay, backoff, axiosInstance, }) {
+        Object.defineProperty(this, "client", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "retries", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "delay", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "backoff", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.retries = retries;
+        this.delay = delay;
+        this.backoff = backoff;
+        this.client =
+            axiosInstance ||
+                axios.create({
+                    baseURL,
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    timeout: REQUEST_TIMEOUT,
+                });
+    }
+    async retry(operation, attempt = 0) {
+        try {
+            return await operation();
+        }
+        catch (error) {
+            const axiosError = error;
+            // Check if we should retry
+            const shouldRetry = attempt < this.retries &&
+                ((axiosError.response && axiosError.response.status === 429) ||
+                    axiosError.code === 'ECONNABORTED');
+            if (shouldRetry) {
+                const delayTime = this.delay * Math.pow(this.backoff, attempt);
+                console.log(`Retrying request in ${delayTime}ms due to: ${axiosError.message}`);
+                await new Promise((resolve) => setTimeout(resolve, delayTime));
+                return this.retry(operation, attempt + 1);
+            }
+            throw error;
+        }
+    }
+    async get(endpoint, params, headers) {
+        return this.retry(async () => {
+            const response = await this.client.get(endpoint, {
+                params,
+                headers,
+            });
+            return response.data;
+        });
+    }
+    async getWithHeaders(endpoint, params, headers) {
+        return this.retry(async () => {
+            const response = await this.client.get(endpoint, {
+                params,
+                headers,
+            });
+            return {
+                data: response.data,
+                headers: response.headers,
+            };
+        });
+    }
+    async post(endpoint, data, params, headers) {
+        return this.retry(async () => {
+            const response = await this.client.post(endpoint, data, {
+                params,
+                headers,
+            });
+            return response.data;
+        });
+    }
+    async postWithHeaders(endpoint, data, params, headers) {
+        return this.retry(async () => {
+            const response = await this.client.post(endpoint, data, {
+                params,
+                headers,
+            });
+            return {
+                data: response.data,
+                headers: response.headers,
+            };
+        });
+    }
+    setAuthentication(token, apiKey) {
+        this.client.defaults.headers.common['Authorization'] = token
+            ? `Bearer ${token}`
+            : '';
+        this.client.defaults.headers.common['x-maestro-api-key'] = apiKey || '';
+    }
+}
+export default AxiosNetworkClient;