@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

package/dist/src/modules/{fantasy → espn/fantasy}/view-model/FantasyViewModel.js

@@ -1,10 +1,11 @@
 import { Observable } from '@/helpers/Observable';
-import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
 import { captureException } from '@/sentry';
-import FantasyService from '@/services/FantasyService';
+import SDK from '@/index';
+import FantasyService from '@/modules/espn/fantasy/services/FantasyService';
 import { isLeagueManagerHeadToHeadResponse, isLeagueManagerRotoResponse, } from '../types';
 import FantasyPolling from './FantasyViewModel.FantasyPolling';
 import LeagueManagerPolling from './FantasyViewModel.LeagueManagerPolling';
+import TournamentPolling from './FantasyViewModel.TournamentPolling';
 import { slugify, stringHashCode } from '@/helpers/strings';
 import { MOCK_FANTASY_RESPONSE } from '../mocks';
 const FANTASY_ERROR_STATE = {
@@ -12,7 +13,7 @@ const FANTASY_ERROR_STATE = {
     TAB_LOAD_FAILURE: 'tabLoadFailure',
 };
 export class FantasyViewModel {
-    constructor(eventId, delegate, options = {}) {
+    constructor(eventId, delegate, analyticsService, options = {}) {
         // Observable properties
         Object.defineProperty(this, "fantasyItems", {
             enumerable: true,
@@ -32,6 +33,12 @@ export class FantasyViewModel {
             writable: true,
             value: new Observable(false)
         });
+        Object.defineProperty(this, "isLoadingTc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
         // Properties
         Object.defineProperty(this, "eventId", {
             enumerable: true,
@@ -69,6 +76,12 @@ export class FantasyViewModel {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "tournamentPolling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "errorState", {
             enumerable: true,
             configurable: true,
@@ -93,13 +106,44 @@ export class FantasyViewModel {
             writable: true,
             value: false
         });
+        Object.defineProperty(this, "_promoData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "_fantasyLeagues", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_tournamentChallenges", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_promoItem", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "_tcProcessingCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
         this.useMockData = options.useMockData || false;
         this.eventId = eventId;
         this.delegate = delegate;
-        this.analyticsService = new AnalyticsService();
+        this.analyticsService = analyticsService;
         this.fantasyService = new FantasyService();
         this.fantasyPolling = new FantasyPolling(this.fantasyService);
         this.leagueManagerPolling = new LeagueManagerPolling(this.fantasyService);
+        this.tournamentPolling = new TournamentPolling(this.fantasyService);
     }
     /**
      * Initialize the ViewModel and start data fetching
@@ -162,8 +206,13 @@ export class FantasyViewModel {
         this.fantasyPolling.stop();
         this.fantasyPolling.removeLastResponseHash();
         this.leagueManagerPolling.stopAll();
+        this.tournamentPolling.stopAll();
         this.leagueSortOrder.clear();
         this.itemToLeagueKey.clear();
+        this._fantasyLeagues = [];
+        this._tournamentChallenges = [];
+        this._tcProcessingCount = 0;
+        this.isLoadingTc.value = false;
     }
     /**
      * Track panel view event
@@ -183,28 +232,63 @@ export class FantasyViewModel {
         try {
             const token = (await this.delegate.getUserToken()) || '';
             this.leagueManagerPolling.stopAll();
+            this.tournamentPolling.stopAll();
+            // Check hide_pickems flag from panel config
+            const config = SDK.getPageConfig();
+            const panel = config?.panels?.find((p) => p.panel_type === 'espnFantasy');
+            const hidePickems = panel?.renderer?.block_data?.hide_pickems || false;
+            const hasChallenges = (data.fantasyData?.challengeInformation || []).length > 0;
             const noData = (data.fantasyData?.totalChallengeEntries || 0) +
                 (data.fantasyData?.totalFantasyLeagues || 0) ===
                 0;
-            if (noData || (data.preferences || []).length === 0) {
-                const promo = await this.fantasyService.getPromo();
-                this.append({
-                    id: 'promo',
-                    type: 'promo',
-                    background: promo.fantasy.promotion.background,
-                    description: promo.fantasy.promotion.description,
-                    logo: promo.fantasy.promotion.logo,
-                    qrCode: promo.fantasy.promotion.qrCode,
-                    title: promo.fantasy.promotion.title,
-                });
-                return;
-            }
-            else if (this.fantasyItems.value.find((i) => i.type === 'promo')) {
-                this.fantasyItems.value = [];
-            }
             // Clear and rebuild the sort order map based on preferences array order
             this.leagueSortOrder.clear();
             this.itemToLeagueKey.clear();
+            // Clear internal lists on full refresh
+            this._fantasyLeagues = [];
+            this._tournamentChallenges = [];
+            if (!hidePickems && hasChallenges) {
+                this.isLoadingTc.value = true;
+                data.fantasyData?.challengeInformation?.forEach((challenge) => {
+                    if (challenge.gameType === 'BRACKET') {
+                        this._tcProcessingCount++;
+                        const key = `tc-${challenge.id}-${token}`;
+                        this.tournamentPolling.refresh(key, {
+                            challengeId: String(challenge.id),
+                            competitionId: this.eventId,
+                            token,
+                        }, (data) => {
+                            this.parseTournamentChallenge(data);
+                            this._tcProcessingCount--;
+                            if (this._tcProcessingCount === 0) {
+                                this.isLoadingTc.value = false;
+                                this.rebuildFantasyItems();
+                            }
+                        });
+                    }
+                });
+                // If no BRACKET challenges were found, set isLoadingTc back to false
+                if (this._tcProcessingCount === 0) {
+                    this.isLoadingTc.value = false;
+                }
+            }
+            else {
+                this.isLoadingTc.value = false;
+            }
+            if (noData || (data.preferences || []).length === 0) {
+                const promo = await this.getPromoData();
+                if (promo) {
+                    this._promoItem = {
+                        id: 'promo',
+                        type: 'promo',
+                        background: promo.fantasy.promotion.background,
+                        description: promo.fantasy.promotion.description,
+                        logo: promo.fantasy.promotion.logo,
+                        qrCode: promo.fantasy.promotion.qrCode,
+                        title: promo.fantasy.promotion.title,
+                    };
+                }
+            }
             for (let i = 0; i < (data.preferences || []).length; i++) {
                 const pref = data.preferences[i];
                 const entry = pref.metaData?.entry || {};
@@ -250,6 +334,8 @@ export class FantasyViewModel {
             // Mark successful load
             this.hasEverSuccessfullyLoaded.value = true;
             this.errorState.value = 'none';
+            // Initial rebuild even if empty, to ensure state is clean
+            this.rebuildFantasyItems();
         }
         catch (error) {
             captureException(error, {
@@ -334,39 +420,106 @@ export class FantasyViewModel {
         if (!item) {
             return;
         }
-        if (item.type === 'notLoggedIn' || item.type === 'promo') {
+        if (item.type === 'notLoggedIn') {
             this.fantasyItems.value = [item];
             return;
         }
-        // Store the league key for this item
+        if (item.type === 'promo') {
+            this._promoItem = item;
+        }
+        // Store the league key for this item if provided
         if (leagueKey) {
             this.itemToLeagueKey.set(item.id, leagueKey);
         }
-        const current = this.fantasyItems.value.find((i) => {
-            return i.id === item.id;
-        });
-        let updatedItems;
-        if (current) {
-            const index = this.fantasyItems.value.indexOf(current);
-            updatedItems = [...this.fantasyItems.value];
-            updatedItems[index] = item;
+        if (item.type === 'matchup-pair' ||
+            item.type === 'matchup-single' ||
+            item.type === 'inactiveLeague') {
+            const existingItemIndex = this._fantasyLeagues.findIndex((i) => i.id === item.id);
+            if (existingItemIndex !== -1) {
+                this._fantasyLeagues[existingItemIndex] = item;
+            }
+            else {
+                this._fantasyLeagues.push(item);
+            }
+            // Sort items inside the group
+            this._fantasyLeagues.sort((a, b) => {
+                const keyA = this.itemToLeagueKey.get(a.id);
+                const keyB = this.itemToLeagueKey.get(b.id);
+                const orderA = keyA !== undefined
+                    ? this.leagueSortOrder.get(keyA) ?? Number.MAX_SAFE_INTEGER
+                    : Number.MAX_SAFE_INTEGER;
+                const orderB = keyB !== undefined
+                    ? this.leagueSortOrder.get(keyB) ?? Number.MAX_SAFE_INTEGER
+                    : Number.MAX_SAFE_INTEGER;
+                return orderA - orderB;
+            });
         }
-        else {
-            updatedItems = [...this.fantasyItems.value, item];
-        }
-        // Sort items based on their league's position in preferences array
-        updatedItems.sort((a, b) => {
-            const keyA = this.itemToLeagueKey.get(a.id);
-            const keyB = this.itemToLeagueKey.get(b.id);
-            const orderA = keyA !== undefined
-                ? this.leagueSortOrder.get(keyA) ?? Number.MAX_SAFE_INTEGER
-                : Number.MAX_SAFE_INTEGER;
-            const orderB = keyB !== undefined
-                ? this.leagueSortOrder.get(keyB) ?? Number.MAX_SAFE_INTEGER
-                : Number.MAX_SAFE_INTEGER;
-            return orderA - orderB;
-        });
-        this.fantasyItems.value = updatedItems;
+        const existingGroupIndex = this._tournamentChallenges.findIndex((g) => g.id === leagueKey);
+        if (item.type === 'fantasy-header') {
+            if (existingGroupIndex !== -1) {
+                this._tournamentChallenges[existingGroupIndex].header = item;
+            }
+            else if (leagueKey) {
+                this._tournamentChallenges.push({
+                    type: 'fantasy-group',
+                    id: leagueKey,
+                    header: item,
+                    items: [],
+                });
+            }
+        }
+        else if (item.type === 'tournament-bracket-card' ||
+            item.type === 'tournament-overflow-qr') {
+            if (existingGroupIndex !== -1) {
+                const group = this._tournamentChallenges[existingGroupIndex];
+                const existingItemIndex = group.items.findIndex((i) => i.id === item.id);
+                if (existingItemIndex !== -1) {
+                    group.items[existingItemIndex] = item;
+                }
+                else {
+                    group.items.push(item);
+                }
+            }
+            else if (leagueKey) {
+                this._tournamentChallenges.push({
+                    type: 'fantasy-group',
+                    id: leagueKey,
+                    header: {
+                        type: 'fantasy-header',
+                        id: `${leagueKey}-header`,
+                        title: '',
+                    },
+                    items: [item],
+                });
+            }
+        }
+        this.rebuildFantasyItems();
+    }
+    rebuildFantasyItems() {
+        const items = [];
+        if (this._tournamentChallenges.length > 0) {
+            items.push(...this._tournamentChallenges);
+        }
+        if (this._fantasyLeagues.length > 0) {
+            items.push({
+                type: 'fantasy-group',
+                id: 'header-fantasy-leagues-group',
+                header: {
+                    type: 'fantasy-header',
+                    id: 'header-fantasy-leagues',
+                    title: 'Fantasy Leagues',
+                },
+                items: this._fantasyLeagues,
+            });
+        }
+        if (this._promoItem &&
+            this._tournamentChallenges.length === 0 &&
+            this._fantasyLeagues.length === 0 &&
+            items.length === 0 &&
+            !this.isLoadingTc.value) {
+            items.push(this._promoItem);
+        }
+        this.fantasyItems.value = items;
     }
     parseHeadToHead(data, preference) {
         if (!data.matchups?.length ||
@@ -514,6 +667,105 @@ export class FantasyViewModel {
             draftDate: draftDateNum,
         };
     }
+    async getPromoData() {
+        if (this._promoData) {
+            return this._promoData;
+        }
+        try {
+            this._promoData = await this.fantasyService.getPromo();
+            return this._promoData;
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'FantasyViewModel.getPromoData',
+            });
+            return null;
+        }
+    }
+    async parseTournamentChallenge(data) {
+        if (!data.id) {
+            return;
+        }
+        let validEntries = data.entries?.filter((entry) => entry.id) || [];
+        if (validEntries.length === 0) {
+            return;
+        }
+        const header = {
+            type: 'fantasy-header',
+            id: `${data.id}-header`,
+            title: data.name || 'Tournament Challenge',
+        };
+        this.append(header, data.id);
+        const existingGroupIndex = this._tournamentChallenges.findIndex((g) => g.id === data.id);
+        if (existingGroupIndex !== -1) {
+            this._tournamentChallenges[existingGroupIndex].items = [];
+        }
+        const totalEntries = validEntries.length;
+        const entriesToShow = validEntries.slice(0, 5);
+        for (const entry of entriesToShow) {
+            let userPickName;
+            if (data.propositions && entry.picks) {
+                for (const pick of entry.picks) {
+                    if (!pick.propositionId || !pick.outcomeId)
+                        continue;
+                    const proposition = data.propositions.find((p) => p.id === pick.propositionId);
+                    if (proposition && proposition.outcomes) {
+                        const outcome = proposition.outcomes.find((o) => o.id === pick.outcomeId);
+                        if (outcome && outcome.name) {
+                            userPickName = outcome.name;
+                            break;
+                        }
+                    }
+                }
+            }
+            const card = {
+                type: 'tournament-bracket-card',
+                id: entry.id,
+                name: entry.name || '',
+                rank: entry.rank || 0,
+                score: entry.score || 0,
+                percentile: Math.round((entry.percentile || 0) * 100),
+                entryStatusIcon: entry.entryStatusIcon || '',
+                finalPick: entry.finalPick
+                    ? {
+                        propositionId: entry.finalPick.propositionId,
+                        outcomeId: entry.finalPick.outcomeId,
+                        primaryLogo: entry.finalPick.outcomePicked?.primaryLogo,
+                        secondaryLogo: entry.finalPick.outcomePicked
+                            ?.secondaryLogo,
+                        result: entry.finalPick.result,
+                    }
+                    : { propositionId: '', outcomeId: '' },
+                isComplete: entry.isComplete || false,
+                picks: entry.picks,
+                tournamentId: data.id,
+                tournamentAbbrev: data.abbrev || '',
+                tournamentLogo: data.logo || '',
+                propositions: data.propositions,
+                userPickName,
+            };
+            this.append(card, data.id);
+        }
+        if (totalEntries > 5 && data.state === 'LIVE') {
+            const promoData = await this.getPromoData();
+            const isLocked = data.locked === true;
+            const qrCodeVariant = isLocked ? 'tc-live' : 'tc-pre';
+            const promoVariant = promoData?.[qrCodeVariant];
+            if (promoVariant) {
+                const overflowQR = {
+                    type: 'tournament-overflow-qr',
+                    id: `${data.id}-overflow`,
+                    background: promoVariant.promotion.background,
+                    logo: promoVariant.promotion.logo,
+                    qrCode: promoVariant.promotion.qrCode,
+                    title: promoVariant.promotion.title,
+                    description: promoVariant.promotion.description,
+                    tournamentId: data.id,
+                };
+                this.append(overflowQR, data.id);
+            }
+        }
+    }
     /**
      * Fetch mock data for testing
      */
@@ -530,5 +782,17 @@ export class FantasyViewModel {
             this.fetchData();
         }, 100);
     }
+    setDataToPanel(data) {
+        if (data.leagueManagerOverrideBaseUrl) {
+            this.fantasyService.leagueManagerOverrideBaseUrl =
+                data.leagueManagerOverrideBaseUrl;
+        }
+        if (data.fantasyOverrideBaseUrl) {
+            this.fantasyService.fantasyOverrideBaseUrl = data.fantasyOverrideBaseUrl;
+        }
+        if (data.gambitOverrideBaseUrl) {
+            this.fantasyService.gambitOverrideBaseUrl = data.gambitOverrideBaseUrl;
+        }
+    }
 }
 export default FantasyViewModel;

package/dist/src/modules/espn/key-plays/interfaces/IKeyPlaysViewModel.d.ts

@@ -0,0 +1,17 @@
+import { Observable } from '@/helpers/Observable';
+import IKeyPlay, { KeyPlaysErrorState, KeyPlayLoadFailureStatus } from './IKeyPlays';
+import IMaestroKeyPlaysResponse from './IKeyPlaysResponse';
+export interface IKeyPlaysViewModel {
+    currentlyPlayingClipIndex: Observable<number | null>;
+    lastPlayedClipIndex: Observable<number | null>;
+    currentClipPlaybackProgress: Observable<number | null>;
+    errorState: Observable<KeyPlaysErrorState | null>;
+    failedClips: Observable<{
+        [key: string]: KeyPlayLoadFailureStatus;
+    }>;
+    allItems: IKeyPlay[];
+    onUpdatePlayerTimeCode(playerTimeCode: number | null): void;
+    setKeyPlays(items: IMaestroKeyPlaysResponse | null, playerTimeCode: number | null): Promise<void>;
+    handleKeyPlayLoadFailure(forKeyPlayAtIndex: number): void;
+    clearLoadFailureStatus(forKeyPlayAtIndex: number): void;
+}

package/dist/src/modules/{key-plays → espn/key-plays}/view/KeyPlayCardView.d.ts

@@ -1,10 +1,8 @@
-/// <reference types="prop-types" />
 import IKeyPlay, { KeyPlayLoadFailureStatus } from '../interfaces/IKeyPlays';
 import './KeyPlayCardView.styles.css';
 import React from 'react';
 import { WithFocusableProps } from '@/external/spatial-navigation';
 import KeyPlaysViewModel from '../view-model/KeyPlaysViewModel';
-import { Direction, Layout } from '@/external/spatial-navigation/utils';
 type KeyPlayCardViewProps = IKeyPlay & {
     isPlaying: boolean;
     playbackProgress: number | null;
@@ -25,15 +23,5 @@ export declare class KeyPlayCardView extends React.Component<KeyPlayCardViewProp
     renderImage: () => JSX.Element | null;
     render(): JSX.Element;
 }
-export default class KeyPlayCard extends React.Component<Omit<KeyPlayCardViewProps, 'setRef'> & WithFocusableProps> {
-    context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
-    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>;
-    };
-    handleLeftPressed: (d: Direction) => void;
-    onBecameFocused: (layout: Layout) => void;
-    render(): JSX.Element;
-}
-export {};
+declare const KeyPlayCard: React.FC<Omit<KeyPlayCardViewProps, 'setRef'> & WithFocusableProps>;
+export default KeyPlayCard;

package/dist/src/modules/{key-plays → espn/key-plays}/view/KeyPlayCardView.js

@@ -3,11 +3,11 @@ import { BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK } from '../constants';
 import './KeyPlayCardView.styles.css';
 import SDK from '@/index';
 import Icon from '@/components/atoms/SvgIcon';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { withFocusable, } from '@/external/spatial-navigation';
 import ScoreCard from './KeyPlayCardScoreTagView';
 import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
-import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import { useScrollableContainer } from '@/components/core/ScrollableContainer';
 export class KeyPlayCardView extends React.Component {
     constructor(props) {
         super(props);
@@ -55,7 +55,8 @@ export class KeyPlayCardView extends React.Component {
                 return null;
             }
         });
-        this.vm = SDK.getMaestroEventViewModel().keyPlaysViewModel;
+        this.vm = SDK.getMaestroEventViewModel()
+            .keyPlaysViewModel;
         this.state = {
             failedClip: this.viewModel.failedClips.value[props.clipID] || null,
             imageLoaded: false,
@@ -98,42 +99,17 @@ export class KeyPlayCardView extends React.Component {
     }
 }
 const FocusableKeyPlayCard = withFocusable()(KeyPlayCardView);
-export default class KeyPlayCard extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "context", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
-        });
-        Object.defineProperty(this, "handleLeftPressed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (d) => {
-                if (d === 'left') {
-                    SDK.getMaestroEventViewModel().deliverFocus();
-                }
-            }
-        });
-        Object.defineProperty(this, "onBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (layout) => {
-                this.context.scrollToFocusedElement(layout);
-            }
-        });
-    }
-    render() {
-        return (React.createElement(FocusableItem, null,
-            React.createElement(FocusableKeyPlayCard, { ...this.props, onArrowPress: this.handleLeftPressed, onBecameFocused: this.onBecameFocused })));
-    }
-}
-Object.defineProperty(KeyPlayCard, "contextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: SCROLLABLE_CONTEXT_TYPE
-});
+const KeyPlayCard = (props) => {
+    const { scrollToFocusedElement } = useScrollableContainer();
+    const handleLeftPressed = useCallback((d) => {
+        if (d === 'left') {
+            SDK.getMaestroEventViewModel().deliverFocus();
+        }
+    }, []);
+    const onBecameFocused = useCallback((layout) => {
+        scrollToFocusedElement(layout);
+    }, [scrollToFocusedElement]);
+    return (React.createElement(FocusableItem, null,
+        React.createElement(FocusableKeyPlayCard, { ...props, onArrowPress: handleLeftPressed, onBecameFocused: onBecameFocused })));
+};
+export default KeyPlayCard;

package/dist/src/modules/{key-plays → espn/key-plays}/view/KeyPlayErrorStateView.js

@@ -2,19 +2,19 @@ import './KeyPlayErrorStateView.styles.css';
 import React from 'react';
 import SDK from '@/index';
 import TabLoadErrorView from '@/components/molecules/TabLoadError';
-class UnpopulatedEvent extends React.Component {
-    render() {
-        return (React.createElement("div", { className: "sdk--key-play-error-state-unpopulatedEvent" },
-            React.createElement("div", { className: "main-content" },
-                React.createElement("h3", { className: "T70" }, "Good things come to those who wait!"),
-                React.createElement("p", { className: "T20" }, "When a key play occurs we will serve them up for you here.")),
-            React.createElement("div", { className: "unpopulatedEvent-examples" }, Array.from({ length: 4 }).map((_, i) => (React.createElement("div", { key: i, className: "example" },
-                React.createElement("div", { className: "image" }),
-                React.createElement("div", { className: "content" },
-                    React.createElement("div", { className: "headline" }),
-                    React.createElement("div", { className: "body" }))))))));
-    }
-}
+import { useMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';
+const UnpopulatedEvent = () => {
+    const maxHeightRef = useMaxHeightToBottom();
+    return (React.createElement("div", { ref: maxHeightRef, className: "sdk--key-play-error-state-unpopulatedEvent" },
+        React.createElement("div", { className: "main-content" },
+            React.createElement("h3", { className: "T70" }, "Good things come to those who wait!"),
+            React.createElement("p", { className: "T20" }, "When a key play occurs we will serve them up for you here.")),
+        React.createElement("div", { className: "unpopulatedEvent-examples" }, Array.from({ length: 4 }).map((_, i) => (React.createElement("div", { key: i, className: "example" },
+            React.createElement("div", { className: "image" }),
+            React.createElement("div", { className: "content" },
+                React.createElement("div", { className: "headline" }),
+                React.createElement("div", { className: "body" }))))))));
+};
 class UnsupportedEvent extends React.Component {
     render() {
         return (React.createElement("div", { className: "sdk--key-play-error-state-unsupportedEvent" },

package/dist/src/modules/{key-plays → espn/key-plays}/view/KeyPlaysView.d.ts

@@ -13,12 +13,14 @@ export declare class KeyPlays extends Component<{}, IKeyPlaysState> {
     private playbackProgressUnsub;
     private playbackIndexUnsub;
     private itemsUnsub;
+    private maxHeightCleanup;
     private vm;
     constructor(props: {});
     get viewModel(): KeyPlaysViewModel;
     componentDidMount(): void;
     componentWillUnmount(): void;
     private handlePlayClip;
+    setContainerRef: (e: HTMLDivElement | null) => void;
     render(): JSX.Element;
 }
 interface KeyPlaysWithErrorStateState {