why-cant-we-deploy-today/js/components/playback.js

/**
 * UI component that lets the use control auto-slide
 * playback via play/pause.
 */
export default class Playback {
  /**
   * @param {HTMLElement} container The component will append
   * itself to this
   * @param {function} progressCheck A method which will be
   * called frequently to get the current playback progress on
   * a range of 0-1
   */
  constructor(container, progressCheck) {
    // Cosmetics
    this.diameter = 100;
    this.diameter2 = this.diameter / 2;
    this.thickness = 6;

    // Flags if we are currently playing
    this.playing = false;

    // Current progress on a 0-1 range
    this.progress = 0;

    // Used to loop the animation smoothly
    this.progressOffset = 1;

    this.container = container;
    this.progressCheck = progressCheck;

    this.canvas = document.createElement("canvas");
    this.canvas.className = "playback";
    this.canvas.width = this.diameter;
    this.canvas.height = this.diameter;
    this.canvas.style.width = this.diameter2 + "px";
    this.canvas.style.height = this.diameter2 + "px";
    this.context = this.canvas.getContext("2d");

    this.container.appendChild(this.canvas);

    this.render();
  }

  setPlaying(value) {
    const wasPlaying = this.playing;

    this.playing = value;

    // Start repainting if we weren't already
    if (!wasPlaying && this.playing) {
      this.animate();
    } else {
      this.render();
    }
  }

  animate() {
    const progressBefore = this.progress;

    this.progress = this.progressCheck();

    // When we loop, offset the progress so that it eases
    // smoothly rather than immediately resetting
    if (progressBefore > 0.8 && this.progress < 0.2) {
      this.progressOffset = this.progress;
    }

    this.render();

    if (this.playing) {
      requestAnimationFrame(this.animate.bind(this));
    }
  }

  /**
   * Renders the current progress and playback state.
   */
  render() {
    let progress = this.playing ? this.progress : 0,
      radius = this.diameter2 - this.thickness,
      x = this.diameter2,
      y = this.diameter2,
      iconSize = 28;

    // Ease towards 1
    this.progressOffset += (1 - this.progressOffset) * 0.1;

    const endAngle = -Math.PI / 2 + progress * (Math.PI * 2);
    const startAngle = -Math.PI / 2 + this.progressOffset * (Math.PI * 2);

    this.context.save();
    this.context.clearRect(0, 0, this.diameter, this.diameter);

    // Solid background color
    this.context.beginPath();
    this.context.arc(x, y, radius + 4, 0, Math.PI * 2, false);
    this.context.fillStyle = "rgba( 0, 0, 0, 0.4 )";
    this.context.fill();

    // Draw progress track
    this.context.beginPath();
    this.context.arc(x, y, radius, 0, Math.PI * 2, false);
    this.context.lineWidth = this.thickness;
    this.context.strokeStyle = "rgba( 255, 255, 255, 0.2 )";
    this.context.stroke();

    if (this.playing) {
      // Draw progress on top of track
      this.context.beginPath();
      this.context.arc(x, y, radius, startAngle, endAngle, false);
      this.context.lineWidth = this.thickness;
      this.context.strokeStyle = "#fff";
      this.context.stroke();
    }

    this.context.translate(x - iconSize / 2, y - iconSize / 2);

    // Draw play/pause icons
    if (this.playing) {
      this.context.fillStyle = "#fff";
      this.context.fillRect(0, 0, iconSize / 2 - 4, iconSize);
      this.context.fillRect(iconSize / 2 + 4, 0, iconSize / 2 - 4, iconSize);
    } else {
      this.context.beginPath();
      this.context.translate(4, 0);
      this.context.moveTo(0, 0);
      this.context.lineTo(iconSize - 4, iconSize / 2);
      this.context.lineTo(0, iconSize);
      this.context.fillStyle = "#fff";
      this.context.fill();
    }

    this.context.restore();
  }

  on(type, listener) {
    this.canvas.addEventListener(type, listener, false);
  }

  off(type, listener) {
    this.canvas.removeEventListener(type, listener, false);
  }

  destroy() {
    this.playing = false;

    if (this.canvas.parentNode) {
      this.container.removeChild(this.canvas);
    }
  }
}