Added dynamic play/pause and unmute state for audio card player

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

- adds dynamic play/pause icon toggle for audio player
- adds dynamic mute/unmute icon toggle for mute behavior
- fixed volume slider not working

core/frontend/src/cards/css/audio.css

@@ -63,14 +63,20 @@
     padding: 0 4px;
 }
 
-.kg-audio-play-icon {
+.kg-audio-play-icon,
+.kg-audio-pause-icon {
     position: relative;
     bottom: 1px;
     padding: 0px 4px 0 0;
     background: transparent;
 }
 
-.kg-audio-play-icon svg {
+.kg-audio-hide {
+    display: none;
+}
+
+.kg-audio-play-icon svg,
+.kg-audio-pause-icon svg {
     width: 14px;
     height: 14px;
     fill: currentColor;
@@ -92,14 +98,16 @@
     background: transparent;
 }
 
-.kg-audio-mute-icon {
+.kg-audio-mute-icon,
+.kg-audio-unmute-icon {
     position: relative;
     bottom: 1px;
     padding: 0 4px;
     background: transparent;
 }
 
-.kg-audio-mute-icon svg {
+.kg-audio-mute-icon svg,
+.kg-audio-unmute-icon svg {
     width: 16px;
     height: 16px;
     fill: currentColor;
@@ -130,7 +138,7 @@
     cursor: pointer;
     border-color: transparent;
     color: transparent;
-    background: transparent; 
+    background: transparent;
 }
 
 /* Chrome & Safari styles
@@ -225,4 +233,4 @@
 
 .kg-player-container input[type="range"]:active::-ms-thumb {
     transform: scale(1.2);
-}
+}

core/frontend/src/cards/js/audio.js

@@ -1,16 +1,18 @@
 const handleAudioPlayer = function (audioElementContainer) {
     const audioPlayerContainer = audioElementContainer.querySelector('.kg-player-container');
     const playIconContainer = audioElementContainer.querySelector('.kg-audio-play-icon');
+    const pauseIconContainer = audioElementContainer.querySelector('.kg-audio-pause-icon');
     const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider');
     const playbackRateContainer = audioElementContainer.querySelector('.kg-audio-playback-rate');
     const muteIconContainer = audioElementContainer.querySelector('.kg-audio-mute-icon');
+    const unmuteIconContainer = audioElementContainer.querySelector('.kg-audio-unmute-icon');
     const volumeSlider = audioElementContainer.querySelector('.kg-audio-volume-slider');
     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 playState = 'play';
+    // let muteState = 'unmute';
     let playbackRate = 1.0;
     let raf = null;
 
@@ -67,29 +69,29 @@ const handleAudioPlayer = function (audioElementContainer) {
     }
 
     playIconContainer.addEventListener('click', () => {
-        if (playState === 'play') {
-            audio.play();
-            requestAnimationFrame(whilePlaying);
-            playState = 'pause';
-            playIconContainer.textContent = '||';
-        } else {
-            audio.pause();
-            cancelAnimationFrame(raf);
-            playState = 'play';
-            playIconContainer.textContent = '>';
-        }
+        playIconContainer.classList.add("kg-audio-hide");
+        pauseIconContainer.classList.remove("kg-audio-hide");
+        audio.play();
+        requestAnimationFrame(whilePlaying);
+    });
+
+    pauseIconContainer.addEventListener('click', () => {
+        pauseIconContainer.classList.add("kg-audio-hide");
+        playIconContainer.classList.remove("kg-audio-hide");
+        audio.pause();
+        cancelAnimationFrame(raf);
     });
 
     muteIconContainer.addEventListener('click', () => {
-        if (muteState === 'unmute') {
-            audio.muted = true;
-            muteState = 'mute';
-            muteIconContainer.textContent = 'UM';
-        } else {
-            audio.muted = false;
-            muteState = 'unmute';
-            muteIconContainer.textContent = 'M';
-        }
+        muteIconContainer.classList.add("kg-audio-hide");
+        unmuteIconContainer.classList.remove("kg-audio-hide");
+        audio.muted = false;
+    });
+
+    unmuteIconContainer.addEventListener('click', () => {
+        unmuteIconContainer.classList.add("kg-audio-hide");
+        muteIconContainer.classList.remove("kg-audio-hide");
+        audio.muted = true;
     });
 
     playbackRateContainer.addEventListener('click', () => {
@@ -124,7 +126,6 @@ const handleAudioPlayer = function (audioElementContainer) {
     volumeSlider.addEventListener('input', (e) => {
         const value = e.target.value;
         showRangeProgress(e.target);
-        outputContainer.textContent = value;
         audio.volume = value / 100;
     });
 }