From 7d2e2d97e000873089694f4fa48109050d9cf61a Mon Sep 17 00:00:00 2001
From: Bobby <bobby@fiery.me>
Date: Fri, 27 May 2022 13:44:22 +0700
Subject: [PATCH] feat: use fontello for video.js seek buttons

---
 .../videojs-seek-buttons.min.css              |  2 --
 src/css/player.scss                           | 27 +++++++++++++++++++
 src/js/player.js                              |  9 +++----
 views/player.njk                              |  1 -
 4 files changed, 31 insertions(+), 8 deletions(-)
 delete mode 100644 public/libs/videojs-seek-buttons/videojs-seek-buttons.min.css

diff --git a/public/libs/videojs-seek-buttons/videojs-seek-buttons.min.css b/public/libs/videojs-seek-buttons/videojs-seek-buttons.min.css
deleted file mode 100644
index c93b3ca..0000000
--- a/public/libs/videojs-seek-buttons/videojs-seek-buttons.min.css
+++ /dev/null
@@ -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'}
\ No newline at end of file
diff --git a/src/css/player.scss b/src/css/player.scss
index 4582f50..90ca73d 100644
--- a/src/css/player.scss
+++ b/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
+    }
+  }
 }
diff --git a/src/js/player.js b/src/js/player.js
index 908d96d..e21a093 100644
--- a/src/js/player.js
+++ b/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 = {
-        wavesurfer: {
-          responsive: true
-        }
+      options.plugins.wavesurfer = {
+        responsive: true
       }
     }
 
diff --git a/views/player.njk b/views/player.njk
index 93ff3d3..c3fc93c 100644
--- a/views/player.njk
+++ b/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] }}">