PlayControlsMixin

Adds buttons for managing playback of a slideshow, audio, etc.

Overview

Purpose: adds buttons for managing playback of a slideshow, audio playlist, etc.

This mixin does most of its work at the beginning of the Elix render pipeline, although it also participates indirectly in rendering by adding elements to a component's template.

eventsmethods → setState → updates → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • inject method that wraps a string template with the elements for the play controls.

Usage

import { PlayControlsMixin, symbols, template } from 'elix';

class MyElement extends PlayControlsMixin(HTMLElement) {
  get [symbols.template]() {
    const t = template.html`
      <div id="container">
        <slot></slot>
      </div>
    `;
    // Wrap the indicated container with play controls.
    const container = t.content.querySelector('#container');
    this[PlayControlsMixin.wrap](container);
    return t;
  }
}

Example

SlideshowWithPlayControls uses this mixin for its play controls:

Mountain lake Terraced farm Winter trees Forest river Red panda
Demo: Play controls let the user go back, pause/resume, or forward

API

By default, this uses these elements in the following roles:

Used by class SlideshowWithPlayControls.

controlButtonRole property

The class, tag, or template used for the play control buttons.

Type: function|string|HTMLTemplateElement

Default: SeamlessButton

wrap(original) method

Destructively wrap a node with elements for play controls.

Parameters:

  • original: Nodethe element that should be wrapped by play controls