add player dynamic server-side image resizing

diff --git a/telemeta/htdocs/css/player.css b/telemeta/htdocs/css/player.css
index 1af204599cb2adb87e29b0fe9685f608ebb89b22..d7680ce758d92bcf86aab6c5d343e953609c79a2 100644 (file)
--- a/telemeta/htdocs/css/player.css
+++ b/telemeta/htdocs/css/player.css
@@ -63,6 +63,7 @@
 
 
 #player_maximized .toggle, #player_minimized .toggle {
+    position: relative;
     display: block;
     overflow: hidden;
     float: right;
@@ -72,10 +73,11 @@
     height /**/:10px; /* for IE5/Win only */
     background-image: url('../images/maximize.gif');
     text-decoration: none;
-    border: 0;
+    border: none;
 }
+
 #player_maximized .toggle:hover, #player_minimized .toggle:hover {
-    background-position: 0 -10px;
+    background-position: 0px -10px;
 }
 
 #player_maximized {

diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css
index 7cb1d9634d6500199c93db1fa983e68330367dde..14e75f909fc73dfcf4d5eabfc121f7cf09e7294f 100644 (file)
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -32,6 +32,12 @@ h3 {
     clear: both;\r
     height: 5px;\r
 }\r
+\r
+.wazing {\r
+    clear: both;\r
+    position: relative;\r
+}\r
+\r
 /* Min-width */\r
 #layout {\r
     min-width: 740px;\r

diff --git a/telemeta/htdocs/js/player.js b/telemeta/htdocs/js/player.js
index fe8d1a169f5f7594142ab05ee7e09ff376783822..2a479828c5194644e30cf9ced24fd3c3783aafb9 100644 (file)
--- a/telemeta/htdocs/js/player.js
+++ b/telemeta/htdocs/js/player.js
@@ -4,6 +4,7 @@ var soundEngineReady = false;
 var map;
 var provider;
 var player;
+var player_image_url = null;
 
 function togglePlayerMaximization() {
     var view = $('#player');
@@ -34,6 +35,13 @@ function load_sound() {
     }
 }
 
+function change_visualizer() {
+    set_player_image_url($('#visualizer_id').get(0).value);
+    if (player)
+        player.refreshImage();
+    return false;
+}
+
 function load_player(duration) {
     $(document).ready(function () {
         soundUrl = $('.ts-wave a').attr('href');
@@ -44,14 +52,21 @@ function load_player(duration) {
         TimeSide.load(function() {
             map = new TimeSide.MarkerMap();
             provider = new TimeSide.SoundProvider({duration: duration});
-            player = new TimeSide.Player('#player');
+            player = new TimeSide.Player('#player', {
+                image: get_player_image_src
+            });
             controller = new TimeSide.Controller({
                 player: player,
                 soundProvider: provider, 
                 map: map
             });
+            change_visualizer();
+            player.resize();
         });
 
+        $('#visualizer_id').change(change_visualizer);
+        $('#visualizer_id_form').submit(change_visualizer);
+
         $('#player_maximized .toggle, #player_minimized .toggle').click(function() {
             togglePlayerMaximization();
             this.blur();
@@ -68,6 +83,17 @@ function load_player(duration) {
 
 }
 
+function set_player_image_url(str) {
+    player_image_url = str;
+}
+
+function get_player_image_src(width, height) {
+    var src = null;
+    if (player_image_url && (width || height)) {
+        src = player_image_url.replace('WIDTH', width + '').replace('HEIGHT', height + '');
+    }
+    return src;
+}
 
 
 

diff --git a/telemeta/templates/mediaitem_detail.html b/telemeta/templates/mediaitem_detail.html
index fae322cde34636b250782cbc5a6accf2cac0fa3c..8027360da1e793df7f1b615c60f853c96417d127 100644 (file)
--- a/telemeta/templates/mediaitem_detail.html
+++ b/telemeta/templates/mediaitem_detail.html
@@ -19,6 +19,7 @@
 soundManager.url = '{% url telemeta-swf "./" %}';\r
 soundManager.flashVersion = 9;\r
 soundManager.debugMode = false;\r
+set_player_image_url('{% url telemeta-item-visualize item.id|urlencode,visualizer_id,"WIDTH","HEIGHT" %}');\r
 load_player({{ item.get_duration }});\r
 </script>\r
 \r
@@ -38,18 +39,18 @@ load_player({{ item.get_duration }});
 {% if item.file %}\r
     <div id="player_maximized" class="ts-skin-lab">\r
         <a href="#" class="toggle">Minimize</a>\r
-        <div style="clear: both"></div>\r
+        <div class="wazing"></div>\r
     </div>\r
     <div id="rightcol">\r
         <div id="player_minimized" class="ts-skin-lab">\r
         <a href="#" class="toggle">Maximize</a>\r
-        <div style="clear: both"></div>\r
+        <div class="wazing"></div>\r
         <div id="player" class="ts-player">\r
             <div class="ts-viewer">\r
                 <div class="ts-wave">\r
                     <div class="ts-image-container">\r
                         <a href="{% url telemeta-item-export item.id|urlencode,"mp3" %}">\r
-                        <img class="ts-image" src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}" \r
+                        <img class="ts-image" src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id,360,200 %}" \r
                           alt="" /></a>\r
                     </div>\r
                 </div>  \r
@@ -58,7 +59,7 @@ load_player({{ item.get_duration }});
         </div>\r
 \r
         <div class="item_visualization">\r
-            <form method="get" action="#" onsubmit="player.setImage(this.visualizer_id.value); return false;">\r
+            <form id="visualizer_id_form" method="get" action="#">\r
                 <!--\r
                 <select name="visualizer_id" onchange="this.form.submit()">\r
                     {% for v in visualizers %}\r
@@ -67,9 +68,9 @@ load_player({{ item.get_duration }});
                     {% endfor %}\r
                 </select>\r
                 -->\r
-                <select name="visualizer_id" onchange="player.setImage(this.value);">\r
+                <select id="visualizer_id" name="visualizer_id">\r
                     {% for v in visualizers %}\r
-                    <option value="{% url telemeta-item-visualize item.id|urlencode,v.id %}">\r
+                    <option value="{% url telemeta-item-visualize item.id|urlencode,v.id,"WIDTH","HEIGHT" %}">\r
                     {{v.name}}</option>\r
                     {% endfor %}\r
                 </select>\r

diff --git a/telemeta/urls.py b/telemeta/urls.py
index e2f831047bbb8fc1b60792a3b26b03a97884a862..79c4ebb260bdfa475b3db6c6f87c1387121fee0c 100644 (file)
--- a/telemeta/urls.py
+++ b/telemeta/urls.py
@@ -47,7 +47,7 @@ urlpatterns = patterns('',
             + export_extensions + ')$', 
         web_view.item_export,
         name="telemeta-item-export"),
-    url(r'^items/(?P<item_id>' + i_ex + ')/visualize/(?P<visualizer_id>[0-9a-z_]+)/$', 
+    url(r'^items/(?P<item_id>' + i_ex + ')/visualize/(?P<visualizer_id>[0-9a-z_]+)/(?P<width>[0-9A-Z]+)x(?P<height>[0-9A-Z]+)/$', 
         web_view.item_visualize,
         name="telemeta-item-visualize"),
     url(r'^items/(?P<item_id>' + i_ex + ')/item_xspf.xml$', 

diff --git a/telemeta/web/base.py b/telemeta/web/base.py
index bfbeb92a3e3fe1e12ab1997c7b79c9ec0366403c..773f62794a321c79ba8dbbb1c8375790e14b08bd 100644 (file)
--- a/telemeta/web/base.py
+++ b/telemeta/web/base.py
@@ -78,7 +78,7 @@ class WebView(Component):
                     'visualizers': visualizers, 'visualizer_id': visualizer_id,
                     'analysers': analyzers, 'vamp_plugins': vamp_plugin_list})
                     
-    def item_visualize(self, request, item_id, visualizer_id):
+    def item_visualize(self, request, item_id, visualizer_id, width, height):
         for visualizer in self.visualizers:
             if visualizer.get_id() == visualizer_id:
                 break
@@ -89,7 +89,7 @@ class WebView(Component):
         item = MediaItem.objects.get(pk=item_id)
 
         visualizer.set_colors((255,255,255), 'purple')
-        stream = visualizer.render(item, width=1500, height=200)
+        stream = visualizer.render(item, width=int(width), height=int(height))
         response = HttpResponse(stream, mimetype = 'image/png')
         return response