@maestro_io/maestro-web-sdk 4.0.0 → 4.0.2

package/dist/src/modules/fantasy/view-model/FantasyViewModel.js

@@ -0,0 +1,534 @@
+import { Observable } from '@/helpers/Observable';
+import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
+import { captureException } from '@/sentry';
+import FantasyService from '@/services/FantasyService';
+import { isLeagueManagerHeadToHeadResponse, isLeagueManagerRotoResponse, } from '../types';
+import FantasyPolling from './FantasyViewModel.FantasyPolling';
+import LeagueManagerPolling from './FantasyViewModel.LeagueManagerPolling';
+import { slugify, stringHashCode } from '@/helpers/strings';
+import { MOCK_FANTASY_RESPONSE } from '../mocks';
+const FANTASY_ERROR_STATE = {
+    NONE: 'none',
+    TAB_LOAD_FAILURE: 'tabLoadFailure',
+};
+export class FantasyViewModel {
+    constructor(eventId, delegate, options = {}) {
+        // Observable properties
+        Object.defineProperty(this, "fantasyItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "isDataLoading", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "hasEverSuccessfullyLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        // Properties
+        Object.defineProperty(this, "eventId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "delegate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fantasyService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fantasyPolling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "leagueManagerPolling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "errorState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('none')
+        });
+        Object.defineProperty(this, "leagueSortOrder", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "itemToLeagueKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "useMockData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        this.useMockData = options.useMockData || false;
+        this.eventId = eventId;
+        this.delegate = delegate;
+        this.analyticsService = new AnalyticsService();
+        this.fantasyService = new FantasyService();
+        this.fantasyPolling = new FantasyPolling(this.fantasyService);
+        this.leagueManagerPolling = new LeagueManagerPolling(this.fantasyService);
+    }
+    /**
+     * Initialize the ViewModel and start data fetching
+     */
+    async init() {
+        // Track panel view on initialization
+        this.trackPanelView();
+        await this.fetchData();
+    }
+    async fetchData() {
+        const isAuthenticated = await this.delegate.userIsAuthenticated();
+        if (!isAuthenticated) {
+            this.append({
+                id: 'not-logged-in',
+                type: 'notLoggedIn',
+            });
+            return;
+        }
+        else if (this.fantasyItems.value.find((i) => i.type === 'notLoggedIn')) {
+            this.fantasyItems.value = [];
+        }
+        const swid = (await this.delegate.getUserSWID()) || '';
+        const jwt = (await this.delegate.getUserToken()) || '';
+        if (this.useMockData) {
+            await this.fetchMockData();
+            return;
+        }
+        else {
+            await this.fantasyPolling.refresh({
+                eventId: this.eventId,
+                swid,
+                jwt,
+            }, this.processFantasy.bind(this));
+        }
+    }
+    onEngage(type) {
+        this.analyticsService.panelClick({
+            type: 'espnFantasy',
+            name: 'fantasy_item_clicked',
+            metadata: {
+                card: type,
+            },
+        });
+    }
+    onAskLogin() {
+        this.fantasyItems.value = [];
+        this.delegate.onPanelEvent({
+            type: 'fantasy:request:login',
+            payload: {
+                onLoginSuccess: async () => {
+                    await this.fetchData();
+                },
+            },
+        });
+    }
+    /**
+     * Clean up resources when the ViewModel is no longer needed
+     */
+    cleanup() {
+        this.fantasyPolling.stop();
+        this.fantasyPolling.removeLastResponseHash();
+        this.leagueManagerPolling.stopAll();
+        this.leagueSortOrder.clear();
+        this.itemToLeagueKey.clear();
+    }
+    /**
+     * Track panel view event
+     */
+    async trackPanelView() {
+        try {
+            await this.analyticsService.panelView('espnFantasy');
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'FantasyViewModel.trackPanelView',
+            });
+            console.error('[FANTASY] Error tracking panel view:', error);
+        }
+    }
+    async processFantasy(data) {
+        try {
+            const token = (await this.delegate.getUserToken()) || '';
+            this.leagueManagerPolling.stopAll();
+            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();
+            for (let i = 0; i < (data.preferences || []).length; i++) {
+                const pref = data.preferences[i];
+                const entry = pref.metaData?.entry || {};
+                const game = entry.abbrev;
+                const seasonId = entry.seasonId;
+                const leagueId = entry.groups?.[0]?.groupId;
+                const draftDate = entry.groups?.[0]?.draftDate;
+                if (!game || !seasonId || !leagueId || !entry.entryId) {
+                    continue;
+                }
+                const key = `${game}-${leagueId}-${seasonId}-${token}`;
+                // Store the array index as the sort order for this league
+                this.leagueSortOrder.set(key, i);
+                this.leagueManagerPolling.refresh(key, {
+                    game,
+                    leagueId,
+                    seasonId,
+                    token,
+                    proGameId: this.eventId,
+                    teamId: entry.entryId,
+                }, (data) => {
+                    if (entry.entryMetadata?.draftComplete === false) {
+                        this.append(this.parseInactiveLeague(data, draftDate), key);
+                    }
+                    else if (isLeagueManagerHeadToHeadResponse(data)) {
+                        const items = this.parseHeadToHead(data, pref);
+                        if (items) {
+                            for (const item of items) {
+                                this.append(item, key);
+                            }
+                        }
+                    }
+                    else if (isLeagueManagerRotoResponse(data)) {
+                        const items = this.parseRoto(data, pref);
+                        if (items) {
+                            for (const item of items) {
+                                this.append(item, key);
+                            }
+                        }
+                    }
+                });
+            }
+            // Mark successful load
+            this.hasEverSuccessfullyLoaded.value = true;
+            this.errorState.value = 'none';
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'FantasyViewModel.processFantasy',
+            });
+            console.error('[FANTASY] Error processing fantasy data:', error);
+            if (!this.hasEverSuccessfullyLoaded.value) {
+                this.errorState.value = 'tabLoadFailure';
+            }
+        }
+    }
+    parseRoto(data, preference) {
+        if (!data.matchups?.length ||
+            !data.leagueName ||
+            !data.scoringType ||
+            !data.gameId) {
+            return null;
+        }
+        const items = [];
+        for (const matchup of data.matchups) {
+            if (!matchup.teams?.length) {
+                continue;
+            }
+            const team = matchup.teams[0];
+            if (!team.logo ||
+                !data.sportLogo ||
+                !data.sportColor ||
+                team.points === undefined) {
+                continue;
+            }
+            const roster = team.roster || [];
+            const matchupRoster = [];
+            const activeAthletes = [];
+            for (const r of roster) {
+                if (!r.player) {
+                    continue;
+                }
+                if (!r.player.abbrevName ||
+                    !r.player.headshot ||
+                    !r.player.proTeam?.triCode ||
+                    !r.slot) {
+                    continue;
+                }
+                matchupRoster.push({
+                    athleteHeadshot: r.player.headshot,
+                    athleteAbbrevName: r.player.abbrevName,
+                    athletesSlot: r.slot,
+                    teamTriCode: r.player.proTeam.triCode,
+                    proGameStatusLines: r.player.proGameStatusLines || [],
+                });
+                if (r.player.currentlyWatching && r.player.points !== undefined) {
+                    activeAthletes.push({
+                        abbrevName: r.player.abbrevName,
+                        points: `${r.player.points} FPTS`,
+                    });
+                }
+            }
+            items.push({
+                id: stringHashCode(JSON.stringify(preference)).toString(),
+                type: 'matchup-single',
+                topPlayers: this.parseTopPlayers(data.topPlayers || []),
+                league: {
+                    color: data.sportColor,
+                    logo: data.sportLogo,
+                    subtitle: data.name,
+                    title: data.leagueName,
+                },
+                team: {
+                    logo: team.logo,
+                    scoringType: data.scoringType.includes('SEASON')
+                        ? 'SEASON'
+                        : data.scoringType,
+                    points: team.points,
+                },
+                roster: matchupRoster,
+                activeAthletes,
+            });
+        }
+        return items;
+    }
+    append(item, leagueKey) {
+        if (!item) {
+            return;
+        }
+        if (item.type === 'notLoggedIn' || item.type === 'promo') {
+            this.fantasyItems.value = [item];
+            return;
+        }
+        // Store the league key for this item
+        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;
+        }
+        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;
+    }
+    parseHeadToHead(data, preference) {
+        if (!data.matchups?.length ||
+            !data.leagueName ||
+            !data.sportColor ||
+            !data.sportLogo ||
+            !data.gameId) {
+            return null;
+        }
+        const items = [];
+        for (const matchup of data.matchups) {
+            if (!matchup.home || !matchup.away) {
+                continue;
+            }
+            const roster = [];
+            const activeAthletes = [];
+            const homeRoster = matchup.home.roster || [];
+            const awayRoster = matchup.away.roster || [];
+            for (let i = 0; i < awayRoster.length; i++) {
+                const singleAwayRoster = awayRoster[i];
+                const singleHomeRoster = homeRoster[i];
+                if (!singleAwayRoster.player || !singleHomeRoster.player)
+                    continue;
+                if (!singleAwayRoster.player.abbrevName ||
+                    !singleAwayRoster.player.headshot ||
+                    !singleAwayRoster.slot ||
+                    !singleAwayRoster.player.proTeam?.triCode ||
+                    !matchup.away?.record) {
+                    continue;
+                }
+                if (!singleHomeRoster.player.abbrevName ||
+                    !singleHomeRoster.player.headshot ||
+                    !singleHomeRoster.slot ||
+                    !singleHomeRoster.player.proTeam?.triCode ||
+                    !matchup.home?.record) {
+                    continue;
+                }
+                roster.push({
+                    away: {
+                        abbrevName: singleAwayRoster.player.abbrevName,
+                        headshot: singleAwayRoster.player.headshot,
+                        points: singleAwayRoster.player.points,
+                        slot: singleAwayRoster.slot,
+                        stats: singleAwayRoster.player.proGameStatusLines || [],
+                        triCode: singleAwayRoster.player.proTeam.triCode,
+                        projectedPoints: singleAwayRoster.player.projectedPoints,
+                    },
+                    home: {
+                        abbrevName: singleHomeRoster.player.abbrevName,
+                        headshot: singleHomeRoster.player.headshot,
+                        points: singleHomeRoster.player.points,
+                        slot: singleHomeRoster.slot,
+                        stats: singleHomeRoster.player.proGameStatusLines || [],
+                        triCode: singleHomeRoster.player.proTeam?.triCode,
+                        projectedPoints: singleHomeRoster.player.projectedPoints,
+                    },
+                });
+                if (singleHomeRoster.player.currentlyWatching &&
+                    singleHomeRoster.player.points !== undefined) {
+                    activeAthletes.push({
+                        abbrevName: singleHomeRoster.player.abbrevName,
+                        points: `${singleHomeRoster.player.points} FPTS`,
+                    });
+                }
+            }
+            items.push({
+                id: stringHashCode(JSON.stringify(preference)).toString(),
+                type: 'matchup-pair',
+                awayTeam: {
+                    logo: matchup.away.logo,
+                    name: matchup.away.name,
+                    points: data.scoringType === 'H2H_POINTS'
+                        ? String(matchup.away.points)
+                        : matchup.away.score,
+                    projectedPoints: matchup.away.projectedPoints,
+                    record: matchup.away.record,
+                    winProbability: matchup.away.winProbability,
+                },
+                homeTeam: {
+                    logo: matchup.home.logo,
+                    name: matchup.home.name,
+                    points: data.scoringType === 'H2H_POINTS'
+                        ? String(matchup.home.points)
+                        : matchup.home.score,
+                    projectedPoints: matchup.home.projectedPoints,
+                    record: matchup.home.record,
+                    winProbability: matchup.home.winProbability,
+                },
+                league: {
+                    color: data.sportColor,
+                    logo: data.sportLogo,
+                    subtitle: matchup.name,
+                    title: data.leagueName,
+                },
+                roster,
+                activeAthletes,
+                topPlayers: this.parseTopPlayers(data.topPlayers || []),
+            });
+        }
+        return items;
+    }
+    parseTopPlayers(players) {
+        const topPlayers = [];
+        for (const p of players) {
+            if (!p.abbrevName ||
+                !p.headshot ||
+                !p.proTeam?.triCode ||
+                p.points === undefined) {
+                continue;
+            }
+            let rosteredBy = '';
+            if (p.percentRostered !== undefined &&
+                p.percentRostered > 0 &&
+                p.playerStatus?.startsWith('Rostered')) {
+                rosteredBy = p.playerStatus;
+            }
+            topPlayers.push({
+                abbrevName: p.abbrevName,
+                headshot: p.headshot,
+                position: p.positions?.split(',')[0] || '',
+                teamTriCode: p.proTeam.triCode,
+                points: p.points,
+                rosteredBy,
+            });
+        }
+        return topPlayers;
+    }
+    parseInactiveLeague(data, draftDate) {
+        if (!data.sportColor || !data.sportLogo || !data.leagueName) {
+            return null;
+        }
+        let draftDateNum = undefined;
+        if (draftDate) {
+            const parsedDate = new Date(Number(draftDate));
+            if (!isNaN(parsedDate.getTime())) {
+                draftDateNum = parsedDate.getTime();
+            }
+        }
+        return {
+            id: slugify(`${data.gameId}-inactive-${data.leagueName}`),
+            leagueColor: data.sportColor,
+            leagueLogo: data.sportLogo,
+            leagueName: data.leagueName,
+            type: 'inactiveLeague',
+            draftDate: draftDateNum,
+        };
+    }
+    /**
+     * Fetch mock data for testing
+     */
+    async fetchMockData() {
+        this.hasEverSuccessfullyLoaded.value = true;
+        await this.processFantasy(MOCK_FANTASY_RESPONSE);
+        this.errorState.value = 'none';
+        this.isDataLoading.value = false;
+    }
+    clearTabLoadFailure() {
+        this.errorState.value = 'none';
+        // Small delay to allow UI to update before refetching
+        setTimeout(() => {
+            this.fetchData();
+        }, 100);
+    }
+}
+export default FantasyViewModel;

package/dist/src/modules/hello-world/HelloWorldImage.d.ts

@@ -0,0 +1,2 @@
+declare const HelloWorldImage: () => JSX.Element;
+export default HelloWorldImage;

package/dist/src/modules/hello-world/HelloWorldImage.js

@@ -0,0 +1,32 @@
+import React from 'react';
+const HelloWorldImage = () => {
+    return (React.createElement("div", { className: "hello-world-image" },
+        React.createElement("svg", { width: "376", height: "236", viewBox: "0 0 376 236", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M255.234 212.541H232.178V235.597H255.234V212.541ZM116.898 235.597H139.954V212.541H116.898V235.597ZM197.594 108.789H220.65V154.901H197.594V108.789ZM174.538 154.901H151.482V108.789H174.538V154.901ZM255.234 91.4965H243.706V79.9685H232.178V68.4404H214.886V45.3843H203.358V68.4404H168.774V45.3843H157.246V68.4404H139.954V79.9685H128.426V91.4965H116.898V131.845H93.8414V143.373H116.898V183.721H139.954V212.541H168.774V183.721H203.358V212.541H232.178V183.721H255.234V143.373H278.29V131.845H255.234V91.4965ZM278.29 131.845H289.818V68.4404H278.29V131.845ZM82.3134 131.845H93.8414V68.4404H82.3134V131.845Z", fill: "#2D2D2D" }),
+            React.createElement("path", { d: "M262.396 50.3333L246.908 65.8205H262.396V80.7546H346.469V5.53113H262.396V50.3333Z", fill: "#101113", stroke: "#2D2D2D", strokeWidth: "6.63736" }),
+            React.createElement("path", { d: "M278.746 57.5037V29.5141H286.311V39.9156H295.616V29.5141H303.18V57.5037H295.616V46.1944H286.311V57.5037H278.746ZM308.634 57.5037V29.5141H316.199V57.5037H308.634ZM323.408 48.1612L321.593 29.5141H331.011L329.195 48.1612H323.408ZM322.387 57.5037V51.0737H330.216V57.5037H322.387Z", fill: "#2D2D2D" }),
+            React.createElement("rect", { x: "61.0623", y: "56.4176", width: "8.84982", height: "8.84982", transform: "rotate(-90 61.0623 56.4176)", fill: "#2D2D2D" }),
+            React.createElement("rect", { x: "50", y: "42.0366", width: "8.84982", height: "8.84982", transform: "rotate(-90 50 42.0366)", fill: "#2D2D2D" }),
+            React.createElement("rect", { x: "69.9121", y: "47.5674", width: "8.84982", height: "8.84982", transform: "rotate(-90 69.9121 47.5674)", fill: "#2D2D2D" }),
+            React.createElement("g", { filter: "url(#filter0_d_193_43290)" },
+                React.createElement("rect", { width: "8", height: "12", transform: "matrix(4.37114e-08 1 1 -4.37114e-08 82 67)", fill: "#21EFA3" })),
+            React.createElement("rect", { x: "58.8499", y: "33.1868", width: "8.84982", height: "8.84982", transform: "rotate(-90 58.8499 33.1868)", fill: "#2D2D2D" }),
+            React.createElement("rect", { x: "78.762", y: "47.5677", width: "8.84982", height: "8.84982", transform: "rotate(-90 78.762 47.5677)", fill: "#2D2D2D" }),
+            React.createElement("rect", { x: "67.6997", y: "33.1868", width: "8.84982", height: "8.84982", transform: "rotate(-90 67.6997 33.1868)", fill: "#2D2D2D" }),
+            React.createElement("rect", { x: "256.865", y: "8.84982", width: "8.84982", height: "8.84982", transform: "rotate(-90 256.865 8.84982)", fill: "#101113" }),
+            React.createElement("rect", { x: "343.15", y: "8.84982", width: "8.84982", height: "8.84982", transform: "rotate(-90 343.15 8.84982)", fill: "#101113" }),
+            React.createElement("rect", { x: "343.15", y: "86.2857", width: "8.84982", height: "8.84982", transform: "rotate(-90 343.15 86.2857)", fill: "#101113" }),
+            React.createElement("rect", { x: "256.865", y: "86.2857", width: "8.84982", height: "8.84982", transform: "rotate(-90 256.865 86.2857)", fill: "#101113" }),
+            React.createElement("defs", null,
+                React.createElement("filter", { id: "filter0_d_193_43290", x: "64", y: "50", width: "48", height: "44", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                    React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+                    React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                    React.createElement("feMorphology", { radius: "3", operator: "dilate", in: "SourceAlpha", result: "effect1_dropShadow_193_43290" }),
+                    React.createElement("feOffset", { dy: "1" }),
+                    React.createElement("feGaussianBlur", { stdDeviation: "7.5" }),
+                    React.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
+                    React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.129412 0 0 0 0 0.937255 0 0 0 0 0.639216 0 0 0 0.25 0" }),
+                    React.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_193_43290" }),
+                    React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_193_43290", result: "shape" }))))));
+};
+export default HelloWorldImage;

package/dist/src/modules/hello-world/HelloWorldView.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'react';
+import './HelloWorldView.styles.css';
+import { PanelInfo } from '@/view-models/PanelManagerViewModel';
+type State = {
+    unlistedPanels: PanelInfo[];
+};
+declare class HelloWorldView extends Component<{}, State> {
+    constructor(props: {});
+    render(): JSX.Element;
+}
+export default HelloWorldView;

package/dist/src/modules/hello-world/HelloWorldView.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import './HelloWorldView.styles.css';
+import SDK from '@/index';
+import HelloWorldImage from './HelloWorldImage';
+import Icon from '@/components/atoms/SvgIcon';
+const PANEL_TYPE_NAME_MAP = {
+    chat: 'Chat',
+    shopifyBlockPanel: 'Shopify',
+};
+class HelloWorldView extends Component {
+    constructor(props) {
+        super(props);
+        const vm = SDK.getMaestroEventViewModel().panelManagerViewModel;
+        this.state = {
+            unlistedPanels: vm.getUnlistedPanels(),
+        };
+    }
+    render() {
+        const { unlistedPanels } = this.state;
+        return (React.createElement("div", { className: "hello-world-view", "data-has-unlisted": unlistedPanels.length > 0 },
+            React.createElement(HelloWorldImage, null),
+            React.createElement("div", { className: "title" }, "HELLO, WORLD!"),
+            React.createElement("p", { className: "T20 subtitle" },
+                "Panel component has been",
+                React.createElement("br", null),
+                "installed correctly."),
+            unlistedPanels.length > 0 && (React.createElement("div", { className: "unsupported-panels" },
+                React.createElement("p", { className: "T10 unsupported-text" },
+                    "However, some panels currently active on this",
+                    React.createElement("br", null),
+                    "channel aren't supported on this device:"),
+                React.createElement("ul", { className: "unsupported-list" }, unlistedPanels
+                    .filter((p) => p.type in PANEL_TYPE_NAME_MAP)
+                    .map((panel) => (React.createElement("li", { key: panel.type, className: "T10" },
+                    React.createElement("div", { className: "panel-icon" },
+                        React.createElement(Icon, { iconName: panel.type, width: 24, height: 24 })),
+                    React.createElement("div", { className: "panel-title" }, PANEL_TYPE_NAME_MAP[panel.type])))))))));
+    }
+}
+export default HelloWorldView;

package/dist/src/modules/hello-world/index.d.ts

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

package/dist/src/modules/hello-world/index.js

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

package/dist/src/modules/key-plays/constants.d.ts

@@ -0,0 +1,3 @@
+import IMaestroKeyPlaysResponse from './interfaces/IKeyPlaysResponse';
+export declare const KEY_PLAYS_RESPONSE_MOCK_DATA: IMaestroKeyPlaysResponse;
+export declare const BASE_64_KEY_PLAY_THUMBNAIL_FALLBACK = "data:image/jpeg;base64,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";