wip #56000 @1

diff --git a/js/libs/fluidbook/fluidbook.audioplayer.js b/js/libs/fluidbook/fluidbook.audioplayer.js
index 459a2220e62bf10b7488a744a408e5b1041cf14b..be55b8c942582449b63cab02fc6f8d451e54a649 100644 (file)
--- a/js/libs/fluidbook/fluidbook.audioplayer.js
+++ b/js/libs/fluidbook/fluidbook.audioplayer.js
@@ -31,6 +31,9 @@ FluidbookAudioPlayer.prototype = {
         $('audio.redbull').each(function () {
             $this.initRedbullPlayer(this);
         });
+        $('audio.twostatesicon').each(function () {
+            $this.initTwoStatesIconPlayer(this);
+        });
     },
 
 
@@ -59,6 +62,19 @@ FluidbookAudioPlayer.prototype = {
         arc.attr('stroke-width', sw);
     },
 
+    initTwoStatesIconPlayer: function (player) {
+        if ($(player).find('.icon').length>0) {
+            return;
+        }
+        var vp = $(player).next('.visualPlayer');
+        if ($(player).prop('autoplay')) {
+            $(player).addClass('playing');
+            $(vp).addClass('playing');
+        }
+
+        vp.append('<div class="icon play">' + getSpriteIcon('audioplayer-play') + '</div>');
+        vp.append('<div class="icon pause">' + getSpriteIcon('audioplayer-pause') + '</div>');
+    },
 
     initRedbullPlayer: function (player) {
         var vp = $(player).next('.visualPlayer');

diff --git a/style/audioplayer.less b/style/audioplayer.less
index 64cb3e6ee9efc07df5d3ebd5e438e58fa65f96ec..d882a6529531188424656f3534d6aed33e6ba7c0 100644 (file)
--- a/style/audioplayer.less
+++ b/style/audioplayer.less
@@ -1,29 +1,55 @@
 audio {
-  &.invisible, &.redbull {
+  &.invisible, &.redbull, &.twostatesicon {
     opacity: 0;
   }
 
-  &.redbull {
-    + .visualPlayer {
+  + .visualPlayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    transform-origin: 0 0 0;
+
+    .icon {
       position: absolute;
       top: 0;
       left: 0;
-      width: 60px;
-      height: 60px;
-      cursor: pointer;
-      transform-origin: 0 0 0;
+      width: 100%;
+      height: 100%;
+      color: @audioplayer-icon-color;
+      &.play {
+        display: block;
+      }
 
-      &.playing {
-        .icon {
-          &.play {
-            display: none;
-          }
+      &.pause {
+        display: none;
+      }
+    }
 
-          &.pause {
-            display: block;
-          }
+    &.playing {
+      .icon {
+        &.play {
+          display: none;
+        }
+
+        &.pause {
+          display: block;
         }
       }
+    }
+
+  }
+
+  &.twostatesicon {
+    + .visualPlayer {
+
+    }
+  }
+
+  &.redbull {
+    + .visualPlayer {
 
       .icon {
         position: absolute;