Add playback speed option

public/app/index.pug

@@ -128,6 +128,8 @@ html
             span.player_time.player_time--now --:--
             input.player_slider(type="range", min="0", max="1000", value="0")
             span.player_time.player_time--total --:--
+          .player_right-buttons
+            button.button.player_button.player_button--toggles.material-icons.md-36 tune
         .player_bottom
           .black-bg
           canvas.player_video-canvas
@@ -160,6 +162,11 @@ html
         p Listen to the newest episodes in #[span.material-icons.md24 home] #[strong Home].
         p Enjoy episodes back-to-back using the #[span.material-icons.md24 queue_music] #[strong Queue].
         p Manage subscribed podcasts in #[span.material-icons.md24 video_library] #[strong Subscriptions].
+
+    .player-toggles
+      label
+        span Playback speed
+        input.player-toggles_speed(type="number", min="0.5", max="4", step="0.1", value="1")
 
     .audios
 

public/app/js/cbus-ui.js

@@ -49,7 +49,7 @@ cbus.ui.display = function(thing, data) {
     document.getElementsByClassName("player_detail_title")[0].textContent = data.title;
     document.getElementsByClassName("player_detail_feed-title")[0].textContent = feed.title;
     document.getElementsByClassName("player_detail_date")[0].textContent = moment(data.date).calendar();
-    
+
     var descriptionFormatted = data.description.trim();
     if (
       descriptionFormatted.toLowerCase().indexOf("<br>") === -1 &&
@@ -917,3 +917,35 @@ tippy(".header_nav a", {
   arrow: true,
   delay: [500, 0]
 });
+
+(function() {
+  let playerTogglesElem = document.getElementsByClassName("player-toggles")[0];
+
+  playerTogglesElem.addEventListener("input", (e) => {
+    if (e.target.classList.contains("player-toggles_speed")) {
+      cbus.audio.element.playbackRate = Number(e.target.value);
+    }
+  });
+
+  playerTogglesElem.addEventListener("change", (e) => {
+    if (e.target.classList.contains("player-toggles_speed")) {
+      localforage.setItem("cbus_playback_speed", Number(e.target.value));
+    }
+  });
+
+  tippy(document.getElementsByClassName("player_button--toggles")[0], {
+    html: playerTogglesElem,
+    trigger: "click",
+    interactive: true,
+    placement: "bottom",
+    animation: "shift-away",
+    arrow: true
+  });
+
+  localforage.getItem("cbus_playback_speed").then((r) => {
+    if (r) {
+      playerTogglesElem.getElementsByClassName("player-toggles_speed")[0].value = r;
+      cbus.audio.element.playbackRate = r;
+    }
+  });
+}());

public/app/style.scss

@@ -598,7 +598,7 @@ cbus-episode {
 
       border-bottom: solid 1px rgba($white, $player-separator-opacity);
 
-      .player_buttons {
+      .player_buttons, .player_right-buttons {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -609,10 +609,6 @@ cbus-episode {
         }
       }
 
-      .player_right-buttons {
-        border-left: solid 1px rgba($white, $player-separator-opacity);
-      }
-
       .player_current {
         display: flex;
         justify-content: space-around;
@@ -890,6 +886,17 @@ cbus-episode {
   }
 }
 
+.player-toggles {
+  input {
+    margin-left: 0.5em;
+    background-color: rgba(127, 127, 127, 0.5);
+    border: none;
+    color: white;
+    padding: 0 0.3em;
+    width: 3.5em;
+  }
+}
+
 .black-bg {
   display: none;
   position: fixed;