Version: 1.x

Getting Started

Plugins are at the heart of Vime because everything outside of the core is built as one. Basically plugins are Svelte components that implement the plugin interface and add some functionality/feature to the player. Plugins can be interacted with through the props, methods and events they expose.

Installing Plugins#

Quick#

You can get started quickly by simply using the Boot plugin which will install all Vime plugins. It also provides the option of turning off plugins you don't need, see the Boot plugin page for more information.

Modular#

If you want more control then you can pick and use only what you need.

JavaScript
Svelte

import { Player, ActionDisplay, Keyboard, Tooltips } from '@vime-js/complete';

const target = document.getElementById('player-target');

const player = new Player({
  target,
  props: {
    plugins: [ActionDisplay, Keyboard, Tooltips],
  },
});

Dynamic#

If you want to dynamically add/remove plugins you can use the PluginsManager.

JavaScript
Svelte

import { ActionDisplay, Keyboard, Tooltips } from '@vime-js/complete';

// ...

const pluginsManager = player.getPluginsManager();

pluginsManager
  .addPlugins([ActionDisplay, Keyboard, Tooltips])
  .then([actionDisplay, keyboard, tooltips] => {
    // ...
  });

// ...

pluginsManager
  .removePlugin(Keyboard)
  .then(() => {
    // ...
  });

info

You can still do this with the plugins prop, but the manager has a much better interface for this.

Interacting with Plugins#

All Vime plugins are attached to the player and can be accessed via their plugin ID. All Vime plugins follow the naming convention of v{PluginName}.

Keyboard = vKeyboard
ActionDisplay = vActionDisplay
Controls = vControls

Simple Example#

JavaScript
Svelte

// ...

player.$on('mount', () => {
  player.vKeyboard.doSomething();
});

Advanced Example#

JavaScript
Svelte

import { PlayerEvent, Keyboard } from '@vime-js/complete';

// ...

player.$on(PlayerEvent.PLUGIN_MOUNT, e => {
  const { id, plugin } = e.detail;

  if (id === Keyboard.ID) {
    // Keyboard plugin mounted.
  }
});

player.$on(PlayerEvent.PLUGIN_DESTROY, e => {
  const id = e.detail;

  if (id === Keyboard.ID) {
    // Keyboard plugin destroyed.
  }
});