From 69509848f189caf4259e08dc95dcd68e6db3d246 Mon Sep 17 00:00:00 2001 From: riccardo Date: Tue, 7 Jun 2011 13:13:01 +0200 Subject: [PATCH] Xml analyzers loads now asynchronously (does not wait for document load, as it is unnecessary) --- telemeta/htdocs/js/playerLoader.js | 598 +++++++++++++++-------------- 1 file changed, 306 insertions(+), 292 deletions(-) diff --git a/telemeta/htdocs/js/playerLoader.js b/telemeta/htdocs/js/playerLoader.js index 00d5c2e5..78de7ace 100644 --- a/telemeta/htdocs/js/playerLoader.js +++ b/telemeta/htdocs/js/playerLoader.js @@ -61,15 +61,17 @@ function togglePlayerMaximization() { function end(optionalErrorMsg){ var $ = jQuery; - var elm = $('#loading_span'); - if(elm.length<1){ - return; - } - elm.empty().remove(); - if(optionalErrorMsg){ - $('#rightcol').hide(); - alert(optionalErrorMsg); - } + $(window).ready(function(){ + var elm = $('#loading_span'); + if(elm.length<1){ + return; + } + elm.empty().remove(); + if(optionalErrorMsg){ + $('#rightcol').hide(); + alert(optionalErrorMsg); + } + }); } function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName, isStaffOrSuperuser){ @@ -90,328 +92,340 @@ function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName, //is not always an error, (eg, the user not logged in and the item has only metadata public). //Ideally, we should not enter here in some cases. For the moment we just catch the case div#player doesnt exist and //we return - $J(wdw).ready(function(){ - var maxTime = 10000; - //if the loading span is still visible in 10 seconds, throw an error: - setTimeout(function(){ - end('SoundManager is not responding. Try to:\n - Reload the page\n - Empty the cache (see browser preferences) and reload the page\n - Restart the browser'); - },maxTime); - // var playerDiv = $J('#player'); - // var markersUI = $J("#markers_div_id"); + var maxTime = 10000; + //if the loading span is still visible in 10 seconds, throw an error: + setTimeout(function(){ + end('SoundManager is not responding. Try to:\n - Reload the page\n - Empty the cache (see browser preferences) and reload the page\n - Restart the browser'); + },maxTime); + + // var playerDiv = $J('#player'); + // var markersUI = $J("#markers_div_id"); - var playerDiv = '#player'; - if(!($J(playerDiv).length)){ - end(); - } + - var markersUI = "#markers_div_id"; - var msgElm = $J('#loading_span_text').html('Loading sound info...'); - //var uinqid_ = Timeside.utils.uniqid; //defined in application.js - var pFloat = parseFloat; - //load analyser xml and proceed on success: - $J.ajax({ - url: analizerUrl, //'analyze/xml', - dataType: 'xml', - success: function(data){ - //populatetable - var content = []; //content is an array which we will transform in table innerHTML via the method join - //which is faster in some browsers than string concatenation - $J.each($J(data).find('data'),function(index,element){ - var elm = $J(element); - content.push(''); - content.push(elm.attr('name')); - content.push(''); - content.push(elm.attr('value')); - content.push(''); - content.push(elm.attr('unit')); - content.push(''); - // tableBody.append(''+elm.attr('name')+''+elm.attr('value')+'' - // +elm.attr('unit')+''); - }); + + //var msgElm = $J('#loading_span_text').html('Loading sound info...'); + //var uinqid_ = Timeside.utils.uniqid; //defined in application.js + var pFloat = parseFloat; + //load analyser xml and proceed on success: + $J.ajax({ + url: analizerUrl, //'analyze/xml', + dataType: 'xml', + error:function(){ + end('Error loading analyzer'); + }, + success: function(data){ + //populatetable + var analyzerContentArray = []; //content is an array which we will transform in table innerHTML via the method join + //which is faster in some browsers than string concatenation + $J.each($J(data).find('data'),function(index,element){ + var elm = $J(element); + analyzerContentArray.push(''); + analyzerContentArray.push(elm.attr('name')); + analyzerContentArray.push(''); + analyzerContentArray.push(elm.attr('value')); + analyzerContentArray.push(''); + analyzerContentArray.push(elm.attr('unit')); + analyzerContentArray.push(''); + }); - $J('#analyzer_div_id').find('table').find('tbody:last').append(content.join("")); - //loaded analizer, loading player - msgElm.html('Loading markers...'); + //loaded analizer, loading player + //msgElm.html('Loading markers...'); - var duration = $J(data).find('#duration').attr('value'); - duration = duration.split(":"); - //format duration - var pin = parseInt; + var duration = $J(data).find('#duration').attr('value'); + duration = duration.split(":"); + //format duration + var pin = parseInt; - var radix = 10; //REALLY IMPORTANT. IF ANY ELEMENT OF DURATION STARTS WITH '0', THEN THE RADIX IS CONSIDERED EITHER OCTAL OR HEXADECIMAL - //WE WANT TO PREVENT NON 10-BASED RADIX PARSING - var timeInMSecs=pin(duration[0],radix)*3600+pin(duration[1],radix)*60+pFloat(duration[2],radix); - timeInMSecs = Math.round(timeInMSecs*1000); - var callbackAfterMarkersLoading = function(data) { - var markerMap = []; + var radix = 10; //REALLY IMPORTANT. IF ANY ELEMENT OF DURATION STARTS WITH '0', THEN THE RADIX IS CONSIDERED EITHER OCTAL OR HEXADECIMAL + //WE WANT TO PREVENT NON 10-BASED RADIX PARSING + var timeInMSecs=pin(duration[0],radix)*3600+pin(duration[1],radix)*60+pFloat(duration[2],radix); + timeInMSecs = Math.round(timeInMSecs*1000); + //callback to be executed after json gets the markers (see last line below) + var callbackAfterMarkersLoading = function(data) { + var markerMap = []; - if(data && data.result && data.result.length>0){ - var result = data.result; + if(data && data.result && data.result.length>0){ + var result = data.result; - //add markers to the map. No listeners associated to it (for the moment) - //var mapAdd = map.add; - for(var i =0; i< result.length; i++){ + //add markers to the map. No listeners associated to it (for the moment) + //var mapAdd = map.add; + for(var i =0; i< result.length; i++){ - var argument = result[i]; - var marker = { - id: argument.public_id, - offset: pFloat(argument.time), //IMPORTANT: IT IS A STRING!!!!!! - desc: argument.description, - title: argument.title, - author: argument.author, - isEditable: argument.author === currentUserName || isStaffOrSuperuser, - canBeAddedToPlaylist: currentUserName ? true : false, - isSavedOnServer: true - }; - markerMap.push(marker); - //mapAdd.apply(map,[result[i]]); - } - //add markers to ruler and div - // map.each(function(i,marker){ - // rulerAdd.apply(ruler,[marker, i]); - // mapuiAdd.apply(mapUI,[marker, i]); - // }); - - //tabIndex = result.length>0 ? 1 : 0; + var argument = result[i]; + var marker = { + id: argument.public_id, + offset: pFloat(argument.time), //IMPORTANT: IT IS A STRING!!!!!! + desc: argument.description, + title: argument.title, + author: argument.author, + isEditable: argument.author === currentUserName || isStaffOrSuperuser, + canBeAddedToPlaylist: currentUserName ? true : false, + isSavedOnServer: true + }; + markerMap.push(marker); + //mapAdd.apply(map,[result[i]]); } + //add markers to ruler and div + // map.each(function(i,marker){ + // rulerAdd.apply(ruler,[marker, i]); + // mapuiAdd.apply(mapUI,[marker, i]); + // }); - //defining the marker callback: + //tabIndex = result.length>0 ? 1 : 0; + } + + //defining the marker callback: - var markerMode = currentUserName || false; - if(markerMode){ - //markerMode becomes a function: - markerMode = function(offset){ - var m = { - //id: uinqid_(), //will be set in markermap - offset: pFloat(offset), - desc: "", - title: "", - author: currentUserName, - isEditable: true, - canBeAddedToPlaylist: true, - isSavedOnServer: false - }; - return m; + var markerMode = currentUserName || false; + if(markerMode){ + //markerMode becomes a function: + markerMode = function(offset){ + var m = { + //id: uinqid_(), //will be set in markermap + offset: pFloat(offset), + desc: "", + title: "", + author: currentUserName, + isEditable: true, + canBeAddedToPlaylist: true, + isSavedOnServer: false }; + return m; + }; + } + //create visualizer select element (append it later, document here could NOT be ready) + var visualizersSelectElement = $J(' tag + var imageSrcFcn = function(width,height){ + var player_image_url = visualizers[""+visualizersSelectElement.val()]; + var _src_ = null; + if (player_image_url && (width || height)) { + _src_ = player_image_url.replace('WIDTH', width + '').replace('HEIGHT', height + ''); } - msgElm.html('Loading player...'); - var visualizersSelectElement = $J(' tag - var imageSrcFcn = function(width,height){ - var player_image_url = visualizers[""+visualizersSelectElement.val()]; - var _src_ = null; - if (player_image_url && (width || height)) { - _src_ = player_image_url.replace('WIDTH', width + '').replace('HEIGHT', height + ''); - } - return _src_; - }; + var playerDiv = '#player'; + if(!($J(playerDiv).length)){ + end(); //stop without raising error messages. If passed within Timeside.load, an error will be thrown + } + //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError,onReady ){ + Timeside.load(playerDiv,soundUrl,timeInMSecs,imageSrcFcn,markerMap,markerMode, function(msg){ + end(msg); + }, + function(player){ + //document here is READY + var markersUI = "#markers_div_id"; + var mapUI = new Timeside.classes.MarkerMapDiv(markersUI); + player.getMarkerMap().each(function(i,marker){ + mapUI.add(marker,i,false); + }); + Timeside.markerMapDiv = mapUI; + //bind add marker -> markerdiv add: + player.bind('markerAdded', function(data){ + //select the marker tab: + var tab = $J('#tab_markers'); + if(tab && tab.length){ + tab.trigger('click'); + } + mapUI.add.apply(mapUI,[data.marker, data.index, true]); + }); + //bind move marker -> markerdiv move: + player.bind('markerMoved', function(data){ + mapUI.move.apply(mapUI,[data.fromIndex,data.toIndex,data.marker.offset]); + }); + //bind move marker -> markerdiv move: + player.bind('markerRemoved', function(data){ + mapUI.remove.apply(mapUI,[data.index]); + }); - //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError,onReady ){ - Timeside.load(playerDiv,soundUrl,timeInMSecs,imageSrcFcn,markerMap,markerMode, function(msg){ - end(msg); - }, - function(player){ - msgElm.html('Setting up player...'); - var mapUI = new Timeside.classes.MarkerMapDiv(markersUI); - player.getMarkerMap().each(function(i,marker){ - mapUI.add(marker,i,false); - }); - Timeside.markerMapDiv = mapUI; - //bind add marker -> markerdiv add: - player.bind('markerAdded', function(data){ - //select the marker tab: - var tab = $J('#tab_markers'); - if(tab && tab.length){ - tab.trigger('click'); - } - mapUI.add.apply(mapUI,[data.marker, data.index, true]); - }); - //bind move marker -> markerdiv move: - player.bind('markerMoved', function(data){ - mapUI.move.apply(mapUI,[data.fromIndex,data.toIndex,data.marker.offset]); - }); - //bind move marker -> markerdiv move: - player.bind('markerRemoved', function(data){ - mapUI.remove.apply(mapUI,[data.index]); - }); + //bind remove marker -> player remove -> remove marker + //(wait for json success) + mapUI.bind('remove',function(data){ + var marker = data.marker; + + var functionOnSuccess = function(){ + player.removeMarker.apply(player,[data.marker]);//map.remove + fires markerMoved on player + }; + if(marker.isSavedOnServer){ + //json(param,method,onSuccessFcn,onErrorFcn){ + json([marker.id], "telemeta.del_marker",functionOnSuccess); + }else{ + functionOnSuccess(); + } - //bind remove marker -> player remove -> remove marker - //(wait for json success) - mapUI.bind('remove',function(data){ + }); + //bind save marker -> player save + var map = player.getMarkerMap(); + if(map){ + mapUI.bind('save',function(data){ var marker = data.marker; - - var functionOnSuccess = function(){ - player.removeMarker.apply(player,[data.marker]);//map.remove + fires markerMoved on player - }; - if(marker.isSavedOnServer){ - //json(param,method,onSuccessFcn,onErrorFcn){ - json([marker.id], "telemeta.del_marker",functionOnSuccess); - }else{ - functionOnSuccess(); + var idx = map.insertionIndex(marker); + if(idx<0 || idx>=map.length){ + this.debug('marker not found'); + return; } - }); - //bind save marker -> player save - var map = player.getMarkerMap(); - if(map){ - mapUI.bind('save',function(data){ - var marker = data.marker; - var idx = map.insertionIndex(marker); - if(idx<0 || idx>=map.length){ - this.debug('marker not found'); - return; - } - - //var itemid = this.getItemId(); //TODO2: NOt anymore used - var isSavedOnServer = marker.isSavedOnServer; - var method = isSavedOnServer ? "telemeta.update_marker" : "telemeta.add_marker"; - var param = { - 'item_id':itemId, - 'public_id': marker.id, - 'time':marker.offset, - 'author': marker.author, - 'title':marker.title, - 'description':marker.desc - }; + //var itemid = this.getItemId(); //TODO2: NOt anymore used + var isSavedOnServer = marker.isSavedOnServer; + var method = isSavedOnServer ? "telemeta.update_marker" : "telemeta.add_marker"; + var param = { + 'item_id':itemId, + 'public_id': marker.id, + 'time':marker.offset, + 'author': marker.author, + 'title':marker.title, + 'description':marker.desc + }; - //function on success: - //go back to the marker div to notify tha tis saved - var success = function(){ - if(!isSavedOnServer){ - marker.isSavedOnServer = true; - } - mapUI.setEditMode.apply(mapUI,[idx,false]); - }; - //json(param,method,onSuccessFcn,onErrorFcn){ - json([param], method, success); - }); - } - //bind focus marker - > player focus - mapUI.bind('focus', function(data){ - if(data && 'index' in data){ - if(data.index>=0 && data.index player focus + mapUI.bind('focus', function(data){ + if(data && 'index' in data){ + if(data.index>=0 && data.index0){ - return gettrans('there is at least one unsaved marker') +' ('+ markerUnsaved+ '). '+ - gettrans('If you exit the page you will loose your changes'); - } + } + }); + //last things: + //populate the analyzers table + $J('#analyzer_div_id').find('table').find('tbody:last').append(analyzerContentArray.join("")); - }; - wdw.onbeforeunload = confirmExit; + //setting up the select tag + //assigning event on select: + visualizersSelectElement.change( + function (){ + player.refreshImage.apply(player); + }); + var control = player.getContainer().find('.ts-control'); + var ch = control.height(); + var margin = 3; + visualizersSelectElement.css({ + 'display':'inline-block', + 'height':(ch-2*margin)+'px', + 'position':'absolute', + 'top':margin+'px', + 'right':margin, + 'margin':0 + }); + player.bind('waiting', function(data){ + if(data.value){ //is waiting + visualizersSelectElement.hide(); + return; } - if(map && window.PopupDiv){ - var popupdiv = new PopupDiv({ - focusable: false, - titleClass: 'markersdivTitle', - showClose:false, - bounds: { - top:0.4, - left:0.1, - right:0.1, - bottom:0 - }, - invoker: player.getContainer().find('.ts-wave'), - defaultCloseOperation: 'hide' - }); - player.bind('markerCrossed',function(data){ - popupdiv.refresh(data.marker.desc,data.marker.title); - var index = data.index; - if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset>3){ - popupdiv.closeLater(3000); - } - //consolelog('firing markercrossed'); - //consolelog(data.marker.title); - if(!popupdiv.isShowing()){ - popupdiv.show(); + visualizersSelectElement.css('display','inline-block'); + }); + control.append(visualizersSelectElement); + //Eventually, do 3 last things: + //1) call end (without arguments simply clears the wait span and avoid subsequent calls to end(msg) to + //display error messages) + end(); + //set a warning leaving the page with unsaved markers: + if(map){ + var confirmExit = function(){ + var markerUnsaved=0; + map.each(function(i,marker){ + if(!marker.isSavedOnServer){ + markerUnsaved++; } }); - } + if(markerUnsaved>0){ + return gettrans('there is at least one unsaved marker') +' ('+ markerUnsaved+ '). '+ + gettrans('If you exit the page you will loose your changes'); + } - //set up the marker tab - var tabIndex = map.length ? 1 : 0; - setUpPlayerTabs($J('#tab_analysis').add($J('#tab_markers')), - [$J('#analyzer_div_id'), $J('#markers_div_id')], tabIndex, - 'tab_selected','tab_unselected'); - //2) and selects the current marker if it is present on the url - var url = wdw.location.href+""; - var lastPart = url.replace(/\/+$/,"").replace(/^.*\/([^\/]*)$/,"$1"); - var selOffs = -1; - map.each(function(i,marker){ - if(marker.id == lastPart){ - selOffs = marker.offset; + }; + wdw.onbeforeunload = confirmExit; + } + if(map && wdw.PopupDiv){ + var popupdiv = new PopupDiv({ + focusable: false, + titleClass: 'markersdivTitle', + showClose:false, + bounds: { + top:0.4, + left:0.1, + right:0.1, + bottom:0 + }, + invoker: player.getContainer().find('.ts-wave'), + defaultCloseOperation: 'hide' + }); + player.bind('markerCrossed',function(data){ + popupdiv.refresh(data.marker.desc,data.marker.title); + var index = data.index; + if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset>3){ + popupdiv.closeLater(3000); + } + //consolelog('firing markercrossed'); + //consolelog(data.marker.title); + if(!popupdiv.isShowing()){ + popupdiv.show(); } }); - if(selOffs >= 0){ - player.setSoundPosition(selOffs); + } + + //set up the marker tab + var tabIndex = map.length ? 1 : 0; + setUpPlayerTabs($J('#tab_analysis').add($J('#tab_markers')), + [$J('#analyzer_div_id'), $J('#markers_div_id')], tabIndex, + 'tab_selected','tab_unselected'); + //2) and selects the current marker if it is present on the url + var url = wdw.location.href+""; + var lastPart = url.replace(/\/+$/,"").replace(/^.*\/([^\/]*)$/,"$1"); + var selOffs = -1; + map.each(function(i,marker){ + if(marker.id == lastPart){ + selOffs = marker.offset; } - //3) assing a binding to the player maximization button: - $J('#player_maximized .toggle, #player_minimized .toggle').click(function() { - togglePlayerMaximization(); - return false; - }); + }); + if(selOffs >= 0){ + player.setSoundPosition(selOffs); } - ); + //3) assing a binding to the player maximization button: + $J('#player_maximized .toggle, #player_minimized .toggle').click(function() { + togglePlayerMaximization(); + return false; + }); } - json([itemId],"telemeta.get_markers", callbackAfterMarkersLoading,callbackAfterMarkersLoading); - //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError, onReady){ - //Timeside.load(playerDiv,soundUrl,,timeInMSecs,visualizers,markerMap,) - //load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName); - }, - error:function(){ - end('Error loading analyzer'); + ); } - }); + + //execute all the stuff once the document is ready: + var onSuccess = function(data){ + $J(wdw).ready(function(){ + callbackAfterMarkersLoading(data); + }); + } + //and niow call json method to load markers (load player also onError, no markers will be loaded) + json([itemId],"telemeta.get_markers", onSuccess,onSuccess); + //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError, onReady){ + //Timeside.load(playerDiv,soundUrl,,timeInMSecs,visualizers,markerMap,) + //load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName); + } }); + } -- 2.39.5