feat: use fontello for video.js seek buttons

public/libs/videojs-seek-buttons/videojs-seek-buttons.min.css

@@ -1,2 +0,0 @@
-/*! @name videojs-seek-buttons @version 2.2.0 @license Apache-2.0 */
-.video-js .vjs-seek-button{font-family:'VideoJS';cursor:pointer;font-weight:400;font-style:normal}.video-js .vjs-seek-button.skip-back::before,.video-js.vjs-v6 .vjs-seek-button.skip-back .vjs-icon-placeholder::before,.video-js.vjs-v7 .vjs-seek-button.skip-back .vjs-icon-placeholder::before{transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);content:'\f116'}.video-js .vjs-seek-button.skip-forward::before{transform:rotateY(180deg) rotate(-45deg);-ms-transform:rotateY(180deg) rotate(-45deg);-webkit-transform:rotateY(180deg) rotate(-45deg);content:'\f116'}.video-js.vjs-v6 .vjs-seek-button.skip-back::before,.video-js.vjs-v6 .vjs-seek-button.skip-forward::before,.video-js.vjs-v7 .vjs-seek-button.skip-back::before,.video-js.vjs-v7 .vjs-seek-button.skip-forward::before{content:none}.video-js.vjs-v6 .vjs-seek-button.skip-forward .vjs-icon-placeholder::before,.video-js.vjs-v7 .vjs-seek-button.skip-forward .vjs-icon-placeholder::before{transform:scale(-1,1) rotate(-45deg);-ms-transform:scale(-1,1) rotate(-45deg);-webkit-transform:scale(-1,1) rotate(-45deg);content:'\f116'}

src/css/player.scss

@@ -17,4 +17,31 @@
       height: calc(100% - 30px) !important
     }
   }
+
+  .vjs-seek-button {
+    .vjs-icon-placeholder {
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: fontello;
+      font-weight: normal;
+      font-style: normal;
+      cursor: pointer;
+
+      &::before {
+        font-size: 1.5em;
+        line-height: 1.97
+      }
+    }
+  }
+
+  .vjs-seek-button {
+    &.skip-back .vjs-icon-placeholder::before {
+      content: "\e81e";
+      transform: none
+    }
+
+    &.skip-forward .vjs-icon-placeholder::before {
+      content: "\e818";
+      transform: none
+    }
+  }
 }

src/js/player.js

@@ -108,14 +108,13 @@ page.reloadVideo = () => {
     const options = {
       language: 'en',
       playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
-      responsive: true
+      responsive: true,
+      plugins: {}
     }
 
     if (isaudio) {
-      options.plugins = {
+      options.plugins.wavesurfer = {
-        wavesurfer: {
+        responsive: true
-          responsive: true
-        }
       }
     }
 

views/player.njk

@@ -11,7 +11,6 @@
 <!-- Libs stylesheets -->
 <link rel="stylesheet" href="../libs/fontello/fontello.css{{ versions[1] }}">
 <link rel="stylesheet" href="../libs/video-js/video-js.min.css{{ versions[3] }}">
-<link rel="stylesheet" href="../libs/videojs-seek-buttons/videojs-seek-buttons.min.css{{ versions[3] }}">
 <link rel="stylesheet" href="../libs/videojs-wavesurfer/videojs.wavesurfer.min.css{{ versions[3] }}">
 <!-- Stylesheets -->
 <link rel="stylesheet" href="../css/style.css{{ versions[1] }}">