From: riccardo <riccardo@parisson.com>
Date: Mon, 9 May 2011 18:27:50 +0000 (+0200)
Subject: added visualizer on the player (still work in progress) and dynamic resize listener
X-Git-Tag: 1.1~230
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=db17466521ed6833b35b036bf0f45cc2220ad2fb;p=telemeta.git

added visualizer on the player (still work in progress) and dynamic resize listener
---

diff --git a/telemeta/htdocs/images/wait_small.gif b/telemeta/htdocs/images/wait_small.gif
index a401a20e..155c8a5f 100644
Binary files a/telemeta/htdocs/images/wait_small.gif and b/telemeta/htdocs/images/wait_small.gif differ
diff --git a/telemeta/htdocs/js/playerUtils.js b/telemeta/htdocs/js/playerUtils.js
index 5416f712..b8ce16ee 100644
--- a/telemeta/htdocs/js/playerUtils.js
+++ b/telemeta/htdocs/js/playerUtils.js
@@ -5,10 +5,12 @@ function togglePlayerMaximization() {
     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,
@@ -20,38 +22,40 @@ function togglePlayerMaximization() {
     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;
     }
@@ -85,7 +89,7 @@ function loadPlayer(analizerUrl, soundUrl){
             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>");
@@ -95,7 +99,7 @@ function loadPlayer(analizerUrl, soundUrl){
 
 
 //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;
 
@@ -114,7 +118,7 @@ function load_player(soundUrl, durationInMsecs) {
             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);
             }
         }
     });
@@ -122,13 +126,14 @@ function load_player(soundUrl, durationInMsecs) {
         //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;
     }
@@ -138,15 +143,15 @@ function load_player2(sound, durationInMsec) {
     $('.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() {
diff --git a/telemeta/htdocs/timeside/src/player.js b/telemeta/htdocs/timeside/src/player.js
index b1de828b..bebb497a 100644
--- a/telemeta/htdocs/timeside/src/player.js
+++ b/telemeta/htdocs/timeside/src/player.js
@@ -2,7 +2,7 @@ var Player = TimesideClass.extend({
     
     //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;
         
@@ -15,7 +15,10 @@ var Player = TimesideClass.extend({
         this.getSound = function(){
             return sound;
         }
-
+        
+        this.getVisualizers = function(){
+            return visualizers;
+        }
 
 
         //rpivate functions for converting
@@ -82,18 +85,18 @@ var Player = TimesideClass.extend({
         };
 
 
-//       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
@@ -173,7 +176,7 @@ var Player = TimesideClass.extend({
         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 =  {
@@ -187,7 +190,7 @@ var Player = TimesideClass.extend({
             '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']*/
@@ -209,6 +212,46 @@ var Player = TimesideClass.extend({
         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
         //
@@ -223,7 +266,7 @@ var Player = TimesideClass.extend({
         //        .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){
         //
@@ -330,7 +373,7 @@ var Player = TimesideClass.extend({
             'zIndex':1000,
             'overflow':'auto',
             'display':'none' //TODO: remove this
-            //'backgroundColor':'#666'
+        //'backgroundColor':'#666'
         });
         $J('body').append(popupMarker);
         var w = v.width();
@@ -344,7 +387,7 @@ var Player = TimesideClass.extend({
             '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(){
@@ -353,25 +396,54 @@ var Player = TimesideClass.extend({
     },
 
     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() {
@@ -420,9 +492,9 @@ var Player = TimesideClass.extend({
         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){
@@ -437,9 +509,11 @@ var Player = TimesideClass.extend({
             }
             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);
         }
     },
@@ -456,7 +530,7 @@ var Player = TimesideClass.extend({
         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{
diff --git a/telemeta/htdocs/timeside/src/timeside.js b/telemeta/htdocs/timeside/src/timeside.js
index 16b6bb0c..1fb09f1d 100644
--- a/telemeta/htdocs/timeside/src/timeside.js
+++ b/telemeta/htdocs/timeside/src/timeside.js
@@ -319,10 +319,11 @@ var TimesideClass = Class.extend({
         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();
@@ -333,6 +334,7 @@ var TimesideClass = Class.extend({
                     container_.append(element);
                 }
             }else{
+                
             //consolelog('loadUI: returning ' + element.attr('class')+' (already present) ');
             }
             return element;
@@ -343,6 +345,7 @@ var TimesideClass = Class.extend({
                 var s = selector.split('.');
                 var newChild = _loadChild(container, s[0], s[1], i++);
                 elements = elements.add(newChild);
+                
             }));
         } else {
             for (var key in skeleton) {
@@ -356,7 +359,7 @@ var TimesideClass = Class.extend({
 
             }
         }
-       
+       //consolelog(elements.find('.ts-image'));
         return elements;
     }
 
diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html
index bf2339ce..4b15fe2f 100644
--- a/telemeta/templates/telemeta_default/mediaitem_detail.html
+++ b/telemeta/templates/telemeta_default/mediaitem_detail.html
@@ -51,18 +51,22 @@
 
     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()});
         }
     });
 
@@ -117,7 +121,7 @@
                 </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" />&nbsp;Visualization :
                 <select id="visualizer_id" name="visualizer_id">
@@ -127,7 +131,7 @@
                     {% endfor %}
                 </select>
                 <input style="visibility: hidden;" type="submit" value="Set" />
-            </form>
+            </form> -->
 
             <!--
                     <form method="get" action="#">
@@ -141,7 +145,7 @@
                         <input type="submit" value="Get" />
                     </form>
             -->
-        </div>
+        <!-- </div> -->
 
         <div id="tabs_container">
             <!-- this div will be hidden when everything is fully loaded-->