From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 17 Dec 2021 09:27:17 +0000 (+0100)
Subject: wip #4962 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=332af7140461ae674470ef8a6fbc60233d74fc9c;p=fluidbook-html5.git

wip #4962 @0.5
---

diff --git a/js/libs/fluidbook/fluidbook.audioplayer.js b/js/libs/fluidbook/fluidbook.audioplayer.js
index f5623e0d..459a2220 100644
--- a/js/libs/fluidbook/fluidbook.audioplayer.js
+++ b/js/libs/fluidbook/fluidbook.audioplayer.js
@@ -55,25 +55,27 @@ FluidbookAudioPlayer.prototype = {
         paper.clear();
         var p = Math.max(0, Math.min(1, player.currentTime / player.duration));
         var arc = paper.path(this.arc([halfw, halfw], halfw - sw, 270, 270 + (p * 360)));
-        arc.attr('stroke', "#d7104e");
+        arc.attr('stroke', this.fluidbook.settings.audioplayerStrokeColor);
         arc.attr('stroke-width', sw);
     },
 
 
     initRedbullPlayer: function (player) {
         var vp = $(player).next('.visualPlayer');
-        if($(player).prop('autoplay')){
+        if ($(player).prop('autoplay')) {
             $(player).addClass('playing');
             $(vp).addClass('playing');
         }
 
+
         vp.append('<div class="back"></div>');
         vp.append('<div class="icon play">' + getSpriteIcon('audioplayer-play') + '</div>');
         vp.append('<div class="icon pause">' + getSpriteIcon('audioplayer-pause') + '</div>');
         vp.append('<div class="arc"></div>');
 
-        var vpw = Math.max($(vp).outerWidth(), $(vp).outerHeight());
+        var vpw = 60;
         $(player).data('halfw', vpw / 2);
+        $(vp).css('transform', 'scale(' + ($(player).outerWidth() / vpw) + ')');
 
         var paper = Raphael(vp.find('.arc').get(0), vpw, vpw);
         $(player).data(paper);
diff --git a/style/audioplayer.less b/style/audioplayer.less
index 7d555357..e8daa663 100644
--- a/style/audioplayer.less
+++ b/style/audioplayer.less
@@ -8,9 +8,10 @@ audio {
       position: absolute;
       top: 0;
       left: 0;
-      width: 100%;
-      height: 100%;
+      width: 60px;
+      height: 60px;
       cursor: pointer;
+      transform-origin: 0 0 0;
 
       &.playing {
         .icon {
@@ -31,7 +32,7 @@ audio {
         left: 2px;
         width: 100%;
         height: 100%;
-        color: #fff;
+        color: @audioplayer-icon-color;
         padding: 30%;
 
         &.pause {
@@ -47,7 +48,7 @@ audio {
         left: 7px;
         width: ~"calc(100% - 14px)";
         height: ~"calc(100% - 14px)";
-        background-color: #224d8d;
+        background-color: @audioplayer-background-color;
         border-radius: 50% 50%;
       }