Panel Integration

Overview

This section walks you through integrating panels into your Maestro tvOS SDK implementation. Panels provide interactive modules that exist outside the main video player interface.

Integration Steps

MaestroPanel is a SwiftUI component that provides a panel view for you to add to your app's view hierarchy. The panel aggregates all panel components configured on your specific maestro.io page.

1. Initialize the MaestroEventDelegate interface

Before rendering the Maestro panel, you must implement the MaestroEventDelegate protocol. This protocol defines a set of methods that your application must implement to enable seamless communication between the Maestro tvOS SDK and your application.

let eventID = "your-event-id"
let delegate = MaestroEventDelegate() // Your implementation of MaestroEventDelegate

await MaestroManager.shared.userDidStartWatchingEvent(
    eventID: eventID,
    delegate: delegate, 
    hideBetsPanel: false,
    hideBetsWagers: false,
    disableBetsOverlays: false,
    disableFantasyOverlays: false
)

2. Add MaestroPanel to your View Hierarchy

To display the Maestro panel in your tvOS application, add the MaestroPanel SwiftUI view to your view hierarchy.

import MaestroKit
import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            // Your video player view
            VideoPlayerView()

            // Add the Maestro panel
            MaestroPanel(width: 568)
        }
    }
}

MaestroPanel Component

MaestroPanel is a struct that provides a panel view for you to add to your app's view hierarchy.

struct MaestroPanel: View

Parameters

Parameter	Type	Description
width	CGFloat?	An optional CGFloat defining the width of the panel.

Sample Usage

struct ContentView: View {
    var body: some View {
        MaestroPanel(
            width: 568
        )
    }
}

Best Practices

• Clean Up Your Events: When the user stops watching an event, make sure to clean up any resources using userDidStopWatchingEvent().
• Configure Panels: Be sure to configure your panels on maestro.io before integrating them into your app.
• Responsive Layout: Consider different screen sizes and adjust panel width accordingly for optimal viewing experience.