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,
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){
+//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, visualizers){
+
if(!(analizerUrl) || !(soundUrl)){
return;
}
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);
+ load_player(soundUrl, timeInMSecs,visualizers);
},
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) {
+function load_player(soundUrl, durationInMsecs, visualizers) {
consolelog('PlayerUtils.load_player: '+soundUrl+' '+durationInMsecs);
var load_player2 = this.load_player2;
if(loadImmediately){
consolelog('entering while loading setting up---------------'+this.bytesLoaded+' of '+this.bytesTotal);
loadImmediately=false;
- load_player2(this, this.duration);
+ load_player2(this, this.duration,visualizers);
}
}
});
//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);
+ load_player2(sound,durationInMsecs,visualizers);
});
}
}
//NOTE: the duration must be present. Loaded from xmlanalyzer (see above)
-function load_player2(sound, durationInMsec) {
+function load_player2(sound, durationInMsec, visualizers) {
+
if (!$('#player').length){
return;
}
$('.ts-wave a img').insertAfter('.ts-wave a');
$('.ts-wave a').remove();
- var p = new Player(jQuery('#player'), sound, durationInMsec);
+ var p = new Player(jQuery('#player'), sound, durationInMsec, visualizers);
consolelog('initialized player');
p._setupInterface(CURRENT_USER_NAME ? true : false);
//p.loadMarkers();
player = p;
- var change_visualizer_click = change_visualizer_clicked;
- $('#visualizer_id').change(change_visualizer_click);
+// 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() {
//sound duration is in milliseconds because the soundmanager has that unit,
//player (according to timeside syntax) has durations in seconds
- init: function(container, sound, soundDurationInMsec) {
+ init: function(container, sound, soundDurationInMsec,visualizers) {
this._super();
var player = this;
this.getSound = function(){
return sound;
}
-
+
+ this.getVisualizers = function(){
+ return visualizers;
+ }
//rpivate functions for converting
};
-// if(sound.readyState != 3){
-// /*sound.readyState
-// * Numeric value indicating a sound's current load status
-// * 0 = uninitialised
-// * 1 = loading
-// * 2 = failed/error
-// * 3 = loaded/success
-// */
-// sound.options.whileloading=function(){
-//
-// }
-// };
+ // if(sound.readyState != 3){
+ // /*sound.readyState
+ // * Numeric value indicating a sound's current load status
+ // * 0 = uninitialised
+ // * 1 = loading
+ // * 2 = failed/error
+ // * 3 = loaded/success
+ // */
+ // sound.options.whileloading=function(){
+ //
+ // }
+ // };
//implement play here: while playing we do not have to update the sound position, so
//we call the private variable soundPos
consolelog('player _setupInterface sound.readyState:'+sound.readyState); //handle also cases 0 and 2????
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-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']
+ ,'a.ts-volume','select.visualizer']
}
}/*,
'div.marker-control': ['a.set-marker']*/
var volume = jQueryObjs.find('.ts-volume');
+ //setting the select option for visualizers:
+ var visualizers = this.getVisualizers();
+ var select = jQueryObjs.find('.visualizer');
+ for(var name in visualizers){
+ $J('<option/>').val(visualizers[name]).html(name).appendTo(select);
+ }
+ select.css('margin',0).css('marginLeft','5px');
+ //TODO: why the line below does not work?!!!!!
+ //jQueryObjs.find('.ts-control')
+ var control = $J('#player').find('.ts-control');
+ var span = control.height() - select.outerHeight(true);
+ consolelog()
+ if(span>1){
+ select.css('marginTop',(span/2)+'px');
+ }
+ select.change(
+ function (){
+
+ var img = $J('<img/>').attr("src","/images/wait_small.gif").css(
+ {
+ 'marginLeft':select.css('marginLeft'),
+ 'marginTop':select.css('marginTop'),
+ 'height' :select.height()+'px',
+ 'width':select.width()+'px'
+ });
+ select.hide();
+ img.insertBefore(select);
+ setTimeout(function(){
+ if (me){
+ me.refreshImage();
+ }
+ //img.remove();
+ setTimeout(function(){
+ img.remove();
+ select.show();
+ },150);
+ },300);
+ });
+
+
//setting events to buttons (code left untouched from olivier):
//rewind
//
// .click(function() {
// return false;
// });
- var me=this;
+
//attaching event to the image. Note that attaching an event to a transparent div is buggy in IE
// if($J.browser.msie){
//
'zIndex':1000,
'overflow':'auto',
'display':'none' //TODO: remove this
- //'backgroundColor':'#666'
+ //'backgroundColor':'#666'
});
$J('body').append(popupMarker);
var w = v.width();
'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(){
},
showMarkerPopup: function(markerIndex){
-// var popup = this.getMarkerPopup();
-//
-// if(popup.attr('id') != 'markerpopup'+markerIndex){
-//
-// var marker = this.getMarkerMap().toArray()[markerIndex];
-// var pos = this.getSoundPosition();
-// var mPos = marker.offset;
-// var span = 0.3;
-//
-// if(pos>=mPos-span && pos<=mPos+span){
-// consolelog('songpos: '+pos+' nextmarkerpos:'+mPos);
-// popup.attr('id','markerpopup'+markerIndex);
-// popup.find('.title').html(marker.title);
-// popup.find('.description').html(marker.desc);
-// if(!popup.is(':visible')){
-// popup.show('fast');
-// }
-// }
-// }
+ // var popup = this.getMarkerPopup();
+ //
+ // if(popup.attr('id') != 'markerpopup'+markerIndex){
+ //
+ // var marker = this.getMarkerMap().toArray()[markerIndex];
+ // var pos = this.getSoundPosition();
+ // var mPos = marker.offset;
+ // var span = 0.3;
+ //
+ // if(pos>=mPos-span && pos<=mPos+span){
+ // consolelog('songpos: '+pos+' nextmarkerpos:'+mPos);
+ // popup.attr('id','markerpopup'+markerIndex);
+ // popup.find('.title').html(marker.title);
+ // popup.find('.description').html(marker.desc);
+ // if(!popup.is(':visible')){
+ // popup.show('fast');
+ // }
+ // }
+ // }
+ },
+
+
+ setDynamicResize: function(value){
+ var key = 'dynamicResize';
+ if(!value && key in this){
+ alert('clearing');
+ clearInterval(this[key]);
+ delete this[key];
+ return;
+ }
+ var wdw = this.$J(window);
+ var w = wdw.width();
+ var h = wdw.height();
+ var me = this;
+ this.dynamicResize = setInterval(function(){
+ var newW = wdw.width();
+ if(w!=newW){
+ w = newW;
+ //still wait a second: are we still adjusting the window? (call resize just once):
+ setTimeout(function(){
+ if(wdw.width()==newW){
+ me.resize.apply(me);
+ }else{
+ consolelog('resizing in act');
+ }
+ },150);
+ }
+ },250);
},
resize: function() {
return this;
},
- getImageUrl: function(){
- return this.$J('#visualizer_id').get(0).value;
- },
+ // getImageUrl: function(){
+ // return this.$J('#visualizer_id').get(0).value;
+ // },
refreshImage: function(optionalImgJQueryElm){
var image;
if(optionalImgJQueryElm){
}
return _src_;
};
- var imgSrc = funcImg(this.getImageUrl(), image.width(),image.height());
+ var imageUrl = this.getElements().find('.visualizer').val();
+ //alert(imageUrl);
+ var imgSrc = funcImg(imageUrl, image.width(),image.height());
if(image.attr('src')!=imgSrc){
- consolelog('setting attrt');
+ // consolelog('setting attrt');
image.attr('src', imgSrc);
}
},
var offset = this.getSoundDuration();
var position = this.getSoundPosition(); //parseFloat(this.getSoundPosition());
var idx = map.insertionIndex(position);
- consolelog('current pointer position: '+position+' '+(typeof position));
+ //consolelog('current pointer position: '+position+' '+(typeof position));
if(idx<0){
idx = -idx-1; //cursor is not on a a marker, get the insertion index
}else{
var i = 0;
var $J = this.$J;
var elements = $J([]); //create empty jquery object
-
+
var _loadChild = function(container_, tag, className, index) {
var element = container_.find('.'+className);
+
if (!element.length) {
element = $J(document.createElement(tag)).addClass(className);
var children = container_.children();
container_.append(element);
}
}else{
+
//consolelog('loadUI: returning ' + element.attr('class')+' (already present) ');
}
return element;
var s = selector.split('.');
var newChild = _loadChild(container, s[0], s[1], i++);
elements = elements.add(newChild);
+
}));
} else {
for (var key in skeleton) {
}
}
-
+ //consolelog(elements.find('.ts-image'));
return elements;
}
var _sound_manager_loaded=false;
var _jQuery_loaded = false;
-
+ var visualizers = {};
+ {% for v in visualizers %}
+ visualizers["{{v.name}}"] = "{% url telemeta-item-visualize item.public_id,v.id,"WIDTH","HEIGHT" %}";
+ {% endfor %}
+ //consolelog(visualizers);
jQuery(window).ready(function(){
_jQuery_loaded=true;
if(_sound_manager_loaded){
- loadScripts(scripts, function(){loadPlayer('{% url telemeta-item-analyze-xml item.public_id %}',$('.ts-wave a').attr('href'));setupPlaylist()});
+ loadScripts(scripts, function(){loadPlayer('{% url telemeta-item-analyze-xml item.public_id %}',$('.ts-wave a').attr('href'),visualizers);setupPlaylist()});
}
});
//$('.ts-wave a').attr('href')
soundManager.onready(function() {
_sound_manager_loaded=true;
if(_jQuery_loaded){
- loadScripts(scripts, function(){loadPlayer('{% url telemeta-item-analyze-xml item.public_id %}',$('.ts-wave a').attr('href'));setupPlaylist()});
+ loadScripts(scripts, function(){loadPlayer('{% url telemeta-item-analyze-xml item.public_id %}',$('.ts-wave a').attr('href'), visualizers);setupPlaylist()});
}
});
</div>
</div>
</div>
- <div class="item_visualization" id="item_visualization_id">
+ <!-- <div class="item_visualization" id="item_visualization_id">
<form id="visualizer_id_form" method="get" action="#">
<img src="images/plots.png" style="vertical-align:middle" /> Visualization :
<select id="visualizer_id" name="visualizer_id">
{% endfor %}
</select>
<input style="visibility: hidden;" type="submit" value="Set" />
- </form>
+ </form> -->
<!--
<form method="get" action="#">
<input type="submit" value="Get" />
</form>
-->
- </div>
+ <!-- </div> -->
<div id="tabs_container">
<!-- this div will be hidden when everything is fully loaded-->
projects / telemeta.git / commitdiff
