@maestro_io/maestro-web-sdk 4.0.0 → 4.0.1

package/dist/src/modules/stats/view/ScoringSummary/ScoringSummary.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import Icon from '@/components/atoms/SvgIcon';
+import { withFocusable, } from '@/external/spatial-navigation';
+import SDK from '@/index';
+import './ScoringSummary.styles.css';
+import ScoresSection from './ScoresSection';
+import ExpandedScores from './ExpandedScores';
+import { slugify } from '@/helpers/strings';
+class ScoringSummary extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "expandedScoresArrowPressTimeout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "onExpandedScoreArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (props) => (d) => {
+                const { index, scoreIndex } = props;
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                    return false;
+                }
+                if (d === 'up' && index === 0 && scoreIndex === 0) {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
+                    this.setState({
+                        expanded: false,
+                    });
+                    return false;
+                }
+                const scoreSection = this.props.item.sections[index];
+                const allScores = scoreSection ? scoreSection.scores : [];
+                const allScoresLength = !allScores.length ? 1 : allScores.length;
+                if (d === 'down' &&
+                    scoreIndex === allScoresLength - 1 &&
+                    index === this.props.item.sections.length - 1) {
+                    this.setState({
+                        expanded: false,
+                    }, () => {
+                        SDK.getMaestroEventViewModel().navigation.navigateByDirection('down');
+                    });
+                    return false;
+                }
+                if (this.expandedScoresArrowPressTimeout) {
+                    clearTimeout(this.expandedScoresArrowPressTimeout);
+                }
+                // Add a small delay to allow the focus to update properly and avoid skipping elements
+                this.expandedScoresArrowPressTimeout = setTimeout(() => {
+                    SDK.getMaestroEventViewModel().navigation.navigateByDirection(d);
+                }, 175);
+                return false;
+            }
+        });
+        Object.defineProperty(this, "onExpandedScoreBackPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({
+                    expanded: false,
+                }, () => {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
+                });
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        this.state = {
+            expanded: false,
+        };
+    }
+    componentWillUnmount() {
+        if (this.expandedScoresArrowPressTimeout) {
+            clearTimeout(this.expandedScoresArrowPressTimeout);
+            this.expandedScoresArrowPressTimeout = null;
+        }
+    }
+    onEnterPress() {
+        const newValue = !this.state.expanded;
+        this.setState({
+            expanded: newValue,
+        }, () => {
+            if (newValue) {
+                SDK.getMaestroEventViewModel().navigation.setFocus(`expanded-${this.props.item.type}-0-0`);
+            }
+        });
+        this.props.onEnterPress();
+    }
+    get cardFocusKey() {
+        return slugify(this.props.item.title);
+    }
+    renderContent() {
+        const noScoresText = this.props.noScoresText || 'No Goals Scored';
+        if (!this.state.expanded) {
+            return this.props.item.sections.map((section) => (React.createElement(ScoresSection, { key: section.title, scores: section.scores, title: section.title, noScoresText: noScoresText })));
+        }
+        return (React.createElement(ExpandedScores, { item: this.props.item.sections, type: this.props.item.type, noScoresText: noScoresText, onArrowPress: this.onExpandedScoreArrowPress, onBackPress: this.onExpandedScoreBackPress, onEnterPress: this.props.onEnterPress, parentFocusKey: this.cardFocusKey }));
+    }
+    render() {
+        return (React.createElement(FocusableWrapper, { displayText: this.props.item.title, onEnterPress: this.onEnterPress.bind(this), onBecameFocused: this.props.onBecameFocused, onArrowPress: this.onArrowPress, expanded: this.state.expanded, focusKey: this.cardFocusKey }, this.renderContent()));
+    }
+}
+const Wrapper = (props) => {
+    return (React.createElement("section", { className: "scoring-summary focus-ring", "data-focused": props.focused },
+        React.createElement("div", { className: "header" },
+            React.createElement("h5", { className: "T05_ALT" }, props.displayText),
+            React.createElement("div", { className: "icon-container", "data-focused": props.focused },
+                React.createElement(Icon, { iconName: props.expanded ? 'collapse' : 'expand', height: 48, width: 48 }))),
+        props.expanded && React.createElement("div", { className: "divider" }),
+        props.children));
+};
+const FocusableWrapper = withFocusable()(Wrapper);
+export default ScoringSummary;

package/dist/src/modules/stats/view/ScoringSummary/index.d.ts

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

package/dist/src/modules/stats/view/ScoringSummary/index.js

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

package/dist/src/modules/stats/view/StatsItemView.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import { StatsItem } from '../view-model/StatsViewModel';
+import { Direction, Layout } from '@/external/spatial-navigation/utils';
+type Props = {
+    item: StatsItem;
+    onEnterPress: (item: StatsItem) => void;
+};
+declare class StatsItemView extends React.Component<Props> {
+    static contextTypes: {
+        refsMap: import("prop-types").Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: import("prop-types").Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
+    onBecameFocused: (layout: Layout) => void;
+    onArrowPress: (d: Direction) => void;
+    onEnterPress: (item: StatsItem) => () => void;
+    renderItem(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default StatsItemView;

package/dist/src/modules/stats/view/StatsItemView.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import Teams from './Teams';
+import ActiveAthletes from './ActiveAthletes';
+import GameLeaders from './GameLeaders';
+import RecentGames from './RecentGames';
+import WinProbability from './WinProbability';
+import StatsQRCodeView from './StatsQRCode/StatsQRCodeView';
+import MatchPredictorView from './MatchPredictor';
+import TeamStats from './TeamStats';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+import DriveSummary from './DriveSummary';
+import SDK from '@/index';
+import ScoringSummary from './ScoringSummary';
+import Penalties from './Penalties';
+class StatsItemView extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item) => () => {
+                this.props.onEnterPress(item);
+            }
+        });
+    }
+    renderItem() {
+        const item = this.props.item;
+        switch (item.type) {
+            case 'penalties':
+                return (React.createElement(Penalties, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'scoringSummary':
+                return (React.createElement(ScoringSummary, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'driveSummary':
+                return (React.createElement(DriveSummary, { onBecameFocused: this.onBecameFocused, onItemEnterPress: this.onEnterPress(item), onArrowPress: this.onArrowPress, focusKey: `drive-summary-${item.id}`, item: item }));
+            case 'headerTeam':
+                return (React.createElement(Teams, { onArrowPress: this.onArrowPress, onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'activeAthletes':
+                return (React.createElement(ActiveAthletes, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'gameLeaders':
+                return (React.createElement(GameLeaders, { item: item, onEnterPress: this.onEnterPress(item) }));
+            case 'recentGames':
+                return (React.createElement(RecentGames, { onArrowPress: this.onArrowPress, onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'winProbability':
+                return (React.createElement(WinProbability, { onArrowPress: this.onArrowPress, onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            case 'promotion':
+                return (React.createElement(StatsQRCodeView, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), onArrowPress: this.onArrowPress, promotion: item }));
+            case 'matchPredictor':
+                return (React.createElement(MatchPredictorView, { onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), onArrowPress: this.onArrowPress, item: item }));
+            case 'teamStats':
+                return (React.createElement(TeamStats, { onArrowPress: this.onArrowPress, onBecameFocused: this.onBecameFocused, onEnterPress: this.onEnterPress(item), item: item }));
+            default:
+                console.warn('Unknown stats item type:', JSON.stringify(item));
+                return null;
+        }
+    }
+    render() {
+        return React.createElement(FocusableItem, null, this.renderItem());
+    }
+}
+Object.defineProperty(StatsItemView, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default StatsItemView;

package/dist/src/modules/stats/view/StatsQRCode/StatsQRCodeView.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './StatsQRCodeView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { StatsPromotion } from '../../interfaces/IStats';
+export interface StatsQRCodeViewProps extends WithFocusableProps {
+    promotion: StatsPromotion;
+}
+declare const _default: {
+    new (props: (StatsQRCodeViewProps & WithFocusableProps) | Readonly<StatsQRCodeViewProps & 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?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (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<StatsQRCodeViewProps & 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<StatsQRCodeViewProps & 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<StatsQRCodeViewProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: StatsQRCodeViewProps & 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?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (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<StatsQRCodeViewProps & 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<StatsQRCodeViewProps & 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<StatsQRCodeViewProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & 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/modules/stats/view/StatsQRCode/StatsQRCodeView.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import './StatsQRCodeView.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import Image from '@/components/atoms/Image';
+const StatsQRCodeView = (props) => {
+    const { focused, promotion } = props;
+    return (React.createElement("div", { className: "stats-qr-code-view focus-ring", "data-focused": focused, style: {
+            backgroundImage: `url(${promotion.backgroundImage})`,
+        } },
+        React.createElement("table", { className: "stats-qr-table" },
+            React.createElement("tbody", null,
+                React.createElement("tr", null,
+                    React.createElement("td", { className: "stats-qr-header-cell" },
+                        React.createElement("table", { className: "stats-qr-logo-table" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "stats-qr-logo-cell" },
+                                        React.createElement(Image, { src: promotion.logo, alt: "ESPN Logo", crossOrigin: "anonymous", className: "stats-qr-logo" }))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "stats-qr-tagline-cell" },
+                                        React.createElement("div", { className: "stats-qr-tagline" },
+                                            React.createElement("p", { className: "T20" }, promotion.title)))))))),
+                React.createElement("tr", null,
+                    React.createElement("td", { className: "stats-qr-content-cell" },
+                        React.createElement("table", { className: "stats-qr-content-table" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "stats-qr-code-cell" },
+                                        React.createElement("div", { className: "stats-qr-code-container" },
+                                            React.createElement(Image, { src: promotion.qrCode, alt: "QR Code", crossOrigin: "anonymous", className: "stats-qr-code" })))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "stats-qr-description-cell" },
+                                        React.createElement("div", { className: "stats-qr-description" },
+                                            React.createElement("p", { className: "T20" }, promotion.description))))))))))));
+};
+export default withFocusable()(StatsQRCodeView);

package/dist/src/modules/stats/view/StatsQRCode/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './StatsQRCodeView';
+export { StatsQRCodeViewProps } from './StatsQRCodeView';

package/dist/src/modules/stats/view/StatsQRCode/index.js

@@ -0,0 +1 @@
+export { default } from './StatsQRCodeView';

package/dist/src/modules/stats/view/StatsView.d.ts

@@ -0,0 +1,27 @@
+import { Component } from 'react';
+import './StatsView.styles.css';
+import StatsViewModel, { StatsErrorState, StatsItem } from '../view-model/StatsViewModel';
+import { Direction } from '@/external/spatial-navigation/utils';
+interface StatsViewState {
+    container: HTMLDivElement | null;
+    statsItems: StatsItem[];
+    isDataLoading: boolean;
+    errorState: StatsErrorState;
+}
+declare class StatsView extends Component<{}, StatsViewState> {
+    private container;
+    private statsDataUnsub;
+    private isDataLoadingUnsub;
+    private errorStateListener;
+    private vm;
+    constructor(props: {});
+    get viewModel(): StatsViewModel;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    clearTabLoadFailure: () => void;
+    onArrowPress: (d: Direction) => void;
+    renderItems: () => JSX.Element | JSX.Element[] | null;
+    onEnterPress: (item: StatsItem) => void;
+    render(): JSX.Element;
+}
+export default StatsView;

package/dist/src/modules/stats/view/StatsView.js

@@ -0,0 +1,137 @@
+import React, { Component } from 'react';
+import './StatsView.styles.css';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+import SDK from '@/index';
+import StatsItemView from './StatsItemView';
+import TabLoadErrorView from '@/components/molecules/TabLoadError';
+import { captureException } from '@/sentry';
+const STICKY_HEADER_HEIGHT = 32; // Match KeyPlaysView
+class StatsView extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "statsDataUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "isDataLoadingUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "errorStateListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "clearTabLoadFailure", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.viewModel.clearTabLoadFailure();
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        Object.defineProperty(this, "renderItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { statsItems } = this.state;
+                if (this.state.errorState === 'tabLoadFailure') {
+                    return (React.createElement(TabLoadErrorView, { onEnterPress: this.clearTabLoadFailure, onArrowPress: this.onArrowPress }));
+                }
+                try {
+                    return statsItems.map((item) => (React.createElement(StatsItemView, { key: item.type, item: item, onEnterPress: this.onEnterPress })));
+                }
+                catch (error) {
+                    captureException(error, { statsItems });
+                    console.error('Error rendering stats components:', error);
+                    return null;
+                }
+            }
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item) => {
+                this.viewModel.onEngage(item.type);
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel().statsViewModel;
+        this.state = {
+            container: null,
+            isDataLoading: this.viewModel.isDataLoading.value,
+            statsItems: this.viewModel.statsItems.value,
+            errorState: this.viewModel.errorState.value,
+        };
+    }
+    get viewModel() {
+        if (!this.vm) {
+            throw new Error('StatsViewModel is not initialized');
+        }
+        return this.vm;
+    }
+    componentDidMount() {
+        this.setState({
+            container: this.container,
+        });
+        this.statsDataUnsub = this.viewModel.statsItems.subscribe((value) => {
+            this.setState({ statsItems: value });
+        });
+        this.isDataLoadingUnsub = this.viewModel.isDataLoading.subscribe((value) => {
+            this.setState({ isDataLoading: value });
+        });
+        this.errorStateListener = this.viewModel.errorState.subscribe((value) => {
+            this.setState({ errorState: value });
+        });
+        this.setState({
+            container: this.container,
+        });
+        // Initialize the view model
+        this.viewModel.init();
+    }
+    componentWillUnmount() {
+        this.statsDataUnsub && this.statsDataUnsub();
+        this.isDataLoadingUnsub && this.isDataLoadingUnsub();
+        this.errorStateListener && this.errorStateListener();
+        // Clean up the view model
+        this.viewModel.cleanup();
+    }
+    render() {
+        const { container } = this.state;
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: container, containerTopOffset: STICKY_HEADER_HEIGHT },
+            React.createElement("div", { ref: (el) => {
+                    this.container = el;
+                }, className: "stats-view" },
+                this.renderItems(),
+                React.createElement("div", { className: "stats-bottom-padding" }))));
+    }
+}
+export default StatsView;