Module LensStudio:MultimediaWidgets

Example

    // MultimediaWidgets pairs a MediaPlayer (state machine, transport, position)
    // with a VideoWidget (the surface it draws to). Drop the VideoWidget into
    // your panel layout, point the player at a file via setMedia(), then
    // play/pause/stop. Watch onStateChanged to drive transport-control UI.
    import { PanelPlugin, Descriptor } from 'LensStudio:PanelPlugin';
    import { Widget, BoxLayout, Direction, PushButton, DockState, Size } from 'LensStudio:Ui';
    import { MediaPlayer, MediaState, VideoWidget } from 'LensStudio:MultimediaWidgets';

    export class VideoPanel extends PanelPlugin {
      connections: any[] = [];
      player: MediaPlayer | null = null;

      static descriptor(): Descriptor {
        const d = new Descriptor();
        d.id = 'com.example.videoPanel';
        d.name = 'Video Panel';
        d.defaultDockState = DockState.Detached;
        d.defaultSize = new Size(480, 320);
        return d;
      }

      createWidget(parent: Widget): Widget {
        const root = new Widget(parent);
        const layout = new BoxLayout();
        layout.setDirection(Direction.TopToBottom);
        root.layout = layout;

        const video = new VideoWidget(root);
        layout.addWidget(video);

        const playBtn = new PushButton(root);
        playBtn.text = 'Play / Pause';
        layout.addWidget(playBtn);

        this.player = new MediaPlayer();
        this.player.setVideoOutput(video);
        this.player.setMedia(new Editor.Path('Resources/clip.mp4'));

        this.connections.push(
          playBtn.onClick.connect(() => {
            if (this.player!.state === MediaState.PlayingState) this.player!.pause();
            else this.player!.play();
          }),
          this.player.onStateChanged.connect((s: MediaState) => {
            console.log('Player state →', MediaState[s]);
          }),
        );
        return root;
      }

      deinit(): void {
        this.connections.forEach(c => c?.disconnect());
        this.connections = [];
        if (this.player) { this.player.stop(); this.player = null; }
      }
    }
Copy