@maestro_io/maestro-web-sdk 4.0.0 → 4.0.2

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'
+            : 'http://localhost:8080/espn-qa';
+    }
+    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.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface TimeCodeSeekProps {
+    eventId: string;
+}
+interface TimeCodeSeekState {
+    currentTimeCode: number | null;
+    gameStartTimeCode: number | null;
+}
+export default class TimeCodeSeek extends React.Component<TimeCodeSeekProps, TimeCodeSeekState> {
+    constructor(props: TimeCodeSeekProps);
+    componentDidMount(): void;
+    addMinutesFromTimestamp: (timestamp: number, minutes: number) => number;
+    formatTimestampToWallClock: (timestamp: number) => string;
+    formatWallClockToTimestamp: (timestamp: string) => number;
+    retreat: (minutes: number) => Promise<void>;
+    advance: (minutes: number) => Promise<void>;
+    setToNow: () => void;
+    resetToGameStart: () => void;
+    get timeCode(): number;
+    render(): JSX.Element;
+}
+export {};

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.d.ts

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

package/dist/src/development/development.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SDK from '..';
+import MaestroEventDelegate from './MaestroEventDelegate';
+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);
+    const rootElement = document.getElementById('root');
+    if (rootElement) {
+        ReactDOM.render((React.createElement("div", null,
+            React.createElement("div", { id: "panel-manager" }),
+            React.createElement(TimeCodeSeek, { eventId: EVENT_ID }))), rootElement);
+    }
+};
+init();

package/dist/src/external/AxiosNetworkClient.d.ts

@@ -0,0 +1,28 @@
+import { AxiosInstance } from 'axios';
+import { INetworkClient } from './ports/networkClient';
+declare class AxiosNetworkClient implements INetworkClient {
+    private client;
+    private retries;
+    private delay;
+    private backoff;
+    constructor({ baseURL, retries, delay, backoff, axiosInstance, }: {
+        baseURL: string;
+        retries: number;
+        delay: number;
+        backoff: number;
+        axiosInstance?: AxiosInstance;
+    });
+    private retry;
+    get<TResponseData = any>(endpoint: string, params?: Record<string, any>, headers?: Record<string, string>): Promise<TResponseData>;
+    getWithHeaders<TResponseData = any>(endpoint: string, params?: Record<string, any>, headers?: Record<string, string>): Promise<{
+        data: TResponseData;
+        headers: Record<string, string>;
+    }>;
+    post<TRequestData = any, TResponseData = any>(endpoint: string, data: TRequestData, params?: Record<string, any>, headers?: Record<string, string>): Promise<TResponseData>;
+    postWithHeaders<TRequestData = any, TResponseData = any>(endpoint: string, data: TRequestData, params?: Record<string, any>, headers?: Record<string, string>): Promise<{
+        data: TResponseData;
+        headers: Record<string, string>;
+    }>;
+    setAuthentication(token: string | null, apiKey: string | null): void;
+}
+export default AxiosNetworkClient;

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;

package/dist/src/external/LocalStorageCacheManager.d.ts

@@ -0,0 +1,65 @@
+import { ICacheManager } from './ports/cacheManager';
+/**
+ * Manages caching using localStorage with support for TTL, size limits, and versioning.
+ * This class implements the ICacheManager interface and provides methods for setting, getting,
+ * and clearing cache entries.
+ */
+export default class LocalStorageCacheManager implements ICacheManager {
+    private readonly prefix;
+    private readonly cacheDuration;
+    private readonly maxSize;
+    private readonly version;
+    private readonly accessLog;
+    /**
+     * Creates a new LocalStorageCacheManager instance.
+     * @param cacheDuration - The time-to-live (TTL) for cache entries in milliseconds.
+     * @param maxSize - The maximum size of the cache in bytes.
+     * @param version - The version of the cache. Used to invalidate cache entries when the version changes.
+     */
+    constructor(cacheDuration?: number, maxSize?: number, version?: string);
+    /**
+     * Produces a cache key by combining the prefix, version, and the provided key.
+     * @param key - The key to be used in the cache.
+     * @returns The generated cache key.
+     */
+    produceCacheKey(key: string): string;
+    /**
+     * Calculates the current size of the cache in bytes.
+     * @returns The total size of the cache in bytes.
+     */
+    private getCurrentSize;
+    /**
+     * Cleans up old cache entries based on their TTL.
+     */
+    private cleanupOldEntries;
+    /**
+     * Cleans up least recently used cache entries when the cache is full.
+     */
+    private cleanupLRUEntries;
+    /**
+     * Sets a value in the cache with the specified key.
+     * @param key - The key to store the value under.
+     * @param data - The value to be stored in the cache.
+     */
+    setCache(key: string, data: any): void;
+    /**
+     * Retrieves a value from the cache by its key.
+     * @param key - The key to retrieve the value for.
+     * @returns The cached value, or null if the key is not found or the entry has expired.
+     */
+    getCache(key: string): any;
+    /**
+     * Clears a specific cache entry by its key.
+     * @param key - The key of the cache entry to clear.
+     */
+    clearCache(key: string): void;
+    /**
+     * Clears all cache entries that match the specified pattern.
+     * @param pattern - The pattern to match against cache keys.
+     */
+    clearCacheByPattern(pattern: string): void;
+    /**
+     * Clears all cache entries.
+     */
+    clearAllCache(): void;
+}