-function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName, isStaffOrSuperuser){
+function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, currentUserName, isStaffOrSuperuser){
var $J = jQuery;
var wdw = window;
}
//function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError,onReady ){
- Timeside.load(playerDiv,soundUrl,timeInMSecs,imageSrcFcn,markerMap,markerMode, function(msg){
+ Timeside.load(playerDiv,soundUrl,timeInMSecs,imageSrcFcn,soundImgSize,markerMap,markerMode, function(msg){
end(msg);
},
function(player){
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'
- });
- var closeTimeout = undefined;
- var ci = clearTimeout;
- player.bind('markerCrossed',function(data){
- if(closeTimeout !== undefined){
- cl(closeTimeout);
- }
- closeTimeout=undefined;
- popupdiv.refresh(data.marker.desc,data.marker.title);
- if(!popupdiv.isShowing()){
- popupdiv.show();
- }
- var index = data.index;
- if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset>3){
- closeTimeout = popupdiv.setTimeout('close',3000);
- }
- //consolelog('firing markercrossed');
- //consolelog(data.marker.title);
+ var POPUP_TIMEOUT=3; //in seconds. Zero means: no popup, negative numbers:
+ //popup stays infinitely on the player (until next marker cross)
+ //a number N means: popup stays maximum N seconds on the screen
+ if(POPUP_TIMEOUT){
+ 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'
+ });
+ var popupShowFunction = function(data){
+// if(popupTimeoutId !== undefined){
+// cT(popupTimeoutId);
+// }
+// popupTimeoutId=undefined;
+ popupdiv.refresh(data.marker.desc,data.marker.title);
+ if(!popupdiv.isShowing()){
+ popupdiv.show();
+ }
+// var index = data.index;
+// if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset>3){
+// popupTimeoutId = popupdiv.setTimeout('close',3000);
+// }
+ };
+ if(POPUP_TIMEOUT<0){
+ player.bind('markerCrossed',popupShowFunction);
+ }else{
+ var popupTimeoutId = undefined;
+ var cT = clearTimeout;
+ player.bind('markerCrossed',function(data){
+ if(popupTimeoutId !== undefined){
+ cT(popupTimeoutId);
+ }
+ popupTimeoutId=undefined;
+ popupShowFunction(data);
+ var index = data.index;
+ if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset>3){
+ popupTimeoutId = popupdiv.setTimeout('close',3000);
+ }
+ //consolelog('firing markercrossed');
+ //consolelog(data.marker.title);
- });
+ });
+ }
+ }
}
//set up the marker tab
//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, imageCallback, newMarkerCallback) {
+ // newMarkerCallback must be either a string or a function, the necessary checks is done in Timeside.load
+ // (which calls this method)
+ //if markersArray is not an array, it defaults to []
+ init: function(container, sound, soundDurationInMsec, soundImgFcn, soundImgSize, markersArray, newMarkerCallback) {
this._super();
//container is the div #player
-
+
if (!container){
this.debug('ERROR: container is null in initializing the player');
}
this.getSound = function(){
return sound;
}
- if(typeof imageCallback == 'string'){
- var url = imageCallback;
- this.imageCallback = new function(w,h){return url;} ;
- }else{
- this.imageCallback = imageCallback;
+ if(typeof soundImgFcn == 'string'){
+ var url = soundImgFcn;
+ this.imageCallback = new function(w,h){
+ return url;
+ };
+ }else if(typeof soundImgFcn === 'function'){
+ this.imageCallback = soundImgFcn;
}
+
var sd = this.toSec(soundDurationInMsec);
this.getSoundDuration = function(){
return sd;
// }
// };
- var currentMarkerIndex=0;
- this.getCurrentMarkerIndex = function(){
- return currentMarkerIndex;
- };
+ // var currentMarkerIndex=0;
+ // this.getCurrentMarkerIndex = function(){
+ // return currentMarkerIndex;
+ // };
//initializing markermap and markerui
return map;
}
+ var canAddMarkers = false;
if(newMarkerCallback){
- this.canAddMarker = function(){
- return true;
- }
+ // this.canAddMarker = function(){
+ // return true;
+ // }
+ canAddMarkers = true;
if(typeof newMarkerCallback === 'function'){
this.newMarker = newMarkerCallback;
}
- }else{
- this.canAddMarker = function(){
- return false;
- }
}
+ // else{
+ // this.canAddMarker = function(){
+ // return false;
+ // }
+ // }
- },
+ // },
- //sets up the player interface and loads the markers. There is theoretically no need for this method, as it might be included in
- //the init constructor, it is separated for "historical" reasons: this method stems from the old _setupInterface,
- //which was a separate method in the old player code. Future releases might include it in the init constructor
- setupInterface: function(markersArray) {
+ //sets up the player interface and loads the markers. There is theoretically no need for this method, as it might be included in
+ //the init constructor, it is separated for "historical" reasons: this method stems from the old _setupInterface,
+ //which was a separate method in the old player code. Future releases might include it in the init constructor
+ // setupInterface: function(markersArray) {
- var sound = this.getSound();
+ //removed"
+ // var sound = this.getSound();
+ //removed"
this.debug('player _setupInterface sound.readyState:'+sound.readyState); //handle also cases 0 and 2????
var $J = this.$J; //defined in the super constructor
//"</div>",
"</div>"];
- this.getContainer().html(html.join(''));
- var container = this.getContainer();
+ //removed"
+ //this.getContainer().html(html.join(''));
+ //var container = this.getContainer();
+ //removed"
+ //added"
+ container.html(html.join(''));
+ //added"
var control = container.find('.ts-control');
var setMarkerButton = control.find('.ts-set-marker');
- var canAddMarkers = this.canAddMarker();
+ //removed"
+ //var canAddMarkers = this.canAddMarker();
+ //removed"
if(canAddMarkers){
setMarkerButton.show().attr('href','#').unbind('click').bind('click', function(){
me.addMarker(me.getSoundPosition());
return false;
});
+ }else{
+ setMarkerButton.hide().unbind('click');
}
'display':'inline-block',
'overflow':'hidden'
});
- if(!canAddMarkers){
- setMarkerButton.hide().unbind('click');
- }
+ // if(!canAddMarkers){
+ // setMarkerButton.hide().unbind('click');
+ // }
var waitImg = control.find('.ts-wait');
waitImg.html('wait').css({
return ruler;
}
- this.resize(); //which calls also ruler.resize() (see below)
+ //setting image size (if provided) and resize player. Note that _setImageSize (with underscore) is intended to be
+ //a private method (faster). setImageSize (without underscore) is the public method to use outside of player object
+ if(soundImgSize){
+ this._setImageSize(soundImgSize.width,soundImgSize.height,container, wave,true); //calls this.resize which calls ruler.resize
+ }else{
+ this._setImageSize('','',container, wave,true); //calls this.resize which calls ruler.resize
+ }
+
+ //this.resize(); //which calls also ruler.resize() (see below)
//binds click for the pointer
//NOTE: loadMarkers ASYNCHRONOUSLY CALLS THE SERVER, SO METHODS WRITTEN AFTER IT MIGHT BE EXECUTED BEFORE
//loadMarkers has finished its job
//this.loadMarkers(callback);
-
+ if(!(markersArray) || !(markersArray.length)){
+ markersArray = [];
+ }
this.loadMarkers(markersArray);
},
var offs = marker.offset;
var intervalUpperBound = offs+margin;
var intervalLowerBound = offs-margin;
- var data = {index:idx,marker:marker};
+ var data = {
+ index:idx,
+ marker:marker
+ };
fireOnMarkerPosition = function(seconds){
if(marker){
if(seconds>intervalLowerBound && seconds < intervalUpperBound){
- player.fire('markerCrossed',data);
- idx++;
- if(idx<len){
- marker = markers[idx];
- offs = marker.offset;
- intervalUpperBound = offs+margin;
- intervalLowerBound = offs-margin;
- data = {index:idx,marker:marker};
- }else{
- marker = undefined;
- }
+ player.fire('markerCrossed',data);
+ idx++;
+ if(idx<len){
+ marker = markers[idx];
+ offs = marker.offset;
+ intervalUpperBound = offs+margin;
+ intervalLowerBound = offs-margin;
+ data = {
+ index:idx,
+ marker:marker
+ };
+ }else{
+ marker = undefined;
+ }
}
}
};
player.soundPosition = sPosInSec;
ruler.movePointer(sPosInSec);
}
- fireOnMarkerPosition(sPosInSec);
+ fireOnMarkerPosition(sPosInSec);
}
},
var wave = container.find('.ts-wave');
- //var image = wave.find('img.ts-image');
- //if(!image.length){
- // image = this.$J('<img/>');
- //}
+
height = wave.height();
this.debug("wave height:" + height);
- if (!height) {
- //this.debug('ERROR: image height is zero in player.,resize!!!!')
- //height = image.height();
- //if (!height){
- height = 200;
- //}
- }
+
+ if (height) {
+
//set image, imagecontainer and canvas (container on imagecontainer for lines and pointer triangles) css
var elements = wave.find('.ts-image-container').css('zIndex','0')
.add(wave.find('.ts-image-canvas').css('zIndex','1')); //the two children of ts-wave. Set also the zIndex
//in order to visualize the canvas OVER the wav image
- elements.css('width', 'auto'); // for IE6. We leave it although IE6 is not anymore supported
+ //elements.css('width', 'auto'); // for IE6. We leave it although IE6 is not anymore supported
var style = {
width: wave.width(),
height: height
}
elements.css(style);
elements.css('position','absolute');
-
+
+ }
+
//refreshing images:
-
+
this.refreshImage();
this.getRuler().resize();
- return this;
+
+//
+// if (!height) {
+// //this.debug('ERROR: image height is zero in player.,resize!!!!')
+// //height = image.height();
+// //if (!height){
+// height = 1; //200;
+// wave.css('minHeight',height+'px');
+// //}
+// }
+// //set image, imagecontainer and canvas (container on imagecontainer for lines and pointer triangles) css
+// var elements = wave.find('.ts-image-container').css('zIndex','0')
+// .add(wave.find('.ts-image-canvas').css('zIndex','1')); //the two children of ts-wave. Set also the zIndex
+// //in order to visualize the canvas OVER the wav image
+//
+// elements.css('width', 'auto'); // for IE6. We leave it although IE6 is not anymore supported
+// var style = {
+// width: wave.width(),
+// height: height
+// }
+// elements.css(style);
+// elements.css('position','absolute');
+//
+// //refreshing images:
+//
+// this.refreshImage();
+// this.getRuler().resize();
+//
+// return this;
},
getImageUrl : function(){
var image = this.getContainer().find('.ts-image');
// image = container.find('.ts-image');
// }
+ //consolelog(this);
+
var size = this.getImageSize();
+
+ if(!size.width || !size.height){
+ consolelog('size is zero!!!!');
+ return;
+ }
var imgSrc = this.imageCallback(size.width,size.height);
var imageNotYetCreated = image.length == 0;
if(!imageNotYetCreated && image.attr('src')==imgSrc){
height:wave.height()
}
},
+
setImageSize: function(width,height){
- var wave = this.getContainer().find('.ts-wave');
- wave.css({'width':width,'height':height});
- this.resize();
+ var container = this.getContainer();
+ var wave = container.find('.ts-wave');
+ this._setImageSize(width,height,container, wave,true);
+ },
+ //this is intended to be a private method, use setImageSize from outside the player object)
+ _setImageSize: function(width,height,jQueryContainerElement, jQueryWaveElement, resize){
+ if(width || height){
+ consolelog('SETTING SIZE!!!');
+ var re = /(?:px|ex|em|%)$/;
+ if(width){
+ width+='';
+ width = re.exec(width) ? width : width+'px';
+ jQueryContainerElement.css('width',width);
+ }
+ if(height){
+ height+='';
+ height = re.exec(height) ? height : height+'px';
+ jQueryWaveElement.css('height',height);
+ }
+ }
+ if(resize){
+ this.resize();
+ }
},
getSoundVolume :function(){
projects / telemeta.git / commitdiff