From 9cbaab119b0c0abf732a19d317e6f9b21dba61c7 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Wed, 8 Dec 2021 16:36:10 +0530
Subject: [PATCH] Refined audio card player with multiple playback rate options

refs https://github.com/TryGhost/Team/issues/1230

- adds multiple playback rate option to audio card player on click
---
 core/frontend/src/cards/css/audio.css |  2 +-
 core/frontend/src/cards/js/audio.js   | 35 +++++++++++++++++----------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/core/frontend/src/cards/css/audio.css b/core/frontend/src/cards/css/audio.css
index 8208fd0464..68891f6833 100644
--- a/core/frontend/src/cards/css/audio.css
+++ b/core/frontend/src/cards/css/audio.css
@@ -88,7 +88,7 @@
 }
 
 .kg-audio-playback-rate {
-    width: 36px;
+    width: 37px;
     padding: 0 4px;
     font-family: inherit;
     font-size: .85em;
diff --git a/core/frontend/src/cards/js/audio.js b/core/frontend/src/cards/js/audio.js
index 410e6bc04c..3531000146 100644
--- a/core/frontend/src/cards/js/audio.js
+++ b/core/frontend/src/cards/js/audio.js
@@ -10,11 +10,25 @@ const handleAudioPlayer = function (audioElementContainer) {
     const audio = audioElementContainer.querySelector('audio');
     const durationContainer = audioElementContainer.querySelector('.kg-audio-duration');
     const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time');
-    const outputContainer = audioElementContainer.querySelector('.kg-audio-volume-output');
-    // let playState = 'play';
-    // let muteState = 'unmute';
-    let playbackRate = 1.0;
+    let playbackRates = [{
+        rate: 0.75,
+        label: '0.7×'
+    }, {
+        rate: 1.0,
+        label: '1×'
+    }, {
+        rate: 1.25,
+        label: '1.2×'
+    }, {
+        rate: 1.75,
+        label: '1.7×'
+    }, {
+        rate: 2.0,
+        label: '2×'
+    }];
+
     let raf = null;
+    let currentPlaybackRateIdx = 1;
 
     audio.src = audioElementContainer.getAttribute('data-kg-audio-src');
 
@@ -95,15 +109,10 @@ const handleAudioPlayer = function (audioElementContainer) {
     });
 
     playbackRateContainer.addEventListener('click', () => {
-        if (playbackRate === 1.0) {
-            audio.playbackRate = 2;
-            playbackRate = 2;
-            playbackRateContainer.textContent = '2×';
-        } else {
-            audio.playbackRate = 1.0;
-            playbackRate = 1.0;
-            playbackRateContainer.textContent = '1×';
-        }
+        let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
+        currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
+        audio.playbackRate = nextPlaybackRate.rate;
+        playbackRateContainer.textContent = nextPlaybackRate.label;
     });
 
     audio.addEventListener('progress', displayBufferedAmount);