Skip to content

Loop Icon #46

@Exlord

Description

@Exlord

Hi, Could you add Loop icon to the font?
I created a button plugin to allow disable/enable loop

repeat and repeat_on icons

/* eslint-disable */
import videojs from 'video.js';

const Button = videojs.getComponent('Button');
const Component = videojs.getComponent('Component');

export default class LoopToggle extends Button {
  constructor(player, options = {}) {
    super(player, options);
  }

  ready() {
    this.onIcon = this.$('.vjs-loop-on-icon');
    this.offIcon = this.$('.vjs-loop-off-icon');
    this.toggleIcon();
  }

  toggleIcon() {
    const isOn = this.player_.loop();
    this.onIcon.style.display = isOn ? '' : 'none';
    this.offIcon.style.display = isOn ? 'none' : '';
  }

  buildCSSClass() {
    return `vjs-loop-control ${super.buildCSSClass()}`;
  }

  handleClick(event) {
    this.player_.loop(!this.player_.loop());
    this.toggleIcon();
  }

  createEl(tag, props = {}, attributes = {}) {
    tag = 'button';

    props.innerHTML = `
    <span aria-hidden="true" class="vjs-icon-placeholder">
      <i class="material-icons-round vjs-loop-off-icon" style="display: none;">repeat</i>
      <i class="material-icons-round vjs-loop-on-icon" style="display: none;">repeat_on</i>
    </span>`;
    props.className = this.buildCSSClass();

    attributes = {
      type: 'button',
      ...attributes,
    };

    const el = Component.prototype.createEl.call(this, tag, props, attributes);

    this.createControlTextEl(el);

    return el;
  }
}

LoopToggle.prototype.controlText_ = 'Toggle Loop';
Component.registerComponent('LoopToggle', LoopToggle);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions