// },600);
//}
-function loadPlayer(analizerUrl, soundUrl, visualizers){
+function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName){
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,visualizers);
+ 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, visualizers) {
+function load_player(soundUrl, durationInMsecs, itemId, visualizers, currentUserName) {
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,visualizers);
+ load_player2(this, this.duration, itemId, visualizers, currentUserName);
}
}
});
//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,visualizers);
+ load_player2(sound,durationInMsecs,itemId, visualizers, currentUserName);
});
}
}
//NOTE: the duration must be present. Loaded from xmlanalyzer (see above)
-function load_player2(sound, durationInMsec, visualizers) {
+function load_player2(sound, durationInMsec, itemId, visualizers, currentUserName) {
if (!$('#player').length){
return;
$('.ts-wave a img').insertAfter('.ts-wave a');
$('.ts-wave a').remove();
- var p = new Player(jQuery('#player'), sound, durationInMsec, visualizers);
+ var p = new Player(jQuery('#player'), sound, durationInMsec, itemId, visualizers, currentUserName);
consolelog('initialized player');
- p._setupInterface(CURRENT_USER_NAME ? true : false);
+ p._setupInterface();
//p.loadMarkers();
player = p;
//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,visualizers) {
+ init: function(container, sound, soundDurationInMsec, itemId, visualizers, currentUserName) {
this._super();
var player = this;
-
+
+
if (!container){
this.debug('ERROR: container is null in initializing the player')
}
+ this.getItemId = function(){
+ return itemId;
+ }
+
this.getContainer = function(){
return container;
}
};
//initializing markermap and markerui
- var map = new MarkerMap();
+ var map = new MarkerMap(this.getItemId(), currentUserName);
this.getMarkerMap = function(){
return map;
}
- var mapUI = new MarkerMapDiv();
+ var mapUI = new MarkerMapDiv(currentUserName);
this.getMarkersUI = function(){
return mapUI;
}
+ this.getCurrentUserName = function(){
+ return currentUserName;
+ }
//TODO: define setUpInterface here????
},
- _setupInterface: function(isInteractive) {
+ _setupInterface: function() {
- this.isInteractive = function(){
- return isInteractive;
- }
-
var sound = this.getSound();
consolelog('player _setupInterface sound.readyState:'+sound.readyState); //handle also cases 0 and 2????
//TODO: why the line below does not work?!!!!!
//var viewer = jQueryObjs.find('.ts-viewer');
var viewer = this.getContainer().find('.ts-viewer');
- var ruler = new Ruler(viewer, this.getSoundDuration(), isInteractive);
+ var ruler = new Ruler(viewer, this.getSoundDuration(), (this.getCurrentUserName() || false));
this.getRuler = function(){
return ruler;
}
//finally, load markers and bind events for markers (see method below):
//NOTE: loadMarkers ASYNCHRONOUSLY CALLS THE SERVER, SO METHODS WRITTEN AFTER IT MIGHT BE EXECUTED BEFORE
//loadMarkers has finished its job
- this.loadMarkers(isInteractive);
+ this.loadMarkers();
//set the marker popup
//functions to set the marker popup
},
- loadMarkers: function(isInteractive_){
+ loadMarkers: function(){
//ruler.bind('markermoved',this.markerMoved,this);
var $J = this.$J; //reference to jQuery
-
- var itemId = ITEM_PUBLIC_ID;
+ var isInteractive_ = this.getCurrentUserName() || false;
+ var itemId = this.getItemId();
var player = this;
//initialize the map.
//CODE HERE BELOW IS EXECUTED ONLY IF THE MARKER HAS CAN MOVE IMPLEMENTED (see Ruler???).
//Otherwise, no mouse event can call these methods
//re-implement function move
-// var position = 0;
-// var relativePosition = 0; //position in percentage of container width, set it in move and use it in refreshPosition
-//
-// var mRound = Math.round; //instantiate the functio once
+ // var position = 0;
+ // var relativePosition = 0; //position in percentage of container width, set it in move and use it in refreshPosition
+ //
+ // var mRound = Math.round; //instantiate the functio once
-// this.move = function(pixelOffset) {
-// var width = viewer.width();
-// if (position != pixelOffset) {
-// if (pixelOffset < 0) {
-// pixelOffset = 0;
-// } else if (pixelOffset >= width) {
-// pixelOffset = width - 1;
-// }
-// nodes.each(function(i, node) {
-// $J(node).css('left', mRound(node.originalPosition + pixelOffset) + 'px');
-// });
-// position = pixelOffset;
-// this.refreshLabelPosition(width);
-// //store relative position (see refreshPosition below)
-// relativePosition = pixelOffset == width-1 ? 1 : pixelOffset/width;
-// }
-// return this;
-// };
-//
-// this.refreshLabelPosition = function(optionalContainerWidth){
-// if(!(optionalContainerWidth)){
-// optionalContainerWidth = viewer.width();
-// }
-// var width = optionalContainerWidth;
-// var pixelOffset = position;
-// var labelWidth = label.outerWidth(); //consider margins and padding //label.width();
-// var labelPixelOffset = pixelOffset - labelWidth / 2;
-// if (labelPixelOffset < 0){
-// labelPixelOffset = 0;
-// }else if (labelPixelOffset + labelWidth > width){
-// labelPixelOffset = width - labelWidth;
-// }
-// label.css({
-// left: mRound(labelPixelOffset) + 'px'
-// });
-//
-// };
-//
-// //function called on ruler.resize. Instead of recreating all markers, simply redraw them
-// this.refreshPosition = function(){
-// var width = viewer.width();
-// //store relativePosition:
-// var rp = relativePosition;
-// this.move(mRound(relativePosition*width));
-// //reset relative position, which does not have to change
-// //but in move might have been rounded:
-// relativePosition = rp;
-// //last thing: resize the vertical line.
-// //Assumptions (having a look at the web page element with a debugger and the code above
-// //which uses jsgraphics):
-// //The line is the first item (see drawLine above)
-// //not only the height, but also the height of the clip property must be set
-// var h = viewer.height();
-// $J(nodes[0]).css({
-// 'height':h+'px',
-// 'clip': 'rect(0px 1px '+h+'px 0px)'
-// });
-// }
-//
-// this.remove = function() {
-// painter.clear();
-// $J(painter.cnv).remove();
-// label.remove();
-// return this;
-// };
+ // this.move = function(pixelOffset) {
+ // var width = viewer.width();
+ // if (position != pixelOffset) {
+ // if (pixelOffset < 0) {
+ // pixelOffset = 0;
+ // } else if (pixelOffset >= width) {
+ // pixelOffset = width - 1;
+ // }
+ // nodes.each(function(i, node) {
+ // $J(node).css('left', mRound(node.originalPosition + pixelOffset) + 'px');
+ // });
+ // position = pixelOffset;
+ // this.refreshLabelPosition(width);
+ // //store relative position (see refreshPosition below)
+ // relativePosition = pixelOffset == width-1 ? 1 : pixelOffset/width;
+ // }
+ // return this;
+ // };
+ //
+ // this.refreshLabelPosition = function(optionalContainerWidth){
+ // if(!(optionalContainerWidth)){
+ // optionalContainerWidth = viewer.width();
+ // }
+ // var width = optionalContainerWidth;
+ // var pixelOffset = position;
+ // var labelWidth = label.outerWidth(); //consider margins and padding //label.width();
+ // var labelPixelOffset = pixelOffset - labelWidth / 2;
+ // if (labelPixelOffset < 0){
+ // labelPixelOffset = 0;
+ // }else if (labelPixelOffset + labelWidth > width){
+ // labelPixelOffset = width - labelWidth;
+ // }
+ // label.css({
+ // left: mRound(labelPixelOffset) + 'px'
+ // });
+ //
+ // };
+ //
+ // //function called on ruler.resize. Instead of recreating all markers, simply redraw them
+ // this.refreshPosition = function(){
+ // var width = viewer.width();
+ // //store relativePosition:
+ // var rp = relativePosition;
+ // this.move(mRound(relativePosition*width));
+ // //reset relative position, which does not have to change
+ // //but in move might have been rounded:
+ // relativePosition = rp;
+ // //last thing: resize the vertical line.
+ // //Assumptions (having a look at the web page element with a debugger and the code above
+ // //which uses jsgraphics):
+ // //The line is the first item (see drawLine above)
+ // //not only the height, but also the height of the clip property must be set
+ // var h = viewer.height();
+ // $J(nodes[0]).css({
+ // 'height':h+'px',
+ // 'clip': 'rect(0px 1px '+h+'px 0px)'
+ // });
+ // }
+ //
+ // this.remove = function() {
+ // painter.clear();
+ // $J(painter.cnv).remove();
+ // label.remove();
+ // return this;
+ // };
- this.getViewer = function(){
- return viewer;
- }
- this.getPainter = function(){
- return painter;
- }
+ this.getViewer = function(){
+ return viewer;
+ }
+ this.getPainter = function(){
+ return painter;
+ }
- this.positionInPixels = 0;
- this.positionAsViewerRatio = 0;
+ this.positionInPixels = 0;
+ this.positionAsViewerRatio = 0;
},
//these methods are executed only if marker is movable (see Ruler.js)
move : function(pixelOffset) {
- var width = this.getViewer().width();
- if (this.positionInPixels != pixelOffset) {
- if (pixelOffset < 0) {
- pixelOffset = 0;
- } else if (pixelOffset >= width) {
- pixelOffset = width - 1;
- }
- var nodes = this.getNodes();
- var $J = this.$J;
- var mRound = this.mRound;
- nodes.each(function(i, node) {
- $J(node).css('left', mRound(node.originalPosition + pixelOffset) + 'px');
- });
- this.positionInPixels = pixelOffset;
- this.refreshLabelPosition(width);
- //store relative position (see refreshPosition below)
- this.positionAsViewerRatio = pixelOffset == width-1 ? 1 : pixelOffset/width;
+ var width = this.getViewer().width();
+ if (this.positionInPixels != pixelOffset) {
+ if (pixelOffset < 0) {
+ pixelOffset = 0;
+ } else if (pixelOffset >= width) {
+ pixelOffset = width - 1;
}
- return this;
- },
-
- refreshLabelPosition : function(optionalContainerWidth){
- if(!(optionalContainerWidth)){
- optionalContainerWidth = this.getViewer().width();
- }
- var label = this.getLabel();
- var width = optionalContainerWidth;
- var pixelOffset = this.positionInPixels;
- var labelWidth = label.outerWidth(); //consider margins and padding //label.width();
- var labelPixelOffset = pixelOffset - labelWidth / 2;
- if (labelPixelOffset < 0){
- labelPixelOffset = 0;
- }else if (labelPixelOffset + labelWidth > width){
- labelPixelOffset = width - labelWidth;
- }
- label.css({
- left: this.mRound(labelPixelOffset) + 'px'
- });
-
- },
-
- //function called on ruler.resize. Instead of recreating all markers, simply redraw them
- refreshPosition : function(){
- var width = this.getViewer().width();
- //store relativePosition:
- var rp = this.positionAsViewerRatio;
- this.move(this.mRound(this.positionAsViewerRatio*width));
- //reset relative position, which does not have to change
- //but in move might have been rounded:
- this.positionAsViewerRatio = rp;
- //last thing: resize the vertical line.
- //Assumptions (having a look at the web page element with a debugger and the code above
- //which uses jsgraphics):
- //The line is the first item (see drawLine above)
- //not only the height, but also the height of the clip property must be set
- var h = this.getViewer().height();
var nodes = this.getNodes();
var $J = this.$J;
- $J(nodes[0]).css({
- 'height':h+'px',
- 'clip': 'rect(0px 1px '+h+'px 0px)'
+ var mRound = this.mRound;
+ nodes.each(function(i, node) {
+ $J(node).css('left', mRound(node.originalPosition + pixelOffset) + 'px');
});
- },
+ this.positionInPixels = pixelOffset;
+ this.refreshLabelPosition(width);
+ //store relative position (see refreshPosition below)
+ this.positionAsViewerRatio = pixelOffset == width-1 ? 1 : pixelOffset/width;
+ }
+ return this;
+ },
- remove : function() {
- var painter = this.getPainter();
- var label = this.getLabel();
- painter.clear();
- $J(painter.cnv).remove();
- label.remove();
- return this;
- },
+ refreshLabelPosition : function(optionalContainerWidth){
+ if(!(optionalContainerWidth)){
+ optionalContainerWidth = this.getViewer().width();
+ }
+ var label = this.getLabel();
+ var width = optionalContainerWidth;
+ var pixelOffset = this.positionInPixels;
+ var labelWidth = label.outerWidth(); //consider margins and padding //label.width();
+ var labelPixelOffset = pixelOffset - labelWidth / 2;
+ if (labelPixelOffset < 0){
+ labelPixelOffset = 0;
+ }else if (labelPixelOffset + labelWidth > width){
+ labelPixelOffset = width - labelWidth;
+ }
+ label.css({
+ left: this.mRound(labelPixelOffset) + 'px'
+ });
+
+ },
+
+ //function called on ruler.resize. Instead of recreating all markers, simply redraw them
+ refreshPosition : function(){
+ var width = this.getViewer().width();
+ //store relativePosition:
+ var rp = this.positionAsViewerRatio;
+ this.move(this.mRound(this.positionAsViewerRatio*width));
+ //reset relative position, which does not have to change
+ //but in move might have been rounded:
+ this.positionAsViewerRatio = rp;
+ //last thing: resize the vertical line.
+ //Assumptions (having a look at the web page element with a debugger and the code above
+ //which uses jsgraphics):
+ //The line is the first item (see drawLine above)
+ //not only the height, but also the height of the clip property must be set
+ var h = this.getViewer().height();
+ var nodes = this.getNodes();
+ var $J = this.$J;
+ $J(nodes[0]).css({
+ 'height':h+'px',
+ 'clip': 'rect(0px 1px '+h+'px 0px)'
+ });
+ },
+
+ remove : function() {
+ var $J = this.$J;
+ var painter = this.getPainter();
+ var label = this.getLabel();
+ painter.clear();
+ $J(painter.cnv).remove();
+ label.remove();
+ return this;
+ },
- mRound: Math.round
+ mRound: Math.round
});