+++ /dev/null
-(function($) {
- var thePlaylist;
- $.widget( "panik.playlist", {
- /*
- sound = {
- source :{
- ogg:"oggURL",
- mp3:"mp3URL"
- },
- emission: "episode.slug",
- episode: "episode.slug",
- id:""
- }
- */
- options: {
- playlist: [],
- html5audioOptions:{controls:true,preload:"none"},
- classes: "",
- itemClasses: "",
- controlContainer: $('<div>'),
- playlistContainer: $('<ol>'),
- onLoad: function(){},
- onAdd: function(){},
- onPlay: function(){},
- onUpdate: function(){},
- },
- _create: function() {
- // Initialization logic here
- thePlaylist = this;
- this.isActive = false;
- this.isLastAdd = false;
- this.controlButtons = []
- this.debugContainer = $('<pre>').hide();
- this.controlContainer = this.options.controlContainer;
- this.playlistContainer = this.options.playlistContainer;
- this.element.addClass(this.options.classes);
- this.element.append(this.controlContainer);
- this.element.append(this.playlistContainer);
- this.element.append(this.debugContainer);
- this.playlist = this.options.playlist;
- this.buildPlaylistControls();
- this.loadPlaylist();
- this._update();
- this.options.onLoad(this);
- },
-
- _setOption: function( key, value ) {
- this.options[ key ] = value;
- this._update();
- },
- _update: function() {
- this.playlist = [];
- this.playlistContainer.find('audio').each(function(){
- thePlaylist.playlist.push(thePlaylist.jsonifyAudio($(this)));
- });
- this.debugContainer.text(
- JSON.stringify(this.playlist, null, '\t')
- );
- this.savePlaylist();
- this.options.onUpdate(this);
- return this.playlist;
- },
- _reset: function() {
- this.isActive =false;
- this.stopSounds();
- this.playlistContainer.find('*').remove();
- this._update();
- },
- savePlaylist: function(){
- var JSONPlaylist = JSON.stringify(this.playlist, null, '\t');
- if (localStorage !== null && localStorage !== undefined) {
- localStorage['playlist'] = JSON.stringify(this.playlist, null, '\t');
- }
- },
- loadPlaylist: function(){
- if (localStorage !== null && localStorage !== undefined) {
- this.playlist = localStorage['playlist']?JSON.parse(localStorage['playlist']):this.playlist;
- }
- $.each(this.playlist,function(k,v){
- thePlaylist.playlistContainer.append(thePlaylist._htmlifyJsonSound(v));
- });
- return this.playlist;
- },
- // Transform HTML5 <audio> to simple JSON object.
- jsonifyAudio: function(audio) {
- var sound = {
- source :{},
- title: audio.attr('title'),
- sound_id:audio.data('sound-id'),
- url:audio.attr('data-url'),
- focus:audio.attr('data-player-focus')
- };
- audio.children('source').each(function(){
- sound.source[$(this).attr('type')] = $(this).attr('src');
- });
- return sound;
- },
- // Play next sound
- setFocus: function(element) {
- this.isActive = element;
- this.playlistContainer.find('li').each(function(){
- $(this).removeClass('active');
- $(this).find('audio').removeAttr('data-player-focus');
- });
- this.isActive.addClass('active').find('audio').attr('data-player-focus',true);
- this._update();
- },
- // Transform JSON sound object to HTML container for playlist.
- _htmlifyJsonSound: function(sound) {
- var container = $('<li>');
- var audio = $('<audio>',this.options.html5audioOptions)
- .attr('title',sound.title).hide()
- .attr('data-sound-id', sound.sound_id)
- .attr('data-url',sound.url);
- var audio_str = sound.sound_id + ': ' + sound.title;
- $.each(sound.source,function(k,v){
- var source = $('<source>',{src:v,type:k});
- audio.append(source);
- });
- audio.on('play',function(e){
- if (e.originalEvent === undefined) {
- return;
- }
- if (typeof (_paq) == 'object') {
- _paq.push(['trackEvent', 'Audio', 'Play', audio_str]);
- }
- thePlaylist.setFocus(container);
- container.addClass('playing');
- playpause.addClass('icon-pause').removeClass('icon-play');
- thePlaylist.controlButtons['playpause'].removeClass('icon-play').addClass('icon-pause');
- thePlaylist.afterPlay();
- var sound_id = $(e.target).data('sound-id');
- $(document).trigger('panik:play', {'sound_id': sound_id});
- }).on('pause',function(e){
- $(this).removeClass('playing');
- playpause.addClass('icon-play').removeClass('icon-pause');
- var sound_id = $(e.target).data('sound-id');
- $(document).trigger('panik:pause', {'sound_id': sound_id});
- thePlaylist.controlButtons['playpause'].removeClass('icon-pause').addClass('icon-play');
- }).on('stop',function(event){
- $(this).trigger('pause');
- if($(this)[0].currentTime){$(this)[0].currentTime = 0;}
- }).on("ended", function(e){
- if (typeof (_paq) == 'object') {
- _paq.push(['trackEvent', 'Audio', 'End', audio_str]);
- }
- thePlaylist.playNext();
- }).on('beforePause',function(){
- return this;
- }).on('beforePlay',function(){
- thePlaylist.pauseSounds();
- return this;
- }).on('timeupdate', function(event) {
- var position = 1.0 * event.target.currentTime / event.target.duration;
- var sound_id = $(event.target).data('sound-id');
- $(document).trigger('panik:timeupdate',
- {'sound_id': sound_id, 'position': position});
- });
- var controls = $('<span>',{'class':'soundControls controls'});
- var link = $('<a>',{href:sound.url,'class':'button icon-external-link'});
- var remove = $('<button>',{title:"Remove from list",'class':'icon-remove',click:function(){
- audio.trigger('stop');
- container.remove();
- thePlaylist._update();
- }});
- var stop = $('<button>',{title:"Stop",'class':'icon-stop',click:function(){
- audio.trigger('stop');
- }}).hide();
- var playpause = $('<button>',{title:"Play/Pause",'class':'icon-play',click:function(){
-
- if (audio[0].paused == false) { audio.trigger('pause');
- } else {
- audio.trigger('beforePlay').trigger('play');
- }
- }});
- controls.append(playpause).append(stop).append(remove);
- var title = $('<a>',{title:"More information",href:sound.url,'class':"button title",html:sound.title});
- container.append(controls).append(title).append(audio);
- if(sound.focus){thePlaylist.setFocus(container);}
- return container;
- },
- // Create a public method.
- registerAudio: function(audio,success) {
- var sound_id = audio.data('sound-id');
- if (this.playlistContainer.find('[data-sound-id=' + sound_id + ']').length) {
- /* already in playlist */
- return;
- }
- var audioObj = this.jsonifyAudio(audio);
- var htmlAudio = this._htmlifyJsonSound(audioObj);
- this.playlistContainer.append(htmlAudio);
- this.isLastAdd = htmlAudio;
- if(!this.isActive){this.setFocus(this.isLastAdd);}
- this.options.onAdd(this);
- if(success){success();}
- this._update();
- },
- // Play next sound
- bindControl: function(control,audio,element,options) {
- element.addClass('loading');
- audioID = audio.data('souce-id');
- //TODO for controls in page content
- },
- // Play next sound
- registerControl: function(name,options) {
- this.controlButtons[name] = $('<button>',options);
- this.controlContainer.append(this.controlButtons[name]);
- },
- // Build controls
- buildPlaylistControls: function() {
- this.controlContainer.empty();
- /*
- this.registerControl('toggleList',{class:"icon-list",click: function(){
- thePlaylist.playlistContainer.toggle();
- }});
- this.registerControl('clearList',{class:"icon-trash",click: function(){
- thePlaylist.playlistContainer.empty();
- thePlaylist._update();
- }});
- */
- this.registerControl('previous',{'class':"icon-step-backward",click:function(){
- thePlaylist.playPrevious();
- }});
- this.registerControl('stop',{'class':"icon-stop",click: function(){
- thePlaylist.stopSounds();
- }});
- this.registerControl('playpause',{'class':"icon-play playPause",click: function(){
- thePlaylist.playPauseList();
- }});
- this.registerControl('next',{'class':"icon-step-forward",click: function(){
- thePlaylist.playNext();
- }});
- return true;
- },
- // Play next sound
- afterPlay: function() {
- this.options.onPlay(this);
- },
- // Play next sound
- beforePlay: function() {
- this.stopSounds();
- },
- // Play next sound
- getActive: function() {
- if(!this.isActive){
- this.isActive = this.playlistContainer.children('li').first();
- }
- return this.isActive;
- },
- playSoundId: function(sound_id) {
- this.playlistContainer.find('audio[data-sound-id="' + sound_id + '"]'
- ).trigger('beforePlay').trigger('play');
- },
- // Play next sound
- playPauseList: function() {
- if(this.controlButtons['playpause'].hasClass('icon-play')){
- this.getActive().find('audio').trigger('beforePlay').trigger('play');
- }else{
- this.getActive().find('audio').trigger('pause');
- }
- return true;
- },
- // Play next sound
- playPrevious: function() {
- this.getActive().prev().find('audio').trigger('beforePlay').trigger('play');
- return true;
- },
- // Play next sound
- playNext: function() {
- this.getActive().next().find('audio').trigger('beforePlay').trigger('play');
- return true;
- },
- // Play next sound
- playFirst: function() {
- this.playlistContainer.find('audio').first().trigger('beforePlay').trigger('play');
- return true;
- },
- // Play next sound
- playLast: function() {
- this.playlistContainer.find('audio').last().trigger('beforePlay').trigger('play');
- return true;
- },
- // Pause all sounds.
- pauseSounds: function() {
- this.playlistContainer.find('audio').each(function(){$(this).trigger('pause');});
- },
- // stop all sounds.
- stopSounds: function() {
- this.playlistContainer.find('audio').each(function(){$(this).trigger('stop');});
- },
- });
-})(jQuery);
-
projects / panikweb.git / blobdiff