From: riccardo <riccardo@parisson.com>
Date: Thu, 26 May 2011 14:16:03 +0000 (+0200)
Subject: fixed ruler bug, added waitbar when clicking play (important for long files waiting... 
X-Git-Tag: 1.1~155
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=c5febfe7e3ce3bc1caf4ddfd82f292b3d227bec5;p=telemeta.git

fixed ruler bug, added waitbar when clicking play (important for long files waiting for timeside)
---

diff --git a/telemeta/htdocs/timeside/js/player.js b/telemeta/htdocs/timeside/js/player.js
index 810a02aa..ad8e90c5 100644
--- a/telemeta/htdocs/timeside/js/player.js
+++ b/telemeta/htdocs/timeside/js/player.js
@@ -53,19 +53,10 @@ var Player = TimesideClass.extend({
             return visualizers;
         }
 
-
-        //rpivate functions for converting
-        //soundmanager has milliseconds, we use here seconds
-        
-
-
         var sd = this.toSec(soundDurationInMsec);
         this.getSoundDuration = function(){
             return sd;
         }
-       
-       
-
         
         this.soundPosition =  sound.position ? this.toSec(sound.position) : 0;
         //public methods: returns the sound position
@@ -156,18 +147,21 @@ var Player = TimesideClass.extend({
     },
     play : function(){
         var player = this;
-        if(!player || player.isPlaying()){ //soundManager multishot is set to false. We leave this check for safety
-            return false;
-        }
         var sound = player.getSound();
-        if(!sound){
+        var imgWaitDisplaying = this.isWaitVisible();
+        //soundManager multishot set false should prevent the play when already playing. We leave this check for safety
+        if(!player || player.isPlaying() || !sound){
+            if(imgWaitDisplaying){
+                this.setWait(false);
+            }
             return false;
         }
 
         var toSec = player.toSec;
         var ruler = player.getRuler();
         var sPosInMsec = player.toMsec(player.soundPosition);
-        var imgWaitDisplaying = this.isWaitVisible();
+        
+        
         var playOptions = {
             position: sPosInMsec,
             whileplaying: function(){
@@ -191,7 +185,15 @@ var Player = TimesideClass.extend({
                 }
             },
             onfinish: function() {
-                setPos(0); //reset position, not cursor, so that clicking play restarts from zero
+                //whileplaying is NOT called onsinfish. We must update the pointer:
+                //note that for small length sounds (wg, 5 secs) the pointer shifts abruptly from the last
+                //whileplaying position to the end. We tried with a setTimeout function but the visual effect is not
+                //removed. So we leave this small 'bug'
+                ruler.movePointer(player.getSoundDuration());
+                if(imgWaitDisplaying){
+                    player.setWait.apply(player,[false]);
+                    imgWaitDisplaying = false;
+                }
             }
         };
 
@@ -212,21 +214,33 @@ var Player = TimesideClass.extend({
     isWaitVisible: function(){
         return this.getContainer().find('.ts-wait').is(':visible');
     },
-    setWait: function(value){
+    setWait: function(value, optionalCallback){
         var c = this.getContainer();
         var imgWait = c.find('.ts-wait');
         var selectVis = c.find('.ts-visualizer');
-        setTimeout(function(){
-            if(value){
+        var wait = function(){};
+        if(value){
+            wait= function(){
                 selectVis.hide();
                 imgWait.css('display','inline-block');
-            }else{
+            };
+        }else{
+            wait = function(){
                 imgWait.hide();
                 selectVis.css('display','inline-block');
             }
-        },50);
+        }
+        var delay = 100;
+        if(optionalCallback){
+            wait();
+            setTimeout(optionalCallback, delay);
+        }else{
+            //if there is no callback, delay the wait function in order to emulate a paraller thread
+            //running:
+            setTimeout(wait, delay);
+        }
     },
-    //sets up the player interface and loads the markers. There is theoretically no need of this method, as it might be included in
+    //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(callback) {
@@ -278,7 +292,7 @@ var Player = TimesideClass.extend({
 
         //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();
+        waitImg.attr('src','/images/wait_small.gif').attr('title','wait...').attr('alt','wait').hide();
 
         //setting the select option for visualizers:
         var visualizers = this.getVisualizers();
@@ -336,7 +350,10 @@ var Player = TimesideClass.extend({
         var wave = container.find('.ts-wave');
         var control = container.find('.ts-control');
         var ruler_ = container.find('.ts-ruler');
-        wave.add(viewer).add(control).add(ruler_).css({'position':'relative','overflow':'hidden'});
+        wave.add(viewer).add(control).add(ruler_).css({
+            'position':'relative',
+            'overflow':'hidden'
+        });
 
 
         //creating the ruler
@@ -353,15 +370,15 @@ var Player = TimesideClass.extend({
 
         //bind events to play and pause.
         //pause:
-        var pause_ = me.pause;
         pause.attr('href', '#').bind('click', function(){
-            pause_.apply(me);
+            me.pause.apply(me);
             return false;
         });
         //play:
-        var play_ = me.play;
         play.attr('href', '#').bind('click', function(){
-            play_.apply(me);
+            me.setWait(true,function(){
+                me.play.apply(me);
+            });
             return false;
         });
 
diff --git a/telemeta/htdocs/timeside/js/ruler.js b/telemeta/htdocs/timeside/js/ruler.js
index 7095a396..ddf3054a 100644
--- a/telemeta/htdocs/timeside/js/ruler.js
+++ b/telemeta/htdocs/timeside/js/ruler.js
@@ -85,7 +85,7 @@ var Ruler = TimesideArray.extend({
         this.drawRuler(rulerContainer,h,obj.path);
         
         var labels = obj.labels;
-        if(labels){
+        if(labels && labels.length){
             for(var i=0; i <labels.length;i++){
                 var span = (i==0 ? firstSpan : $J('<span/>'));
                 span.html(labels[i][0]).css({
@@ -101,7 +101,7 @@ var Ruler = TimesideArray.extend({
                 rulerContainer.append(span);
             }
         }else{
-            firstSpan.remove();
+            firstSpan.html(this.makeTimeLabel(0));
         }
 
         var pointer = undefined;
@@ -170,7 +170,7 @@ var Ruler = TimesideArray.extend({
         timeLabelWidth+=fontLeftMargin;
 
         var timeLabelDuration = timeLabelWidth*duration/w;
-
+        
         //determine the ticks:
         var sectionDurations = [1,2,5,10,30,60,120,300,1800,3600,7200,18000,36000];
         //sectionDurations in seconds. Note that 60=1 minute, 3600=1 hour (so the maximum sectionDuration is 36000=10hours)
diff --git a/telemeta/htdocs/timeside/js/timeside.js b/telemeta/htdocs/timeside/js/timeside.js
index f6a24f74..d58e276f 100644
--- a/telemeta/htdocs/timeside/js/timeside.js
+++ b/telemeta/htdocs/timeside/js/timeside.js
@@ -242,7 +242,7 @@ var TimesideClass = Class.extend({
         //marker offset is in float format second.decimalPart
         var pInt = parseInt;
         var round = Math.round;
-        var factor = 60*24;
+        var factor = 3600;
         var hours = pInt(time/factor);
         time-=hours*factor;
         factor = 60;
@@ -250,7 +250,7 @@ var TimesideClass = Class.extend({
         time-=minutes*factor;
         var seconds = pInt(time);
         time-=seconds;
-
+        
         //here below the function to format a number
         //ceilAsPowerOfTen is the ceil specifiedas integer indicating the relative power of ten
         //(0: return the number as it is, 1: format as "0#" and so on)