Existing Components

Components are any elements that exist on the Player UI, such as buttons or the seekbar.

Fullscreen Component

Toggles the full screen state

Example

//@flow
import { h, FullscreenControl } from 'playkit-js-ui';

export default function customUIPreset(props: any) {
  return (
    <FullscreenControl player={props.player} />
  )
}

Loading Component

Shows black overlay with loading spinner when player is not in idle, loading or paused state.

Example

//@flow
import { h, Loading } from 'playkit-js-ui';

export default function customUIPreset(props: any) {
  return (
    <Loading player={props.player} />
  )
}

Seekbar Component

Changes the seekbar state.

Example

//@flow
import { h, SeekBarControl } from 'playkit-js-ui';

export default function customUIPreset(props: any) {
  return (
    // show both frame preview and time bubble
    <SeekBarControl showFramePreview showTimeBubble player={props.player} />

    // show only time bubble
    <SeekBarControl showTimeBubble player={props.player} />
  )
}

Time Display Component

Displays the current time, duration and remaining time, based on format

Example

//@flow
import { h, TimeDisplay } from 'playkit-js-ui';

export default function customUIPreset(props: any) {
  return (
    <TimeDisplay format='current / total' player={props.player} />
  )
}

Creating a New Component

Dumb component

This component will just be a div wrapper with a className

const h = KalturaPlayer.ui.h;
const BaseComponent = KalturaPlayer.ui.Components.BaseComponent;

class DumbComponent extends Component {
  render(props) {
    return h('div', {className: 'dumb-component'}, props.children);
  }
}

export default DumbComponent;

If you want to use JSX follow this guide, and use the following JSX syntax:

const h = KalturaPlayer.ui.h;
const BaseComponent = KalturaPlayer.ui.Components.BaseComponent;

class DumbComponent extends Component {
  render(props) {
    return <div className="dumb-component">{props.children}</div>;
  }
}

export default DumbComponent;

The usage of this component will be:

const h = KalturaPlayer.ui.h;
h(DumbComponent, null, h('p', null, 'You can add here any components and html you want and it will be appended to the DumbComponent'));

Or, if using JSX:

<DumbComponent>
  <p>You can add here any components and html you want and it will be appended to the DumbComponent</p>
</DumbComponent>

Redux-Store Connected Component

This component will log all player state changes (based on the redux store) and print them as a log.
The componentDidUpdate lifecycle function is used.
See all lifecycle functions for components here.

The component in this example will also get a prop of additional className:

//@flow
const h = KalturaPlayer.ui.h;
const BaseComponent = KalturaPlayer.ui.Components.BaseComponent;
const connect = playkit.ui.redux.connect;

const mapStateToProps = state => ({playerState: state.engine.playerState});

class PlayerStateLog extends BaseComponent {
  log = new Array();

  constructor() {
    super({name: 'PlayerStateLog'});
  }

  componentDidUpdate() {
    this.log.push(this.props.playerState.currentState);
  }

  render(props) {
    var className = 'log';
    className += ` ${props.additionalClass}`;

    return h(
      'ul',
      {className: className},
      this.log.map(function(playerState) {
        return h('li', null, playerState);
      })
    );
  }
}

export default connect(mapStateToProps)(PlayerStateLog);

The usage of this component will be:

const h = KalturaPlayer.ui.h;
h(PlayerStateLog, {additionalClass: 'red-list'});

Or, if using JSX, change the render method above to:

return <ul className={className}>{this.log.map(playerState => <li>{playerState}</li>)}</ul>;

And the usage of this component will be:

<PlayerStateLog additionalClass='red-list' />

Creating a component to be included in the core library

If a component is to be made in order to be included in the core library, the same guidelines as above must be applied.

The main difference is that the dependencies are managed by importing core libraries. Meaning, instead of referring to the components via the KalturaPlayer.ui.* path, they can be included like this:

import {h, Component} from 'preact';
import {bindActions} from '../../utils/bind-actions';
import BaseComponent from '../base';