').addClass('current-time').html('00:00').appendTo(this.$time);
+ this.$duration = $('
').addClass('duration').html('00:00').appendTo(this.$time);
- if (typeof AudioPlayer.initialized == "undefined") {
+ // hiding
+ this.hideTimer = false;
+ this.hideTimeMS = 10000;
- 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('
'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
- };
-
- 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('
'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
- };
-
- AudioPlayer.prototype.onEnded = function(){
- console.log('AudioPlayer onEnded');
- };
-
- AudioPlayer.initialized = true;
- this.init();
- }
+ 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('
'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
+ 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();
+ }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('
'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
+ },
+ 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);
});
}
diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
index 6d0f78ae2..ac479a193 100644
--- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
+++ b/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;
diff --git a/sites/all/themes/custom/edlptheme/assets/img/audio-player-next.svg b/sites/all/themes/custom/edlptheme/assets/img/audio-player-next.svg
new file mode 100644
index 000000000..ea23c7406
--- /dev/null
+++ b/sites/all/themes/custom/edlptheme/assets/img/audio-player-next.svg
@@ -0,0 +1,73 @@
+
+
+
+
diff --git a/sites/all/themes/custom/edlptheme/assets/img/audio-player-pause.svg b/sites/all/themes/custom/edlptheme/assets/img/audio-player-pause.svg
new file mode 100644
index 000000000..a5defcdc2
--- /dev/null
+++ b/sites/all/themes/custom/edlptheme/assets/img/audio-player-pause.svg
@@ -0,0 +1,84 @@
+
+
+
+
diff --git a/sites/all/themes/custom/edlptheme/assets/img/audio-player-play.svg b/sites/all/themes/custom/edlptheme/assets/img/audio-player-play.svg
new file mode 100644
index 000000000..4a224a21d
--- /dev/null
+++ b/sites/all/themes/custom/edlptheme/assets/img/audio-player-play.svg
@@ -0,0 +1,73 @@
+
+
+
+
diff --git a/sites/all/themes/custom/edlptheme/assets/img/audio-player-previous.svg b/sites/all/themes/custom/edlptheme/assets/img/audio-player-previous.svg
new file mode 100644
index 000000000..8847fc6a5
--- /dev/null
+++ b/sites/all/themes/custom/edlptheme/assets/img/audio-player-previous.svg
@@ -0,0 +1,73 @@
+
+
+
+
diff --git a/sites/all/themes/custom/edlptheme/assets/img/edlp-loader-anim.svg b/sites/all/themes/custom/edlptheme/assets/img/edlp-loader-anim.svg
index 0ce20ab08..ffd779d55 100644
--- a/sites/all/themes/custom/edlptheme/assets/img/edlp-loader-anim.svg
+++ b/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)">
+
+
-
diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
index 247831be1..cc6746d89 100644
--- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js
+++ b/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 = $('
')
- .appendTo('header[role="banner"] .region-header');
- this.$timeline = $('
').addClass('time-line').appendTo(this.$container);
- this.$loader = $('
').addClass('loader').appendTo(this.$timeline);
- this.$cursor = $('
').addClass('cursor').appendTo(this.$timeline);
- this.$duration = $('
').addClass('duration').appendTo(this.$container);
- this.$currentTime = $('
').addClass('current-time').appendTo(this.$container);
+ this.$container = $('
');
+ // btns
+ this.$btns = $('
').addClass('btns').appendTo(this.$container);
+ this.$previous = $('
').addClass('previous').appendTo(this.$btns);
+ this.$playpause = $('
').addClass('play-pause').appendTo(this.$btns);
+ this.$next = $('
').addClass('next').appendTo(this.$btns);
+ // timeline
+ this.$timelinecont= $('
').addClass('time-line-container').appendTo(this.$container);
+ this.$timeline = $('
').addClass('time-line').appendTo(this.$timelinecont);
+ this.$loader = $('
').addClass('loader').appendTo(this.$timeline);
+ this.$cursor = $('
').addClass('cursor').appendTo(this.$timeline);
+ // time
+ this.$time = $('
').addClass('time').appendTo(this.$container);
+ this.$currentTime = $('
').addClass('current-time').html('00:00').appendTo(this.$time);
+ this.$duration = $('
').addClass('duration').html('00:00').appendTo(this.$time);
- if (typeof AudioPlayer.initialized == "undefined") {
+ // hiding
+ this.hideTimer = false;
+ this.hideTimeMS = 10000;
- 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(''+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
- };
-
- 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(''+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
- };
-
- AudioPlayer.prototype.onEnded = function(){
- console.log('AudioPlayer onEnded');
- };
-
- AudioPlayer.initialized = true;
- this.init();
- }
+ 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(''+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
+ 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();
+ }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(''+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
+ },
+ 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);
});
}
diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
index a5ae633d4..ca8a82259 100644
--- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss
+++ b/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;