wip #4962 @0.5

diff --git a/js/libs/fluidbook/fluidbook.audioplayer.js b/js/libs/fluidbook/fluidbook.audioplayer.js
index f5623e0de6b320d7719efecabbf10c1c4351d594..459a2220e62bf10b7488a744a408e5b1041cf14b 100644 (file)
--- 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 7d55535774723d0cf7f27b242048165915192b2b..e8daa663cdc0746ba9e6e75880b346c50b517791 100644 (file)
--- 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%;
       }