updateKeyPlaysData

Updates the key plays data for the current event.

Overview

Use this method to update the key plays data for the current event. This is typically used when new key plays become available or when the user explicitly requests a refresh.

Method Signature

updateKeyPlaysData(data: IMaestroKeyPlaysResponse | null): Promise<void>

Parameters

Parameter	Type	Description
data	IMaestroKeyPlaysResponse \| null	The new key plays data to display, or null to indicate a data loading failure

Return Value

A Promise that resolves when the data has been processed and the UI has been updated.

Example Usage

import SDK, {
  IMaestroKeyPlaysResponse
} from '@maestro_io/maestro-web-sdk';

// Example of updating key plays data
async function updateKeyPlays(eventId: string) {
  try {
    // Get the event view model
    const event = SDK.getMaestroEventViewModel();
    const response = await fetchKeyPlays(eventId) // your key plays fetch call  
    const data = response.data satisfies IMaestroKeyPlaysResponse;  
    
    // Update the key plays data
    await event.updateKeyPlaysData(data);
    
    console.log('Key plays data updated successfully');
  } catch (error) {
    await event.updateKeyPlaysData(null);
    console.error('Failed to update key plays data:', error);
  }
}

// Example of handling data loading failure
async function handleKeyPlaysLoadFailure() {
  try {
    // Get the event view model
    const event = SDK.getMaestroEventViewModel();
    
    // Update with null to indicate a failure
    await event.updateKeyPlaysData(null);
    
    console.log('Key plays load failure handled');
  } catch (error) {
    console.error('Failed to handle key plays load failure:', error);
  }
}

Handling Periodic Updates

import SDK, {
  IMaestroKeyPlaysResponse
} from '@maestro_io/maestro-web-sdk';

// Example of setting up periodic updates
function setupPeriodicKeyPlaysUpdates(eventID: string, interval = 60000) {
  let updateInterval: number | null = null;
  
  async function fetchAndUpdateKeyPlays() {
    try {
      // Fetch the latest data from your API
      const response = await fetch(`https://your-api.com/events/${eventID}/key-plays`);
      
      if (!response.ok) {
        throw new Error(`API error: ${response.status}`);
      }
      
      const data = await response.json();
      
      // Transform the data to match the IMaestroKeyPlaysResponse format if needed
      const formattedData = transformToMaestroFormat(data);
      
      // Update the key plays data
      const event = SDK.getMaestroEventViewModel();
      await event.updateKeyPlaysData(formattedData);
      
      console.log('Key plays data updated successfully');
    } catch (error) {
      console.error('Failed to update key plays data:', error);
    }
  }
  
  function startUpdates() {
    // Fetch immediately
    fetchAndUpdateKeyPlays();
    
    // Set up interval for future updates
    updateInterval = window.setInterval(fetchAndUpdateKeyPlays, interval);
  }
  
  function stopUpdates() {
    if (updateInterval !== null) {
      clearInterval(updateInterval);
      updateInterval = null;
    }
  }
  
  // Start updates when the function is called
  startUpdates();
  
  // Return functions to control the updates
  return {
    startUpdates,
    stopUpdates,
    forceUpdate: fetchAndUpdateKeyPlays
  };
}

IMaestroKeyPlaysResponse Interface

The data parameter should conform to the following interface:

interface IMaestroKeyPlaysResponse {
  entities: {
    team: Record<string, TeamEntity>;
    athlete: Record<string, AthleteEntity>;
  };
  sections: Section[];
}

interface TeamEntity {
  id: string;
  displayName: string;
  color: string;
  alternateColor: string;
  shortName: string;
  homeAway: string; // 'home' or 'away'
  displayOrder: string;
  logoRef: string;
  logoDarkRef: string;
}

interface AthleteEntity {
  id: string;
  shortName: string;
  headshot: string;
}

interface Section {
  title: string;
  items: KeyPlayItem[];
}

interface KeyPlayItem {
  description: string;
  team: string;
  awayScore?: string;
  homeScore?: string;
  wallClock: string;
  displayClock: string;
  shortPeriod: string;
  scoringPlay: boolean;
  athlete: string;
  thumbnail: string;
  thumbnailType: string;
  clipID: string;
}

Internal Behavior

When updateKeyPlaysData() is called, the SDK processes the data and updates the UI:

async updateKeyPlaysData(data: IMaestroKeyPlaysResponse | null): Promise<void> {
  return this.keyPlaysViewModel.setKeyPlays(data);
}

// In KeyPlaysViewModel
async setKeyPlays(items: IMaestroKeyPlaysResponse | null): Promise<void> {
  if (items === null) {
    this.errorState.value = 'tabLoadFailure';
    return;
  }

  this.items.value = this.parseNetworkResponse(items);
  this.cleanErrors();
}

If the data parameter is null, the SDK sets an error state to indicate a data loading failure. Otherwise, it parses the data and updates the UI accordingly.

Notes

• Call this method whenever you have new key plays data to display.
• Passing null indicates a data loading failure, which will show an error state in the UI.
• This method handles parsing and transforming the data into the format needed by the SDK's internal components.
• The promise returned by this method resolves when the data has been fully processed and the UI has been updated.
• This method cleans up certain error states if the data is successfully updated.
• For live events, consider setting up periodic updates to keep the key plays panel current.