wait #4202 @0:20

diff --git a/images/interface.svg b/images/interface.svg
index 3ba8551a3445a38d76a46cad0fac457d1a62f9f9..17206fe0e37daaf5d3eae7315b17aa5c87ff8db9 100644 (file)
--- 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 0987e4068bf5d9528ae948aaa0f2041cc1b8f8fd..235144b5a7182df751130a00e1948adc2dfdc69d 100644 (file)
--- 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 410589f4739996314e49a4ac7933e7206d54061b..a3b7c299b068ffcf5d11f57fb84860bf8d7d8f08 100644 (file)
--- 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 {