the audio player is playing and displaying well

sites/all/themes/custom/edlptheme/assets/dist/img/audio-player-next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30" viewBox="0 0 5.2916665 7.9375002"><g transform="translate(0 -289.062)"><path d="M.472 289.197c1.81 1.044 4.71 3.049 4.71 3.815 0 .578-3.416 3.112-4.71 3.817-1.696.808 3.111-3.1 3.111-3.815 0-.92-4.673-4.435-3.113-3.817l.002 3.816z"/><rect style="isolation:auto;mix-blend-mode:normal" width="5.292" height="7.938" y="289.062" rx="1.197" ry=".826" color="#000" overflow="visible" fill="none"/></g></svg>

sites/all/themes/custom/edlptheme/assets/dist/img/audio-player-pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30" viewBox="0 0 5.2916665 7.9375002"><g transform="translate(0 -289.062)" fill="none"><rect style="isolation:auto;mix-blend-mode:normal" width="5.292" height="7.938" y="289.062" rx="1.197" ry=".826" color="#000" overflow="visible"/><g stroke="#000" stroke-width="1.058"><path d="M1.852 290.915v4.233M3.44 290.915v4.233"/></g></g></svg>

sites/all/themes/custom/edlptheme/assets/dist/img/audio-player-play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30" viewBox="0 0 5.2916665 7.9375002"><g transform="translate(0 -289.062)" color="#000"><rect style="isolation:auto;mix-blend-mode:normal" width="5.292" height="7.938" y="289.062" rx="1.197" ry=".826" overflow="visible" fill="none"/><path style="isolation:auto;mix-blend-mode:normal" d="M1.317 291.38l2.776 1.68-2.776 1.622z" overflow="visible"/></g></svg>

sites/all/themes/custom/edlptheme/assets/dist/img/audio-player-previous.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30" viewBox="0 0 5.2916665 7.9375002"><g transform="translate(0 -289.062)"><path d="M4.82 296.866c-1.81-1.045-4.71-3.05-4.71-3.816 0-.577 3.415-3.111 4.709-3.816 1.697-.808-3.11 3.099-3.11 3.814 0 .921 4.672 4.435 3.113 3.818l-.002-3.816z"/><rect style="isolation:auto;mix-blend-mode:normal" width="5.292" height="7.938" y="289.062" rx="1.197" ry=".826" color="#000" overflow="visible" fill="none"/></g></svg>

sites/all/themes/custom/edlptheme/assets/dist/img/edlp-loader-anim.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+  width="40"
+  height="40"
+  fill="#ffffff"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect
+    id="bg"
+    x="0" y="0"
+    width="40" height="40"
+    >
+  </rect>
+  <rect
+    id="blak-line"
+    x="0" y="19"
+    width="50" height="2"
+    fill="#000000"
+    transform="rotate(315 22 26)">
+  </rect>
+  <rect
+    id="red-line"
+    x="11" y="18"
+    width="18" height="4"
+    fill="#ff0004"
+    transform="rotate(45 20 20)">
+    <animate
+      xlink:href="#red-line"
+      attributeName="y"
+      from="1"
+      to="1"
+      dur="1.5s"
+      values="1;18;35;18;1"
+      keyTimes="0;0.25;0.5;0.75;1"
+      keySplines=".42 0 1 1;
+                  0 0 .59 1;
+                  .42 0 1 1"
+      fill="freeze"
+      begin="0s"
+      repeatCount="indefinite"
+      id="red-anim-one"/>
+
+  </rect>
+</svg>

sites/all/themes/custom/edlptheme/assets/dist/img/edlp-loader.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 10.583333 10.583334"><path d="M10.16.14L.098 10.115c.131.104.262.318.394.354L10.533.517 10.16.14z"/><path d="M4.014 3.25c-.251.247-.502.495-.752.744L6.617 7.38l.752-.744L4.014 3.25z" fill="#ff0004"/></svg>

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -63,91 +63,127 @@ edlp_vars = {
       this.fid;
       this.audio = new Audio();
       // audio events
-      this.audio_events = ["loadedmetadata","progress","canplay","timeupdate","ended"];
+      this.audio_events = ["loadedmetadata","canplay","playing","pause","timeupdate","ended"];
 
       // UI dom objects
-      this.$container = $('<div id="audio-player">')
-        .appendTo('header[role="banner"] .region-header');
-      this.$timeline = $('<div>').addClass('time-line').appendTo(this.$container);
-      this.$loader = $('<div>').addClass('loader').appendTo(this.$timeline);
-      this.$cursor = $('<div>').addClass('cursor').appendTo(this.$timeline);
-      this.$duration = $('<div>').addClass('duration').appendTo(this.$container);
-      this.$currentTime = $('<div>').addClass('current-time').appendTo(this.$container);
-
-      if (typeof AudioPlayer.initialized == "undefined") {
-
-        AudioPlayer.prototype.init = function(){
-          // init audio events
-          var fn = '';
-          for (var i = 0; i < this.audio_events.length; i++) {
-            fn = this.audio_events[i];
-            // capitalize first letter of event (only cosmetic :p )
-            fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
-            this.audio.addEventListener(
-              this.audio_events[i],
-              this[fn].bind(this),
-              true);
-          }
-        };
-
-        AudioPlayer.prototype.loadSound = function(url){
-          console.log('AudioPlayer loadSound : url', url);
-          this.audio.src = url;
-          // this.play();
-        };
-
-        AudioPlayer.prototype.play = function(){
-          console.log('AudioPlayer play()');
+      this.$container   = $('<div id="audio-player">');
+      // btns
+      this.$btns        = $('<div>').addClass('btns').appendTo(this.$container);
+      this.$previous    = $('<div>').addClass('previous').appendTo(this.$btns);
+      this.$playpause   = $('<div>').addClass('play-pause').appendTo(this.$btns);
+      this.$next        = $('<div>').addClass('next').appendTo(this.$btns);
+      // timeline
+      this.$timelinecont= $('<div>').addClass('time-line-container').appendTo(this.$container);
+      this.$timeline    = $('<div>').addClass('time-line').appendTo(this.$timelinecont);
+      this.$loader      = $('<div>').addClass('loader').appendTo(this.$timeline);
+      this.$cursor      = $('<div>').addClass('cursor').appendTo(this.$timeline);
+      // time
+      this.$time        = $('<div>').addClass('time').appendTo(this.$container);
+      this.$currentTime = $('<div>').addClass('current-time').html('00:00').appendTo(this.$time);
+      this.$duration    = $('<div>').addClass('duration').html('00:00').appendTo(this.$time);
+
+      // hiding
+      this.hideTimer = false;
+      this.hideTimeMS = 10000;
+
+      this.init();
+    };
+    AudioPlayer.prototype = {
+      init(){
+        // append ui to document
+        this.$container.appendTo('header[role="banner"] .region-header');
+        // record timeline width
+        this.timeline_w = parseInt(this.$timeline.width());
+        // init audio events
+        var fn = '';
+        for (var i = 0; i < this.audio_events.length; i++) {
+          fn = this.audio_events[i];
+          // capitalize first letter of event (only cosmetic :p )
+          fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
+          this.audio.addEventListener(
+            this.audio_events[i],
+            this[fn].bind(this),
+            true);
+        }
+        // init btns events
+        this.$playpause.on('click', this.togglePlayPause.bind(this));
+        // TODO: previous and next btns
+      },
+      setSRC(url){
+        console.log('AudioPlayer setSRC : url', url);
+        this.clearTimeOutToHide();
+        this.audio.src = url;
+        this.show();
+      },
+      onLoadedmetadata(){
+        var rem = parseInt(this.audio.duration, 10),
+            mins = Math.floor(rem/60,10),
+            secs = rem - mins*60;
+        this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
+        this.updateLoadingBar();
+      },
+      updateLoadingBar(){
+        this.$loader.css({
+          'width':parseInt((100 * this.audio.buffered.end(0) / this.audio.duration), 10)+'%'
+        });
+        if( this.audio.buffered.end(0) < this.audio.duration ){
+          // loop through this function until file is fully loaded
+          var that = this;
+          window.requestAnimationFrame(that.updateLoadingBar.bind(that));
+        }else{
+          console.log('Audio fully loaded');
+        }
+      },
+      onCanplay(){
+        this.play();
+      },
+      play(){
+        this.audio.play();
+      },
+      togglePlayPause(){
+        if(this.audio.paused){
           this.audio.play();
-        };
-
-        AudioPlayer.prototype.onLoadedmetadata = function(){
-          var rem = parseInt(this.audio.duration, 10),
-              mins = Math.floor(rem/60,10),
-              secs = rem - mins*60;
-          this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
-        };
-
-        AudioPlayer.prototype.onProgress = function(){
-          // var myBuffered = this.audio.buffered;
-          // var mySeekable = this.audio.seekable;
-          if( this.audio.buffered.length ){
-            // var fromPercent = this.fromPercent;
-            // var value = percentLoad - fromPercent;
-            // if( value<0 ) value = 0;
-            // this.$loadingBar.css({width: value + '%',marginLeft:fromPercent + '%'});
-            this.$loader.css({
-              'width':parseInt(((this.audio.buffered.end(0) / this.audio.duration) * 100), 10)+'%'
-            });
-          }
-        };
-
-        AudioPlayer.prototype.onCanplay = function(){
-          this.play();
-        };
-
-        AudioPlayer.prototype.onTimeupdate = function(){
-          // console.log('Audio update()', this.audio.currentTime);
-
-          this.$cursor.css({
-            'left':(this.audio.currentTime/this.audio.duration * 50)+"px"
-          });
-
-          var rem = parseInt(this.audio.currentTime, 10),
-              mins = Math.floor(rem/60,10),
-              secs = rem - mins*60;
-          this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
-        };
-
-        AudioPlayer.prototype.onEnded = function(){
-          console.log('AudioPlayer onEnded');
-        };
-
-        AudioPlayer.initialized = true;
-        this.init();
+        }else{
+          this.audio.pause();
+        }
+      },
+      onPlaying(){
+        this.$container.addClass('is-playing');
+      },
+      onPause(){
+        this.$container.removeClass('is-playing');
+      },
+      onTimeupdate(){
+        // move cursor
+        this.$cursor.css({
+          'left':(this.audio.currentTime/this.audio.duration * this.timeline_w)+"px"
+        });
+        // update time text display
+        var rem = parseInt(this.audio.currentTime, 10),
+            mins = Math.floor(rem/60,10),
+            secs = rem - mins*60;
+        this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
+      },
+      onEnded(){
+        this.$container.removeClass('is-playing');
+        this.timeOutToHide();
+      },
+      show(){
+        this.$container.addClass('visible');
+      },
+      timeOutToHide(){
+        this.clearTimeOutToHide();
+        this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
+      },
+      clearTimeOutToHide(){
+        if(this.hideTimer){
+          clearTimeout(this.hideTimer);
+        }
+      },
+      hide(){
+        this.$container.removeClass('visible');
       }
-    };
-
+    }
     //  ___             _ _ ___
     // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
     // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
@@ -275,7 +311,7 @@ edlp_vars = {
         })
         .on('corpus-cliked-on-node', function(e) {
           console.log('theme : corpus-cliked-on-node', e);
-          _audio_player.loadSound(e.target_node.audio_url);
+          _audio_player.setSRC(e.target_node.audio_url);
         });
     }
 

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1285,7 +1285,7 @@ body.ajax-loading main[role="main"]:before {
   top: calc(50% - 30px);
   left: calc(50% - 30px);
   background-color: white;
-  background-image: url(../../img/edlp-loader-anim.svg);
+  background-image: url(../img/edlp-loader-anim.svg);
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: center;
@@ -1297,31 +1297,69 @@ body.ajax-loading main[role="main"]:before {
   left: 0;
   background-color: white;
   height: 100%;
-  min-width: 300px;
-  max-width: 500px;
+  width: 300px;
   z-index: 20;
-  outline: 1px dotted green; }
-  #audio-player .time-line {
+  opacity: 0;
+  pointer-events: none;
+  -webkit-transition: opacity 0.7s ease-in-out;
+  transition: opacity 0.7s ease-in-out; }
+  #audio-player.visible {
+    opacity: 1;
+    pointer-events: all; }
+  #audio-player .btns, #audio-player .time-line-container, #audio-player .time {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 1em 0 0; }
+  #audio-player .btns {
+    cursor: pointer; }
+    #audio-player .btns > * {
+      display: inline-block;
+      vertical-align: middle;
+      width: 20px;
+      height: 30px;
+      background-position: center;
+      background-size: contain; }
+    #audio-player .btns .previous {
+      background-image: url(../img/audio-player-previous.svg);
+      opacity: 0.3; }
+    #audio-player .btns .play-pause {
+      background-image: url(../img/audio-player-play.svg);
+      padding: 0 0.3em; }
+    #audio-player .btns .next {
+      background-image: url(../img/audio-player-next.svg);
+      opacity: 0.3; }
+  #audio-player .time-line-container .time-line {
     position: relative;
-    width: 50px;
+    width: 70px;
     height: 1px;
     background-color: #000;
     overflow: visible;
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg); }
-    #audio-player .time-line .loader {
+    #audio-player .time-line-container .time-line .loader {
       width: 0;
       height: 100%;
       background-color: red;
       top: 0;
       left: 0; }
-    #audio-player .time-line .cursor {
+    #audio-player .time-line-container .time-line .cursor {
       height: 10px;
       width: 0;
       border-left: 2px solid red;
       position: absolute;
       left: 0;
       top: -5px; }
+  #audio-player .time > * {
+    width: 70px;
+    text-align: right; }
+  #audio-player .time .current-time {
+    font-size: 1.4em;
+    font-weight: 600; }
+  #audio-player .time .duration {
+    font-size: 0.75em;
+    font-weight: 400; }
+  #audio-player.is-playing .btns .play-pause {
+    background-image: url(../img/audio-player-pause.svg); }
 
 body.path-agenda main .col > .wrapper {
   height: 100%; }
@@ -1640,7 +1678,7 @@ footer {
       position: relative;
       width: 20px;
       height: 20px;
-      background-image: url(../../img/user.svg);
+      background-image: url(../img/user.svg);
       background-size: contain;
       text-indent: 40px;
       margin: 0;

sites/all/themes/custom/edlptheme/assets/img/edlp-loader-anim.svg

@@ -25,20 +25,21 @@
     width="18" height="4"
     fill="#ff0004"
     transform="rotate(45 20 20)">
+    <animate
+      xlink:href="#red-line"
+      attributeName="y"
+      from="1"
+      to="1"
+      dur="1.5s"
+      values="1;18;35;18;1"
+      keyTimes="0;0.25;0.5;0.75;1"
+      keySplines=".42 0 1 1;
+                  0 0 .59 1;
+                  .42 0 1 1"
+      fill="freeze"
+      begin="0s"
+      repeatCount="indefinite"
+      id="red-anim-one"/>
+
   </rect>
-  <animate
-    xlink:href="#red-line"
-    attributeName="y"
-    from="1"
-    to="1"
-    dur="1.5s"
-    values="1;18;35;18;1"
-    keyTimes="0;0.25;0.5;0.75;1"
-    keySplines=".42 0 1 1;
-                0 0 .59 1;
-                .42 0 1 1"
-    fill="freeze"
-    begin="0s"
-    repeatCount="indefinite"
-    id="red-anim-one"/>
 </svg>

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -40,91 +40,127 @@
       this.fid;
       this.audio = new Audio();
       // audio events
-      this.audio_events = ["loadedmetadata","progress","canplay","timeupdate","ended"];
+      this.audio_events = ["loadedmetadata","canplay","playing","pause","timeupdate","ended"];
 
       // UI dom objects
-      this.$container = $('<div id="audio-player">')
-        .appendTo('header[role="banner"] .region-header');
-      this.$timeline = $('<div>').addClass('time-line').appendTo(this.$container);
-      this.$loader = $('<div>').addClass('loader').appendTo(this.$timeline);
-      this.$cursor = $('<div>').addClass('cursor').appendTo(this.$timeline);
-      this.$duration = $('<div>').addClass('duration').appendTo(this.$container);
-      this.$currentTime = $('<div>').addClass('current-time').appendTo(this.$container);
-
-      if (typeof AudioPlayer.initialized == "undefined") {
-
-        AudioPlayer.prototype.init = function(){
-          // init audio events
-          var fn = '';
-          for (var i = 0; i < this.audio_events.length; i++) {
-            fn = this.audio_events[i];
-            // capitalize first letter of event (only cosmetic :p )
-            fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
-            this.audio.addEventListener(
-              this.audio_events[i],
-              this[fn].bind(this),
-              true);
-          }
-        };
-
-        AudioPlayer.prototype.loadSound = function(url){
-          console.log('AudioPlayer loadSound : url', url);
-          this.audio.src = url;
-          // this.play();
-        };
-
-        AudioPlayer.prototype.play = function(){
-          console.log('AudioPlayer play()');
+      this.$container   = $('<div id="audio-player">');
+      // btns
+      this.$btns        = $('<div>').addClass('btns').appendTo(this.$container);
+      this.$previous    = $('<div>').addClass('previous').appendTo(this.$btns);
+      this.$playpause   = $('<div>').addClass('play-pause').appendTo(this.$btns);
+      this.$next        = $('<div>').addClass('next').appendTo(this.$btns);
+      // timeline
+      this.$timelinecont= $('<div>').addClass('time-line-container').appendTo(this.$container);
+      this.$timeline    = $('<div>').addClass('time-line').appendTo(this.$timelinecont);
+      this.$loader      = $('<div>').addClass('loader').appendTo(this.$timeline);
+      this.$cursor      = $('<div>').addClass('cursor').appendTo(this.$timeline);
+      // time
+      this.$time        = $('<div>').addClass('time').appendTo(this.$container);
+      this.$currentTime = $('<div>').addClass('current-time').html('00:00').appendTo(this.$time);
+      this.$duration    = $('<div>').addClass('duration').html('00:00').appendTo(this.$time);
+
+      // hiding
+      this.hideTimer = false;
+      this.hideTimeMS = 10000;
+
+      this.init();
+    };
+    AudioPlayer.prototype = {
+      init(){
+        // append ui to document
+        this.$container.appendTo('header[role="banner"] .region-header');
+        // record timeline width
+        this.timeline_w = parseInt(this.$timeline.width());
+        // init audio events
+        var fn = '';
+        for (var i = 0; i < this.audio_events.length; i++) {
+          fn = this.audio_events[i];
+          // capitalize first letter of event (only cosmetic :p )
+          fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
+          this.audio.addEventListener(
+            this.audio_events[i],
+            this[fn].bind(this),
+            true);
+        }
+        // init btns events
+        this.$playpause.on('click', this.togglePlayPause.bind(this));
+        // TODO: previous and next btns
+      },
+      setSRC(url){
+        console.log('AudioPlayer setSRC : url', url);
+        this.clearTimeOutToHide();
+        this.audio.src = url;
+        this.show();
+      },
+      onLoadedmetadata(){
+        var rem = parseInt(this.audio.duration, 10),
+            mins = Math.floor(rem/60,10),
+            secs = rem - mins*60;
+        this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
+        this.updateLoadingBar();
+      },
+      updateLoadingBar(){
+        this.$loader.css({
+          'width':parseInt((100 * this.audio.buffered.end(0) / this.audio.duration), 10)+'%'
+        });
+        if( this.audio.buffered.end(0) < this.audio.duration ){
+          // loop through this function until file is fully loaded
+          var that = this;
+          window.requestAnimationFrame(that.updateLoadingBar.bind(that));
+        }else{
+          console.log('Audio fully loaded');
+        }
+      },
+      onCanplay(){
+        this.play();
+      },
+      play(){
+        this.audio.play();
+      },
+      togglePlayPause(){
+        if(this.audio.paused){
           this.audio.play();
-        };
-
-        AudioPlayer.prototype.onLoadedmetadata = function(){
-          var rem = parseInt(this.audio.duration, 10),
-              mins = Math.floor(rem/60,10),
-              secs = rem - mins*60;
-          this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
-        };
-
-        AudioPlayer.prototype.onProgress = function(){
-          // var myBuffered = this.audio.buffered;
-          // var mySeekable = this.audio.seekable;
-          if( this.audio.buffered.length ){
-            // var fromPercent = this.fromPercent;
-            // var value = percentLoad - fromPercent;
-            // if( value<0 ) value = 0;
-            // this.$loadingBar.css({width: value + '%',marginLeft:fromPercent + '%'});
-            this.$loader.css({
-              'width':parseInt(((this.audio.buffered.end(0) / this.audio.duration) * 100), 10)+'%'
-            });
-          }
-        };
-
-        AudioPlayer.prototype.onCanplay = function(){
-          this.play();
-        };
-
-        AudioPlayer.prototype.onTimeupdate = function(){
-          // console.log('Audio update()', this.audio.currentTime);
-
-          this.$cursor.css({
-            'left':(this.audio.currentTime/this.audio.duration * 50)+"px"
-          });
-
-          var rem = parseInt(this.audio.currentTime, 10),
-              mins = Math.floor(rem/60,10),
-              secs = rem - mins*60;
-          this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
-        };
-
-        AudioPlayer.prototype.onEnded = function(){
-          console.log('AudioPlayer onEnded');
-        };
-
-        AudioPlayer.initialized = true;
-        this.init();
+        }else{
+          this.audio.pause();
+        }
+      },
+      onPlaying(){
+        this.$container.addClass('is-playing');
+      },
+      onPause(){
+        this.$container.removeClass('is-playing');
+      },
+      onTimeupdate(){
+        // move cursor
+        this.$cursor.css({
+          'left':(this.audio.currentTime/this.audio.duration * this.timeline_w)+"px"
+        });
+        // update time text display
+        var rem = parseInt(this.audio.currentTime, 10),
+            mins = Math.floor(rem/60,10),
+            secs = rem - mins*60;
+        this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
+      },
+      onEnded(){
+        this.$container.removeClass('is-playing');
+        this.timeOutToHide();
+      },
+      show(){
+        this.$container.addClass('visible');
+      },
+      timeOutToHide(){
+        this.clearTimeOutToHide();
+        this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
+      },
+      clearTimeOutToHide(){
+        if(this.hideTimer){
+          clearTimeout(this.hideTimer);
+        }
+      },
+      hide(){
+        this.$container.removeClass('visible');
       }
-    };
-
+    }
     //  ___             _ _ ___
     // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
     // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
@@ -252,7 +288,7 @@
         })
         .on('corpus-cliked-on-node', function(e) {
           console.log('theme : corpus-cliked-on-node', e);
-          _audio_player.loadSound(e.target_node.audio_url);
+          _audio_player.setSRC(e.target_node.audio_url);
         });
     }
 

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -173,7 +173,7 @@ main[role="main"]{
       width:$s; height:$s;
       top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
       background-color: white;
-      background-image: url(../../img/edlp-loader-anim.svg);
+      background-image: url(../img/edlp-loader-anim.svg);
       background-size: 50%;
       background-repeat: no-repeat;
       background-position: center;
@@ -192,28 +192,82 @@ main[role="main"]{
   position: absolute;
   top:0; left:0;
   background-color: white;
-  height:100%; min-width: 300px; max-width:500px;
+  height:100%; width:300px;
   z-index: 20;
-  outline: 1px dotted green;
-  .time-line{
-    position: relative;
-    width:50px; height:1px;
-    background-color: #000;
-    overflow: visible;
-    // border-top: 1px solid #000;
-    transform: rotateZ(-45deg);
-    .loader{
-      width:0; height:100%;
-      background-color: red;
-      top:0;left:0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.7s ease-in-out;
+  &.visible{
+    opacity: 1;
+    pointer-events:all;
+  }
+  .btns, .time-line-container, .time{
+    display: inline-block;
+    vertical-align: middle;
+    padding:0 1em 0 0;
+  }
+  .btns{
+    // outline: 1px dotted orange;
+    &>*{
+      display: inline-block;
+      vertical-align: middle;
+      width:20px;height:30px;
+      background-position: center;
+      background-size: contain;
     }
-    .cursor{
-      height:10px;width:0;
-      border-left: 2px solid red;
-      position:absolute;
-      left:0; top:-5px;
+    .previous{
+      background-image: url(../img/audio-player-previous.svg);
+      opacity: 0.3;}
+    .play-pause{
+      background-image: url(../img/audio-player-play.svg);
+      padding:0 0.3em;}
+      cursor: pointer;
+    .next{
+      background-image: url(../img/audio-player-next.svg);
+      opacity: 0.3;}
+  }
+  .time-line-container{
+    // outline: 1px dotted purple;
+    .time-line{
+      position: relative;
+      width:70px; height:1px;
+      background-color: #000;
+      overflow: visible;
+      // border-top: 1px solid #000;
+      transform: rotateZ(-45deg);
+      .loader{
+        width:0; height:100%;
+        background-color: red;
+        top:0;left:0;
+      }
+      .cursor{
+        height:10px;width:0;
+        border-left: 2px solid red;
+        position:absolute;
+        left:0; top:-5px;
+      }
     }
   }
+  .time{
+    // outline: 1px dotted brown;
+    &>*{
+      width:70px;
+      text-align: right;
+      // outline: 1px dotted red;
+    }
+    .current-time{
+      font-size: 1.4em;
+      font-weight: 600;
+    }
+    .duration{
+      font-size: 0.75em;
+      font-weight: 400;
+    }
+  }
+
+  &.is-playing{
+    .btns .play-pause{background-image: url(../img/audio-player-pause.svg);}
+  }
 }
 
  //    _    _            _  _         _
@@ -616,7 +670,7 @@ footer{
     h2{
       position: relative;
       width:$wh; height:$wh;
-      background-image: url(../../img/user.svg);
+      background-image: url(../img/user.svg);
       // background-color: red;
       background-size: contain;
       text-indent: $wh*2;