Skip to main content

Widgets

A widget can move, resize, show and hide itself, and other widgets in the same overlay.

widget​

breezy.widget: WidgetController

The controller for the current widget.

await breezy.widget.hide({ duration: 300, easing: 'ease-out' })

getWidget​

breezy.getWidget(id?: ID): WidgetController

Returns a controller for another widget in the overlay. Without an ID, returns the current widget's controller. To let the streamer choose which widgets to control, use a widget selector field.

showAllWidgets​

breezy.showAllWidgets(options?: WidgetAnimationOptions): Promise<boolean>

hideAllWidgets​

breezy.hideAllWidgets(options?: WidgetAnimationOptions): Promise<boolean>

WidgetController​

type WidgetController = {
	readonly id: ID
	move(x: number, y: number, options?: WidgetAnimationOptions): Promise<boolean>
	resize(w: number, h: number, options?: WidgetAnimationOptions): Promise<boolean>
	show(options?: WidgetAnimationOptions): Promise<boolean>
	hide(options?: WidgetAnimationOptions): Promise<boolean>
	reset(options?: WidgetAnimationOptions): Promise<boolean>
}
MethodDescription
move(x, y)Moves the widget to a position in the overlay.
resize(w, h)Resizes the widget.
show()Shows the widget.
hide()Hides the widget.
reset()Returns the widget to the position, size and visibility set in the editor.

Each method resolves to true once the widget was found and updated, and false otherwise.

Animation options​

interface WidgetAnimationOptions {
	easing?: WidgetEasing
	duration?: number
}

type WidgetEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | string

duration is in milliseconds. easing also accepts any CSS easing function, such as cubic-bezier(...).