From 2fd1d266181c8b92983453291d452d52907f505a Mon Sep 17 00:00:00 2001
From: riccardo <riccardo@parisson.com>
Date: Wed, 11 May 2011 20:44:29 +0200
Subject: [PATCH] player loads from js and not from html+js. Seems to work
 (even better...)

---
 telemeta/htdocs/js/playerUtils.js             |   1 +
 telemeta/htdocs/timeside/src/player.js        | 106 ++++++----
 telemeta/htdocs/timeside/src/timeside.js      | 199 +++++-------------
 .../telemeta_default/mediaitem_detail.html    |   4 +-
 4 files changed, 118 insertions(+), 192 deletions(-)

diff --git a/telemeta/htdocs/js/playerUtils.js b/telemeta/htdocs/js/playerUtils.js
index 0ebab94b..c4c1c260 100644
--- a/telemeta/htdocs/js/playerUtils.js
+++ b/telemeta/htdocs/js/playerUtils.js
@@ -59,6 +59,7 @@ function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName)
     if(!(analizerUrl) || !(soundUrl)){
         return;
     }
+   
     var $J = jQuery;
     consolelog('till here all ok1');
     var msgElm = $J('#loading_span_text'); //element to show messages
diff --git a/telemeta/htdocs/timeside/src/player.js b/telemeta/htdocs/timeside/src/player.js
index c5303317..d28290bc 100644
--- a/telemeta/htdocs/timeside/src/player.js
+++ b/telemeta/htdocs/timeside/src/player.js
@@ -184,46 +184,67 @@ var Player = TimesideClass.extend({
         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 =  {
-            'div.ts-viewer': {
-                'div.ts-ruler': {},
-                'div.ts-wave': {
-                    'div.ts-image-canvas': {},
-                    'div.ts-image-container': ['img.ts-image']
-                }
-            },
-            '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','img.ts-wait', 'select.ts-visualizer']
-                }
-            }/*,
-        'div.marker-control': ['a.set-marker']*/
-        };
-        var jQueryObjs = this.loadUI(this.getContainer(), skeleton);
-
-            
-
-        this.getElements = function(){
-            return jQueryObjs;
-        }
-
+//        var skeleton =  {
+//            'div.ts-viewer': {
+//                'div.ts-ruler': {},
+//                'div.ts-wave': {
+//                    'div.ts-image-canvas': {},
+//                    'div.ts-image-container': ['img.ts-image']
+//                }
+//            },
+//            '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','img.ts-wait', 'select.ts-visualizer']
+//                }
+//            }/*,
+//        'div.marker-control': ['a.set-marker']*/
+//        };
+        //var jQueryObjs = this.loadUI(this.getContainer(), skeleton);
+
+
+        var html = ["<div class='ts-viewer'>",
+                        "<div class='ts-ruler'></div>",
+                        "<div class='ts-wave'>",
+                            "<div class='ts-image-canvas'></div>",
+                            "<div class='ts-image-container'>",
+                               "<img class='ts-image' src='' alt='' />",
+                            "</div>",
+                        "</div>",
+                    "</div>",
+                    "<div class='ts-control'>",
+                        "<div class='ts-layout'>",
+                            "<div class='ts-playback'>",
+                                "<a class='ts-play'></a>",
+                                "<a class='ts-pause'></a>",
+                                "<a class='ts-rewind'></a>",
+                                "<a class='ts-forward'></a>",
+                                "<a class='ts-set-marker'></a>",
+                                "<a class='ts-volume'></a>",
+                                "<img class='ts-wait'/>",
+                                "<select class='ts-visualizer'></select>",
+                            "</div>",
+                        "</div>",
+                    "</div>"];
+
+        this.getContainer().html(html.join(''));
+        var container = this.getContainer();
        
 
-        var rewind = jQueryObjs.find('.ts-rewind');
-        var forward = jQueryObjs.find('.ts-forward');
-        var play = jQueryObjs.find('.ts-play');
-        var pause = jQueryObjs.find('.ts-pause');
-        var volume = jQueryObjs.find('.ts-volume');
+        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');
 
 
          //hide the wait image and set the src
-        var waitImg = jQueryObjs.find('.ts-wait');
+        var waitImg = container.find('.ts-wait');
         waitImg.attr('src','/images/wait_small.gif').attr('title','refreshing image').attr('alt','refreshing image').hide();
 
         //setting the select option for visualizers:
         var visualizers = this.getVisualizers();
-        var select = jQueryObjs.find('.ts-visualizer');
+        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);
@@ -277,7 +298,7 @@ var Player = TimesideClass.extend({
         //            ));
 
         //assigning title to all anchors
-        jQueryObjs.attr('href', '#')
+        container.find('a').attr('href', '#')
         .each(function(i, a){
             a = $J(a);
             a.attr('title', a.attr('class').substring(3));
@@ -411,9 +432,9 @@ var Player = TimesideClass.extend({
     resize: function() {
         this.debug("resizing");
         var height;
-        var playerelements = this.getElements();
-        var wave = playerelements.find('.ts-wave');
-        var image = playerelements.find('.ts-image');
+        var container = this.getContainer();
+        var wave = container.find('.ts-wave');
+        var image = container.find('.ts-image');
         height = wave.height();
         this.debug("wave height:" + height);
         if (!height) {
@@ -422,8 +443,8 @@ var Player = TimesideClass.extend({
         }
         //set image, imagecontainer and canvas (container on imagecontainer for lines and pointer triangles) css
         var elements = image
-        .add(playerelements.find('.ts-image-container'))
-        .add(playerelements.find('.ts-image-canvas'));
+        .add(container.find('.ts-image-container'))
+        .add(container.find('.ts-image-canvas'));
 
         elements.css('width', 'auto'); // for IE6
 
@@ -490,12 +511,13 @@ var Player = TimesideClass.extend({
     //    },
     refreshImage: function(optionalImgJQueryElm){
         var image;
+        var container = this.getContainer();
         if(optionalImgJQueryElm){
             image = optionalImgJQueryElm;
         }else{
-            image = this.getElements().find('.ts-image');
+            image = container.find('.ts-image');
         }
-        var select = this.getElements().find('.ts-visualizer');
+        var select = container.find('.ts-visualizer');
         var funcImg = function(player_image_url, width, height){
             var _src_ = null;
             if (player_image_url && (width || height)) {
@@ -514,7 +536,7 @@ var Player = TimesideClass.extend({
         var w =select.width();
         var h = select.height();
         select.hide();
-        var progressBar = this.getElements().find('.ts-wait').css({'width':w+'px','height':h+'px'}).show();
+        var progressBar = container.find('.ts-wait').css({'width':w+'px','height':h+'px'}).show();
         
         image.load(function(){
             progressBar.hide();
@@ -602,7 +624,7 @@ var Player = TimesideClass.extend({
         //update the anchor image:
         var indices = [20,40,60,80,100,100000];
 
-        var volumeElm = this.getElements().find('.ts-volume');
+        var volumeElm = this.getContainer().find('.ts-volume');
         for(var i=0; i <indices.length; i++){
             if(volume<indices[i]){
                 var pos = -28*i;
@@ -656,7 +678,7 @@ var Player = TimesideClass.extend({
             //1) ADD
             //
             //add binding to the setMarker button (html anchor):
-            var setMarkerButton = player.getElements().find('.ts-set-marker');
+            var setMarkerButton = player.getContainer().find('.ts-set-marker');
             var tab = $J('#tab_markers');
             if(setMarkerButton){
                 if(isInteractive_){
diff --git a/telemeta/htdocs/timeside/src/timeside.js b/telemeta/htdocs/timeside/src/timeside.js
index 1fb09f1d..26f647bf 100644
--- a/telemeta/htdocs/timeside/src/timeside.js
+++ b/telemeta/htdocs/timeside/src/timeside.js
@@ -14,8 +14,7 @@
  * MIT Licensed.
  * (Inspired by base2 and Prototype)
  * 
- * In my opinion the lightest (no tons of heavy .js files to be included) and
- * easiest (no days spent understanding what is going on) way to implement inhertance and OOP in
+ * In my (Riccardo) opinion the lightest and most-comprehensive way to implement inhertance and OOP in
  * javascript. Usages can be found below.
  * Basically,
  * 1) a new Class is instantiated with Class.extend(). This function takes a dictionary
@@ -25,11 +24,12 @@
  * In this case, the variable this._super inside the overridden methods will refers to the super-method and can thus be called safely.
  * Consequently, if a _super property/method is implemented in the extend dictionary, it WILL NOT be accessible
  * to the overriding methods of B. Basically, don't use _super as a key of the argument of extend.
- * 3) AFTER the prototype has been populated, the init function, if exists, is called. The latter can be seen as a class constructor in java.
- * Private variable can be declared in the init function (which is used as class constructor), as well as
+ * 3) AFTER the prototype has been populated, the init function, if exists, is called. The latter can be seen as a class constructor in java,
+ * with a substantial difference: when executing the init() method the class prototype has already been populated with all inherited methods.
+ * Private variable can be declared in the init function, as well as
  * relative getters and setters, if needed. Downside is that the privileged getters and setters can’t be put in the prototype,
- * i.e. they are created for each instance separately. Another issue is the overhead of closures in general (basically, write as less as possible
- * in the init functionm in particular if the class has to be declared several times)
+ * i.e. they are created for each instance separately, and the _super keyword does not apply to them. Another issue is the overhead of closures in general (basically, write as less as possible
+ * in the init function, in particular if the class has to be declared several times)
  * Of course, the this._super keyword of methods implemented in the init constructor does not work
  *
  * EXAMPLE:
@@ -242,7 +242,7 @@ var TimesideClass = Class.extend({
         //the map for listeners. Must be declared in the init as it's private and NOT shared by all instances
         //(ie, every instance has its own copy)
         this.listenersMap={};
-        //follows jquery bind. Same as adding a listener for a key
+    //follows jquery bind. Same as adding a listener for a key
         
     },
 
@@ -250,117 +250,49 @@ var TimesideClass = Class.extend({
      *methods defining listeners, events fire and bind:
      */
     bind : function(key, callback, optionalThisArgInCallback){
-            if(!(callback && callback instanceof Function)){
-                this.debug('cannot bind '+key+' to callback: the latter is null or not a function');
-                return;
-            }
-            var listenersMap = this.listenersMap;
-            var keyAlreadyRegistered = (key in listenersMap);
-            if(!keyAlreadyRegistered){
-                listenersMap[key] = [];
-            }
-            listenersMap[key].push({
-                callback:callback,
-                optionalThisArgInCallback:optionalThisArgInCallback
-            });
-        },
-        unbind : function(){
-             var listenersMap = this.listenersMap;
-            if(arguments.length>0){
-                var key = arguments[0];
-                if(key in listenersMap){
-                    delete listenersMap[key];
-                }
-            }else{
-                for(key in listenersMap){
-                    delete listenersMap[key];
-                }
-            }
-        },
-        fire : function(key, dataArgument){
-              var listenersMap = this.listenersMap;
-            if(!(key in listenersMap)){
-                this.debug(key+' fired but no binding associated to it');
-                return;
+        if(!(callback && callback instanceof Function)){
+            this.debug('cannot bind '+key+' to callback: the latter is null or not a function');
+            return;
+        }
+        var listenersMap = this.listenersMap;
+        var keyAlreadyRegistered = (key in listenersMap);
+        if(!keyAlreadyRegistered){
+            listenersMap[key] = [];
+        }
+        listenersMap[key].push({
+            callback:callback,
+            optionalThisArgInCallback:optionalThisArgInCallback
+        });
+    },
+    unbind : function(){
+        var listenersMap = this.listenersMap;
+        if(arguments.length>0){
+            var key = arguments[0];
+            if(key in listenersMap){
+                delete listenersMap[key];
             }
-            var callbacks = listenersMap[key];
-            var len = callbacks && callbacks.length ? callbacks.length : 0;
-            for(var i=0; i<len; i++){
-                var obj = callbacks[i];
-                if('optionalThisArgInCallback' in obj){
-                    obj.callback.apply(obj.optionalThisArgInCallback, [dataArgument]);
-                }else{
-                    obj.callback(dataArgument);
-                }
+        }else{
+            for(key in listenersMap){
+                delete listenersMap[key];
             }
-        },
-
-    /* creates all elements in skeleton and appends them in container. Returns
-        * the jQuery object representing all elements created
-        *
-        * skeleton can be is a javascript object or array. 
-        * 1) a javascript array. In this case its elements must be strings according to the syntax 'tag.className' or simply 'tag', 
-        * eg, 'div.classname', 'a' etcetera
-        * 2) a javascript object. In this case its keys must be strings in the same syntax as specified above
-        * and the values associated to each key must be in turn an object or an array following again the same syntax 
-        * in order to represent the subelements of key to be created
-        * Example1
-        *   skeleton = { 'div.className':['a.className2'] };
-        *   UI(container, skeleton);
-        * will return a jQuery object of the newly created div (with class 'className') which has been appended to container
-        * the returned div has an anchor element as child with class 'className2'
-        * Example2
-        *   skeleton= {'div.className':{}, ', 'div':{}};
-        *   UI(container, skeleton)
-        * will return a jQuery object of the 2 newly created divs (the former with class 'className')
-        * which have been appended to container
-        */
-    loadUI: function(container, skeleton) {
-        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();
-                //consolelog('loadUI: inserting ' + element.attr('class')+' in '+container_.attr('class'));
-                if (index < children.length) {
-                    children.eq(index).before(element);
-                } else {
-                    container_.append(element);
-                }
+        }
+    },
+    fire : function(key, dataArgument){
+        var listenersMap = this.listenersMap;
+        if(!(key in listenersMap)){
+            this.debug(key+' fired but no binding associated to it');
+            return;
+        }
+        var callbacks = listenersMap[key];
+        var len = callbacks && callbacks.length ? callbacks.length : 0;
+        for(var i=0; i<len; i++){
+            var obj = callbacks[i];
+            if('optionalThisArgInCallback' in obj){
+                obj.callback.apply(obj.optionalThisArgInCallback, [dataArgument]);
             }else{
-                
-            //consolelog('loadUI: returning ' + element.attr('class')+' (already present) ');
-            }
-            return element;
-        };
-
-        if (skeleton[0]) {
-            $J(skeleton).each((function(i, selector) {
-                var s = selector.split('.');
-                var newChild = _loadChild(container, s[0], s[1], i++);
-                elements = elements.add(newChild);
-                
-            }));
-        } else {
-            for (var key in skeleton) {
-                var s = key.split('.');
-                var subcontainer = _loadChild(container, s[0], s[1], i++);
-                elements = elements.add(subcontainer);
-                elements = elements.add(this.loadUI(subcontainer, skeleton[key]));
-                
-            //elements[$N.Util.camelize(s[1])] = e;
-            //$N.extend(elements, UI(e, skeleton[key], contents));
-
+                obj.callback(dataArgument);
             }
         }
-       //consolelog(elements.find('.ts-image'));
-        return elements;
     }
 
 });
@@ -386,7 +318,7 @@ var TimesideArray = TimesideClass.extend({
         }
         this.length = me.length; //in order to match the javascript array property
     },
-    length:0, //implement it as public property to be consistent with Array length property. However, DO NOT modify directly this property!!!
+    length:0, //implement it as public property to be consistent with Array length property. Be careful however to NOT TO modify directly this property!!!
     //adds at the end of the array. If index is missing the object is appended at the end
     add : function(object, index){
         var array = this.toArray();
@@ -456,36 +388,7 @@ var TimesideArray = TimesideClass.extend({
         for(var i = startInclusive; i<endExclusive; i++){
             callback(i,me[i]);
         }
-    //
-    //
-    //        if(!(len) || arg[len-1]===undefined){
-    //            consolelog('each called without arguments!!!');
-    //            return;
-    //        }
-    //        callback = arg[len-1];
-    //        //return immediately if startinedx exists and is greater or equal this.length
-    //        if(len>1 && arg[0] >= this.length){
-    //            return;
-    //        }
-    //        if(len>1 && startInclusive=== undefined){
-    //            consolelog('oops---------------- startindex');
-    //        }else if(len>2 && endExclusive=== undefined){
-    //            consolelog('oops---------------- endIndex');
-    //        }
-    //
-    //        var formatvar = function(array,index, correctionValue){
-    //            if(array.length>index && array[index]!== undefined){
-    //                return array[index];
-    //            }
-    //            return correctionValue;
-    //        }
-    //        var me =this.toArray();
-    //        var s = len > 1 ? formatvar(arg,0,0) : 0;
-    //        var e = len > 2 ? formatvar(arg,1,me.length) : me.length;
-    //        //consolelog(s+' - '+e);
-    //        for(var i = s; i<e; i++){
-    //            callback(i,me[i]);
-    //        }
+    
     },
 
     //clears the array and the events associated to it, ie removes all its elements and calls unbind(). Returns the array of the removed elements
@@ -539,13 +442,13 @@ var TimesideArray = TimesideClass.extend({
  *   or container are jQuery objects, the html elements inside them are sorted according to the document order. That's why tabs and
  *   container can be passed also as javascript arrays, so that the binding n-th tab -> n-th container can be decided by the user
  *   regardeless on how elements are written on the page, if already present
- * 3rd argument: the selected index. If missing it defaullts to zero.
+ * 3rd argument: the selected index. If missing it defaults to zero.
  * 4th argument: selectedtab class. Applies to the selected tab after click of one tab. If missing, nothing is done
  * 5th argument the unselectedtab class. Applies to all tabs not selected after click of one tab. If missing, nothing is done
  *
- * NOTE: that the last 2 arguments are intended for css "visual look", as the relevant css will be overridden inside the code.
- * With relevant css we mean all css necessary to let tabs behave like a 'desktop application tab' (eg, (position, top, zIndex). Note also
- * that very tab parent container' of every tab's visibility is set to 'visible' (the default)
+ * NOTE: The last 2 arguments are mostly for customizing the tab "visual look", as some css elements (eg, (position, top, zIndex)
+ * are set inside the code and cannot be changed, as they are mandatory to let tab anchor behave like desktop application tabs. Note also
+ * that every tab container is set to 'visible' by means of jQuery.show()
  *
  * Examples:
  * setUpPlayerTabs([jQuery('#tab1),jQuery('#tab1)], [jQuery('#div1),jQuery('#div2)], 1);
diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html
index d896608e..92828016 100644
--- a/telemeta/templates/telemeta_default/mediaitem_detail.html
+++ b/telemeta/templates/telemeta_default/mediaitem_detail.html
@@ -120,7 +120,7 @@
             <a href="#" class="toggle">Maximize</a>
             <div class="wazing"></div>
             <div id="player" class="ts-player">
-                <div class="ts-viewer">
+                <!--<div class="ts-viewer">
                     <div class="ts-wave">
                         <div class="ts-image-container">
                             <a href="{% url telemeta-item-export item.public_id,"mp3" %}">
@@ -128,7 +128,7 @@
                                  alt="" /></a>
                         </div>
                     </div>
-                </div>
+                </div>-->
             </div>
         </div>
         <!-- <div class="item_visualization" id="item_visualization_id">
-- 
2.39.5