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

type UnmountFn = () => void;
renderPanel(id: string): Promise<UnmountFn>

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 React, { useEffect } from "react";
import SDK from "@maestro_io/maestro-web-sdk";

const Panel = () => {
  useEffect(() => {
    let cleanupFn: (() => void) | null = null;
    SDK.renderPanel("panel-container").then(async (unmountFn) => {
      cleanupFn = unmountFn;
      // Notify the SDK that the panel is now visible
      const event = SDK.getMaestroEventViewModel();
      await event.didShowPanel();
    });

    return () => {
      if (cleanupFn) {
        cleanupFn();
      }
    };
  }, []);

  return <div id="panel-container" class="panel-container"></div>;
};

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.