From 1a2c12a9bc1b99b99aad7cfab5ba0181a23e89e0 Mon Sep 17 00:00:00 2001
From: riccardo <riccardo@parisson.com>
Date: Tue, 31 May 2011 20:52:44 +0200
Subject: [PATCH] fixed volume and minor stuff (img loading), still to
 implement markerpopup

---
 telemeta/htdocs/timeside/js/player.js         | 438 ++++++++++--------
 .../skins/lab/img/controlbg-inverted.png      | Bin 0 -> 173 bytes
 .../timeside/skins/lab/img/volumeoff.png      | Bin 0 -> 882 bytes
 .../timeside/skins/lab/img/volumeon.png       | Bin 0 -> 564 bytes
 .../htdocs/timeside/skins/lab/img/wait3.gif   | Bin 0 -> 2239 bytes
 telemeta/htdocs/timeside/skins/lab/style.css  |  61 ++-
 6 files changed, 297 insertions(+), 202 deletions(-)
 create mode 100644 telemeta/htdocs/timeside/skins/lab/img/controlbg-inverted.png
 create mode 100644 telemeta/htdocs/timeside/skins/lab/img/volumeoff.png
 create mode 100644 telemeta/htdocs/timeside/skins/lab/img/volumeon.png
 create mode 100644 telemeta/htdocs/timeside/skins/lab/img/wait3.gif

diff --git a/telemeta/htdocs/timeside/js/player.js b/telemeta/htdocs/timeside/js/player.js
index 7af93540..2b113d3b 100644
--- a/telemeta/htdocs/timeside/js/player.js
+++ b/telemeta/htdocs/timeside/js/player.js
@@ -48,9 +48,9 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
             return sound;
         }
         this.imageCallback = imageCallback;
-//        this.getVisualizers = function(){
-//            return visualizers;
-//        }
+        //        this.getVisualizers = function(){
+        //            return visualizers;
+        //        }
 
         var sd = this.toSec(soundDurationInMsec);
         this.getSoundDuration = function(){
@@ -227,11 +227,15 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         return false;
     },
     isWaitVisible: function(){
-        return this.getContainer().find('.ts-wait').is(':visible');
+        return this.getContainer().find('.ts-control').find('.ts-wait').is(':visible');
     },
+    getWaitString: function(){
+        return this.getContainer().find('.ts-control').find('.ts-wait').html();
+    },
+
     setWait: function(value, optionalCallback){
         var c = this.getContainer();
-        var waitDiv = c.find('.ts-wait');
+        var waitDiv = c.find('.ts-control').find('.ts-wait');
 
         var player = this;
         var wait = function(){};
@@ -243,12 +247,16 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
             waitDiv.html(wtext);
             wait= function(){
                 waitDiv.css('display','inline-block');
-                player.fire('waiting',{'value': wtext || true}); //assures is a string or a true boolean
+                player.fire('waiting',{
+                    'value': wtext || true
+                    }); //assures is a string or a true boolean
             };
         }else{
             wait = function(){
                 waitDiv.hide();
-                player.fire('waiting',{'value':false});
+                player.fire('waiting',{
+                    'value':false
+                });
             }
         }
         var delay = 100;
@@ -281,7 +289,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         "<div class='ts-wave'>",
         "<div class='ts-image-canvas'></div>",
         "<div class='ts-image-container'>",
-        "<img class='ts-image' src='/images/transparent.png' alt='' />",
+       // "<img class='ts-image' src='/images/transparent.png' alt='' />",
         "</div>",
         "</div>",
         "</div>",
@@ -293,7 +301,16 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         "<a class='ts-rewind'></a>",
         "<a class='ts-forward'></a>",
         "<a class='ts-set-marker'></a>",
-        "<a class='ts-volume'></a>",
+        //        "<a class='ts-volume'></a>",
+
+        //"<div class='ts-volume'>",
+        "<a class='ts-volume-speaker'></a>",
+        "<div class='ts-volume-wrapper-div'>",
+        "<a class='ts-volume-bar-container'>",
+        "<span class='ts-volume-bar'></span>",
+        "</a>",
+        "</div>",
+
         "<div class='ts-wait'></div>",
         //"<img class='ts-wait'/>",
         //"<select class='ts-visualizer'></select>",
@@ -303,88 +320,124 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
 
         this.getContainer().html(html.join(''));
         var container = this.getContainer();
-       
-
-        var rewind = container.find('.ts-rewind');
-        var forward = container.find('.ts-forward');
-        var play = container.find('.ts-play');
-        var pause = container.find('.ts-pause');
-        var volume = container.find('.ts-volume');
 
+        var control = container.find('.ts-control');
 
-        //hide the wait image and set the src
-        
-        //waitImg.attr('src','/images/wait_small.gif').attr('title','wait...').attr('alt','wait').hide();
-
-        //setting the select option for visualizers:
-//        var visualizers = this.getVisualizers();
-//        var select = container.find('.ts-visualizer');
-//        for(var name in visualizers){
-//            //$J('<option/>').val(visualizers[name]).html(name).appendTo(select);
-//            $J('<option/>').html(name).appendTo(select);
-//        }
-//        //assigning event on select:
-//        select.change(
-//            function (){
-//                me.refreshImage.apply(me);
-//            });
-
-        var rewind_ = this.rewind;
-        var forward_ = this.forward;
+        //bind events to buttons:
+        var rewind = control.find('.ts-rewind');
         rewind.attr('href', '#').click(function(e){
-            rewind_.apply(me);
+            me.rewind.apply(me);
             return false;
         });
+        
+        var forward = control.find('.ts-forward');
         forward.attr('href', '#').click(function(e){
-            forward_.apply(me);
+            me.forward.apply(me);
             return false;
         });
 
+        var pause = control.find('.ts-pause');
+        pause.attr('href', '#').bind('click', function(){
+            me.pause.apply(me);
+            return false;
+        });
+
+        var play = control.find('.ts-play');
+        play.attr('href', '#').bind('click', function(){
+            me.setWait('loading',function(){
+                me.play.apply(me);
+            });
+            return false;
+        });
+
+        var setMarkerButton = control.find('.ts-set-marker');
+
+        var canAddMarkers = this.canAddMarker();
+        
+            if(canAddMarkers){
+                setMarkerButton.show().attr('href','#').unbind('click').bind('click', function(){
+                    me.addMarker(me.getSoundPosition());
+                    return false;
+                });
+            }
+       
+
         //volume:
+        var volumeSpeaker = control.find('.ts-volume-speaker');
+        var volumeBarContainer = control.find('.ts-volume-bar-container');
+        var volumeBar = volumeBarContainer.find('.ts-volume-bar');
+
+        var getVol = function(x){
+            return 100*x/volumeBarContainer.width();
+        };
         function setVolume(event,volumeElement){
-            var ticks = [18,26,33,40,47];
-            var vol = event.pageX - volumeElement.offset().left; //using absolute coordinates allows us to
+            //var ticks = [18,26,33,40,47];
+            var x = event.pageX - volumeElement.offset().left; //using absolute coordinates allows us to
             //avoid using layerX (not supported in all browsers) and clientX (which needs the window scrollLeft variable)
-            for(var i=0; i<ticks.length; i++){
-                if(vol<=ticks[i]){
-                    var volume = i*20;
-                    me.setSoundVolume(volume);
-                    return false;
-                }
-            }
-            me.setSoundVolume(100);
+            me.setSoundVolume(getVol(x));
+            consolelog(x+' '+getVol(x));
             return false;
         }
-        volume.attr('href', '#').click(function(event){
-            return setVolume(event,volume);
+        volumeBarContainer.attr('href', '#').click(function(event){
+            return setVolume(event,volumeBar);
+        });
+        volumeSpeaker.attr('href', '#').click(function(){
+             me.setSoundVolume(me.getSoundVolume()>0 ? 0 : getVol(volumeBar.outerWidth()));
+             return false;
         });
+        this.setSoundVolume(this.getSoundVolume());
 
-        
+        control.find('a').attr('href', '#') ;
 
         //SET NECESSARY CSS (THIS WILL OVERRIDE CSS SET IN STYLESHEETS):
         var viewer = container.find('.ts-viewer');
         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'
         });
         //assigning display and title to all anchors
-        control.find('*').css({'display':'inline-block','overflow':'hidden'});
-        
-        //TODO: filter?
-        control.find('a').attr('href', '#') //.css('display','inlineBlock')
-        .each(function(i, a){
-            a = $J(a);
-            a.attr('title', a.attr('class').substring(3));
+        control.find('*').css({
+            'display':'inline-block',
+            'overflow':'hidden'
         });
+        if(!canAddMarkers){
+             setMarkerButton.hide().unbind('click');
+        }
+        //TODO: filter?
+        //.css('display','inlineBlock')
+//        .each(function(i, a){
+//            a = $J(a);
+//
+//            //a.attr('title', a.attr('class').substring(3));
+//        });
         var waitImg = control.find('.ts-wait');
-        waitImg.html('wait').css({'position':'absolute','right':0});
+        waitImg.html('wait').css({
+            'position':'absolute'
+        });
+
+
+        var div = control.find('.ts-volume-wrapper-div');
+        div.css({
+            'position':'absolute',
+            'left':(volumeSpeaker.position().left+volumeSpeaker.outerWidth())+'px',
+            'top':0,
+            'width':'auto',
+            'height':'100%'
+        });
+        consolelog(volumeSpeaker.position().left+' '+volumeSpeaker.outerWidth());
+//        var h = waitImg.parent().height();
+//        var h2 = waitImg.height();
+//        waitImg.css('top',((h-h2)/2)+'px');
+
+//        volumeBarContainer.css('position','relative');
+//        volumeBarContainer.css({
+//            'position':'absolute'
+//        });
+//        volumeBar.add(volumeBarContainer).css({'position':'absolute'});
+
 
-        var h = waitImg.parent().height();
-        var h2 = waitImg.height();
-        waitImg.css('top',((h-h2)/2)+'px');
         this.setWait(false);
 
         //creating the ruler
@@ -394,24 +447,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         }
         
         this.resize(); //which calls also ruler.resize() (see below)
-
-        //TODO: here? maybe in the constructor
-        this.setSoundVolume(this.getSoundVolume());
-
-
-        //bind events to play and pause.
-        //pause:
-        pause.attr('href', '#').bind('click', function(){
-            me.pause.apply(me);
-            return false;
-        });
-        //play:
-        play.attr('href', '#').bind('click', function(){
-            me.setWait('loading',function(){
-                me.play.apply(me);
-            });
-            return false;
-        });
+        
 
         //binds click for the pointer
         var v = $J('#player').find('.ts-viewer');
@@ -527,8 +563,8 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
             //this.debug('ERROR: image height is zero in player.,resize!!!!')
             //height = image.height();
             //if (!height){
-                height = 200;
-            //}
+            height = 200;
+        //}
         }
         //set image, imagecontainer and canvas (container on imagecontainer for lines and pointer triangles) css
         var elements = container.find('.ts-image-container').css('zIndex','0')
@@ -553,49 +589,49 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
        
         
         //adjusting select size:
-//        var select = container.find('.ts-visualizer');
-//        var imgWait = container.find('.ts-wait');
-//
-//        //NOTE: some buttons might be hidden AFTER THIS METHOD HAS BEEN INVOKED
-//        //Therefore, setting the width of select or imgWait is skipped for the moment.
-//        select.css('fontSize','90%'); //this is to increase probability that the select width will fit the available space
-//
-//        var control = container.find('.ts-control');
-//        var maxHeight = control.height();
-//        select.add(imgWait).css('maxHeight',(maxHeight-2)+'px'); //at least a margin left and top of 1 px (see below)
-//
-//        var span = (maxHeight-select.outerHeight())/2; //do not include margins in oputerHeight (we will set them to zero below)
-//        select.css({
-//            'margin':'0px',
-//            'marginTop':span+'px',
-//            'marginLeft':span+'px'
-//        });
-//        var span2 = (maxHeight - imgWait.outerHeight())/2; //do not include margins in oputerHeight (we will set them to zero below)
-//        imgWait.css({
-//            'margin':'0px',
-//            'marginTop':span2+'px',
-//            'marginLeft':span+'px'
-//        })
+        //        var select = container.find('.ts-visualizer');
+        //        var imgWait = container.find('.ts-wait');
+        //
+        //        //NOTE: some buttons might be hidden AFTER THIS METHOD HAS BEEN INVOKED
+        //        //Therefore, setting the width of select or imgWait is skipped for the moment.
+        //        select.css('fontSize','90%'); //this is to increase probability that the select width will fit the available space
+        //
+        //        var control = container.find('.ts-control');
+        //        var maxHeight = control.height();
+        //        select.add(imgWait).css('maxHeight',(maxHeight-2)+'px'); //at least a margin left and top of 1 px (see below)
+        //
+        //        var span = (maxHeight-select.outerHeight())/2; //do not include margins in oputerHeight (we will set them to zero below)
+        //        select.css({
+        //            'margin':'0px',
+        //            'marginTop':span+'px',
+        //            'marginLeft':span+'px'
+        //        });
+        //        var span2 = (maxHeight - imgWait.outerHeight())/2; //do not include margins in oputerHeight (we will set them to zero below)
+        //        imgWait.css({
+        //            'margin':'0px',
+        //            'marginTop':span2+'px',
+        //            'marginLeft':span+'px'
+        //        })
 
         
         return this;
     },
     getImageUrl : function(){
-         var image = this.getContainer().find('.ts-image');
-         if(image && image.length){
-             return image.attr('src');
-         }
-         return '';
+        var image = this.getContainer().find('.ts-image');
+        if(image && image.length){
+            return image.attr('src');
+        }
+        return '';
     },
-   refreshImage: function(){
+    refreshImage: function(){
         var container = this.getContainer();
         var imageC = container.find('.ts-image-container');
         var image = imageC.find('.ts-image');
-//        if(optionalImageAsJQueryElement){
-//            image = optionalImageAsJQueryElement;
-//        }else{
-//            image = container.find('.ts-image');
-//        }
+        //        if(optionalImageAsJQueryElement){
+        //            image = optionalImageAsJQueryElement;
+        //        }else{
+        //            image = container.find('.ts-image');
+        //        }
 
         var size = this.getImageSize();
         var imgSrc = this.imageCallback(size.width,size.height);
@@ -605,7 +641,8 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         }
 
         var player= this;
-        player.setWait.apply(player,['refreshing img']);
+        var waitString = 'refreshing img';
+        player.setWait.apply(player,[waitString]);
 
         
         if(imageNotYetCreated){
@@ -619,7 +656,11 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         }); // for IE7. Does not seem to hurt IE8, FF, Chrome
         
         image.load(function(){
-            player.setWait.apply(player,[false]);
+            if(player.getWaitString()===waitString){
+                //we could have started playback, which means that if the wait bar has a different text,
+                //another method is responsible for hiding it and therefore MUST stay visible
+                player.setWait.apply(player,[false]);
+            }
             image.unbind('load');
             if(imageNotYetCreated){
                 imageC.append(image);
@@ -637,39 +678,39 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         }
     },
 
-//    refreshImage: function(optionalImageAsJQueryElement){
-//        var image;
-//        var container = this.getContainer();
-//        if(optionalImageAsJQueryElement){
-//            image = optionalImageAsJQueryElement;
-//        }else{
-//            image = container.find('.ts-image');
-//        }
-//        var select = container.find('.ts-visualizer');
-//        var funcImg = function(player_image_url, width, height){
-//            var _src_ = null;
-//            if (player_image_url && (width || height)) {
-//                _src_ = player_image_url.replace('WIDTH', width + '').replace('HEIGHT', height + '');
-//            }
-//            return _src_;
-//        };
-//        var imageUrl = getVisualizers()[""+select.val()];
-//        var imgSrc = funcImg(imageUrl, image.width(),image.height());
-//        if(image.attr('src')==imgSrc){
-//            return;
-//        }
-//
-//        var player= this;
-//        player.setWait.apply(player,['refreshing image']);
-//        image.load(function(){
-//            player.setWait.apply(player,[false]);
-//            select.show();
-//            image.unbind('load');
-//        });
-//
-//        image.attr('src', imgSrc);
-//
-//    },
+    //    refreshImage: function(optionalImageAsJQueryElement){
+    //        var image;
+    //        var container = this.getContainer();
+    //        if(optionalImageAsJQueryElement){
+    //            image = optionalImageAsJQueryElement;
+    //        }else{
+    //            image = container.find('.ts-image');
+    //        }
+    //        var select = container.find('.ts-visualizer');
+    //        var funcImg = function(player_image_url, width, height){
+    //            var _src_ = null;
+    //            if (player_image_url && (width || height)) {
+    //                _src_ = player_image_url.replace('WIDTH', width + '').replace('HEIGHT', height + '');
+    //            }
+    //            return _src_;
+    //        };
+    //        var imageUrl = getVisualizers()[""+select.val()];
+    //        var imgSrc = funcImg(imageUrl, image.width(),image.height());
+    //        if(image.attr('src')==imgSrc){
+    //            return;
+    //        }
+    //
+    //        var player= this;
+    //        player.setWait.apply(player,['refreshing image']);
+    //        image.load(function(){
+    //            player.setWait.apply(player,[false]);
+    //            select.show();
+    //            image.unbind('load');
+    //        });
+    //
+    //        image.attr('src', imgSrc);
+    //
+    //    },
 
     getSoundVolume :function(){
         var s = this.getSound();
@@ -723,9 +764,40 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         return false;
     },
 
-    setSoundVolume: function(volume){
+//    setSoundVolume: function(volume){
+//
+//        if(typeof volume != 'number'){ //note: typeof for primitive values, instanceof for the rest
+//            //see topic http://stackoverflow.com/questions/472418/why-is-4-not-an-instance-of-number
+//            volume = 100;
+//        }
+//        if(volume<0){
+//            volume = 0;
+//        }else if(volume>100){
+//            volume = 100;
+//        }
+//        var sound = this.getSound();
+//        //        if(sound.volume == volume){
+//        //            return;
+//        //        }
+//        sound.setVolume(volume);
+//        //update the anchor image:
+//        var indices = [20,40,60,80,100,100000];
+//
+//        var volumeElm = this.getContainer().find('.ts-volume');
+//        for(var i=0; i <indices.length; i++){
+//            if(volume<indices[i]){
+//                var pos = -28*i;
+//                pos = '0px '+ pos+ 'px'; //DO NOT SET !important as in FF3 DOES NOT WORK!!!!!
+//                volumeElm.css('backgroundPosition',pos);
+//                return;
+//            }
+//        }
+//    // this.elements.volume.css('backgroundPosition','0px 0px !important')
+//
+//    },
 
-        if(typeof volume != 'number'){ //note: typeof for primitive values, instanceof for the rest
+    setSoundVolume: function(volume){
+      if(typeof volume != 'number'){ //note: typeof for primitive values, instanceof for the rest
             //see topic http://stackoverflow.com/questions/472418/why-is-4-not-an-instance-of-number
             volume = 100;
         }
@@ -734,25 +806,23 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         }else if(volume>100){
             volume = 100;
         }
-        var sound = this.getSound();
-        //        if(sound.volume == volume){
-        //            return;
-        //        }
-        sound.setVolume(volume);
-        //update the anchor image:
-        var indices = [20,40,60,80,100,100000];
-
-        var volumeElm = this.getContainer().find('.ts-volume');
-        for(var i=0; i <indices.length; i++){
-            if(volume<indices[i]){
-                var pos = -28*i;
-                pos = '0px '+ pos+ 'px'; //DO NOT SET !important as in FF3 DOES NOT WORK!!!!!
-                volumeElm.css('backgroundPosition',pos);
-                return;
-            }
+        volume = Math.round(volume);
+      var sound = this.getSound();
+        if(sound){
+            sound.setVolume(volume);
+        }
+        var control = this.getContainer().find('.ts-control');
+        var volumeSpeaker = control.find('.ts-volume-speaker');
+        var volumeBarContainer = control.find('.ts-volume-bar-container');
+        var volumeBar = volumeBarContainer.find('.ts-volume-bar');
+        if(volume==0){
+            volumeSpeaker.removeClass('ts-volume-speaker-on').addClass('ts-volume-speaker-off');
+            volumeBar.css('visibility','hidden');
+        }else{
+            volumeSpeaker.removeClass('ts-volume-speaker-off').addClass('ts-volume-speaker-on');
+            volumeBar.css('visibility','visible');
+            volumeBar.css({'height':'100%','width':volume+'%'});
         }
-    // this.elements.volume.css('backgroundPosition','0px 0px !important')
-
     },
 
     newMarker: function(offset){
@@ -812,19 +882,19 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         //1) ADD
         //
         //add binding to the setMarker button (html anchor):
-        var setMarkerButton = player.getContainer().find('.ts-set-marker');
-            
-        var showAddMarkerButton = this.canAddMarker();
-        if(setMarkerButton){
-            if(showAddMarkerButton){
-                setMarkerButton.show().attr('href','#').unbind('click').bind('click', function(){
-                    player.addMarker(player.getSoundPosition());
-                    return false;
-                });
-            }else{
-                setMarkerButton.hide().unbind('click');
-            }
-        }
+//        var setMarkerButton = player.getContainer().find('.ts-set-marker');
+//
+//        var showAddMarkerButton = this.canAddMarker();
+//        if(setMarkerButton){
+//            if(showAddMarkerButton){
+//                setMarkerButton.show().attr('href','#').unbind('click').bind('click', function(){
+//                    player.addMarker(player.getSoundPosition());
+//                    return false;
+//                });
+//            }else{
+//                setMarkerButton.hide().unbind('click');
+//            }
+//        }
 
 
         //the function above calls map.add:
diff --git a/telemeta/htdocs/timeside/skins/lab/img/controlbg-inverted.png b/telemeta/htdocs/timeside/skins/lab/img/controlbg-inverted.png
new file mode 100644
index 0000000000000000000000000000000000000000..338a3e1099a8905165287c0bec27572a829704d7
GIT binary patch
literal 173
zcmeAS@N?(olHy`uVBq!ia0vp^j6f{I!3HE3#9loE5-1LGcVbv~PUa<$!<OXj?!xed
z;T6M2uN%H|fFhg)9+AZi4BWyX%*Zfnjs#GUy~NYkmHjrWynqg`zM$1KppdSoi(?4K
z_2df|FD54Z`2XKtU6`4fx#_{7(?{J3CMq=wJWfbTNO+J0l=|<_pmTv^=EWI0*+7j9
Mp00i_>zopr0BvG3umAu6

literal 0
HcmV?d00001

diff --git a/telemeta/htdocs/timeside/skins/lab/img/volumeoff.png b/telemeta/htdocs/timeside/skins/lab/img/volumeoff.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc8cc21e70b09247546f1fb9f63884fc3085941e
GIT binary patch
literal 882
zcmV-&1C9KNP)<h;3K|Lk000e1NJLTq000;O000~a1^@s6d**-c00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipZ7
z5E>g&*&eb0000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}0008bNkl<Z
zNXO-t-%FEG7{|Zw+uY2IHM9$%iy%l-)9LCWw49XW1}mwQ=F-T@u{XE&C)irU3h5%U
z6gM3@wO>Qc&C9SKY(aUKb*1yi!U+mN1S34B3+vV4ySFx3Hyt<^hv((<;XKdto^u$z
zUQdz2A)z#-{C^=JB&7nDP>QWgeZ4_6&QeN|>@*lIpjx99{YFBPOi^RwMO16FSX_)i
zjFD6gbf;@jt<hp39ERhj4aG%8C@C$)%=9z@fdHb>=(>O;*hRWiHK?sSkGc7I*ljn!
zvJ9?pR>-7jP#sa@<J1%)k;n!?0y{WXp~kt|I?T?7;IP{ukx0<oY=lgjhUkw~005;l
zCS`(x&Tbdv@?HG;Ui)3V3kFbcXh0}51BcxPsZ<K1(TM%|#XNj6IDzHm<v$AuS!=QN
zH31<6;V)sdIqXQ6$zU>>kXxYS;m-$qF+M)NxyW$^WV66-YsHR?3~(G51AjKq1Ha!d
z+(kkHN+{?C!OF@C2qD;>o(_)VkXKm3!=HLw@cDf4+f;A|bUj6rAKv5hrzt2D3beGe
z;K0FB9{!}?37_8&u~uh)Z$D;IfKVV94B$?i9dfxGX0tg4{<yCjFUH1Tx^^9cj9-(D
z7kEAK679EdVP|G0EEWs$i&Q*((A|a6(NP#pW|SSR5ETff=<S<VaJ#yoP$*!vT2WAZ
zh=&jKcCNuW3o0s)gJoIqqe3X??CL;PR@NrCr{@tyMn-VCnM37?ll)JWumAv>nwn6k
zJj}!UT@NulJdEt@-6$(pgAxkDGGIYP1#xRouCC(Yea;Sey<QMPu(TAxgZu4RC1g!P
zAzFiNIXOA4Lg)DRZ(p%*?;Z?!-0*t6F|mdDIY?zP<mTmr0fQlrJMMkJs8p(?FXe_y
zS5b4O4rg^$iPzw7hTGZ6A0_byqf{zW@~mJOW@}gG|MT$r3H&XRm0$Z#4*&oF07*qo
IM6N<$f{b;BQ~&?~

literal 0
HcmV?d00001

diff --git a/telemeta/htdocs/timeside/skins/lab/img/volumeon.png b/telemeta/htdocs/timeside/skins/lab/img/volumeon.png
new file mode 100644
index 0000000000000000000000000000000000000000..93830f5ad283e46bdd0cf1699a5530ea13c6922d
GIT binary patch
literal 564
zcmV-40?Yl0P)<h;3K|Lk000e1NJLTq000;O000~a1^@s6d**-c00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipZ7
z5E~<7z?W?R000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}0004xNkl<Z
zNXONdy-or_5Xb+!UTMG<cnN9>wFDB7s1T1+d<_d5I}<~UF&4zH7&{B&I~arZhN!Lj
z0&2^Q#eFZZ@m9{nO{Tcn-T!ZAc6M)tZQG0#o5h@}{$BuyQUyq2#&67SJKBE9%rG^_
zSx322)sC^qFh!ltCd!p6hyk63(H_*68i6=7L#JU;!YZoO8)&xH0&zdrlK}}Lm|s}L
zYO@6?WlUU~qH&$QlQU$qbHVq1cMlKueYBko%ve^iVprS%Kok#~h(JV`&14imgN*?+
z3W)juxZ)-$VsB-B8xCCnD*$4K6v7|^r83xCrCKd6&m=|cPmTbIpakFwOKGwP6q^+8
zL42(A#B~4}o$Q->pZNa4;Bmwsg^V*%DwTeGlymt4wzhYW%NN|$2|x&em3lc@1e5Ij
z?G*>zU3`6fdL@cjgySp`fQaz&{Dh;!E{0y&`nT!S07QiT-7RjeuR@4stnokj^86S8
z&{%GPr*)gE?c%f-o`(rd6pO`l-$j)2tK$DZyuJZ;^rv1LTjo3f0000<MNUMnLSTX*
CN9aNT

literal 0
HcmV?d00001

diff --git a/telemeta/htdocs/timeside/skins/lab/img/wait3.gif b/telemeta/htdocs/timeside/skins/lab/img/wait3.gif
new file mode 100644
index 0000000000000000000000000000000000000000..bb2f003719d1fd4690a138d760fc6b37902d19ab
GIT binary patch
literal 2239
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
V#1aTtR$Wso{{^w>|NXZg`VXzl@TUL(

literal 0
HcmV?d00001

diff --git a/telemeta/htdocs/timeside/skins/lab/style.css b/telemeta/htdocs/timeside/skins/lab/style.css
index 54f6504b..33197339 100755
--- a/telemeta/htdocs/timeside/skins/lab/style.css
+++ b/telemeta/htdocs/timeside/skins/lab/style.css
@@ -146,31 +146,56 @@
 .ts-skin-lab .ts-player .ts-control  .ts-set-marker {
     background-image: url('img/setmarker.png');
 }
-.ts-skin-lab .ts-player .ts-control .ts-volume {
-    background-image: url('img/volume.png');
-    width:60px !important;
-}
 
-/*top is set inside javascript*/
+/*.ts-skin-lab .ts-player .ts-control .ts-volume {
+    background-image: url('img/volume.png');
+    width:90px !important;
+}*/
+/*.ts-skin-lab .ts-player .ts-control .ts-volume-speaker {
+    background-image: url('img/volumeon.png');
+}*/
+.ts-skin-lab .ts-player .ts-control .ts-volume-speaker-on {
+    background-image: url('img/volumeon.png');
+    width:24px;
+}
+.ts-skin-lab .ts-player .ts-control .ts-volume-speaker-off {
+    background-image: url('img/volumeoff.png');
+    width:24px;
+}
+.ts-skin-lab .ts-player .ts-control .ts-volume-bar-container { 
+    background: url('img/controlbg-inverted.png');
+    background-position: -3px left;
+    background-repeat: repeat-x;
+    height:10px;
+    width:56px;
+    margin-top:9px;
+     -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    
+}
+
+.ts-skin-lab .ts-player .ts-control .ts-volume-bar { /*width will be changed inside the code*/
+    background-color: #e4eaf1;
+     -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+
+/*position is set to absolute inside javascript*/
 .ts-skin-lab .ts-player .ts-control .ts-wait {
     background-repeat: no-repeat;
-    background-image: url('img/wait2.gif');
+    background-image: url('img/wait3.gif');
     text-align: right;
-    height: 21px;
+    right:0;
+    height:28px;
+    line-height:28px;
+    top:0;
     background-position: right center;
     padding-right: 60px;
     font-size: 80%;
     color:white;
-}
 
-/* unused
-.ts-skin-lab .ts-player .ts-control .ts-set-marker {
-    display: block;
-    width: 89px;
-    padding: 28px 0 0 0;
-    overflow: hidden;
-    height: 0px !important;
-    background-image: url('img/setmarker.gif');
-    margin: 5px auto 0 auto;
 }
-*/
+
-- 
2.39.5