@maestro_io/maestro-web-sdk 2.1.3 → 2.2.0

package/dist/components/core/OverlayContainer.js

@@ -1,58 +0,0 @@
-import React from 'react';
-const OverlayContainer = React.createClass({
-    propTypes: {
-        viewModels: React.PropTypes.object,
-    },
-    getInitialState() {
-        return {
-            isVisible: false,
-            currentOverlay: null,
-        };
-    },
-    componentDidMount() {
-        if (!this.props.viewModels?.overlayViewModel)
-            return;
-        const overlayVM = this.props.viewModels.overlayViewModel;
-        // Subscribe to overlay visibility changes
-        this.unsubscribeVisible = overlayVM.isVisible.subscribe((visible) => {
-            this.setState({ isVisible: visible });
-        });
-        // Subscribe to current overlay changes
-        this.unsubscribeOverlay = overlayVM.currentOverlay.subscribe((overlay) => {
-            this.setState({ currentOverlay: overlay });
-        });
-    },
-    componentWillUnmount() {
-        if (this.unsubscribeVisible)
-            this.unsubscribeVisible();
-        if (this.unsubscribeOverlay)
-            this.unsubscribeOverlay();
-    },
-    render() {
-        if (!this.state.isVisible || !this.state.currentOverlay) {
-            return null;
-        }
-        const overlay = this.state.currentOverlay;
-        const Overlay = require('../molecules/Overlay').default;
-        return React.createElement(Overlay, {
-            key: `overlay-${overlay.type}-${Date.now()}`,
-            id: 'sdk-managed-rive-overlay',
-            overlayType: overlay.type,
-            position: overlay.position,
-            winningBet: overlay.winningBet,
-            fantasy: overlay.fantasy,
-            onOverlayViewed: (overlayType) => {
-                if (this.props.viewModels?.overlayViewModel) {
-                    this.props.viewModels.overlayViewModel.handleOverlayViewed(overlayType);
-                }
-            },
-            onOverlayAction: (overlayType) => {
-                if (this.props.viewModels?.overlayViewModel) {
-                    this.props.viewModels.overlayViewModel.handleOverlayAction(overlayType);
-                    this.props.viewModels.overlayViewModel.hideOverlay();
-                }
-            },
-        });
-    },
-});
-export default OverlayContainer;

package/dist/components/core/PanelManager/PanelManager.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { PanelManagerViewModel } from '@/view-models/PanelManagerViewModel';
-import './PanelManager.styles.css';
-import PanelNavigation from '@/components/organisms/PanelNavigation';
-import KeyPlaysView from '@/modules/key-plays/view/KeyPlaysView';
-import BetsView from '@/modules/bets/view/BetsView';
-const panelManagerViewModel = new PanelManagerViewModel();
-const PANELS_MAP = {
-    keyPlays: React.createElement(KeyPlaysView, null),
-    bets: React.createElement(BetsView, null),
-    stats: React.createElement("div", { className: "panel-coming-soon T02" }, "Stats - Coming Soon"),
-    fantasy: React.createElement("div", { className: "panel-coming-soon T02" }, "Fantasy - Coming Soon"),
-};
-class PanelManager extends React.Component {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "unsubscribe", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        this.state = {
-            activePanel: panelManagerViewModel.currentPanel,
-        };
-    }
-    componentDidMount() {
-        // Subscribe to changes in the view model
-        this.unsubscribe = panelManagerViewModel.currentPanelObservable.subscribe(() => {
-            this.setState({ activePanel: panelManagerViewModel.currentPanel });
-        });
-    }
-    componentWillUnmount() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-            this.unsubscribe = null;
-        }
-    }
-    goToPanel(panel) {
-        return () => {
-            if (panelManagerViewModel.currentPanel === panel) {
-                return;
-            }
-            panelManagerViewModel.currentPanel = panel;
-        };
-    }
-    render() {
-        const { activePanel } = this.state;
-        const PANEL_ITEMS = [
-            {
-                iconName: 'keyPlays',
-                onEnter: this.goToPanel('keyPlays'),
-                title: 'KEY PLAYS',
-                active: activePanel === 'keyPlays',
-            },
-            {
-                iconName: 'bets',
-                onEnter: this.goToPanel('bets'),
-                title: 'BETS',
-                active: activePanel === 'bets',
-            },
-            {
-                iconName: 'stats',
-                onEnter: this.goToPanel('stats'),
-                title: 'STATS',
-                active: activePanel === 'stats',
-            },
-            {
-                iconName: 'fantasy',
-                onEnter: this.goToPanel('fantasy'),
-                title: 'FANTASY',
-                active: activePanel === 'fantasy',
-            },
-        ];
-        return (React.createElement("div", { className: "sdk--panel-manager" },
-            React.createElement(PanelNavigation, { items: PANEL_ITEMS }),
-            React.createElement("div", { className: "sdk--panel-wrapper" }, PANELS_MAP[activePanel])));
-    }
-}
-export default PanelManager;

package/dist/components/core/PanelManager/index.js

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

package/dist/components/core/ScrollableContainer/FocusableItem.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from './ScrollableContainer';
-/**
- * Component to be used as a child of `ScrollableContainer`.
- * Wraps the focusable item and registers it in the context
- */
-class FocusableItem extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "ref", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "context", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
-        });
-    }
-    componentDidMount() {
-        if (this.ref && this.context.setRef) {
-            this.context.setRef(this.ref);
-        }
-    }
-    render() {
-        return (React.createElement("div", { className: "focusable-item", ref: (e) => (this.ref = e) }, this.props.children));
-    }
-}
-Object.defineProperty(FocusableItem, "contextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: SCROLLABLE_CONTEXT_TYPE
-});
-export default FocusableItem;

package/dist/components/core/ScrollableContainer/ScrollableContainer.js

@@ -1,166 +0,0 @@
-import React from 'react';
-import './ScrollableContainer.styles.css';
-const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-/**
- * ScrollableContainer component provides a context for focusable items
- * that allows them to register themselves and handle scrolling
- * when they become focused.
- * @example
- * ```jsx
- * <ScrollableContainer scrollableContainerRef={scrollableContainerRef}>
- *    <FocusableItem>Item 1</FocusableItem>
- *    <FocusableItem>Item 2</FocusableItem>
- *    <FocusableItem>Item 3</FocusableItem>
- * </ScrollableContainer>
- * ```
- */
-class ScrollableContainer extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "refsMap", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "hash", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ''
-        });
-        Object.defineProperty(this, "lastHash", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ''
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                scrolled: false,
-            }
-        });
-        Object.defineProperty(this, "setRef", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (ref) => {
-                this.refsMap.push(ref);
-                this.hash = Math.random().toString(36).substring(2, 15);
-            }
-        });
-        Object.defineProperty(this, "getOrderedRefs", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                if (this.hash === this.lastHash) {
-                    return this.refsMap;
-                }
-                this.refsMap = this.refsMap.sort((a, b) => {
-                    if (!this.props.scrollableContainerRef)
-                        return 0;
-                    const containerRect = this.props.scrollableContainerRef.getBoundingClientRect();
-                    const aRect = a ? a.getBoundingClientRect() : { top: 0, bottom: 0 };
-                    const bRect = b ? b.getBoundingClientRect() : { top: 0, bottom: 0 };
-                    // Calculate the actual distance from container top (positive means below, negative means above)
-                    const aDistance = aRect.top - containerRect.top;
-                    const bDistance = bRect.top - containerRect.top;
-                    return aDistance - bDistance;
-                });
-                this.lastHash = this.hash;
-                return this.refsMap;
-            }
-        });
-        /**
-         * @description - Scrolls the container to the focused element if necessary
-         */
-        Object.defineProperty(this, "scrollToFocusedElement", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: async (layout) => {
-                if (!this.props.scrollableContainerRef || !layout.node)
-                    return;
-                const refs = this.getOrderedRefs();
-                // Wait for the next frame to ensure the layout is updated
-                if (process.env.NODE_ENV !== 'test') {
-                    await wait(0);
-                }
-                const containerRect = this.props.scrollableContainerRef.getBoundingClientRect();
-                const nodeRect = layout.node.getBoundingClientRect();
-                let index = -1;
-                for (let i = refs.length - 1; i >= 0; i--) {
-                    if (refs[i].contains(layout.node)) {
-                        index = i;
-                        break;
-                    }
-                }
-                if (index === -1) {
-                    console.warn('Element not found in refsMap to focus to. Register the element wrapping it with <FocusableItem />');
-                    return;
-                }
-                let hasOutside = false;
-                refs.slice(index).forEach((el) => {
-                    const rect = el.getBoundingClientRect();
-                    if (rect.bottom > containerRect.bottom || rect.top < containerRect.top) {
-                        hasOutside = true;
-                    }
-                });
-                if (!hasOutside)
-                    return;
-                const target = index === 0
-                    ? 0
-                    : this.props.scrollableContainerRef.scrollTop +
-                        (nodeRect.top -
-                            containerRect.top -
-                            (this.props.containerTopOffset || 0));
-                this.props.scrollableContainerRef.scrollTop = target;
-                const newScrolled = target > 0;
-                if (this.state.scrolled !== newScrolled) {
-                    this.setState({ scrolled: newScrolled });
-                }
-            }
-        });
-    }
-    getChildContext() {
-        return {
-            refsMap: this.refsMap,
-            setRef: this.setRef,
-            scrollToFocusedElement: this.scrollToFocusedElement,
-        };
-    }
-    componentWillUnmount() {
-        this.refsMap = [];
-        this.hash = '';
-        this.lastHash = '';
-    }
-    render() {
-        const { scrollableContainerRef: _, containerTopOffset: __, ...rest } = this.props;
-        return (React.createElement("div", { className: "scrollable-container", "data-scrolled": this.state.scrolled, ...rest }, this.props.children));
-    }
-}
-Object.defineProperty(ScrollableContainer, "childContextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        refsMap: React.PropTypes.arrayOf(React.PropTypes.instanceOf(HTMLElement)),
-        setRef: React.PropTypes.func,
-        scrollToFocusedElement: React.PropTypes.func,
-    }
-});
-export const DEFAULT_SCROLLABLE_CONTAINER_CONTEXT = {
-    setRef: (_) => { },
-    scrollToFocusedElement: () => { },
-    refsMap: [],
-};
-export const SCROLLABLE_CONTEXT_TYPE = {
-    refsMap: React.PropTypes.arrayOf(React.PropTypes.instanceOf(HTMLElement)),
-    setRef: React.PropTypes.func,
-    scrollToFocusedElement: React.PropTypes.func,
-};
-export default ScrollableContainer;

package/dist/components/core/ScrollableContainer/index.js

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

package/dist/components/molecules/ActionButton/ActionButton.js

@@ -1,10 +0,0 @@
-import BaseButton from '@/components/atoms/BaseButton';
-import './ActionButton.styles.css';
-import { withFocusable, } from '@/external/spatial-navigation';
-import React from 'react';
-class ActionButton extends React.Component {
-    render() {
-        return (React.createElement(BaseButton, { className: "action-button T05_ALT", ...this.props }, this.props.children));
-    }
-}
-export default withFocusable()(ActionButton);

package/dist/components/molecules/ActionButton/index.js

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

package/dist/components/molecules/Overlay/Overlay.js

@@ -1,139 +0,0 @@
-// import { Rive as RiveCanvas } from '@rive-app/canvas';
-import React from 'react';
-import { OverlayType } from '@/types/OverlayTypes';
-import Rive from '../../atoms/Rive';
-export const WINNING_BET_RIVE_FILE_URL = 'https://static.gcp.maestro.io/media/664b9c57d59a7a431542d814/67db106027ddcdcd2ecb97d4.riv';
-const AUTO_DISMISS_TIMEOUT = 10400;
-class Overlay extends React.Component {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "autoDismissTimeout", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "handleOverlayAction", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                const { overlayType, onOverlayAction } = this.props;
-                this.setState({ autoDismiss: false });
-                switch (overlayType) {
-                    case OverlayType.WinningBet:
-                        break;
-                    case OverlayType.FantasyPlayerEvent:
-                        break;
-                }
-                // Call custom action handler if provided
-                if (onOverlayAction) {
-                    onOverlayAction(overlayType);
-                }
-            }
-        });
-        Object.defineProperty(this, "trackOverlayViewed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                if (this.state.hasTrackedView)
-                    return;
-                this.setState({ hasTrackedView: true });
-                if (this.props.onOverlayViewed) {
-                    this.props.onOverlayViewed(this.props.overlayType);
-                }
-            }
-        });
-        Object.defineProperty(this, "onLoadRiveInstance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (riveInstance) => {
-                if (!riveInstance)
-                    return;
-                // Ensure the drawing surface matches the canvas size and device pixel ratio
-                riveInstance.resizeDrawingSurfaceToCanvas();
-                // Set text values after the file is loaded
-                try {
-                    riveInstance.setTextRunValueAtPath('Title', this.overlayTitle, 'compNotification');
-                    riveInstance.setTextRunValueAtPath('Metadata', this.overlayMetadata, 'compNotification');
-                }
-                catch (error) {
-                    console.error('Error setting text values:', error);
-                }
-                // Get state machine inputs and trigger the play input specifically
-                try {
-                    const inputs = riveInstance.stateMachineInputs('stateMachine');
-                    const triggerPlayInput = inputs.find((input) => input.name === 'triggerPlay');
-                    if (triggerPlayInput) {
-                        triggerPlayInput.fire();
-                    }
-                    else if (inputs.length > 0) {
-                        inputs[0].fire();
-                    }
-                }
-                catch (error) {
-                    console.error('Error with state machine inputs:', error);
-                }
-                this.trackOverlayViewed();
-                this.autoDismissTimeout = setTimeout(() => {
-                    if (this.state.autoDismiss) {
-                        this.handleOverlayAction();
-                    }
-                }, AUTO_DISMISS_TIMEOUT);
-            }
-        });
-        this.state = {
-            autoDismiss: true,
-            hasTrackedView: false,
-        };
-    }
-    componentWillUnmount() {
-        if (this.autoDismissTimeout) {
-            clearTimeout(this.autoDismissTimeout);
-        }
-    }
-    get overlayTitle() {
-        const { overlayType, fantasy } = this.props;
-        switch (overlayType) {
-            case OverlayType.WinningBet:
-                return 'You won your bet!';
-            case OverlayType.FantasyPlayerEvent:
-                return fantasy?.title ?? 'Fantasy Update';
-            default:
-                return '';
-        }
-    }
-    get overlayMetadata() {
-        const { overlayType, winningBet, fantasy } = this.props;
-        switch (overlayType) {
-            case OverlayType.WinningBet:
-                return (winningBet?.notificationText ?? 'Click OK to view your winning bets.');
-            case OverlayType.FantasyPlayerEvent:
-                return fantasy?.metadata ?? 'New Player Activity';
-            default:
-                return '';
-        }
-    }
-    render() {
-        const style = {
-            position: 'fixed',
-            zIndex: 999999,
-            left: this.props.position?.left !== undefined
-                ? `${this.props.position.left}px`
-                : undefined,
-            right: this.props.position?.right !== undefined
-                ? `${this.props.position.right}px`
-                : undefined,
-            top: this.props.position?.top !== undefined
-                ? `${this.props.position.top}px`
-                : undefined,
-            bottom: this.props.position?.bottom !== undefined
-                ? `${this.props.position.bottom}px`
-                : undefined,
-        };
-        return (React.createElement(Rive, { id: this.props.id, onEnterPress: this.handleOverlayAction, focusKey: "maestro-overlay", autoFocus: true, autoPlay: true, onLoadRiveInstance: this.onLoadRiveInstance, src: WINNING_BET_RIVE_FILE_URL, style: style }));
-    }
-}
-export default Overlay;

package/dist/components/molecules/Overlay/index.js

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

package/dist/components/molecules/PanelNavButton/PanelNavButton.js

@@ -1,40 +0,0 @@
-import BaseButton from '@/components/atoms/BaseButton/BaseButton';
-import Icon from '@/components/atoms/SvgIcon/Icon';
-import './PanelNavButton.styles.css';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withFocusable } from '@/external/spatial-navigation';
-class PanelNavButton extends React.Component {
-    render() {
-        const { iconName, active, children, focused } = this.props;
-        return (React.createElement("div", { className: [
-                'panel-nav-button-container',
-                'T02',
-                active ? 'panel-nav-button-active' : '',
-            ].join(' '), "data-focused": focused },
-            React.createElement(BaseButton, null,
-                React.createElement(Icon, { iconName: iconName, height: 36, width: 36 })),
-            children));
-    }
-}
-Object.defineProperty(PanelNavButton, "displayName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'PanelNavButton'
-});
-Object.defineProperty(PanelNavButton, "propTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        iconName: PropTypes.string.isRequired,
-        index: PropTypes.number.isRequired,
-        active: PropTypes.bool.isRequired,
-        children: PropTypes.node,
-        focused: PropTypes.bool,
-        onBecameFocused: PropTypes.func,
-        buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    }
-});
-export default withFocusable()(PanelNavButton);

package/dist/components/molecules/PanelNavButton/index.js

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

package/dist/components/molecules/SegmentButton/SegmentButton.js

@@ -1,10 +0,0 @@
-import BaseButton from '@/components/atoms/BaseButton/BaseButton';
-import './SegmentButton.styles.css';
-import React from 'react';
-import { withFocusable, } from '@/external/spatial-navigation';
-class SegmentButton extends React.Component {
-    render() {
-        return (React.createElement(BaseButton, { className: "segment-button T05_ALT", "data-focused": this.props.focused, "data-active": this.props.active }, this.props.children));
-    }
-}
-export default withFocusable()(SegmentButton);

package/dist/components/molecules/SegmentButton/index.js

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

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

@@ -1,15 +0,0 @@
-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/components/molecules/WatchButton/index.js

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

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

@@ -1,71 +0,0 @@
-import PanelNavButton from '@/components/molecules/PanelNavButton';
-import './PanelNavigation.styles.css';
-import React from 'react';
-import SDK from '@/index';
-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.itemFocused === 0) {
-                    SDK.getMaestroEventViewModel().deliverFocus();
-                    return;
-                }
-                if (this.props.onArrowPress) {
-                    this.props.onArrowPress(d);
-                }
-            }
-        });
-    }
-    render() {
-        const { item, index } = 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 }, item.title));
-    }
-}
-class PanelNavigation extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                itemFocused: null,
-                lastFocused: null,
-            }
-        });
-        Object.defineProperty(this, "handleBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (index) => () => {
-                if (this.state.lastFocused !== index && this.state.lastFocused) {
-                    SDK.getMaestroEventViewModel().navigation.setFocus(`PANEL_NAV_BUTTON_${this.state.lastFocused}`);
-                    return;
-                }
-                this.setState({ itemFocused: index, lastFocused: null }, () => {
-                    if (this.props.items[index]) {
-                        this.props.items[index].onEnter();
-                    }
-                });
-            }
-        });
-        Object.defineProperty(this, "handleArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (direction) => {
-                if (direction === 'down') {
-                    this.setState({ lastFocused: this.state.itemFocused });
-                }
-            }
-        });
-    }
-    render() {
-        return (React.createElement("div", { className: "panel-navigation" }, this.props.items.map((item, index) => (React.createElement(PanelNavigationButton, { itemFocused: this.state.itemFocused, onBecameFocused: this.handleBecameFocused, onArrowPress: this.handleArrowPress, key: item.title, item: item, index: index })))));
-    }
-}
-export default PanelNavigation;

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

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