diff --git a/src/css/player.scss b/src/css/player.scss index 90ca73d..7de9875 100644 --- a/src/css/player.scss +++ b/src/css/player.scss @@ -18,6 +18,7 @@ } } + .vjs-loop-button, .vjs-seek-button { .vjs-icon-placeholder { /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ @@ -33,6 +34,16 @@ } } + .vjs-loop-button { + &:not(.vjs-loop-enabled) { + color: $grey + } + + .vjs-icon-placeholder::before { + content: "\e81f" + } + } + .vjs-seek-button { &.skip-back .vjs-icon-placeholder::before { content: "\e81e"; diff --git a/src/js/player.js b/src/js/player.js index e21a093..c852685 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -128,6 +128,25 @@ page.reloadVideo = () => { }) page.player.seekButtons({ forward: 10, back: 10 }) + const videoJSButton = videojs.getComponent('Button') + const loopButtonText = () => page.player.loop() + ? 'Disable loop' + : 'Enable loop' + const loopButton = videojs.extend(videoJSButton, { + constructor () { + videoJSButton.apply(this, arguments) + this.addClass('vjs-loop-button') + this.controlText(loopButtonText()) + }, + handleClick () { + page.player.loop(!page.player.loop()) + this.toggleClass('vjs-loop-enabled', page.player.loop()) + this.controlText(loopButtonText()) + } + }) + videojs.registerComponent('loopButton', loopButton) + page.player.getChild('controlBar').addChild('loopButton') + if (page.titleFormat) { document.title = page.titleFormat.replace(/%identifier%/g, page.urlIdentifier) }