}\r
}\r
\r
+\r
+\r
function consolelog(text){\r
if(typeof console != 'undefined'){\r
var c = console;\r
\r
//setting instance-specific properties:\r
for(k in data){\r
- if(k == 'ok' || k == 'blur' || k == 'close'){\r
+ if(k == 'onOk' || k == 'onShow' || k == 'onClose'){\r
this.bind(k,data[k]);\r
}else if(k == 'content'){\r
this.setContent(data[k]);\r
p.fadeOutTime = 0,\r
p.shadowOpacity = 0.25;\r
p.zIndex = 10000;\r
- // p.listItemClass = '';\r
+ // p.listItemClass = '';\r
\r
p.getFormData = function(){\r
var elms = this.find('input,select,textarea');\r
};\r
\r
p.closeLater = function(millseconds){\r
- var me = this;\r
- setTimeout(function(){ me.close();},millseconds);\r
+ var me = this;\r
+ setTimeout(function(){\r
+ me.close();\r
+ },millseconds);\r
},\r
\r
//methods:\r
//var name = this.getListItemName();\r
var input = $('<input/>').attr('type','hidden').attr('name','selIndex');\r
var setEvents = function(idx,anchor,input){\r
- anchor.click(function(){\r
+ anchor.click(function(){\r
input.val(idx);\r
me.trigger('ok',true);\r
return false;\r
if('css' in item){\r
a.css(item['css']);\r
}\r
- a.css({'display':'block','margin':'2px'}); //margin is used to display the outline (focus)\r
+ a.css({\r
+ 'display':'block',\r
+ 'margin':'2px'\r
+ }); //margin is used to display the outline (focus)\r
setEvents(h,a,input);\r
container.append(a);\r
}\r
}\r
return;\r
}\r
- if(invokerIsClickable){\r
- this.invoker.attr('tabindex',0).attr(focusAttr,'true');\r
- }\r
+ if(invokerIsClickable){\r
+ this.invoker.attr('tabindex',0).attr(focusAttr,'true');\r
+ }\r
var doc_ = d_; //closure (see nested function below)\r
\r
//now all elements (including header and footer)\r
}\r
\r
//if we have elements of type listitem, add the specified class\r
-// var name = this.getListItemName();\r
-// var elms = this.find('a[name='+name+']');\r
-// if(this.listItemClass){\r
-// elms.removeClass().addClass(this.listItemClass);\r
-// this.listItemClass = "";\r
-// }\r
-// elms.css('display','block');\r
+ // var name = this.getListItemName();\r
+ // var elms = this.find('a[name='+name+']');\r
+ // if(this.listItemClass){\r
+ // elms.removeClass().addClass(this.listItemClass);\r
+ // this.listItemClass = "";\r
+ // }\r
+ // elms.css('display','block');\r
\r
\r
this.setFocusCycleRoot(this.focusable);\r
this['_tmpHandlers'+this.getId()] = undefined;\r
var focusElm = this.getFirstFocusableElement();\r
if(focusElm){\r
- var oldHandlers = [];\r
- var type = 'click';\r
- var clickEvents =invoker.data("events")[type];\r
- $.each(clickEvents, function(key, value) {\r
- oldHandlers.push(value);\r
- })\r
- invoker.unbind(type); //remove (temporarily) the binding to the event.\r
- //for instance, if we show the popup by clicking invoker, when the popup is shown do nothing\r
- //on clicking invoker until popup.hide is called\r
-\r
- this['_tmpHandlers'+this.getId()] = oldHandlers;\r
- invoker.unbind(type).bind(type,function(evt){\r
- //let the invoker have focus and let it be recognized as an element which does not blur the popup:\r
- //invoker.attr('tabindex',0).attr(focusAttr,'true');\r
- if(div.length && div.is(':visible')){\r
- focusElm.focus();\r
+ var oldHandlers = [];\r
+ var type = 'click';\r
+ var clickEvents =invoker.data("events")[type];\r
+ $.each(clickEvents, function(key, value) {\r
+ oldHandlers.push(value);\r
+ })\r
+ invoker.unbind(type); //remove (temporarily) the binding to the event.\r
+ //for instance, if we show the popup by clicking invoker, when the popup is shown do nothing\r
+ //on clicking invoker until popup.hide is called\r
+\r
+ this['_tmpHandlers'+this.getId()] = oldHandlers;\r
+ invoker.unbind(type).bind(type,function(evt){\r
+ //let the invoker have focus and let it be recognized as an element which does not blur the popup:\r
+ //invoker.attr('tabindex',0).attr(focusAttr,'true');\r
+ if(div.length && div.is(':visible')){\r
+ focusElm.focus();\r
+ return false;\r
+ }\r
+ //something wrong: close the popup and restore the hanlers\r
+ me.close.apply(me);\r
return false;\r
- }\r
- //something wrong: close the popup and restore the hanlers\r
- me.close.apply(me);\r
- return false;\r
- });\r
+ });\r
}\r
\r
}else{\r
var placeAbove = spaceAbove > spaceBelow && div.outerHeight(true) > spaceBelow;\r
//note that div.outerHeight() should be == div.outerHeight(true), as we set margins =0\r
\r
-// alert(div.outerHeight(true)+' '+spaceAbove+' '+spaceBelow);\r
-// div.css('visibility','');\r
-// return;\r
+ // alert(div.outerHeight(true)+' '+spaceAbove+' '+spaceBelow);\r
+ // div.css('visibility','');\r
+ // return;\r
\r
this.setMaxSize({\r
height : (placeAbove ? spaceAbove : spaceBelow)\r
--- /dev/null
+/**
+ * TimeSide - Web Audio Components
+ * Copyright (c) 2011 Parisson
+ * Author: Riccardo Zaccarelli <riccardo.zaccarelli gmail.com> and Olivier Guilyardi <olivier samalyse com>
+ * License: GNU General Public License version 2.0
+ */
+
+/**
+ * Class for loading a player. Requires a div#player, jQuery and all timeside javascript (player.js, markermap.js etcetera)
+ */
+
+var player; //global player variable
+
+function togglePlayerMaximization() {
+ consolelog('entered togglePlayerMaximization');
+ var view = $('#player');
+ $('#player_maximized, #player_minimized').css('display', 'none');
+ var ctr;
+ var dynamicResize = false;
+ if (view.parents('#player_maximized').length) {
+ ctr = $('#player_minimized').append(view);
+ } else {
+ ctr = $('#player_maximized').append(view);
+ dynamicResize = true;
+ }
+ ctr.css({
+ opacity: 0,
+ display: 'block'
+ });
+ var p = player;
+ if (p){
+ p.resize();
+ }
+ ctr.animate({
+ opacity: 1
+ }, 100);
+ if (p){
+ p.setDynamicResize(dynamicResize);
+ }
+}
+
+
+
+function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName){
+ var $J = jQuery;
+ var playerDiv = $J('#player');
+ if (!playerDiv.length){
+ //playerError('div #player does not exists');
+ //DO NOT RAISE ANY ERROR, JUST RETURN
+ return;
+ }
+
+ if(!(analizerUrl)){
+ playerError('invalid analyzer url');
+ return;
+ }
+
+ if(!(soundUrl)){
+ playerError('invalid sound url');
+ return;
+ }
+
+
+ //consolelog('till here all ok1');
+ var msgElm = $J('#loading_span_text'); //element to show messages
+ //consolelog('till here all ok2');
+ if(msgElm){
+ msgElm.html('Loading analyzer...');
+ }
+
+ var tableBody = $J('#analyzer_div_id').find('table').find('tbody:last');
+
+ //function to be executed when the analyzer has fully loaded (ie, a duration is provided)
+ function load_player(soundUrl, durationInMsec, itemId, visualizers, currentUserName) {
+ var sound = soundManager.createSound({
+ id: 'sound',
+ autoLoad: false,
+ url: soundUrl
+ });
+
+ loadScripts('/timeside/src/',['rulermarker.js','markermap.js', 'player.js', 'ruler.js','divmarker.js'], function() {
+
+
+ var p = new Player(jQuery('#player'), sound, durationInMsec, itemId, visualizers, currentUserName);
+ consolelog('initialized player');
+ p._setupInterface();
+
+ player = p;
+
+ $J('#player_maximized .toggle, #player_minimized .toggle').click(function() {
+ togglePlayerMaximization();
+ this.blur();
+ return false;
+ });
+ });
+ };
+
+ $J.ajax({
+ url: analizerUrl, //'analyze/xml',
+ dataType: 'xml',
+ success: function(data){
+ //populatetable
+ $J.each($J(data).find('data'),function(index,element){
+ var elm = $J(element);
+ tableBody.append('<tr><td>'+elm.attr('name')+'</td><td>'+elm.attr('value')+'</td><td>'
+ +elm.attr('unit')+'</td></tr>');
+ });
+ //loaded analizer, loading player
+ if(msgElm){
+ msgElm.html('Loading player...');
+ }
+ var duration = $J(data).find('#duration').attr('value');
+ duration = duration.split(":");
+ consolelog('analyzer loaded, duration: '+duration);
+ //format duration
+ var pin = parseInt;
+ var pfl = parseFloat;
+ var timeInMSecs=pin(duration[0])*3600+pin(duration[1])*60+pfl(duration[2]);
+ timeInMSecs = Math.round(timeInMSecs*1000);
+ load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName);
+ },
+ error:function(){
+ playerError('Error loading analyzer');
+ //"<img src='/images/dialog-error.png' style='vertical-align:middle'/><span class='login-error'>Error loading analyzer</span>");
+ }
+ });
+}
+
+
+
+//function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName){
+//
+// if(!(analizerUrl) || !(soundUrl)){
+// return;
+// }
+//
+// var $J = jQuery;
+// //consolelog('till here all ok1');
+// var msgElm = $J('#loading_span_text'); //element to show messages
+// //consolelog('till here all ok2');
+// if(msgElm){
+// msgElm.html('Loading analyzer...');
+// }
+// var url = urlNormalized();
+// var tableBody = $J('#analyzer_div_id').find('table').find('tbody:last');
+// var load_player = this.load_player;
+// $J.ajax({
+// url: analizerUrl, //'analyze/xml',
+// dataType: 'xml',
+// success: function(data){
+// //populatetable
+// $J.each($J(data).find('data'),function(index,element){
+// var elm = $J(element);
+// tableBody.append('<tr><td>'+elm.attr('name')+'</td><td>'+elm.attr('value')+'</td><td>'
+// +elm.attr('unit')+'</td></tr>');
+// });
+// //loaded analizer, loading player
+// if(msgElm){
+// msgElm.html('Loading player...');
+// }
+// var duration = $J(data).find('#duration').attr('value');
+// duration = duration.split(":");
+// consolelog('analyzer loaded, duration: '+duration);
+// //format duration
+// var pin = parseInt;
+// var pfl = parseFloat;
+// var timeInMSecs=pin(duration[0])*3600+pin(duration[1])*60+pfl(duration[2]);
+// timeInMSecs = Math.round(timeInMSecs*1000);
+// load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName);
+// },
+// error:function(){
+// playerError('Error loading analyzer');
+// //"<img src='/images/dialog-error.png' style='vertical-align:middle'/><span class='login-error'>Error loading analyzer</span>");
+// }
+// });
+//}
+//
+//
+////loads a player WAITING for the sound identified by soundUrl to be FULLY LOADED!!!!
+//function load_player(soundUrl, durationInMsecs, itemId, visualizers, currentUserName) {
+// consolelog('PlayerLoader.load_player: '+soundUrl+' '+durationInMsecs);
+// var load_player2 = this.load_player2;
+//
+// //this variable can be changed to load a sound immediately or not
+// var loadImmediately = true;
+// if(durationInMsecs){
+// loadImmediately = false;
+// }
+// var sound = soundManager.createSound({
+// id: 'sound',
+// autoLoad: loadImmediately,
+// url: soundUrl,
+// onload: function() { //formerly was: whileloading
+// //PROBLEM/BUG: on chrome and firefox whileloading is the same as onload,
+// //ie it is not called at regular interval but when the whole file has loaded
+// if(loadImmediately){
+// consolelog('entering while loading setting up---------------'+this.bytesLoaded+' of '+this.bytesTotal);
+// loadImmediately=false;
+// load_player2(this, this.duration, itemId, visualizers, currentUserName);
+// }
+// }
+// });
+// if(!loadImmediately){
+// //TODO: remove this code is only temporary here!!!!!!!!!!!!!!!!!!!!1
+// loadScripts('/timeside/src/',['rulermarker.js', //'markerlist.js',
+// 'markermap.js', 'player.js', 'ruler.js','divmarker.js'], function(){
+// load_player2(sound,durationInMsecs,itemId, visualizers, currentUserName);
+// });
+// }
+//
+//}
+////NOTE: the duration must be present. Loaded from xmlanalyzer (see above)
+//function load_player2(sound, durationInMsec, itemId, visualizers, currentUserName) {
+//
+// if (!$('#player').length){
+// return;
+// }
+// consolelog("entered load_player2");
+//
+// //TODO: what are we doing here????
+//// $('.ts-wave a img').insertAfter('.ts-wave a');
+//// $('.ts-wave a').remove();
+//
+// var p = new Player(jQuery('#player'), sound, durationInMsec, itemId, visualizers, currentUserName);
+// consolelog('initialized player');
+// p._setupInterface();
+// //p.loadMarkers();
+//
+// player = p;
+//
+//// var change_visualizer_click = change_visualizer_clicked;
+//// $('#visualizer_id').change(change_visualizer_click);
+// //$('#visualizer_id_form').submit(change_visualizer_clicked);
+//
+// $('#player_maximized .toggle, #player_minimized .toggle').click(function() {
+// togglePlayerMaximization();
+// this.blur();
+// return false;
+// });
+//
+//
+//}
+++ /dev/null
-var player; //public player variable
-
-function togglePlayerMaximization() {
- consolelog('entered togglePlayerMaximization');
- var view = $('#player');
- $('#player_maximized, #player_minimized').css('display', 'none');
- var ctr;
- var dynamicResize = false;
- if (view.parents('#player_maximized').length) {
- ctr = $('#player_minimized').append(view);
- } else {
- ctr = $('#player_maximized').append(view);
- dynamicResize = true;
- }
- ctr.css({
- opacity: 0,
- display: 'block'
- });
- if (player){
- player.resize();
- }
- ctr.animate({
- opacity: 1
- }, 100);
- player.setDynamicResize(dynamicResize);
-}
-
-//function change_visualizer_clicked(){
-// var $J = jQuery;
-// var form = $J("#visualizer_id_form");
-// //var img = jQuery("<img/>").attr("src","/images/wait.gif").css('verticalAlign','middle');
-//
-// var visId = $J("#visualizer_id");
-// visId.attr("disabled","disabled");
-// var img = $J(form.children()[0]);
-// var src = undefined;
-// if(img.attr('src')){
-// src = img.attr('src');
-// img.attr("src","/images/wait_small.gif");
-// }
-//
-// //form.append(img);
-// setTimeout(function(){
-// if (player){
-// player.refreshImage();
-// }
-// //img.remove();
-// setTimeout(function(){
-// if(src){
-// img.attr('src',src);
-// }
-// visId.removeAttr("disabled");
-// },300);
-// },600);
-//}
-
-function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName){
-
- if(!(analizerUrl) || !(soundUrl)){
- return;
- }
-
- var $J = jQuery;
- consolelog('till here all ok1');
- var msgElm = $J('#loading_span_text'); //element to show messages
- consolelog('till here all ok2');
- if(msgElm){
- msgElm.html('Loading analyzer...');
- }
- var url = urlNormalized();
- var tableBody = $J('#analyzer_div_id').find('table').find('tbody:last');
- var load_player = this.load_player;
- $J.ajax({
- url: analizerUrl, //'analyze/xml',
- dataType: 'xml',
- success: function(data){
- //populatetable
- $J.each($J(data).find('data'),function(index,element){
- var elm = $J(element);
- tableBody.append('<tr><td>'+elm.attr('name')+'</td><td>'+elm.attr('value')+'</td><td>'
- +elm.attr('unit')+'</td></tr>');
- });
- //loaded analizer, loading player
- if(msgElm){
- msgElm.html('Loading player...');
- }
- var duration = $J(data).find('#duration').attr('value');
- duration = duration.split(":");
- consolelog('analyzer loaded, duration: '+duration);
- //format duration
- var pin = parseInt;
- var pfl = parseFloat;
- var timeInMSecs=pin(duration[0])*3600+pin(duration[1])*60+pfl(duration[2]);
- timeInMSecs = Math.round(timeInMSecs*1000);
- load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName);
- },
- error:function(){
- msgElm.parent().html("<img src='/images/dialog-error.png' style='vertical-align:middle'/><span class='login-error'>Error loading analyzer</span>");
- }
- });
-}
-
-
-//loads a player WAITING for the sound identified by soundUrl to be FULLY LOADED!!!!
-function load_player(soundUrl, durationInMsecs, itemId, visualizers, currentUserName) {
- consolelog('PlayerUtils.load_player: '+soundUrl+' '+durationInMsecs);
- var load_player2 = this.load_player2;
-
- //this variable can be changed to load a sound immediately or not
- var loadImmediately = true;
- if(durationInMsecs){
- loadImmediately = false;
- }
- var sound = soundManager.createSound({
- id: 'sound',
- autoLoad: loadImmediately,
- url: soundUrl,
- onload: function() { //formerly was: whileloading
- //PROBLEM/BUG: on chrome and firefox whileloading is the same as onload,
- //ie it is not called at regular interval but when the whole file has loaded
- if(loadImmediately){
- consolelog('entering while loading setting up---------------'+this.bytesLoaded+' of '+this.bytesTotal);
- loadImmediately=false;
- load_player2(this, this.duration, itemId, visualizers, currentUserName);
- }
- }
- });
- if(!loadImmediately){
- //TODO: remove this code is only temporary here!!!!!!!!!!!!!!!!!!!!1
- loadScripts('/timeside/src/',['rulermarker.js', //'markerlist.js',
- 'markermap.js', 'player.js', 'ruler.js','divmarker.js'], function(){
- load_player2(sound,durationInMsecs,itemId, visualizers, currentUserName);
- });
- }
-
-}
-//NOTE: the duration must be present. Loaded from xmlanalyzer (see above)
-function load_player2(sound, durationInMsec, itemId, visualizers, currentUserName) {
-
- if (!$('#player').length){
- return;
- }
- consolelog("entered load_player2");
-
- //TODO: what are we doing here????
- $('.ts-wave a img').insertAfter('.ts-wave a');
- $('.ts-wave a').remove();
-
- var p = new Player(jQuery('#player'), sound, durationInMsec, itemId, visualizers, currentUserName);
- consolelog('initialized player');
- p._setupInterface();
- //p.loadMarkers();
-
- player = p;
-
-// var change_visualizer_click = change_visualizer_clicked;
-// $('#visualizer_id').change(change_visualizer_click);
- //$('#visualizer_id_form').submit(change_visualizer_clicked);
-
- $('#player_maximized .toggle, #player_minimized .toggle').click(function() {
- togglePlayerMaximization();
- this.blur();
- return false;
- });
-
-
-}
* Author: Riccardo Zaccarelli
* License: GNU General Public License version 2.0
*/
+
+/**
+ * class fior managing markers in the player. Markers on the ruler (ruler.js) or on the divs (divmarker.js)
+ * are not included here, they are separate classes. See player.js (loadMarkers method) where the bindings
+ * between this class, ruler and divmarker are set
+ */
var MarkerMap = TimesideArray.extend({
init: function(itemId, currentUserName) {
},
- //TODO: there is no need of a public method
- // removeHTTP: function(marker){
- // var public_id = marker.id
- // //json(param,method,onSuccessFcn,onErrorFcn){
- // json([public_id], "telemeta.del_marker");
- // },
-
//overridden method
move: function(markerIndex, newOffset){
var newIndex = this.insertionIndex(newOffset);
var $J = this.$J; //defined in the super constructor
var me=this;
- //TODO: use cssPrefix or delete cssPrefix!!!!!
- //TODO: note that ts-viewer is already in the html page. Better avoid this (horrible) method and use the html
-// var skeleton = {
-// 'div.ts-viewer': {
-// 'div.ts-ruler': {},
-// 'div.ts-wave': {
-// 'div.ts-image-canvas': {},
-// 'div.ts-image-container': ['img.ts-image']
-// }
-// },
-// 'div.ts-control': {
-// 'div.ts-layout': {
-// 'div.ts-playback': ['a.ts-play', 'a.ts-pause', 'a.ts-rewind', 'a.ts-forward', 'a.ts-set-marker' //]
-// ,'a.ts-volume','img.ts-wait', 'select.ts-visualizer']
-// }
-// }/*,
-// 'div.marker-control': ['a.set-marker']*/
-// };
- //var jQueryObjs = this.loadUI(this.getContainer(), skeleton);
-
-
//image source (see below) is given a src with a temporary 1x1 pixels transparent image
//see http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/ and
//http://geekswithblogs.net/bcaraway/archive/2007/08/24/114945.aspx
//for details
var html = ["<div class='ts-viewer'>",
-
"<div class='ts-ruler'></div>",
-
"<div class='ts-wave'>",
-
"<div class='ts-image-canvas'></div>",
-
"<div class='ts-image-container'>",
-
"<img class='ts-image' src='/images/transparent.png' alt='' />",
- "</div>",
- "</div>",
- "</div>",
-
"<div class='ts-control'>",
-
"<div class='ts-layout'>",
-
"<div class='ts-playback'>",
-
"<a class='ts-play'></a>",
-
"<a class='ts-pause'></a>",
-
"<a class='ts-rewind'></a>",
-
"<a class='ts-forward'></a>",
-
"<a class='ts-set-marker'></a>",
-
"<a class='ts-volume'></a>",
-
"<img class='ts-wait'/>",
- "<select class='ts-visualizer'></select>",
- "</div>",
- "</div>",
- "</div>"];
+ "<div class='ts-ruler'></div>",
+ "<div class='ts-wave'>",
+ "<div class='ts-image-canvas'></div>",
+ "<div class='ts-image-container'>",
+ "<img class='ts-image' src='/images/transparent.png' alt='' />",
+ "</div>",
+ "</div>",
+ "</div>",
+ "<div class='ts-control'>",
+ "<div class='ts-layout'>",
+ "<div class='ts-playback'>",
+ "<a class='ts-play'></a>",
+ "<a class='ts-pause'></a>",
+ "<a class='ts-rewind'></a>",
+ "<a class='ts-forward'></a>",
+ "<a class='ts-set-marker'></a>",
+ "<a class='ts-volume'></a>",
+ "<img class='ts-wait'/>",
+ "<select class='ts-visualizer'></select>",
+ "</div>",
+ "</div>",
+ "</div>"];
this.getContainer().html(html.join(''));
var container = this.getContainer();
var volume = container.find('.ts-volume');
- //hide the wait image and set the src
+ //hide the wait image and set the src
var waitImg = container.find('.ts-wait');
waitImg.attr('src','/images/wait_small.gif').attr('title','refreshing image').attr('alt','refreshing image').hide();
volume.attr('href', '#').click(function(event){
return setVolume(event);
});
- // volume.attr('href', '#').click(function(){
- // return false;
- // }).bind('mousedown', this.attach(
- // function(e){
- // if(e.which===1){ //left button
- // this.setVolume(e);
- // }
- // return false;
- // }
- // ));
//assigning title to all anchors
container.find('a').attr('href', '#')
});
//creating the ruler
-
- //TODO: why the line below does not work?!!!!!
- //var viewer = jQueryObjs.find('.ts-viewer');
- var viewer = this.getContainer().find('.ts-viewer');
+ var viewer = container.find('.ts-viewer');
var ruler = new Ruler(viewer, this.getSoundDuration(), (this.getCurrentUserName() || false));
this.getRuler = function(){
return ruler;
//loadMarkers has finished its job
this.loadMarkers();
- //set the marker popup
- //functions to set the marker popup
-// var popupMarker = $J('<div/>').addClass('component').css({
-// 'dislay':'none',
-// 'position':'absolute',
-// 'zIndex':1000,
-// 'overflow':'auto',
-// 'display':'none' //TODO: remove this
-// //'backgroundColor':'#666'
-// });
-// $J('body').append(popupMarker);
-// var w = v.width();
-// var h = v.height();
-// var offs = v.offset(); //relative to the document
-// var width = parseInt(w/2);
-// var height = parseInt(h/2);
-// var margin = 5;
-// popupMarker.css({
-// 'left':(margin+offs.left+width)+'px',
-// 'top': parseInt(margin+offs.top)+'px',
-// 'width':width+'px',
-// 'height':height+'px'
-// });
-// popupMarker.html("<table style='width:100%'><tr><td>"+gettrans('title')+"</td><td class='title'></td></tr><tr><td>"+
-// gettrans('description')+"</td><td class='description'></td></tr></table>");
-// this.getMarkerPopup = function(){
-// return popupMarker;
-// }
+ //set the marker popup
+ //functions to set the marker popup
+
// var popupMarker = $J('<div/>').addClass('component').css({
+ // 'dislay':'none',
+ // 'position':'absolute',
+ // 'zIndex':1000,
+ // 'overflow':'auto',
+ // 'display':'none' //TODO: remove this
+ // //'backgroundColor':'#666'
+ // });
+ // $J('body').append(popupMarker);
+ // var w = v.width();
+ // var h = v.height();
+ // var offs = v.offset(); //relative to the document
+ // var width = parseInt(w/2);
+ // var height = parseInt(h/2);
+ // var margin = 5;
+ // popupMarker.css({
+ // 'left':(margin+offs.left+width)+'px',
+ // 'top': parseInt(margin+offs.top)+'px',
+ // 'width':width+'px',
+ // 'height':height+'px'
+ // });
+
// popupMarker.html("<table style='width:100%'><tr><td>"+gettrans('title')+"</td><td class='title'></td></tr><tr><td>"+
+ // gettrans('description')+"</td><td class='description'></td></tr></table>");
+ // this.getMarkerPopup = function(){
+ // return popupMarker;
+ // }
},
showMarkerPopup: function(markerIndex){
// }
},
-
+ /**
+ * sets whether or not window resize resizes also this player. When true, a variable _dynamicResize =setInterval(...) is attached to
+ * this class. When false, if _dynamicResize is in this class, clearInterval(_dynamicResize) is called and then the key is deleted
+ */
setDynamicResize: function(value){
var key = '_dynamicResize';
if(!value && key in this){
//NOTE: some buttons might be hidden AFTER THIS METHOD HAS BEEN INVOKED
//TODO: why the line below does not work?!!!!!
//jQueryObjs.find('.ts-control')
-// var $J = this.$J;
-// var control = $J('#player').find('.ts-control');
-// var imgwait = playerelements.find('.ts-wait').hide();
-// var select = playerelements.find('.ts-visualizer');
-// var maxHeight = control.height();
-// var availableWidth = 0;
-// select.siblings().each(function(i,e){
-// var ee = $J(e);
-// if(ee.is('a')){
-// availableWidth+=ee.outerWidth(true);
-//// consolelog(ee);
-//// consolelog(ee.outerWidth());
-// }
-// });
-//
-// availableWidth = control.width() - availableWidth;
-// var both = select.add(imgwait);
-// both.css({
-// 'margin':'0px',
-// 'width':'',
-// 'height':''
-// });
-//
-// select.css('maxHeight', (maxHeight-(select.outerHeight(true)-select.height()))+'px');
-// imgwait.css('maxHeight', (maxHeight-(imgwait.outerHeight(true)-imgwait.height()))+'px');
-// var imgMarginTop = (maxHeight- imgwait.outerHeight(true))/2;
-// var selectMarginTop = (maxHeight-select.outerHeight(true))/2;
-// select.css('marginTop', selectMarginTop+'px');
-// imgwait.css('marginTop', imgMarginTop+'px');
-//
-// select.css('maxWidth', (availableWidth-(select.outerWidth(true)-select.width())+'px'));
-// imgwait.css('maxWidth', (availableWidth-(imgwait.outerWidth(true)-imgwait.width())+'px'));
-// select.css('marginLeft', ((availableWidth-select.outerWidth(true)-selectMarginTop))+'px');
-// imgwait.css('marginLeft', ((availableWidth- imgwait.outerWidth(true) - imgMarginTop))+'px');
+ // var $J = this.$J;
+ // var control = $J('#player').find('.ts-control');
+ // var imgwait = playerelements.find('.ts-wait').hide();
+ // var select = playerelements.find('.ts-visualizer');
+ // var maxHeight = control.height();
+ // var availableWidth = 0;
+ // select.siblings().each(function(i,e){
+ // var ee = $J(e);
+ // if(ee.is('a')){
+ // availableWidth+=ee.outerWidth(true);
+ //// consolelog(ee);
+ //// consolelog(ee.outerWidth());
+ // }
+ // });
+ //
+ // availableWidth = control.width() - availableWidth;
+ // var both = select.add(imgwait);
+ // both.css({
+ // 'margin':'0px',
+ // 'width':'',
+ // 'height':''
+ // });
+ //
+ // select.css('maxHeight', (maxHeight-(select.outerHeight(true)-select.height()))+'px');
+ // imgwait.css('maxHeight', (maxHeight-(imgwait.outerHeight(true)-imgwait.height()))+'px');
+ // var imgMarginTop = (maxHeight- imgwait.outerHeight(true))/2;
+ // var selectMarginTop = (maxHeight-select.outerHeight(true))/2;
+ // select.css('marginTop', selectMarginTop+'px');
+ // imgwait.css('marginTop', imgMarginTop+'px');
+ //
+ // select.css('maxWidth', (availableWidth-(select.outerWidth(true)-select.width())+'px'));
+ // imgwait.css('maxWidth', (availableWidth-(imgwait.outerWidth(true)-imgwait.width())+'px'));
+ // select.css('marginLeft', ((availableWidth-select.outerWidth(true)-selectMarginTop))+'px');
+ // imgwait.css('marginLeft', ((availableWidth- imgwait.outerWidth(true) - imgMarginTop))+'px');
return this;
var w =select.width();
var h = select.height();
select.hide();
- var progressBar = container.find('.ts-wait').css({'width':w+'px','height':h+'px'}).show();
+ var progressBar = container.find('.ts-wait').css({
+ 'width':w+'px',
+ 'height':h+'px'
+ }).show();
image.load(function(){
progressBar.hide();
}
});
- jQuery('#loading_span').empty().remove();
+ $J('#loading_span').empty().remove();
//TODO: move this in load_player?
// setUpPlayerTabs([jQuery('#tab_analysis'), jQuery('#tab_markers')],
// [jQuery('#analyzer_div_id'), jQuery('#markers_div_id')], tabIndex,
'content':dd,
invoker:anchorElement,
showok:true,
- ok:function(data){
+ onOk:function(data){
if(!data[t] && !data[d]){
return;
}
new PopupDiv({
invoker:anchorElement,
content: ar,
- ok:function(data){
+ onOk:function(data){
var val = data.selIndex;
consolelog(data);
var callbackok = undefined;
{% block stylesheets %}
{{ block.super }}
- <link rel="stylesheet" type="text/css" href="{% url telemeta-timeside "css/timeside.css" %}" />
- <link rel="stylesheet" type="text/css" href="{% url telemeta-timeside "skins/lab/style.css" %}" />
- <link rel="stylesheet" type="text/css" href="{% url telemeta-css "player.css" %}" />
-{% endblock %}
+<link rel="stylesheet" type="text/css" href="{% url telemeta-timeside "css/timeside.css" %}" />
+ <link rel="stylesheet" type="text/css" href="{% url telemeta-timeside "skins/lab/style.css" %}" />
+ <link rel="stylesheet" type="text/css" href="{% url telemeta-css "player.css" %}" />
+ {% endblock %}
-{% block extra_javascript %}
-{% if item.file %}
+ {% block extra_javascript %}
+ {% if item.file %}
<!--<script src="{% url telemeta-js "wz_jsgraphics.js" %}" type="text/javascript"></script>-->
<script src="{% url telemeta-js "soundmanager2.js" %}" type="text/javascript"></script>
{% endif %}
};
-
+ //managing errors (might be improved in future development)
+ function playerError(msg){
+ var elm = jQuery('#loading_span');
+ if(elm.length>0){
+ elm.empty().remove();
+ }
+ jQuery('#rightcol').hide();
+ alert(msg);
+ }
+ //warn on soundmanager error:
+ soundManager.onerror = function() {
+ playerError('SoundManager error. Try to:\n - Reload the page\n - Empty the cache (see browser preferences) and reload the page\n - Restart the browser');
+ };
+
+ setTimeout(function(){
+ if(jQuery('#loading_span').length>0){
+ playerError('SoundManager error. Try to:\n - Reload the page\n - Empty the cache (see browser preferences) and reload the page\n - Restart the browser');
+ }
+ },10000);
+
//initializing the visualizers to be passed to the player
var visualizers = {};
{% for v in visualizers %}
visualizers["{{v.name}}"] = "{% url telemeta-item-visualize item.public_id,v.id,"WIDTH","HEIGHT" %}";
{% endfor %}
- var scripts = ["{% url telemeta-js "wz_jsgraphics.js" %}", "{% url telemeta-timeside "src/timeside.js" %}","{% url telemeta-js "playerUtils.js" %}"];
+ var scripts = ["{% url telemeta-js "wz_jsgraphics.js" %}", "{% url telemeta-timeside "src/timeside.js" %}","{% url telemeta-js "playerLoader.js" %}"];
jQuery(window).ready(function(){
//if soundmanager is ready, the callback is executed immetiately
loadPlayer('{% url telemeta-item-analyze-xml item.public_id %}',"{% url telemeta-item-export item.public_id,"mp3" %}", '{{item.id}}', visualizers, CURRENT_USER_NAME);
setupPlaylist();
});
- });
+ });
});
{% if item %}
{% block title %}
-
<img src="images/item.png" style="vertical-align:middle" /> Item : {{ item }}
+<img src="images/item.png" style="vertical-align:middle" /> Item : {{ item }}
{% endblock %}
{% block title_buttons %}
{% endblock geoethnic_data %}
</div>
{% if user.is_authenticated and perms.telemeta.change_mediaitem %}
-
<a href="{% url telemeta-item-keywords_edit item.public_id %}" class="component_icon button icon_edit">{% trans "Edit" %} {% trans "keywords" %}</a>
+ <a href="{% url telemeta-item-keywords_edit item.public_id %}" class="component_icon button icon_edit">{% trans "Edit" %} {% trans "keywords" %}</a>
{% endif %}
<div class="extraInfos">
{% block musical_data %}
{% endblock musical_data %}
</div>
{% if user.is_authenticated and perms.telemeta.change_mediaitem %}
-
<a href="{% url telemeta-item-performances_edit item.public_id %}" class="component_icon button icon_edit">{% trans "Edit"%} {% trans "performance"%}</a>
+ <a href="{% url telemeta-item-performances_edit item.public_id %}" class="component_icon button icon_edit">{% trans "Edit"%} {% trans "performance"%}</a>
{% endif %}
<div class="extraInfos">
{% block general_data %}
projects / telemeta.git / commitdiff