From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 28 Dec 2020 16:00:43 +0000 (+0100)
Subject: wip #4129 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0be204522cc571db7b67c5b3c27cc54929335c24;p=fluidbook-html5.git

wip #4129 @4
---

diff --git a/images/interface.svg b/images/interface.svg
index 99cce02b..3ba8551a 100644
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -360,4 +360,7 @@
     <symbol id="chevron-bold" viewBox="0 0 2.5 3.5">
         <polygon points="0.7,0 2.5,1.8 0.7,3.5 0,2.8 1.1,1.8 0,0.7"/>
     </symbol>
+    <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>
 </svg>
diff --git a/js/libs/fluidbook/fluidbook.audioplayer.js b/js/libs/fluidbook/fluidbook.audioplayer.js
new file mode 100644
index 00000000..0a5fcb8c
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.audioplayer.js
@@ -0,0 +1,102 @@
+function FluidbookAudioPlayer(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.init();
+}
+
+FluidbookAudioPlayer.prototype = {
+    init: function () {
+        var $this = this;
+        $(document).on('click', "audio:not([controls])", function () {
+            console.log(this);
+            if (this.paused) {
+                this.play();
+                $(this).addClass('playing');
+            } else {
+                this.pause();
+                $(this).removeClass('playing');
+            }
+            return false;
+        });
+        requestAnimationFrame(function () {
+            $this.updatePlayers();
+        });
+
+    },
+
+
+    initAudios() {
+        var $this = this;
+        $('audio.redbull').each(function () {
+            $this.initRedbullPlayer(this);
+        });
+    },
+
+
+    updatePlayers: function () {
+        var $this = this;
+        $('audio.playing.redbull').each(function () {
+            $this.updateRedbullPlayer(this);
+        });
+        requestAnimationFrame(function () {
+            $this.updatePlayers();
+        });
+    },
+
+    /**
+     *
+     * @param player Audio
+     */
+    updateRedbullPlayer: function (player) {
+        var paper = $(player).data(paper);
+        var halfw = $(player).data('halfw');
+        var sw = 3;
+        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-width', sw);
+    },
+
+
+    initRedbullPlayer: function (player) {
+        var vp = $(player).next('.visualPlayer');
+
+        vp.append('<div class="back"></div>');
+        vp.append('<div class="icon">' + getSpriteIcon('play') + '</div>');
+        vp.append('<div class="arc"></div>');
+
+        var vpw = Math.max($(vp).outerWidth(), $(vp).outerHeight());
+        $(player).data('halfw', vpw / 2);
+
+        var paper = Raphael(vp.find('.arc').get(0), vpw, vpw);
+        $(player).data(paper);
+    },
+
+
+    arc: function (center, radius, startAngle, endAngle) {
+        angle = startAngle;
+        coords = this.toCoords(center, radius, angle);
+        path = "M " + coords[0] + " " + coords[1];
+        while (angle <= endAngle) {
+            coords = this.toCoords(center, radius, angle);
+            path += " L " + coords[0] + " " + coords[1];
+            angle += 1;
+        }
+        return path;
+    },
+
+    toCoords: function (center, radius, angle) {
+        var radians = (angle / 180) * Math.PI;
+        var x = center[0] + Math.cos(radians) * radius;
+        var y = center[1] + Math.sin(radians) * radius;
+        return [x, y];
+    },
+
+    // draw an arc
+    // centered at (100, 100),
+    // radius 80, starting at degree 0,
+    // beginning at coordinate (80, 0)
+    //   which is relative to the center
+    //   of the circle,
+    // going clockwise, until 270 degree
+}
\ No newline at end of file
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index b194e73f..cd48936f 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -79,6 +79,7 @@ Fluidbook.prototype = {
         }
         this.background = new FluidbookBackground(this);
         this.video = new FluidbookVideo(this);
+        this.audioplayer = new FluidbookAudioPlayer(this);
         this.bookmarks = new FluidbookBookmarks(this);
         this.tooltip = new FluidbookTooltip(this);
         this.accessibility = new FluidbookAccessibility(this);
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 970f8576..f1132967 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -348,6 +348,7 @@ FluidbookLinks.prototype = {
 
         setTimeout(function () {
             $this.fluidbook.initVideos();
+            $this.fluidbook.audioplayer.initAudios();
             $this.initInlineSlideshows();
             $this.fluidbook.l10n.translateAttributes();
         }, 200);
diff --git a/style/audioplayer.less b/style/audioplayer.less
new file mode 100644
index 00000000..a340e520
--- /dev/null
+++ b/style/audioplayer.less
@@ -0,0 +1,50 @@
+audio {
+  &.invisible, &.redbull {
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  &.redbull {
+    + .visualPlayer {
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      .icon {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        color: #fff;
+        padding: 30%;
+      }
+
+      .back {
+        position: absolute;
+        top: 7px;
+        left: 7px;
+        width: ~"calc(100% - 14px)";
+        height:  ~"calc(100% - 14px)";
+        background-color: #224d8d;
+        border-radius: 50% 50%;
+      }
+
+      .arc {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        svg {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 1ed72caf..88237963 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -3022,3 +3022,4 @@ body > input {
 @import "posad.less";
 @import "notes.less";
 @import "cart.less";
+@import "audioplayer.less";
\ No newline at end of file