feat: added loop button to video.js player

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

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