studio-ui composer is ready to test actively
This commit is contained in:
Bachir Soussi Chiadmi
@@ -6,8 +6,9 @@
|
||||
var _$corpus_canvas;
|
||||
var _$row = $('main[role="main"]>.layout-content>.row');
|
||||
var _$ajaxLinks;
|
||||
var _audio_player;
|
||||
var _audioPlayer;
|
||||
var _randomPlayer;
|
||||
var _compoPlayer;
|
||||
|
||||
// ___ _ _
|
||||
// |_ _|_ _ (_) |_
|
||||
@@ -20,7 +21,8 @@
|
||||
|
||||
_$body.on('corpus-map-ready', onCorpusMapReady);
|
||||
|
||||
_audio_player = new AudioPlayer();
|
||||
_audioPlayer = new AudioPlayer();
|
||||
_compoPlayer = new CompoPlayer();
|
||||
|
||||
initAjaxLinks();
|
||||
|
||||
@@ -42,271 +44,18 @@
|
||||
// |___|\_/\___|_||_\__/__/
|
||||
function initEvents(){
|
||||
$('body')
|
||||
.on('on-studio-chutier-updated', function(e){
|
||||
.on('on-studio-chutier-updated', initAjaxLinks)
|
||||
.on('on-studio-compo-updated', function(e){
|
||||
initAjaxLinks();
|
||||
_compoPlayer.refresh();
|
||||
})
|
||||
.on('search-results-loaded',function(e){
|
||||
.on('on-studio-compo-opened', function(e){
|
||||
initAjaxLinks();
|
||||
_compoPlayer.newCompo();
|
||||
})
|
||||
.on('open_entree', function(e){
|
||||
// e.tid available
|
||||
closeAllModals();
|
||||
})
|
||||
.on('close_entree', function(e){
|
||||
// e.tid available
|
||||
backToFrontPage();
|
||||
});
|
||||
}
|
||||
|
||||
// _ _ _
|
||||
// /_\ _ _ __| (_)___
|
||||
// / _ \ || / _` | / _ \
|
||||
// /_/ \_\_,_\__,_|_\___/
|
||||
//
|
||||
// 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 AudioPlayer(){
|
||||
var that = this;
|
||||
this.fid;
|
||||
this.audio = new Audio();
|
||||
// audio events
|
||||
this.audio_events = ["loadedmetadata","canplay","playing","pause","timeupdate","ended"];
|
||||
|
||||
// UI dom objects
|
||||
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);
|
||||
// favoris
|
||||
this.$fav = $('<div>').addClass('favoris').appendTo(this.$container);
|
||||
// cartel
|
||||
this.$cartel = $('<div>').addClass('cartel').appendTo(this.$container);
|
||||
|
||||
// hiding
|
||||
this.hideTimer = false;
|
||||
this.hideTimeMS = 10000;
|
||||
|
||||
// history
|
||||
this.currentHistoricIndex = null;
|
||||
this.historic = [];
|
||||
this.shuffle_is_active = false;
|
||||
|
||||
// object events
|
||||
this.event_handlers = {
|
||||
'audio-play-next':[],
|
||||
'audio-ended':[],
|
||||
'stop-shuffle':[]
|
||||
};
|
||||
|
||||
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.$previous.on('click', this.playPrevious.bind(this));
|
||||
this.$playpause.on('click', this.togglePlayPause.bind(this));
|
||||
this.$next.on('click', this.playNext.bind(this));
|
||||
// TODO: previous and next btns
|
||||
},
|
||||
openDocument(node){
|
||||
console.log('AudioPlayer openDocument', node);
|
||||
this.historic.push(node);
|
||||
this.currentHistoricIndex = this.historic.length-1;
|
||||
// this.shuffle_mode = shuffle_mode || false;
|
||||
this.launch();
|
||||
},
|
||||
launch(){
|
||||
this.clearTimeOutToHide();
|
||||
this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
|
||||
this.loadNode(this.historic[this.currentHistoricIndex].nid);
|
||||
// emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
|
||||
try {
|
||||
_$corpus_canvas.trigger({
|
||||
'type':'audio-node-opened',
|
||||
'nid':this.historic[this.currentHistoricIndex].nid
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('AudioPlayer : _$corpus_canvas does not exists');
|
||||
}
|
||||
|
||||
this.showHidePreviousBtn();
|
||||
this.showHideNextBtn();
|
||||
this.show();
|
||||
},
|
||||
// audio functions
|
||||
setSRC(url){
|
||||
// console.log('AudioPlayer setSRC : url', url);
|
||||
this.audio.src = url;
|
||||
},
|
||||
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();
|
||||
},
|
||||
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.audio.play();
|
||||
}else{
|
||||
this.audio.pause();
|
||||
}
|
||||
},
|
||||
stop(){
|
||||
console.log('AudioPlayer stop()');
|
||||
this.audio.pause();
|
||||
this.timeOutToHide();
|
||||
},
|
||||
// audio events
|
||||
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.emmit('audio-ended');
|
||||
this.stop();
|
||||
},
|
||||
// cartel functions
|
||||
loadNode(nid){
|
||||
this.$cartel.addClass('loading');
|
||||
$.getJSON('/edlp/ajax/json/node/'+nid+'/player_cartel', {})
|
||||
.done(this.onNodeLoaded.bind(this))
|
||||
.fail(this.onNodeLoadFail.bind(this));
|
||||
},
|
||||
onNodeLoaded(data){
|
||||
console.log('AudioPlayer node loaded');
|
||||
this.$cartel.html(data.rendered).removeClass('loading');
|
||||
_$body.trigger({'type':'new-audio-cartel-loaded'});
|
||||
initAjaxLinks();
|
||||
},
|
||||
onNodeLoadFail(jqxhr, textStatus, error){
|
||||
console.warn('AudioPlayer node load failed', jqxhr.responseText);
|
||||
this.$cartel.removeClass('loading').html('');
|
||||
},
|
||||
// global
|
||||
show(){
|
||||
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(){
|
||||
console.log('AudioPlayer timeOutToHide()');
|
||||
this.clearTimeOutToHide();
|
||||
this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
|
||||
},
|
||||
clearTimeOutToHide(){
|
||||
console.log('AudioPlayer clearTimeOutToHide()',this.hideTimer);
|
||||
if(this.hideTimer){
|
||||
clearTimeout(this.hideTimer);
|
||||
this.hideTimer = false;
|
||||
}
|
||||
},
|
||||
hide(){
|
||||
console.log('AudioPlayer hide()');
|
||||
this.$container.removeClass('visible');
|
||||
// trigger highlighted node remove on corpus map
|
||||
_$corpus_canvas.trigger('audio-node-closed');
|
||||
},
|
||||
// object events
|
||||
on(event_name, handler){
|
||||
if(typeof this.event_handlers[event_name] == 'undefined'){
|
||||
console.warn('AudioPlayer : event '+event_name+' does not exists');
|
||||
}
|
||||
this.event_handlers[event_name].push(handler);
|
||||
return this;
|
||||
},
|
||||
emmit(event_name){
|
||||
var handler;
|
||||
for (var i = this.event_handlers[event_name].length; i >= 0 ; i--) {
|
||||
handler = this.event_handlers[event_name][i];
|
||||
setTimeout(handler, 0);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
.on('search-results-loaded', initAjaxLinks)
|
||||
.on('open_entree', closeAllModals)
|
||||
.on('close_entree', backToFrontPage);
|
||||
}
|
||||
|
||||
// ___ _ _ ___
|
||||
@@ -365,7 +114,7 @@
|
||||
// Audio links
|
||||
if($link.is('.audio-link')){
|
||||
// TODO: stop randomplayer
|
||||
_audio_player
|
||||
_audioPlayer
|
||||
.emmit('stop-shuffle')
|
||||
.openDocument({
|
||||
nid:$link.attr('nid'),
|
||||
@@ -521,7 +270,7 @@
|
||||
})
|
||||
.on('corpus-cliked-on-node', function(e) {
|
||||
console.log('theme : corpus-cliked-on-node', e);
|
||||
_audio_player
|
||||
_audioPlayer
|
||||
.emmit('stop-shuffle')
|
||||
.openDocument(e.target_node);
|
||||
});
|
||||
@@ -531,6 +280,284 @@
|
||||
_$body.attr('corpus-map', 'ready');
|
||||
}
|
||||
|
||||
|
||||
// _ _ _
|
||||
// /_\ _ _ __| (_)___
|
||||
// / _ \ || / _` | / _ \
|
||||
// /_/ \_\_,_\__,_|_\___/
|
||||
//
|
||||
// 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 AudioPlayer(){
|
||||
var that = this;
|
||||
this.fid;
|
||||
this.audio = new Audio();
|
||||
// audio events
|
||||
this.audio_events = ["loadedmetadata","canplay","playing","pause","timeupdate","ended"];
|
||||
|
||||
// UI dom objects
|
||||
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);
|
||||
// favoris
|
||||
this.$fav = $('<div>').addClass('favoris').appendTo(this.$container);
|
||||
// cartel
|
||||
this.$cartel = $('<div>').addClass('cartel').appendTo(this.$container);
|
||||
|
||||
// hiding
|
||||
this.hideTimer = false;
|
||||
this.hideTimeMS = 10000;
|
||||
|
||||
// history
|
||||
this.currentHistoricIndex = null;
|
||||
this.historic = [];
|
||||
this.shuffle_is_active = false;
|
||||
|
||||
// object events
|
||||
this.event_handlers = {
|
||||
'audio-open-document':[],
|
||||
'audio-play':[],
|
||||
'audio-pause':[],
|
||||
'audio-play-next':[],
|
||||
'audio-ended':[],
|
||||
'stop-shuffle':[]
|
||||
};
|
||||
|
||||
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.$previous.on('click', this.playPrevious.bind(this));
|
||||
this.$playpause.on('click', this.togglePlayPause.bind(this));
|
||||
this.$next.on('click', this.playNext.bind(this));
|
||||
// TODO: previous and next btns
|
||||
},
|
||||
openDocument(node, caller){
|
||||
// console.log('AudioPlayer openDocument', node);
|
||||
if(typeof node == 'undefined'
|
||||
|| typeof node.nid == 'undefined'
|
||||
|| typeof node.audio_url == 'undfined'){
|
||||
console.warn('AudioPlayer openDocument() node is malformed', node);
|
||||
return false;
|
||||
}
|
||||
this.historic.push(node);
|
||||
this.currentHistoricIndex = this.historic.length-1;
|
||||
// this.shuffle_mode = shuffle_mode || false;
|
||||
|
||||
this.emmit('audio-open-document', {caller:caller});
|
||||
|
||||
this.launch();
|
||||
},
|
||||
launch(){
|
||||
this.clearTimeOutToHide();
|
||||
this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
|
||||
this.loadNode(this.historic[this.currentHistoricIndex].nid);
|
||||
// emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
|
||||
try {
|
||||
_$corpus_canvas.trigger({
|
||||
'type':'audio-node-opened',
|
||||
'nid':this.historic[this.currentHistoricIndex].nid
|
||||
});
|
||||
} catch (e) {
|
||||
console.info('AudioPlayer : _$corpus_canvas does not exists');
|
||||
}
|
||||
|
||||
this.showHidePreviousBtn();
|
||||
this.showHideNextBtn();
|
||||
this.show();
|
||||
},
|
||||
// audio functions
|
||||
setSRC(url){
|
||||
// console.log('AudioPlayer setSRC : url', url);
|
||||
this.audio.src = url;
|
||||
},
|
||||
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.clearTimeOutToHide();
|
||||
this.audio.play();
|
||||
},
|
||||
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.audio.play();
|
||||
}else{
|
||||
this.audio.pause();
|
||||
}
|
||||
},
|
||||
stop(){
|
||||
// console.log('AudioPlayer stop()');
|
||||
this.audio.pause();
|
||||
this.timeOutToHide();
|
||||
},
|
||||
// audio events
|
||||
onPlaying(){
|
||||
this.$btns.addClass('is-playing');
|
||||
this.emmit('audio-play');
|
||||
},
|
||||
onPause(){
|
||||
this.$btns.removeClass('is-playing');
|
||||
this.emmit('audio-pause');
|
||||
},
|
||||
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.emmit('audio-ended');
|
||||
this.stop();
|
||||
},
|
||||
// cartel functions
|
||||
loadNode(nid){
|
||||
this.$cartel.addClass('loading');
|
||||
$.getJSON('/edlp/ajax/json/node/'+nid+'/player_cartel', {})
|
||||
.done(this.onNodeLoaded.bind(this))
|
||||
.fail(this.onNodeLoadFail.bind(this));
|
||||
},
|
||||
onNodeLoaded(data){
|
||||
// console.log('AudioPlayer node loaded');
|
||||
this.$cartel.html(data.rendered).removeClass('loading');
|
||||
_$body.trigger({'type':'new-audio-cartel-loaded'});
|
||||
initAjaxLinks();
|
||||
},
|
||||
onNodeLoadFail(jqxhr, textStatus, error){
|
||||
console.warn('AudioPlayer node load failed', jqxhr.responseText);
|
||||
this.$cartel.removeClass('loading').html('');
|
||||
},
|
||||
// global
|
||||
show(){
|
||||
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(){
|
||||
// console.log('AudioPlayer timeOutToHide()');
|
||||
this.clearTimeOutToHide();
|
||||
this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
|
||||
},
|
||||
clearTimeOutToHide(){
|
||||
// console.log('AudioPlayer clearTimeOutToHide()',this.hideTimer);
|
||||
if(this.hideTimer){
|
||||
clearTimeout(this.hideTimer);
|
||||
this.hideTimer = false;
|
||||
}
|
||||
},
|
||||
hide(){
|
||||
// console.log('AudioPlayer hide()');
|
||||
this.$container.removeClass('visible');
|
||||
// trigger highlighted node remove on corpus map
|
||||
try {
|
||||
_$corpus_canvas.trigger('audio-node-closed');
|
||||
} catch (e) {
|
||||
console.info('AudioPlayer hide() : _$corpus_canvas does not exists');
|
||||
}
|
||||
},
|
||||
// object events
|
||||
on(event_name, handler){
|
||||
if(typeof this.event_handlers[event_name] == 'undefined'){
|
||||
console.warn('AudioPlayer : event '+event_name+' does not exists');
|
||||
}
|
||||
this.event_handlers[event_name].push(handler);
|
||||
return this;
|
||||
},
|
||||
emmit(event_name, args){
|
||||
// console.log('AudioPlayer emmit() event_name', event_name);
|
||||
// console.log('AudioPlayer emmit() handlers', this.event_handlers[event_name]);
|
||||
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];
|
||||
// console.log('AudioPlayer emmit() loop handler', handler);
|
||||
setTimeout(function(){
|
||||
// console.log('AudioPlayer emmit() timeout handler', handler);
|
||||
handler(args);
|
||||
}, 0);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
}
|
||||
|
||||
// ___ _ ___ _
|
||||
// | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _ ___ _ _
|
||||
// | / _` | ' \/ _` / _ \ ' \| _/ / _` | || / -_) '_|
|
||||
@@ -540,7 +567,7 @@
|
||||
this.active = false;
|
||||
this.playlist = playlist;
|
||||
this.$btn = $('<a>').html('Shuffle').addClass('random-player-btn');
|
||||
this.init()
|
||||
this.init();
|
||||
};
|
||||
RandomPlayer.prototype = {
|
||||
init(){
|
||||
@@ -554,7 +581,7 @@
|
||||
this.$btn.on('click', this.toggleActive.bind(this));
|
||||
|
||||
// attach an event on AudioPlayer
|
||||
_audio_player
|
||||
_audioPlayer
|
||||
.on('audio-ended', this.onAudioPlayerEnded.bind(this))
|
||||
.on('audio-play-next', this.onAudioPlayNext.bind(this))
|
||||
.on('stop-shuffle', this.stop.bind(this));
|
||||
@@ -579,20 +606,20 @@
|
||||
}
|
||||
},
|
||||
start(){
|
||||
this.active = _audio_player.shuffle_is_active = true;
|
||||
this.active = _audioPlayer.shuffle_is_active = true;
|
||||
this.$btn.addClass('is-active');
|
||||
this.shuffle();
|
||||
this.next();
|
||||
},
|
||||
stop(){
|
||||
this.active = _audio_player.shuffle_is_active = false;
|
||||
this.active = _audioPlayer.shuffle_is_active = false;
|
||||
this.$btn.removeClass('is-active');
|
||||
// stop audio player
|
||||
// _audio_player.stop();
|
||||
// _audioPlayer.stop();
|
||||
},
|
||||
next(){
|
||||
if(this.active && this.shuffledPlaylist.length > 0)
|
||||
_audio_player.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
|
||||
_audioPlayer.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
|
||||
},
|
||||
onAudioPlayNext(){
|
||||
console.log('RandomPlayer : onAudioPlayNext()');
|
||||
@@ -604,6 +631,215 @@
|
||||
}
|
||||
};
|
||||
|
||||
// ___ ___ _
|
||||
// / __|___ _ __ _ __ ___| _ \ |__ _ _ _ ___ _ _
|
||||
// | (__/ _ \ ' \| '_ \/ _ \ _/ / _` | || / -_) '_|
|
||||
// \___\___/_|_|_| .__/\___/_| |_\__,_|\_, \___|_|
|
||||
// |_| |__/
|
||||
function CompoPlayer(){
|
||||
this.playing = false;
|
||||
this.paused = false;
|
||||
this.playlist = [];
|
||||
this.current_index = 0;
|
||||
this.$compo = null;
|
||||
this.init();
|
||||
};
|
||||
CompoPlayer.prototype = {
|
||||
init(){
|
||||
console.log('CompoPlayer init()');
|
||||
// attach an event on AudioPlayer
|
||||
_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));
|
||||
// .on('audio-play-next', this.onAudioPlayNext.bind(this));
|
||||
|
||||
this.newCompo();
|
||||
},
|
||||
newCompo(){
|
||||
console.log('CompoPlayer newCompo()');
|
||||
// $('.composition_ui .composer .composition .field--name-documents')
|
||||
this.$composer = $('.composition_ui .composer');
|
||||
this.$compo = $('.composition_ui .composer .composition');
|
||||
this.$controls = $('.composition_ui .composer .compo-player-controls');
|
||||
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.$playpause = $('.compo-player-controls', this.$composer)
|
||||
// .on('click', this.togglePlayPause.bind(this));
|
||||
this.refresh();
|
||||
},
|
||||
refresh(){
|
||||
// console.log('CompoPlayer refresh(), this', this);
|
||||
// this.playing = false;
|
||||
// this.paused = false;
|
||||
// this.resetIndex();
|
||||
this.stop();
|
||||
|
||||
// load new playlist
|
||||
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(){
|
||||
// console.log('CompoPlayer togglePlayPause');
|
||||
if (this.playing && !this.paused) {
|
||||
this.pause();
|
||||
}else{
|
||||
if(this.playing && this.paused){
|
||||
this.play();
|
||||
}else{
|
||||
this.start();
|
||||
}
|
||||
}
|
||||
},
|
||||
start(){
|
||||
console.log('start');
|
||||
// console.log('CompoPlayer start()');
|
||||
this.playing = true;
|
||||
this.play();
|
||||
},
|
||||
play(){
|
||||
// console.log('play');
|
||||
if(this.paused){
|
||||
this.paused = false;
|
||||
_audioPlayer.play();
|
||||
}else{
|
||||
_audioPlayer.openDocument(this.playlist[this.current_index], this);
|
||||
}
|
||||
this.setActiveItem().showHideControls();
|
||||
},
|
||||
pause(){
|
||||
console.log('pause');
|
||||
this.paused = true;
|
||||
this.showHideControls();
|
||||
_audioPlayer.stop();
|
||||
},
|
||||
next(){
|
||||
// console.log('CompoPlayer next()');
|
||||
if(this.playing){
|
||||
this.current_index += 1;
|
||||
if(this.current_index < this.playlist.length){
|
||||
this.play();
|
||||
}else{
|
||||
this.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
prev(){
|
||||
// console.log('CompoPlayer prev()');
|
||||
if(this.playing){
|
||||
this.current_index -= 1;
|
||||
if(this.current_index >= 0){
|
||||
this.play();
|
||||
}else{
|
||||
this.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
stop(){
|
||||
_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 call shoud not be here
|
||||
this.showHideControls();
|
||||
return this;
|
||||
},
|
||||
resetActiveItems(){
|
||||
for (var n = 0; n < this.playlist.length; n++) {
|
||||
// console.log('node',node);
|
||||
this.playlist[n].item.removeClass('is-active');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
showHideControls(){
|
||||
// console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused);
|
||||
// global playing
|
||||
if(this.playing && !this.paused){
|
||||
this.$controls.addClass('is-playing');
|
||||
}else{
|
||||
this.$controls.removeClass('is-playing');
|
||||
}
|
||||
// playpause
|
||||
if(this.playlist.length > 0){
|
||||
this.$playpause.addClass('is-active');
|
||||
}else{
|
||||
this.$playpause.removeClass('is-active');
|
||||
}
|
||||
// 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');
|
||||
}
|
||||
// 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;
|
||||
},
|
||||
// _audioPlayer events
|
||||
onAudioOpenDocument(args){
|
||||
if(args.caller !== this){
|
||||
// console.log('CompoPlayer onAudioOpenDocument() called by other');
|
||||
this.reset();
|
||||
}
|
||||
// else{
|
||||
// // console.log('CompoPlayer onAudioOpenDocument() self calling');
|
||||
// }
|
||||
},
|
||||
onAudioPlayerPlay(){
|
||||
if(this.playing && this.paused){
|
||||
this.paused = false;
|
||||
this.showHideControls();
|
||||
}
|
||||
},
|
||||
onAudioPlayerPause(){
|
||||
if(this.playing && !this.paused){
|
||||
this.paused = true;
|
||||
this.showHideControls();
|
||||
}
|
||||
},
|
||||
onAudioPlayerEnded(){
|
||||
this.next();
|
||||
},
|
||||
// onAudioPlayNext(){
|
||||
// this.next();
|
||||
// }
|
||||
};
|
||||
|
||||
|
||||
// ___ _ _ _
|
||||
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
|
||||
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
|
||||
|
||||
Reference in New Issue
Block a user