From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 24 Nov 2022 16:46:29 +0000 (+0100)
Subject: wip #56000 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3347c9b8abbe366e9ee770368621f20d5629009c;p=fluidbook-html5.git

wip #56000 @1
---

diff --git a/js/libs/fluidbook/fluidbook.audioplayer.js b/js/libs/fluidbook/fluidbook.audioplayer.js
index 459a2220..be55b8c9 100644
--- 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 64cb3e6e..d882a652 100644
--- 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;