Skip to main content
Version: 1.x

Controls

ID: vControls | ROLE: CONTROLS | Type: Plugin

This plugin renders and manages control groups.

info

This plugin has a Registry containing all registered control groups.

const unsubscribe = player.getRegistry().subscribe(records => {
const groups = records.vControls;
});
// ...
unsubscribe();

Defaults#

By default there are no groups/controls, but you can install an additional DefaultControls plugin to get started with the Vime defaults.

The default controls depend on:

  • Whether the player is playing an audio track or video.
  • Whether it is a mobile device or not.
  • Whether it is a live stream or not.

Setup#

import { Player, Controls, DefaultControls } from '@vime-js/complete';
// ...
const player = new Player({
target,
props: {
plugins: [Controls, DefaultControls],
},
});

Usage#

Create Group#

import {
PlaybackControl,
VolumeControl,
ScrubberControl,
} from '@vime-js/complete';
player.vControls.createGroup('lowerGroup').then(controlGroup => {
/**
* $set is part of the Svelte component API, you
* can individually set these props as well.
**/
controlGroup.$set({
controls: [PlaybackControl, VolumeControl, ScrubberControl],
shouldFill: true,
position: 'flex-end:flex-start',
});
});
info

See ControlGroup for the full API.

Update Group#

const controlGroup = player.vControls.getGroup('lowerGroup');
controlGroup.isActive = true;

Delete Group#

player.vControls.removeGroup('lowerGroup').then(() => {
// ...
});

Access Group via Event#

player.vControls.$on('register', registration => {
const { id, value: controlGroup } = registration;
if (id === 'lowerGroup') {
// ...
}
});

Access Group via Registry#

player.vControls.getRegistry().subscribe(groups => {
const controlGroup = groups.lowerGroup;
if (controlGroup) {
// ...
}
});

Methods#

getEl#

Return Type: HTMLElement

The root HTML element of this plugin.

getRegistry#

Return Type: Registry

The plugin registry where ControlGroup instances are registered.

getGroups#

Return Type: { [id]: ControlGroup }

The rendered ControlGroup instances.

getGroup#

Parameters: (id: string) | Return Type: ControlGroup|undefined

The rendered ControlGroup instance for the given id.

createGroup#

Parameters: (id: string) | Return Type: Promise<ControlGroup>

Creates and renders a ControlGroup component and returns a Promise that will resolve with the rendered instance.

createGroups#

Parameters: (ids: string[]) | Return Type: Promise<ControlGroup[]>

Creates and renders a list of ControlGroup components and returns all their instances via a Promise.

removeGroup#

Parameters: (id: string) | Return Type: Promise<undefined>

Destroys a ControlGroup instance matching the given id and returns a Promise that will resolve once it has completed.

removeGroups#

Parameters: (ids: string[]) | Return Type: Promise<undefined>

Destroys multiple ControlGroup instances matching the given ids and returns a Promise that will resolve once it has completed.

Events#

Registry#

Emits Registry events.

Edit this page