font icon indicating copy to clipboard operation
font copied to clipboard

Loop Icon

Open Exlord opened this issue 2 years ago • 0 comments

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);

Exlord avatar Dec 15 '21 08:12 Exlord