Widget plugin

A widget plugin can be used to embed native UI inside the overlay.

An embed layer is created in the Studio project, configured with the name of the widget to use. The widget plugin registers itself as the renderer of that layer by specifying the same name in its componentName property. When the overlay creates the layer the plugin's install function is called, where it can add its own subviews.

Implementation

Create a class implementing WidgetPlugin protocol.

let componentName: String

Set to same name that was configured on the embed layer in the Studio project, in which the widget will show.

func install(container: UIView, data: WidgetData)

Called when an embed layer will be created in the overlay. Here you can add your views to the contaiener.

Attribute	Description	Type
container	Embed layer's view in which to add your views	UIView
data	Information about the current overlay	WidgetData
data.accountId	Account ID of the overlay	String
data.projectId	Project ID of the overlay	String
data.programId	Program ID of the overlay	String
data.env	Environment of the overlay ("prod","staging","dev")	String
data.params	Other parameters passed to the current loaded overlay	[String:String]
data.embedData	Data configured on the embed layer in the Studio project	[String:String]
data.layerInstanceId	Instance ID of the embed layer	String

func show(container: UIView, data: WidgetData)

Called when an embed layer will be shown in the overlay

func hide(container: UIView, data: WidgetData)

Called when an embed layer will be hidden in the overlay

func destroy()

Called when the widget will be removed, ie the EaseLive instance is being destroyed.

func onPlayerTime(_ time: Int64)

Called when time changes in the player. The value is UTC time in milliseconds since 1970-01-01. Can be used to sync timed data shown in the widget.

func onPlayerState(_ state: PlayerState)

Called when player state changes.

Usage

Register widget plug-in after instantiating EaseLive, but before create is called

easeLive = EaseLive(...)
// register before create easeLive.create
easeLive.use(widget: MyCustomWidget())
easeLive.create()

Example

class MyCustomWidget: WidgetPlugin {
    // same name as configured on the layer in Studio project
    let componentName = "myCustomWidget"
    
    func install(container: UIView, data: WidgetData) {
        let customView = UIButton(type: .roundedRect)
        customView.translatesAutoresizingMaskIntoConstraints = false
        customView.setTitle("my button", for: .normal)
        container.addSubview(customView)

        NSLayoutConstraint.activate([
            customView.leftAnchor.constraint(equalTo: container.leftAnchor),
            customView.topAnchor.constraint(equalTo: container.topAnchor),
            customView.rightAnchor.constraint(equalTo: container.rightAnchor),
            customView.bottomAnchor.constraint(equalTo: container.bottomAnchor)
        ])
    }
    
    func show(container: UIView, data: WidgetData) {
        // called when the layer will be shown in the overlay
        // start data updating, animations, etc
    }
    
    func hide(container: UIView, data: WidgetData) {
        // called when the layer will be hidden in the overlay
        // stop data updating, animations, etc
    }
    
    func destroy() {
        // called when the widget will be removed
    }
    
    func onPlayerTime(_ time: Int64) {
        // player's absolute time in milliseconds since 1970-01-01T00:00:00Z.
        // can be used to sync timed data shown in the widget
    }
    
    func onPlayerState(_ state: PlayerState) {
        if state == .playing {
            // video is playing
        }
    }
}

easeLive = EaseLive(parentView: easeLiveView,
                    accountId: accountId
                    projectId: projectId
                    programId: programId)

// register widget plug-in before create
easeLive.use(widget: MyCustomWidget())

easeLive.create()