PlayControlsMixin

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.

events ➞ methods → setState → render DOM → post-render

Expects the component to provide:

• playing property and play and pause methods, typically via TimerCursorMixin.

Provides the component with:

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

Usage

import { PlayControlsMixin, internal, template } from "elix";

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

Example

SlideshowWithPlayControls uses this mixin for its play controls:

Demo: Play controls let the user go back, pause/resume, or forward ⇲