renderPanel

Renders the Maestro panel UI into a specified DOM element.

Overview

The renderPanel method renders the interactive panel into a specified DOM element, allowing users to interact with key plays, stats, and other features. This method should be called after successfully initializing an event with userDidStartWatchingEvent.

Method Signature

renderPanel(id: string): Promise<void>

Parameters

Parameter	Type	Description
id	string	The ID of the DOM element where the panel should be rendered

Return Value

A Promise that resolves to an unmount function. When called, this function will remove the panel from the DOM and clean up any associated resources.

Example

import SDK from '@maestro_io/maestro-web-sdk';

let unmountFunction: (() => void) | null = null;

// Function to show the panel
async function showPanel() {
  await SDK.renderPanel('panel-container');
  // Notify the SDK that the panel is now visible
  const event = SDK.getMaestroEventViewModel();
  await event.didShowPanel();
}

DOM Element Structure

The DOM element with the specified ID should be prepared before calling this method:

<div id="panel-container" class="panel-container"></div>

Notes

• This method requires that an event has been initialized with userDidStartWatchingEvent.
• The specified DOM element must exist in the document.
• After rendering the panel, you should call didShowPanel() on the event view model to notify the SDK.
• Similarly, after unmounting the panel, you should call didHidePanel() on the event view model.