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

compo player improvement, fix #178

Browse Source
This commit is contained in:
bachir
2019-12-02 20:32:44 +01:00
parent 55f7def7cb
commit 8b4d7ea685
3 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/modules/custom/edlp_studio/assets/scripts/edlp_studio.js
-1
View File
@@ -95,7 +95,6 @@
.on('click', onClickDeleteCompoLink)
.addClass('ajax-enabled');
};
function initUsedChutierInCompo(){
console.log('initUsedChutierInCompo');
$('.chutier-link.on-compo', '#studio-ui .chutier_ui').removeClass('on-compo');
web/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+8 -5
View File
@@ -35,7 +35,9 @@ else if(e.state.audio){_audioPlayer.openDocument(e.state.node,'popstate',e.state
else{if(e.state.entree_tid){openEntree(e.state.entree_tid);}
if(e.state.ajax_path){e.state.url=null;ajaxLoadContent(e.state);}}};function initAjaxLinks(){$('a','#block-mainnavigation').add('a','#block-mainnavigation-2').add('a','#block-footer.menu--footer').add('a','#block-productions').add('a','article.node:not(.node--type-enregistrement) h2.node-title').add('a','.productions-subtree').add('a','.productions-parent').add('a','.field--name-field-son').addClass('ajax-link');if(!_is_mobile){$('a.site-name','#block-edlptheme-branding').addClass('ajax-link');}
_$ajaxLinks=$('.ajax-link');activateAjaxLinks();};function activateAjaxLinks(){_$ajaxLinks.each(function(i,e){var $this=$(this);if($this.is('.ajax-enable'))return;if($this.attr('data-drupal-link-system-path')||$this.is('[type^="audio"]')){$this.on('click',onClickAjaxLink).addClass('ajax-enable');}});};function onClickAjaxLink(e){e.preventDefault();var $link=$(this);if($link.is('.is-active')&&!$link.is('.site-name'))
return false;if($link.is('.audio-link')){caller=$link.parents('.lastdocs, .lastdocs-home').length?'lastdocs':null;_audioPlayer.emmit('stop-shuffle').openDocument({nid:$link.attr('nid'),audio_url:$link.attr('audio_url'),title:$link.find('.field--name-title').html()},caller);return false;}
return false;if($link.is('.audio-link')){caller=$link.parents('.lastdocs, .lastdocs-home').length?'lastdocs':null;if(!caller){caller=$link.parents('#studio-ui').length?'studio-compo':null;}
if(caller=='studio-compo'){var index=$link.parents('.field__item').index();void 0;_compoPlayer.start(index);}else{_audioPlayer.emmit('stop-shuffle').openDocument({nid:$link.attr('nid'),audio_url:$link.attr('audio_url'),title:$link.find('.field--name-title').html()},caller);}
return false;}
if($link.is('[type^="audio"]')){_audioPlayer.emmit('stop-shuffle').openSound($link.attr('href'),$link.html());return false;}
var sys_path=$(this).attr('data-drupal-link-system-path');if(sys_path=='<front>'){if(!_is_mobile){if($link.is('.is-active')&&_corpus_ready){_$corpus_canvas.trigger({'type':'shuffle-collection'});}else{backToFrontPage();}
return false;}}
@@ -44,7 +46,7 @@ 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').openDocument(e.target_node);});_randomPlayer=new RandomPlayer(e.playlist);initAjaxLinks();_$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();void 0;switch(true){case $col.is('.float-right'):right_limit=Math.max(right_limit,Math.abs(offset.left-15-window.innerWidth));break;default:left_limit=Math.max(left_limit,offset.left+$col.width()+15);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(typeof caller=='undefined'||caller!='popstate'){void 0;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')&&caller!=='lastdocs'&&!_is_mobile){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);if(!_is_mobile){this.loadNode(this.historic[this.currentHistoricIndex].nid);}
@@ -58,15 +60,16 @@ function RandomPlayer(playlist){this.active=false;this.playlist=playlist;this.pa
this.$btn=$('<a>').html('Shuffle').attr('href',this.path).attr('alt',drupalSettings.edlp_corpus.random_link_title).addClass('random-player-btn');this.init();};RandomPlayer.prototype={init(){$('<div>').addClass('block random-player').append(this.$btn).prependTo('.region-footer-right');this.$btn.on('click',this.toggleActive.bind(this));_audioPlayer.on('audio-play-next',this.onAudioPlayNext.bind(this)).on('audio-ended',this.onAudioPlayerEnded.bind(this)).on('stop-shuffle',this.stop.bind(this));_$corpus_canvas.on('update-random-playlist',this.updatePlaylist.bind(this));if(window.location.hash=='#random'){this.start();}},updatePlaylist(e){this.playlist=e.playlist;this.shuffle();},shuffle(){var tempPLaylist=[];for(var i=this.playlist.length-1;i>=0;i--){tempPLaylist.push(this.playlist[i]);}
this.shuffledPlaylist=[];while(tempPLaylist.length>0){var r=Math.floor(Math.random()*tempPLaylist.length);this.shuffledPlaylist.push(tempPLaylist.splice(r,1)[0]);}},toggleActive(e){e.preventDefault();if(this.active){this.stop();}else{this.start();}
return false;},start(){this.active=_audioPlayer.shuffle_is_active=true;this.$btn.addClass('is-active');this.shuffle();this.next();if(typeof _paq!=='undefined'){_paq.push(['trackEvent','RandomPlayer','start']);}},stop(){this.active=false;this.$btn.removeClass('is-active');history.replaceState(history.state,null,window.location.pathname);_audioPlayer.deActivateRandom();if(typeof _paq!=='undefined'){_paq.push(['trackEvent','RandomPlayer','stop']);}},next(){void 0;if(this.active&&this.shuffledPlaylist.length>0)
_audioPlayer.openDocument(this.shuffledPlaylist.splice(0,1)[0],'random');},onAudioPlayNext(){void 0;if(this.active){this.next();}},onAudioPlayerEnded(){void 0;if(this.active){this.next();}}};function CompoPlayer(){this.active=false;this.playing=false;this.paused=false;this.playlist=[];this.current_index=0;this.$composer=null;this.$compo=null;this.$controls=null;this.init();};CompoPlayer.prototype={init(){_audioPlayer.on('audio-open-document',this.onAudioOpenDocument.bind(this)).on('audio-play',this.onAudioPlayerPlay.bind(this)).on('audio-pause',this.onAudioPlayerPause.bind(this)).on('audio-ended',this.onAudioPlayerEnded.bind(this));},newCompo(){this.initControls();},initControls(){this.$composer=$('.composition_ui .composer');this.$compo=$('.composition_ui .composer .composition');this.$controls=$('.composition_ui .composer .compo-player-controls');if(!this.$controls.is('.ready')&&this.$compo){this.$previous=$('<div>').addClass('previous').on('click',this.prev.bind(this)).appendTo(this.$controls);this.$playpause=$('<div>').addClass('play-pause').on('click',this.togglePlayPause.bind(this)).appendTo(this.$controls);this.$next=$('<div>').addClass('next').on('click',this.next.bind(this)).appendTo(this.$controls);this.$controls.addClass('ready');this.refresh();this.active=true;}},refresh(){this.stop();this.playlist=[];var that=this;$('.field--name-documents .field__item',this.$compo).each(function(i,el){var $link=$('a.audio-link',this);that.playlist.push({item:$(this),audio_url:$link.attr("audio_url"),nid:$link.attr("nid"),});});this.showHideControls();},togglePlayPause(){if(this.playing&&!this.paused){this.pause();}else{if(this.playing&&this.paused){this.play();}else{this.start();}}},start(){this.playing=true;this.play();},play(){if(this.paused){this.paused=false;_audioPlayer.play();}else{_audioPlayer.emmit('stop-shuffle').openDocument(this.playlist[this.current_index],this);}
this.setActiveItem().showHideControls();},pause(){this.paused=true;this.showHideControls();_audioPlayer.stop();},next(){if(this.playing){this.current_index+=1;if(this.current_index<this.playlist.length){this.play();}else{this.stop();}}},prev(){if(this.playing){this.current_index-=1;if(this.current_index>=0){this.play();}else{this.stop();}}},stop(){if(this.playing){_audioPlayer.stop();}
_audioPlayer.openDocument(this.shuffledPlaylist.splice(0,1)[0],'random');},onAudioPlayNext(){void 0;if(this.active){this.next();}},onAudioPlayerEnded(){void 0;if(this.active){this.next();}}};function CompoPlayer(){this.active=false;this.playing=false;this.paused=false;this.playlist=[];this.current_index=0;this.$composer=null;this.$compo=null;this.$controls=null;this.init();};CompoPlayer.prototype={init(){_audioPlayer.on('audio-open-document',this.onAudioOpenDocument.bind(this)).on('audio-play',this.onAudioPlayerPlay.bind(this)).on('audio-pause',this.onAudioPlayerPause.bind(this)).on('audio-ended',this.onAudioPlayerEnded.bind(this));},newCompo(){void 0;this.initControls();},initControls(){this.$composer=$('.composition_ui .composer');this.$compo=$('.composition_ui .composer .composition');this.$controls=$('.composition_ui .composer .compo-player-controls');if(!this.$controls.is('.ready')&&this.$compo){this.$previous=$('<div>').addClass('previous').on('click',this.prev.bind(this)).appendTo(this.$controls);this.$playpause=$('<div>').addClass('play-pause').on('click',this.togglePlayPause.bind(this)).appendTo(this.$controls);this.$next=$('<div>').addClass('next').on('click',this.next.bind(this)).appendTo(this.$controls);this.$controls.addClass('ready');this.active=true;}
this.refresh();},refresh(){this.stop();this.playlist=[];var that=this;$('.field--name-documents .field__item',this.$compo).each(function(i,el){var $link=$('a.audio-link',this);that.playlist.push({item:$(this),audio_url:$link.attr("audio_url"),nid:$link.attr("nid"),});});this.showHideControls();},togglePlayPause(){if(this.playing&&!this.paused){this.pause();}else{if(this.playing&&this.paused){this.play();}else{this.start();}}},start(i){this.current_index=i||0;this.playing=true;this.play();},play(){void 0;if(this.paused){this.paused=false;_audioPlayer.play();}else{void 0;_audioPlayer.emmit('stop-shuffle').openDocument(this.playlist[this.current_index],this);}
this.setActiveItem().showHideControls();},pause(){this.paused=true;this.showHideControls();_audioPlayer.stop();},next(){void 0;if(this.playing){this.current_index+=1;if(this.current_index<this.playlist.length){this.play();}else{this.stop();}}},prev(){if(this.playing){this.current_index-=1;if(this.current_index>=0){this.play();}else{this.stop();}}},stop(){if(this.playing){_audioPlayer.stop();}
this.reset();},reset(){this.playing=false;this.paused=false;this.resetIndex();},resetIndex(){this.current_index=0;this.showHideControls().resetActiveItems();},setActiveItem(){this.resetActiveItems();if(this.playing&&this.current_index>=0){this.playlist[this.current_index].item.addClass('is-active');}
this.showHideControls();return this;},resetActiveItems(){for(var n=0;n<this.playlist.length;n++){this.playlist[n].item.removeClass('is-active');}
return this;},showHideControls(){if(this.$controls){if(this.playing&&!this.paused){this.$controls.addClass('is-playing');}else{this.$controls.removeClass('is-playing');}}
if(this.$playpause){if(this.playlist.length>0){this.$playpause.addClass('is-active');}else{this.$playpause.removeClass('is-active');}}
if(this.$next){if(this.playing&&this.playlist.length>1&&this.current_index<this.playlist.length-1){this.$next.addClass('is-active');}else{this.$next.removeClass('is-active');}}
if(this.$previous){if(this.playing&&this.playlist.length>1&&this.current_index>0){this.$previous.addClass('is-active');}else{this.$previous.removeClass('is-active');}}
return this;},deactivate(){this.stop();this.active=false;},onAudioOpenDocument(args){if(args.caller!==this){this.reset();}},onAudioPlayerPlay(){if(this.playing&&this.paused){this.paused=false;this.showHideControls();}},onAudioPlayerPause(){if(this.playing&&!this.paused){this.paused=true;this.showHideControls();}},onAudioPlayerEnded(){if(this.playing){this.next();}},};function initGrid(){void 0;if(!_is_mobile){checkGridBlockHeight();_$row.find('.col').addClass('offfield');}
return this;},deactivate(){this.stop();this.active=false;},onAudioOpenDocument(args){void 0;if(args.caller!==this){this.reset();}},onAudioPlayerPlay(){if(this.playing&&this.paused){this.paused=false;this.showHideControls();}},onAudioPlayerPause(){if(this.playing&&!this.paused){this.paused=true;this.showHideControls();}},onAudioPlayerEnded(){void 0;if(this.playing){this.paused=false;this.next();}},};function initGrid(){void 0;if(!_is_mobile){checkGridBlockHeight();_$row.find('.col').addClass('offfield');}
if(false){var $grid=$('.grid',_$row).masonry({itemSelector:'.col',columnWidth:'.col-2',containerStyle:null,resizeContainer:false,transitionDuration:0,});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});$grid.imagesLoaded(function(){$grid.masonry('layout');});$grid.on('layoutComplete',checkGridBlockVisible);}else{if(!_is_mobile){checkGridBlockVisible();}}};function checkGridBlockHeight(){var $r_h=_$row.height();var $this;$('.grid .col',_$row).each(function(i,e){$this=$(this);if(!$this.is('[init-height]')){$this.attr('init-height',$this.outerHeight())}
$this.height(Math.min($this.attr('init-height'),_$row.height()));});};function checkGridBlockVisible(){var $r_h=_$row.height();var $this,pos;$('.grid .col',_$row).each(function(i,e){$this=$(this);pos=$this.position();if(pos.top+$this.height()<=$r_h){$this.removeClass('offfield');}else{$this.addClass('offfield');}});}
function initCollectionNav(){void 0;$('.field--name-field-notice, .index','.taxonomy-term.vocabulary-entrees.home_mobile').addClass('closed');$('.field--name-field-notice>.field__label','.taxonomy-term.vocabulary-entrees.home_mobile').on('click',onClickCollectionNotice);$('.index>.field__label','.taxonomy-term.vocabulary-entrees.home_mobile').on('click',onClickCollectionIndex);};function onClickCollectionNotice(e){toggleEntreeOpening($(this).parent(),'notice');};function onClickCollectionIndex(e){toggleEntreeOpening($(this).parent(),'index');};function toggleEntreeOpening($e,part){$e.toggleClass('closed').parents('.taxonomy-term.vocabulary-entrees.home_mobile').toggleClass(part+'-opened');}
web/themes/custom/edlptheme/assets/scripts/main.js
+32 -14
View File
@@ -814,15 +814,26 @@
if($link.is('.audio-link')){
// check if caller is lastdocs block
caller = $link.parents('.lastdocs, .lastdocs-home').length ? 'lastdocs' : null;
// check if caller is studio composition
if(!caller){
caller = $link.parents('#studio-ui').length ? 'studio-compo' : null;
}
// open audio player
_audioPlayer
.emmit('stop-shuffle')
.openDocument({
nid:$link.attr('nid'),
audio_url:$link.attr('audio_url'),
title:$link.find('.field--name-title').html()
},
caller);
if(caller == 'studio-compo'){
var index = $link.parents('.field__item').index();
console.log('audio link caller', caller, index);
// _compoPlayer.setIndex(index);
_compoPlayer.start(index);
}else{
_audioPlayer
.emmit('stop-shuffle')
.openDocument({
nid:$link.attr('nid'),
audio_url:$link.attr('audio_url'),
title:$link.find('.field--name-title').html()
},
caller);
}
return false;
}
@@ -1065,6 +1076,7 @@
// if we don't come from history popstate
if(typeof caller == 'undefined' || caller != 'popstate'){
console.log('');
this.historic.push(node);
this.currentHistoricIndex = this.historic.length-1;
// this.shuffle_mode = shuffle_mode || false;
@@ -1567,7 +1579,7 @@
// this.newCompo();
},
newCompo(){
//console.log('CompoPlayer newCompo()');
console.log('CompoPlayer newCompo()');
// this.$compo = $('.composition_ui .composer .composition');
this.initControls();
},
@@ -1589,11 +1601,11 @@
this.$controls.addClass('ready');
this.refresh();
this.active = true;
// this.newCompo();
}
this.refresh();
},
refresh(){
// console.log('CompoPlayer refresh(), this', this);
@@ -1624,21 +1636,23 @@
}
}
},
start(){
start(i){
//console.log('start');
// console.log('CompoPlayer start()');
this.current_index = i || 0;
this.playing = true;
this.play();
},
play(){
// console.log('play');
console.log('CompoPlayer play()', this.playlist[this.current_index]);
if(this.paused){
this.paused = false;
_audioPlayer.play();
}else{
console.log('CompoPlayer opendoc with audio player');
// _audioPlayer;
_audioPlayer.emmit('stop-shuffle').openDocument(this.playlist[this.current_index], this);
// TODO: stop random player
}
this.setActiveItem().showHideControls();
},
@@ -1649,7 +1663,7 @@
_audioPlayer.stop();
},
next(){
// console.log('CompoPlayer next()');
console.log('CompoPlayer next()',this.playing);
if(this.playing){
this.current_index += 1;
if(this.current_index < this.playlist.length){
@@ -1743,6 +1757,7 @@
},
// _audioPlayer events
onAudioOpenDocument(args){
console.log('Compo player onAudioOpenDocument', args);
if(args.caller !== this){
// console.log('CompoPlayer onAudioOpenDocument() called by other');
this.reset();
@@ -1764,7 +1779,10 @@
}
},
onAudioPlayerEnded(){
console.log('onAudioPlayerEnded');
if(this.playing){
// this paused shoudn't be true but i'm lazzy to find why it is ...
this.paused = false;
this.next();
}
},