started player, optimized corpus map by avoiding some node fn if particule is resting

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -141,6 +141,8 @@
 
       this.debug = d;
       this.mass = 8;
+      this.velocity_threshold = 0.01;
+      this.moving = true;
       // define radius regarding entries length
       switch(true){
         case this.entrees.length > 1 & this.entrees.length <= 3:
@@ -202,14 +204,33 @@
         };
 
         Node.prototype.onUpdate = function(){
+          // if(this.id == 0){
+            // console.log(_physics.playing);
+          // }
+          if(!this.p.resting()){
+            this.checkVelocity();
             this.checkWallBouncing();
             this.updatePos();
+          }
           this.checkMouse();
           // if(this.debug)
           //   console.log("Node pos: ", {x:this.x, y:this.y});
           this.draw();
         };
 
+        Node.prototype.checkVelocity = function(){
+          if (Math.abs(this.p.velocity.x) < this.velocity_threshold
+           && Math.abs(this.p.velocity.y) < this.velocity_threshold){
+              // console.log('checkVelocity stoping',this.p.velocity);
+              this.p.velocity.multiplyScalar(0);
+              // this.moving = false;
+              // console.log('checkVelocity particule is resting',this.p.resting());
+          }
+          // else{
+          //   this.moving = true;
+          // }
+        };
+
         Node.prototype.checkWallBouncing = function(){
           if(
             (this.x < this.wall_limits.left && this.p.velocity.x < 0)
@@ -262,35 +283,11 @@
           // - >3 entrees : grand 10px
           // actif entouré de rouge
 
-          // var d = this.r*2; // diametre
           _ctx.beginPath();
+          // _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
           _ctx.fillStyle = edlp_vars[this.e_color];
           _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
           _ctx.closePath();
-
-
-          // _ctx.beginPath();
-          // _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l;
-          // var r,d;
-          // for (let i = 0; i < this.entrees.length; i++) {
-          //   // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff";
-          //   // _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
-          //   _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff";
-          //   _ctx.strokeStyle = edlp_vars['e_col_'+this.entrees[i]];
-          //   r = this.base_radius + (this.g.l+this.g.s)*i; // radius
-          //   d = r*2; // diametre
-          //   if (i == 0) {
-          //     _ctx.fillRect(this.x - r,this.y - r,d,d);
-          //   }
-          //   _ctx.strokeRect(this.x - r,this.y - r,d,d);
-          // }
-          // _ctx.closePath();
-
-
-          // _ctx.beginPath();
-          // _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
-          // _ctx.fillRect(this.x, this.y, this.base_radius, this.base_radius);
-          // _ctx.closePath();
         };
 
         Node.initialized = true;
@@ -312,14 +309,13 @@
           newVelX1, newVelY1, newVelX2, newVelY2,
           makeup, angle;
       // colisions between _particules
-      for (var n = 0, l = _nodes.length; n < l; n++) {
+      for (var n = 0; n < _nodes.length; n++) {
-        // do not collide attracacted away nodes
+
-        // if(!p_a.attracted) continue;
+        for (var q = n+1; q < _nodes.length; q++) {
-        for (var q = 0; q < n; q++) {
           if(q===n) continue;
 
-          p_b = _nodes[q].p;
+          // if(!_nodes[q].moving) continue;
-          // if(!p_b.attracted) continue;
+
           d = _nodes[n].p.distanceTo(_nodes[q].p);
 
           full_rad = _nodes[n].r + _nodes[q].r;
@@ -383,11 +379,18 @@
         })
         .on('click', function(event) {
           if(event.target.tagName != "A" && event.target.tagName != "INPUT"){
-            console.log("Corpus : click");
+            // console.log("Corpus : click");
             event.preventDefault();
             if(_node_hover_id != -1){
-              console.log("corpus : click on node", _nodes[_node_hover_id]);
+              // console.log("corpus : click on node", _nodes[_node_hover_id]);
-              _$canvas.trigger('corpus-cliked-on-node');
+              var event = {
+                'type':'corpus-cliked-on-node',
+                'target_node':{
+                  'nid':_node_hover_id,
+                  'audio_url':_nodes[_node_hover_id].son_url
+                },
+              };
+              _$canvas.trigger(event);
             }else{
               console.log('corpus : click on map');
               _$canvas.trigger('corpus-cliked-on-map');
@@ -418,7 +421,6 @@
     function initNodePopup(){
       _node_pop_up = new NodePopUp();
     };
-
     function NodePopUp(){
       this.visible = false;
       this.node;
@@ -431,7 +433,7 @@
       if (typeof NodePopUp.initialized == "undefined") {
 
         NodePopUp.prototype.setNode = function(n){
-          console.log('NodePopUp setNode()');
+          // console.log('NodePopUp setNode()');
           this.node = n;
           // positioning NodePopUp regarding node position
           this.setPositioning();
@@ -472,7 +474,7 @@
         };
 
         NodePopUp.prototype.removeNode = function(){
-          console.log('NodePopUp removeNode()');
+          // console.log('NodePopUp removeNode()');
           this.node = false;
         };
 

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -141,6 +141,8 @@
 
       this.debug = d;
       this.mass = 8;
+      this.velocity_threshold = 0.01;
+      this.moving = true;
       // define radius regarding entries length
       switch(true){
         case this.entrees.length > 1 & this.entrees.length <= 3:
@@ -202,14 +204,33 @@
         };
 
         Node.prototype.onUpdate = function(){
+          // if(this.id == 0){
+            // console.log(_physics.playing);
+          // }
+          if(!this.p.resting()){
+            this.checkVelocity();
             this.checkWallBouncing();
             this.updatePos();
+          }
           this.checkMouse();
           // if(this.debug)
           //   console.log("Node pos: ", {x:this.x, y:this.y});
           this.draw();
         };
 
+        Node.prototype.checkVelocity = function(){
+          if (Math.abs(this.p.velocity.x) < this.velocity_threshold
+           && Math.abs(this.p.velocity.y) < this.velocity_threshold){
+              // console.log('checkVelocity stoping',this.p.velocity);
+              this.p.velocity.multiplyScalar(0);
+              // this.moving = false;
+              // console.log('checkVelocity particule is resting',this.p.resting());
+          }
+          // else{
+          //   this.moving = true;
+          // }
+        };
+
         Node.prototype.checkWallBouncing = function(){
           if(
             (this.x < this.wall_limits.left && this.p.velocity.x < 0)
@@ -262,35 +283,11 @@
           // - >3 entrees : grand 10px
           // actif entouré de rouge
 
-          // var d = this.r*2; // diametre
           _ctx.beginPath();
+          // _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
           _ctx.fillStyle = edlp_vars[this.e_color];
           _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
           _ctx.closePath();
-
-
-          // _ctx.beginPath();
-          // _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l;
-          // var r,d;
-          // for (let i = 0; i < this.entrees.length; i++) {
-          //   // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff";
-          //   // _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
-          //   _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff";
-          //   _ctx.strokeStyle = edlp_vars['e_col_'+this.entrees[i]];
-          //   r = this.base_radius + (this.g.l+this.g.s)*i; // radius
-          //   d = r*2; // diametre
-          //   if (i == 0) {
-          //     _ctx.fillRect(this.x - r,this.y - r,d,d);
-          //   }
-          //   _ctx.strokeRect(this.x - r,this.y - r,d,d);
-          // }
-          // _ctx.closePath();
-
-
-          // _ctx.beginPath();
-          // _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
-          // _ctx.fillRect(this.x, this.y, this.base_radius, this.base_radius);
-          // _ctx.closePath();
         };
 
         Node.initialized = true;
@@ -312,14 +309,13 @@
           newVelX1, newVelY1, newVelX2, newVelY2,
           makeup, angle;
       // colisions between _particules
-      for (var n = 0, l = _nodes.length; n < l; n++) {
+      for (var n = 0; n < _nodes.length; n++) {
-        // do not collide attracacted away nodes
+
-        // if(!p_a.attracted) continue;
+        for (var q = n+1; q < _nodes.length; q++) {
-        for (var q = 0; q < n; q++) {
           if(q===n) continue;
 
-          p_b = _nodes[q].p;
+          // if(!_nodes[q].moving) continue;
-          // if(!p_b.attracted) continue;
+
           d = _nodes[n].p.distanceTo(_nodes[q].p);
 
           full_rad = _nodes[n].r + _nodes[q].r;
@@ -383,11 +379,18 @@
         })
         .on('click', function(event) {
           if(event.target.tagName != "A" && event.target.tagName != "INPUT"){
-            console.log("Corpus : click");
+            // console.log("Corpus : click");
             event.preventDefault();
             if(_node_hover_id != -1){
-              console.log("corpus : click on node", _nodes[_node_hover_id]);
+              // console.log("corpus : click on node", _nodes[_node_hover_id]);
-              _$canvas.trigger('corpus-cliked-on-node');
+              var event = {
+                'type':'corpus-cliked-on-node',
+                'target_node':{
+                  'nid':_node_hover_id,
+                  'audio_url':_nodes[_node_hover_id].son_url
+                },
+              };
+              _$canvas.trigger(event);
             }else{
               console.log('corpus : click on map');
               _$canvas.trigger('corpus-cliked-on-map');
@@ -418,7 +421,6 @@
     function initNodePopup(){
       _node_pop_up = new NodePopUp();
     };
-
     function NodePopUp(){
       this.visible = false;
       this.node;
@@ -431,7 +433,7 @@
       if (typeof NodePopUp.initialized == "undefined") {
 
         NodePopUp.prototype.setNode = function(n){
-          console.log('NodePopUp setNode()');
+          // console.log('NodePopUp setNode()');
           this.node = n;
           // positioning NodePopUp regarding node position
           this.setPositioning();
@@ -472,7 +474,7 @@
         };
 
         NodePopUp.prototype.removeNode = function(){
-          console.log('NodePopUp removeNode()');
+          // console.log('NodePopUp removeNode()');
           this.node = false;
         };
 

sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php

@@ -24,7 +24,7 @@ class CorpusController extends ControllerBase {
     // @see https://chromatichq.com/blog/dependency-injection-drupal-8-plugins
 
     // Get a node storage object.
-    // $file_storage = \Drupal::entityManager()->getStorage('node')
+    // $file_storage = \Drupal::entityManager()->getStorage('node');
 
     $response = new JsonResponse();
 
@@ -57,12 +57,12 @@ class CorpusController extends ControllerBase {
 
       $field_son_values = $node->get('field_son')->getValue();
       $son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
-      // TODO: how to get this fucking file uri, fuck !!
+      $son_file = \Drupal\file\Entity\File::load($son_fid);
-      // $son_file = $file_storage->load($fid);
+      $son_url = null;
-      // $son_file = File::load($son_fid);
+      if($son_file){
-      // $son_uri = $son_file->url();
+        $son_uri = $son_file->getFileUri();
-      // $son_uri = \Drupal\file\Entity\File::load($son_fid);//->getFileUri();
+        $son_url = file_create_url($son_uri);
-      // $son_uri = file_create_url($node->get('field_son')->entity->getFileUri());
+      }
 
       // TODO: favoris marker
 
@@ -71,9 +71,8 @@ class CorpusController extends ControllerBase {
         "title" => $node->get('title')->getString(),
         "description" => $description,
         "entrees" => $entrees,
-        "son_fid" => $son_fid,
+        // "son_fid" => $son_fid,
-        // "son" => $son_file,
+        "son_url" => $son_url,
-        // "popup_content" => render($node_builder), // trop lourd
       );
     }
 

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

@@ -42,6 +42,110 @@ edlp_vars = {
       if (_$body.is('.path-productions')) {
         initProductions();
       }
+      initAudioPlayer();
+    };
+
+
+    //    _          _ _
+    //   /_\ _  _ __| (_)___
+    //  / _ \ || / _` | / _ \
+    // /_/ \_\_,_\__,_|_\___/
+    //
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
+    // https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
+    // https://www.binarytides.com/using-html5-audio-element-javascript/
+    //
+    function initAudioPlayer(){
+      _audio_player = new AudioPlayer();
+    };
+    function AudioPlayer(){
+      var that = this;
+      this.fid;
+      this.audio = new Audio();
+      // audio events
+      this.audio_events = ["loadedmetadata","progress","canplay","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.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();
+      }
     };
 
     //  ___             _ _ ___
@@ -60,7 +164,6 @@ edlp_vars = {
     //  / _ \ | / _` \ \ /
     // /_/ \_\/ \__,_/_\_\
     //      |__/
-
     // TODO: add url hash nav
     // TODO: implement history.js
     function  initAjaxLinks(){
@@ -165,9 +268,14 @@ edlp_vars = {
     function onCorpusMapReady(e){
       console.log('theme : onCorpusReady');
       _$corpus_map = $('canvas#corpus-map');
-      _$corpus_map.on('corpus-cliked-on-map', function(e) {
+      _$corpus_map
+        .on('corpus-cliked-on-map', function(e) {
           console.log('theme : corpus-cliked-on-map');
           backToFrontPage();
+        })
+        .on('corpus-cliked-on-node', function(e) {
+          console.log('theme : corpus-cliked-on-node', e);
+          _audio_player.loadSound(e.target_node.audio_url);
         });
     }
 

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

@@ -1134,6 +1134,7 @@ footer[role="contentinfo"] {
   pointer-events: none; }
 
 header[role="banner"] {
+  position: relative;
   padding: 0 0 1em 0;
   border-bottom: 1px solid red;
   pointer-events: all; }
@@ -1290,6 +1291,38 @@ body.ajax-loading main[role="main"]:before {
   background-position: center;
   border-radius: 30px; }
 
+#audio-player {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: white;
+  height: 100%;
+  min-width: 300px;
+  max-width: 500px;
+  z-index: 20;
+  outline: 1px dotted green; }
+  #audio-player .time-line {
+    position: relative;
+    width: 50px;
+    height: 1px;
+    background-color: #000;
+    overflow: visible;
+    -webkit-transform: rotateZ(-45deg);
+    transform: rotateZ(-45deg); }
+    #audio-player .time-line .loader {
+      width: 0;
+      height: 100%;
+      background-color: red;
+      top: 0;
+      left: 0; }
+    #audio-player .time-line .cursor {
+      height: 10px;
+      width: 0;
+      border-left: 2px solid red;
+      position: absolute;
+      left: 0;
+      top: -5px; }
+
 body.path-agenda main .col > .wrapper {
   height: 100%; }
 

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

@@ -19,6 +19,110 @@
       if (_$body.is('.path-productions')) {
         initProductions();
       }
+      initAudioPlayer();
+    };
+
+
+    //    _          _ _
+    //   /_\ _  _ __| (_)___
+    //  / _ \ || / _` | / _ \
+    // /_/ \_\_,_\__,_|_\___/
+    //
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
+    // https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
+    // https://www.binarytides.com/using-html5-audio-element-javascript/
+    //
+    function initAudioPlayer(){
+      _audio_player = new AudioPlayer();
+    };
+    function AudioPlayer(){
+      var that = this;
+      this.fid;
+      this.audio = new Audio();
+      // audio events
+      this.audio_events = ["loadedmetadata","progress","canplay","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.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();
+      }
     };
 
     //  ___             _ _ ___
@@ -37,7 +141,6 @@
     //  / _ \ | / _` \ \ /
     // /_/ \_\/ \__,_/_\_\
     //      |__/
-
     // TODO: add url hash nav
     // TODO: implement history.js
     function  initAjaxLinks(){
@@ -142,9 +245,14 @@
     function onCorpusMapReady(e){
       console.log('theme : onCorpusReady');
       _$corpus_map = $('canvas#corpus-map');
-      _$corpus_map.on('corpus-cliked-on-map', function(e) {
+      _$corpus_map
+        .on('corpus-cliked-on-map', function(e) {
           console.log('theme : corpus-cliked-on-map');
           backToFrontPage();
+        })
+        .on('corpus-cliked-on-node', function(e) {
+          console.log('theme : corpus-cliked-on-node', e);
+          _audio_player.loadSound(e.target_node.audio_url);
         });
     }
 

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

@@ -20,6 +20,7 @@
 }
 
 header[role="banner"]{
+  position: relative;
   padding:0 0 1em 0;
   border-bottom: 1px solid red;
   pointer-events: all;
@@ -182,6 +183,39 @@ main[role="main"]{
 }
 
 
+//    _          _ _     ___ _
+//   /_\ _  _ __| (_)___| _ \ |__ _ _  _ ___ _ _
+//  / _ \ || / _` | / _ \  _/ / _` | || / -_) '_|
+// /_/ \_\_,_\__,_|_\___/_| |_\__,_|\_, \___|_|
+//                                  |__/
+#audio-player{
+  position: absolute;
+  top:0; left:0;
+  background-color: white;
+  height:100%; min-width: 300px; max-width:500px;
+  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;
+    }
+    .cursor{
+      height:10px;width:0;
+      border-left: 2px solid red;
+      position:absolute;
+      left:0; top:-5px;
+    }
+  }
+}
+
  //    _    _            _  _         _
  //   /_\  (_)__ ___ __ | \| |___  __| |___
  //  / _ \ | / _` \ \ / | .` / _ \/ _` / -_)