font
font copied to clipboard
Loop Icon
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);