playkit-js-ui-managers

usage guide

Getting started

First step: setup

First include playkit-ui-managers.js after kaltura-player script in your web page.

  <script src="https://raw.githack.com/kaltura/kaltura-player-js/master/dist/kaltura-ovp-player.js"></script>
  <script src="./playkit-ui-managers.js"></script>

Add the ui-managers to the player config under the plugins section along with the rest of plugins.

    const config = {
      targetId: 'player-placeholder',
      provider: {
        partnerId: 1234567,
      },
      plugins: {
        somePlugin: {},
        uiManagers: {}
      }
    };

const player = KalturaPlayer.setup(config);

Second step: access and use the desired service inside the plugin

Now You can access the desired service by using the player’s getService API once the player.ready() promise resolved

export const pluginName = 'somePlugin';

export class somePlugin extends BasePlugin {
  static defaultConfig = {};

  constructor(name, player) {
    super(name, player);
    this.addPanel();
  }

  addPanel() {
    this.ready.then(() => {
      const panelItemId = this.player.getService('sidePanelsManager').add({
        label: 'A',
        panelComponent: PanelItemComponent,
        iconComponent: IconComponent,
        presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
        position: SidePanelPositions.LEFT,
        expandMode: SidePanelModes.ALONGSIDE,
      });
      
      this.player.getService('sidePanelsManager').activateItem(panelItemId);
      console.log(this.player.getService('sidePanelsManager').isItemActive(panelItemAId));
      // true
    });
  }
}

Detach panel

Panel content can be rendered in new browser window, attach placeholder renders instead of original content inside panel when the new window opened. Once new window closed original content moves back to panel.

Detach

Detach panel by id with options

this.player.getService('sidePanelsManager').detachItem(panelItemId, options);

You can see detach options here

Attach

Attach panel by id

this.player.getService('sidePanelsManager').attachItem(panelItemId);

isItemDetached

Check if panel currently detached

this.player.getService('sidePanelsManager').isItemDetached(panelItemId);

getDetachedRef

Returns detached dom element if panel detached

this.player.getService('sidePanelsManager').getDetachedRef(panelItemId);

Configuration

You can see the Ui managers plugin full configuration options here

You can find configuration example here

Full working example

Uppar Bar Manager

Side Panels Manager

API docs

API docs

Demo

demo