@maestro_io/maestro-web-sdk 5.0.0 → 5.1.0

package/dist/src/components/molecules/TabLoadError/TabLoadError.d.ts

@@ -0,0 +1,96 @@
+/// <reference types="prop-types" />
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import React from 'react';
+import './TabLoadError.styles.css';
+declare const _default: {
+    new (props: (object & WithFocusableProps) | Readonly<object & WithFocusableProps>): {
+        state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../external/spatial-navigation/utils").Direction, details: import("../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../external/spatial-navigation/utils").Layout, details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../external/spatial-navigation/utils").Layout, details: import("../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<object & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<object & WithFocusableProps>) => import("../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<object & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<object & WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: object & WithFocusableProps, context: any): {
+        state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../external/spatial-navigation/utils").Direction, details: import("../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../external/spatial-navigation/utils").Layout, details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../external/spatial-navigation/utils").Layout, details: import("../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<object & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<object & WithFocusableProps>) => import("../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<object & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<object & WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/dist/src/components/molecules/TabLoadError/TabLoadError.js

@@ -0,0 +1,14 @@
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+import ActionButton from '../ActionButton';
+import './TabLoadError.styles.css';
+class TabLoadErrorView extends React.Component {
+    render() {
+        const { focused } = this.props;
+        return (React.createElement("div", { "data-focused": focused, className: "tab-load-error focus-ring" },
+            React.createElement("h3", { className: "T70" }, "We dropped the ball."),
+            React.createElement("p", { className: "T20" }, "We're having trouble loading that for you. Please try again."),
+            React.createElement(ActionButton, { "data-focused": focused, onEnterPress: this.props.onEnterPress }, "Try Again")));
+    }
+}
+export default withFocusable()(TabLoadErrorView);

package/dist/src/components/molecules/TabLoadError/index.d.ts

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

package/dist/src/components/molecules/TabLoadError/index.js

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

package/dist/src/components/molecules/WatchButton/WatchButton.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import './WatchButton.styles.css';
+import React from 'react';
+interface WatchButtonProps extends HTMLAttributes<HTMLButtonElement> {
+}
+declare class WatchButton extends React.Component<WatchButtonProps> {
+    constructor(props: WatchButtonProps);
+    render(): JSX.Element;
+}
+export default WatchButton;

package/dist/src/components/molecules/WatchButton/WatchButton.js

@@ -0,0 +1,15 @@
+import BaseButton from '@/components/atoms/BaseButton/BaseButton';
+import Icon from '@/components/atoms/SvgIcon';
+import './WatchButton.styles.css';
+import React from 'react';
+class WatchButton extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(BaseButton, { className: "watch-button T05_ALT", ...this.props },
+            React.createElement(Icon, { iconName: "play", height: 20, width: 19 }),
+            this.props.children));
+    }
+}
+export default WatchButton;

package/dist/src/components/molecules/WatchButton/index.d.ts

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

package/dist/src/components/molecules/WatchButton/index.js

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

package/dist/src/components/organisms/PanelNavigation/PanelNavigation.d.ts

@@ -0,0 +1,16 @@
+import { IconsName } from '@/components/atoms/SvgIcon/Icon';
+import './PanelNavigation.styles.css';
+import React from 'react';
+interface PanelNavigationProps {
+    items: {
+        title: string;
+        onEnter: () => void;
+        iconName: IconsName;
+        active: boolean;
+    }[];
+}
+declare class PanelNavigation extends React.Component<PanelNavigationProps> {
+    handleBecameFocused: (index: number) => () => void;
+    render(): JSX.Element | null;
+}
+export default PanelNavigation;

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

@@ -0,0 +1,60 @@
+import PanelNavButton from '@/components/molecules/PanelNavButton';
+import './PanelNavigation.styles.css';
+import React from 'react';
+import SDK from '@/index';
+import { withFocusable, } from '@/external/spatial-navigation';
+const BUTTON_MARGIN = 12;
+class PanelNavigationButton extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "handleArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d, _props) => {
+                if (d === 'left' && this.props.index === 0) {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                    return;
+                }
+                if (this.props.onArrowPress) {
+                    this.props.onArrowPress(d);
+                }
+            }
+        });
+    }
+    render() {
+        const { item, index, width } = this.props;
+        return (React.createElement(PanelNavButton, { iconName: item.iconName, key: item.title, index: index, onBecameFocused: this.props.onBecameFocused(index), active: item.active, focusKey: `PANEL_NAV_BUTTON_${index}`, onArrowPress: this.handleArrowPress, parentFocusKey: "PANEL_NAVIGATION", width: width }, item.title));
+    }
+}
+class PanelNavigation extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "handleBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => () => {
+                if (this.props.items[index]) {
+                    this.props.items[index].onEnter();
+                }
+            }
+        });
+    }
+    render() {
+        const itemsCount = this.props.items.length;
+        if (itemsCount === 0) {
+            return null;
+        }
+        const marginTotal = (itemsCount - 1) * BUTTON_MARGIN;
+        const buttonWidth = `calc((100% - ${marginTotal}px) / ${itemsCount})`;
+        return (React.createElement(FocusableWrapper, { focusKey: "PANEL_NAVIGATION" }, this.props.items.map((item, index) => (React.createElement(PanelNavigationButton, { onBecameFocused: this.handleBecameFocused, key: item.title, item: item, index: index, width: buttonWidth })))));
+    }
+}
+class Wrapper extends React.Component {
+    render() {
+        return React.createElement("div", { className: "panel-navigation" }, this.props.children);
+    }
+}
+const FocusableWrapper = withFocusable({ trackChildren: true })(Wrapper);
+export default PanelNavigation;

package/dist/src/components/organisms/PanelNavigation/index.d.ts

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

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

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

package/dist/src/components/organisms/SegmentController/SegmentController.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './SegmentController.styles.css';
+export type SegmentItem = {
+    title: string;
+    onEnter: () => void;
+};
+interface SegmentControllerProps {
+    backgroundColor?: string;
+    items: SegmentItem[];
+}
+declare const SegmentController: React.FC<SegmentControllerProps>;
+export default SegmentController;

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

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import SegmentButton from '@/components/molecules/SegmentButton';
+import './SegmentController.styles.css';
+import { useScrollableContainer } from '@/components/core/ScrollableContainer';
+import SDK from '@/index';
+const SegmentController = ({ backgroundColor, items, }) => {
+    const { scrollToFocusedElement } = useScrollableContainer();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [lastActiveIndex, setLastActiveIndex] = useState(0);
+    const onBecameFocused = (item, i) => (layout) => {
+        if (lastActiveIndex !== i && lastActiveIndex !== null) {
+            SDK.getMaestroEventViewModel().navigation.setFocus(`segment-controller-${lastActiveIndex}`);
+            return;
+        }
+        setActiveIndex(i);
+        setLastActiveIndex(null);
+        item.onEnter();
+        scrollToFocusedElement(layout);
+    };
+    const onEnterPress = (item) => () => {
+        item.onEnter();
+    };
+    const handleArrowPress = (index) => (direction, _props) => {
+        if (direction === 'down' || direction === 'up') {
+            setLastActiveIndex(activeIndex);
+        }
+        if (direction === 'left' && index === 0) {
+            SDK.getMaestroEventViewModel().deliverFocus();
+        }
+    };
+    return (React.createElement("div", { className: "segment-controller", style: {
+            backgroundColor,
+        } }, items.map((item, index) => (React.createElement(SegmentButton, { focusKey: `segment-controller-${index}`, key: item.title, onBecameFocused: onBecameFocused(item, index), onArrowPress: handleArrowPress(index), onEnterPress: onEnterPress(item), active: activeIndex === index }, item.title)))));
+};
+export default SegmentController;

package/dist/src/components/organisms/SegmentController/index.d.ts

@@ -0,0 +1,3 @@
+import SegmentController, { SegmentItem } from './SegmentController';
+export default SegmentController;
+export { SegmentItem };

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

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

package/dist/src/development/MaestroEventDelegate.d.ts

@@ -0,0 +1,27 @@
+import IMaestroEventDelegate, { PanelEvent } from '../interfaces/IMaestroEventDelegate';
+import { ActionTrackEvent, ImpressionTrackEvent } from '../services/AnalyticsService/types';
+type Environment = 'development' | 'production';
+/**
+ * Our own implementation of the IMaestroEventDelegate interface. Useful for Development and Testing
+ */
+export default class MaestroEventDelegate implements IMaestroEventDelegate {
+    loggedIn: boolean;
+    env: Environment;
+    constructor({ env, loggedIn, }?: {
+        env: Environment;
+        loggedIn: boolean;
+    });
+    onPanelEvent(event: PanelEvent): void;
+    toggleLogin(): void;
+    trackImpression(impression: ImpressionTrackEvent): void;
+    trackAction(action: ActionTrackEvent): void;
+    getStatsAPIBaseURL(): string;
+    getBettingAPIBaseURL(): string;
+    userRequestedNewKeyPlaysData(): Promise<void>;
+    startFocusManagement(): Promise<void>;
+    userIsAuthenticated(): Promise<boolean>;
+    getUserSWID(): Promise<string | null>;
+    getUserToken(): Promise<string | null>;
+    playClip(atIndex: number): void;
+}
+export {};

package/dist/src/development/MaestroEventDelegate.js

@@ -0,0 +1,109 @@
+import SDK from '..';
+import { KEY_PLAYS_RESPONSE_MOCK_DATA } from '../modules/espn/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 {};