From f200538a67cd6ed618641f3d7a722bb30365f01d Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 19 Jan 2021 12:53:26 +0100
Subject: [PATCH] wait #4202 @0:20

---
 images/interface.svg                       |  6 ++++++
 js/libs/fluidbook/fluidbook.audioplayer.js |  7 +++++--
 style/audioplayer.less                     | 18 ++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/images/interface.svg b/images/interface.svg
index 3ba8551a..17206fe0 100644
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -363,4 +363,10 @@
     <symbol id="play" viewBox="0 0 18 18">
         <path d="M16,8.6c0.3,0.2,0.3,0.7,0,0.9l-6.7,3.8l-6.7,3.8c-0.3,0.2-0.8,0-0.8-0.4V9V1.5c0-0.4,0.4-0.6,0.8-0.4l6.7,3.8L16,8.6z"/>
     </symbol>
+    <symbol id="pause" viewBox="0 0 22 20">
+        <path d="M20.5,7.3h-19C1.2,7.3,0.9,7,0.9,6.7v-5c0-0.3,0.3-0.6,0.6-0.6h19c0.3,0,0.6,0.3,0.6,0.6v5
+		C21.1,7,20.8,7.3,20.5,7.3z"/>
+        <path d="M20.5,18.9h-19c-0.3,0-0.6-0.3-0.6-0.6v-5c0-0.3,0.3-0.6,0.6-0.6h19c0.3,0,0.6,0.3,0.6,0.6v5
+		C21.1,18.7,20.8,18.9,20.5,18.9z"/>
+    </symbol>
 </svg>
diff --git a/js/libs/fluidbook/fluidbook.audioplayer.js b/js/libs/fluidbook/fluidbook.audioplayer.js
index 0987e406..235144b5 100644
--- a/js/libs/fluidbook/fluidbook.audioplayer.js
+++ b/js/libs/fluidbook/fluidbook.audioplayer.js
@@ -7,14 +7,16 @@ FluidbookAudioPlayer.prototype = {
     init: function () {
         var $this = this;
         $(document).on('click', "audio + .visualPlayer", function () {
-            var audio=$(this).prev('audio').get(0);
+            var audio = $(this).prev('audio').get(0);
             console.log(audio);
             if (audio.paused) {
                 audio.play();
                 $(audio).addClass('playing');
+                $(this).addClass('playing');
             } else {
                 audio.pause();
                 $(audio).removeClass('playing');
+                $(this).removeClass('playing');
             }
             return false;
         });
@@ -63,7 +65,8 @@ FluidbookAudioPlayer.prototype = {
         var vp = $(player).next('.visualPlayer');
 
         vp.append('<div class="back"></div>');
-        vp.append('<div class="icon">' + getSpriteIcon('play') + '</div>');
+        vp.append('<div class="icon play">' + getSpriteIcon('play') + '</div>');
+        vp.append('<div class="icon pause">' + getSpriteIcon('pause') + '</div>');
         vp.append('<div class="arc"></div>');
 
         var vpw = Math.max($(vp).outerWidth(), $(vp).outerHeight());
diff --git a/style/audioplayer.less b/style/audioplayer.less
index 410589f4..a3b7c299 100644
--- a/style/audioplayer.less
+++ b/style/audioplayer.less
@@ -12,6 +12,18 @@ audio {
       height: 100%;
       cursor: pointer;
 
+      &.playing {
+        .icon {
+          &.play {
+            display: none;
+          }
+
+          &.pause {
+            display: block;
+          }
+        }
+      }
+
       .icon {
         position: absolute;
         top: 0;
@@ -20,6 +32,12 @@ audio {
         height: 100%;
         color: #fff;
         padding: 30%;
+
+        &.pause {
+          display: none;
+          left: 0;
+          padding: 32%;
+        }
       }
 
       .back {
-- 
2.39.5