bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

seeking

Browse Source
This commit is contained in:
bachir
2018-09-13 12:01:42 +02:00
parent a079425b7f
commit f5ae8b6532
4 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+3 -2
View File
@@ -34,13 +34,14 @@ var sys_path=$(this).attr('data-drupal-link-system-path');if(sys_path=='<front>'
var view_mode=$link.attr('viewmode');var state=getSysPathState(sys_path,view_mode);state.url=$(this).attr('href');if(view_mode){state.url+="#"+view_mode;}
if($link.is('[selector]')){state.selector=$link.attr('selector');}
$link.addClass('ajax-loading');ajaxLoadContent(state);return false;};function onCorpusMapReady(e){_corpus_ready=true;_$corpus_canvas=$('canvas#corpus-map');_$corpus_canvas.on('corpus-cliked-on-map',function(e){backToFrontPage();}).on('corpus-cliked-on-node',function(e){_audioPlayer.emmit('stop-shuffle').setAutoOpenArticle(e.article).openDocument(e.target_node);});_randomPlayer=new RandomPlayer(e.playlist);_$body.attr('corpus-map','ready');}
function openEntree(tid){if(tid){closeAllModals();_$body.removeClass();if(_corpus_ready){_$corpus_canvas.trigger({type:'open-entree',tid:tid});}else{$('li.entree[tid="'+tid+'"] a.term-link').addClass('is-active');}}};function checkVisibleCorpusMapSpace(){var left_limit=0,right_limit=0;_$row.find('.col').each(function(i,e){var $col=$(this);var offset=$col.offset();switch(true){case $col.is('.float-right'):right_limit=Math.max(right_limit,Math.abs(offset.left-window.innerWidth));break;default:left_limit=Math.max(left_limit,offset.left+$col.width());break;}});void 0;if(_corpus_ready){_$body.trigger({type:'visible-space-changed',left_limit:left_limit,right_limit:right_limit});}else{_corpus_promise.done(function(){_$body.trigger({type:'visible-space-changed',left_limit:left_limit,right_limit:right_limit});});}};function AudioPlayer(){var that=this;this.fid;this.audio=new Audio();this.audio_events=["loadedmetadata","playing","pause","timeupdate","ended","error"];this.$container=$('<div id="audio-player">');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);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);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);this.$fav=$('<div>').addClass('favoris').appendTo(this.$container);this.$cartel=$('<div>').addClass('cartel').appendTo(this.$container);this.scndCartel_visible=0;this.cartelSwitchIntervalMS=7000;this.cartelSwitchInterval=false;this.hideTimer=false;this.hideTimeMS=15000;this.currentHistoricIndex=null;this.historic=[];this.shuffle_is_active=false;this.auto_open_article=false;this.event_handlers={'audio-open-document':[],'audio-play':[],'audio-pause':[],'audio-play-next':[],'audio-ended':[],'stop-shuffle':[]};this.init();};AudioPlayer.prototype={init(){this.$container_parent=$('header[role="banner"] .region-header');this.$container.appendTo(this.$container_parent);this.timeline_w=parseInt(this.$timeline.width());var fn='';for(var i=0;i<this.audio_events.length;i++){fn=this.audio_events[i];fn='on'+fn.charAt(0).toUpperCase()+fn.slice(1);this.audio.addEventListener(this.audio_events[i],this[fn].bind(this),true);}
function openEntree(tid){if(tid){closeAllModals();_$body.removeClass();if(_corpus_ready){_$corpus_canvas.trigger({type:'open-entree',tid:tid});}else{$('li.entree[tid="'+tid+'"] a.term-link').addClass('is-active');}}};function checkVisibleCorpusMapSpace(){var left_limit=0,right_limit=0;_$row.find('.col').each(function(i,e){var $col=$(this);var offset=$col.offset();switch(true){case $col.is('.float-right'):right_limit=Math.max(right_limit,Math.abs(offset.left-window.innerWidth));break;default:left_limit=Math.max(left_limit,offset.left+$col.width());break;}});void 0;if(_corpus_ready){_$body.trigger({type:'visible-space-changed',left_limit:left_limit,right_limit:right_limit});}else{_corpus_promise.done(function(){_$body.trigger({type:'visible-space-changed',left_limit:left_limit,right_limit:right_limit});});}};function AudioPlayer(){var that=this;this.fid;this.audio=new Audio();this.audio_events=["loadedmetadata","playing","pause","timeupdate","ended","error"];this.$container=$('<div id="audio-player">');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);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);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);this.$fav=$('<div>').addClass('favoris').appendTo(this.$container);this.$cartel=$('<div>').addClass('cartel').appendTo(this.$container);this.scndCartel_visible=0;this.cartelSwitchIntervalMS=7000;this.cartelSwitchInterval=false;this.hideTimer=false;this.hideTimeMS=15000;this.currentHistoricIndex=null;this.historic=[];this.shuffle_is_active=false;this.auto_open_article=false;this.event_handlers={'audio-open-document':[],'audio-play':[],'audio-pause':[],'audio-play-next':[],'audio-ended':[],'stop-shuffle':[]};this.init();};AudioPlayer.prototype={init(){this.$container_parent=$('header[role="banner"] .region-header');this.$container.appendTo(this.$container_parent);this.timeline_w=parseInt(this.$timeline.width());this.$loader.on('click',this.seek.bind(this));var fn='';for(var i=0;i<this.audio_events.length;i++){fn=this.audio_events[i];fn='on'+fn.charAt(0).toUpperCase()+fn.slice(1);this.audio.addEventListener(this.audio_events[i],this[fn].bind(this),true);}
this.$previous.on('click',this.playPrevious.bind(this));this.$playpause.on('click',this.togglePlayPause.bind(this));this.$next.on('click',this.playNext.bind(this));},openDocument(node,caller,historic_index){void 0;if(typeof node=='undefined'||typeof node.nid=='undefined'||typeof node.audio_url=='undefined'){void 0;return false;}
if(typeof caller=='undefined'||caller!='popstate'){this.historic.push(node);this.currentHistoricIndex=this.historic.length-1;if(caller!="history_first_load"){if(typeof node.document_url=='undefined'){void 0;}else{var state={audio:true,node:{nid:node.nid,audio_url:node.audio_url,document_url:node.document_url,title:node.title||null,},historic_index:this.currentHistoricIndex,};var url=node.document_url+(caller=='random'?'#random':'');history.pushState(state,null,url);}}}else{this.currentHistoricIndex=historic_index;}
if(_$body.is('.path-frontpage')){closeAllModals();}
this.emmit('audio-open-document',{caller:caller});if(typeof _paq!=='undefined'){if(typeof node.title!='undefined'){_paq.push(['trackEvent','Audio','play',node.title]);}}
this.launch();},launch(){this.clearTimeOutToHide();this.clearIntervalAutoCartelSwitch();this.setSRC(this.historic[this.currentHistoricIndex].audio_url);this.loadNode(this.historic[this.currentHistoricIndex].nid);try{_$corpus_canvas.trigger({'type':'audio-node-opened','nid':this.historic[this.currentHistoricIndex].nid});}catch(e){void 0;var that=this;_corpus_promise.done(function(){_$corpus_canvas.trigger({'type':'audio-node-opened','nid':that.historic[that.currentHistoricIndex].nid});});}
this.showHidePreviousBtn();this.showHideNextBtn();this.show();},openSound(url,title){this.hide();this.clearTimeOutToHide();this.$cartel.html("");this.setSRC(url);this.show();if(typeof _paq!=='undefined'){_paq.push(['trackEvent','Audio','play',url]);}},setSRC(url){void 0;this.audio.src=url;this.play();},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(){void 0;if(this.audio.buffered.length>0){this.$loader.css({'width':parseInt((100*this.audio.buffered.end(0)/this.audio.duration),10)+'%'});if(this.audio.buffered.end(0)<this.audio.duration){window.requestAnimationFrame(this.updateLoadingBar.bind(this));}else{void 0;}}else{window.requestAnimationFrame(this.updateLoadingBar.bind(this));}},onError(){void 0;},play(){this.clearTimeOutToHide();var promise=this.audio.play();if(promise!==undefined){promise.catch(function(error){void 0;}).then(function(){void 0;});}},playPrevious(){if(this.currentHistoricIndex>0){this.currentHistoricIndex-=1;this.launch();}},playNext(){if(this.currentHistoricIndex<this.historic.length-1){this.currentHistoricIndex+=1;this.launch();}else{this.emmit('audio-play-next');}},togglePlayPause(e){if(this.audio.paused){this.play();}else{this.stop();}},stop(){this.audio.pause();if(!(_$body.is('.path-node-'+this.historic[this.currentHistoricIndex].nid)&&(_$body.is('.view-mode-article')||_$body.is('.view-mode-transcript')))){this.timeOutToHide();}},onPlaying(){this.$btns.addClass('is-playing');this.emmit('audio-play');},onPause(){this.$btns.removeClass('is-playing');this.emmit('audio-pause');},onTimeupdate(){this.$cursor.css({'left':(this.audio.currentTime/this.audio.duration*this.timeline_w)+"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>');},onEnded(){void 0;this.stop();this.emmit('audio-ended');},loadNode(nid){this.$cartel.addClass('loading');var vm='player_cartel';var ajax_path=_ajax_settings.entityjson_path+'/node/'+nid+'/'+vm;var path=window.location.origin+Drupal.url(ajax_path);$.getJSON(path,{}).done(this.onNodeLoaded.bind(this)).fail(this.onNodeLoadFail.bind(this));},onNodeLoaded(data){this.$cartel.html(data.rendered).removeClass('loading');_$body.trigger({'type':'new-audio-cartel-loaded'});initAjaxLinks();this.cartelSwitchInterval=setInterval(this.switchCartel.bind(this),this.cartelSwitchIntervalMS);Drupal.attachBehaviors(this.$cartel);if(this.auto_open_article){this.$cartel.find('a.link-article').trigger('click');this.auto_open_article=false;}},onNodeLoadFail(jqxhr,textStatus,error){void 0;this.$cartel.removeClass('loading').html('');},setAutoOpenArticle(art){this.auto_open_article=art;return this;},show(){this.$container_parent.addClass('audio-player-visible');this.$container.addClass('visible');},showHidePreviousBtn(){if(this.historic.length>1&&this.currentHistoricIndex>0){this.$previous.addClass('is-active');}else{this.$previous.removeClass('is-active');}},showHideNextBtn(){if(this.currentHistoricIndex<this.historic.length-1||this.shuffle_is_active){this.$next.addClass('is-active');}else{this.$next.removeClass('is-active');}},timeOutToHide(){this.clearTimeOutToHide();this.hideTimer=setTimeout(this.hide.bind(this),this.hideTimeMS);},clearTimeOutToHide(){if(this.hideTimer){clearTimeout(this.hideTimer);this.hideTimer=false;}},switchCartel(){if(this.scndCartel_visible){this.$cartel.removeClass('second-visible');this.scndCartel_visible=0;}else{this.$cartel.addClass('second-visible');this.scndCartel_visible=1;}},clearIntervalAutoCartelSwitch(){if(this.cartelSwitchInterval){clearInterval(this.cartelSwitchInterval);this.cartelSwitchInterval=false;}},hide(){this.$container_parent.removeClass('audio-player-visible');this.$container.removeClass('visible');try{_$corpus_canvas.trigger('audio-node-closed');}catch(e){void 0;}},deActivateRandom(){this.shuffle_is_active=false;this.showHideNextBtn();},on(event_name,handler){if(typeof this.event_handlers[event_name]=='undefined'){void 0;}
this.showHidePreviousBtn();this.showHideNextBtn();this.show();},openSound(url,title){this.hide();this.clearTimeOutToHide();this.$cartel.html("");this.setSRC(url);this.show();if(typeof _paq!=='undefined'){_paq.push(['trackEvent','Audio','play',url]);}},setSRC(url){void 0;this.audio.src=url;this.play();},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(){void 0;if(this.audio.buffered.length>0){this.$loader.css({'width':parseInt((100*this.audio.buffered.end(0)/this.audio.duration),10)+'%'});if(this.audio.buffered.end(0)<this.audio.duration){window.requestAnimationFrame(this.updateLoadingBar.bind(this));}else{void 0;}}else{window.requestAnimationFrame(this.updateLoadingBar.bind(this));}},onError(){void 0;},play(){this.clearTimeOutToHide();var promise=this.audio.play();if(promise!==undefined){promise.catch(function(error){void 0;}).then(function(){void 0;});}},playPrevious(){if(this.currentHistoricIndex>0){this.currentHistoricIndex-=1;this.launch();}},playNext(){if(this.currentHistoricIndex<this.historic.length-1){this.currentHistoricIndex+=1;this.launch();}else{this.emmit('audio-play-next');}},togglePlayPause(e){if(this.audio.paused){this.play();}else{this.stop();}},stop(){this.audio.pause();if(!(_$body.is('.path-node-'+this.historic[this.currentHistoricIndex].nid)&&(_$body.is('.view-mode-article')||_$body.is('.view-mode-transcript')))){this.timeOutToHide();}},seek(e){var seek=e.originalEvent.layerX/this.timeline_w*this.audio.duration
void 0;this.audio.currentTime=seek;},onPlaying(){this.$btns.addClass('is-playing');this.emmit('audio-play');},onPause(){this.$btns.removeClass('is-playing');this.emmit('audio-pause');},onTimeupdate(){this.$cursor.css({'left':(this.audio.currentTime/this.audio.duration*this.timeline_w)+"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>');},onEnded(){void 0;this.stop();this.emmit('audio-ended');},loadNode(nid){this.$cartel.addClass('loading');var vm='player_cartel';var ajax_path=_ajax_settings.entityjson_path+'/node/'+nid+'/'+vm;var path=window.location.origin+Drupal.url(ajax_path);$.getJSON(path,{}).done(this.onNodeLoaded.bind(this)).fail(this.onNodeLoadFail.bind(this));},onNodeLoaded(data){this.$cartel.html(data.rendered).removeClass('loading');_$body.trigger({'type':'new-audio-cartel-loaded'});initAjaxLinks();this.cartelSwitchInterval=setInterval(this.switchCartel.bind(this),this.cartelSwitchIntervalMS);Drupal.attachBehaviors(this.$cartel);if(this.auto_open_article){this.$cartel.find('a.link-article').trigger('click');this.auto_open_article=false;}},onNodeLoadFail(jqxhr,textStatus,error){void 0;this.$cartel.removeClass('loading').html('');},setAutoOpenArticle(art){this.auto_open_article=art;return this;},show(){this.$container_parent.addClass('audio-player-visible');this.$container.addClass('visible');},showHidePreviousBtn(){if(this.historic.length>1&&this.currentHistoricIndex>0){this.$previous.addClass('is-active');}else{this.$previous.removeClass('is-active');}},showHideNextBtn(){if(this.currentHistoricIndex<this.historic.length-1||this.shuffle_is_active){this.$next.addClass('is-active');}else{this.$next.removeClass('is-active');}},timeOutToHide(){this.clearTimeOutToHide();this.hideTimer=setTimeout(this.hide.bind(this),this.hideTimeMS);},clearTimeOutToHide(){if(this.hideTimer){clearTimeout(this.hideTimer);this.hideTimer=false;}},switchCartel(){if(this.scndCartel_visible){this.$cartel.removeClass('second-visible');this.scndCartel_visible=0;}else{this.$cartel.addClass('second-visible');this.scndCartel_visible=1;}},clearIntervalAutoCartelSwitch(){if(this.cartelSwitchInterval){clearInterval(this.cartelSwitchInterval);this.cartelSwitchInterval=false;}},hide(){this.$container_parent.removeClass('audio-player-visible');this.$container.removeClass('visible');try{_$corpus_canvas.trigger('audio-node-closed');}catch(e){void 0;}},deActivateRandom(){this.shuffle_is_active=false;this.showHideNextBtn();},on(event_name,handler){if(typeof this.event_handlers[event_name]=='undefined'){void 0;}
this.event_handlers[event_name].push(handler);return this;},emmit(event_name,args){void 0;var handler;var args=args||{};for(var i=this.event_handlers[event_name].length-1;i>=0;i--){handler=this.event_handlers[event_name][i];(function(handler,args){setTimeout(function(){handler(args);},0);}(handler,args));}
return this;},}
function RandomPlayer(playlist){this.active=false;this.playlist=playlist;this.path=drupalSettings.path.baseUrl+drupalSettings.path.pathPrefix+'#random'
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+8
View File
@@ -889,6 +889,8 @@
this.$container.appendTo(this.$container_parent);
// record timeline width
this.timeline_w = parseInt(this.$timeline.width());
// init seeking
this.$loader.on('click', this.seek.bind(this));
// init audio events
var fn = '';
for (var i = 0; i < this.audio_events.length; i++) {
@@ -1016,6 +1018,7 @@
// need to trigger play right now to prevent safari blocking auto-play
this.play();
},
// audio is ready to play
onLoadedmetadata(){
var rem = parseInt(this.audio.duration, 10),
mins = Math.floor(rem/60,10),
@@ -1103,6 +1106,11 @@
this.timeOutToHide();
}
},
seek(e){
var seek = e.originalEvent.layerX / this.timeline_w * this.audio.duration
console.log("Audio seeking : seek", seek);
this.audio.currentTime = seek;
},
// audio events
onPlaying(){
this.$btns.addClass('is-playing');
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+8 -2
View File
@@ -675,16 +675,22 @@ main[role="main"]{
background-color: #000;
overflow: visible;
transform: rotateZ(-46deg);
// outline: 3px solid blue;
.loader{
width:0; height:100%;
width:0; height:1px;
background-color: red;
top:0;left:0;
border-top: 2px solid white;
border-bottom: 2px solid white;
position: absolute;
top:-2px;left:0;
cursor: pointer;
}
.cursor{
height:10px;width:0;
border-left: 2px solid red;
position:absolute;
left:0; top:-5px;
pointer-events: none;
}
}
}