From: olivier <>
Date: Fri, 2 Jan 2009 19:58:40 +0000 (+0000)
Subject: add player dynamic server-side image resizing
X-Git-Tag: 1.1~749
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=2be79f1f9d8822f28f5b6d9310c5567f46a84e89;p=telemeta.git

add player dynamic server-side image resizing
---

diff --git a/telemeta/htdocs/css/player.css b/telemeta/htdocs/css/player.css
index 1af20459..d7680ce7 100644
--- 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 7cb1d963..14e75f90 100644
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -32,6 +32,12 @@ h3 {
     clear: both;
     height: 5px;
 }
+
+.wazing {
+    clear: both;
+    position: relative;
+}
+
 /* Min-width */
 #layout {
     min-width: 740px;
diff --git a/telemeta/htdocs/js/player.js b/telemeta/htdocs/js/player.js
index fe8d1a16..2a479828 100644
--- 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 fae322cd..8027360d 100644
--- a/telemeta/templates/mediaitem_detail.html
+++ b/telemeta/templates/mediaitem_detail.html
@@ -19,6 +19,7 @@
 soundManager.url = '{% url telemeta-swf "./" %}';
 soundManager.flashVersion = 9;
 soundManager.debugMode = false;
+set_player_image_url('{% url telemeta-item-visualize item.id|urlencode,visualizer_id,"WIDTH","HEIGHT" %}');
 load_player({{ item.get_duration }});
 </script>
 
@@ -38,18 +39,18 @@ load_player({{ item.get_duration }});
 {% if item.file %}
     <div id="player_maximized" class="ts-skin-lab">
         <a href="#" class="toggle">Minimize</a>
-        <div style="clear: both"></div>
+        <div class="wazing"></div>
     </div>
     <div id="rightcol">
         <div id="player_minimized" class="ts-skin-lab">
         <a href="#" class="toggle">Maximize</a>
-        <div style="clear: both"></div>
+        <div class="wazing"></div>
         <div id="player" class="ts-player">
             <div class="ts-viewer">
                 <div class="ts-wave">
                     <div class="ts-image-container">
                         <a href="{% url telemeta-item-export item.id|urlencode,"mp3" %}">
-                        <img class="ts-image" src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}" 
+                        <img class="ts-image" src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id,360,200 %}" 
                           alt="" /></a>
                     </div>
                 </div>  
@@ -58,7 +59,7 @@ load_player({{ item.get_duration }});
         </div>
 
         <div class="item_visualization">
-            <form method="get" action="#" onsubmit="player.setImage(this.visualizer_id.value); return false;">
+            <form id="visualizer_id_form" method="get" action="#">
                 <!--
                 <select name="visualizer_id" onchange="this.form.submit()">
                     {% for v in visualizers %}
@@ -67,9 +68,9 @@ load_player({{ item.get_duration }});
                     {% endfor %}
                 </select>
                 -->
-                <select name="visualizer_id" onchange="player.setImage(this.value);">
+                <select id="visualizer_id" name="visualizer_id">
                     {% for v in visualizers %}
-                    <option value="{% url telemeta-item-visualize item.id|urlencode,v.id %}">
+                    <option value="{% url telemeta-item-visualize item.id|urlencode,v.id,"WIDTH","HEIGHT" %}">
                     {{v.name}}</option>
                     {% endfor %}
                 </select>
diff --git a/telemeta/urls.py b/telemeta/urls.py
index e2f83104..79c4ebb2 100644
--- 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 bfbeb92a..773f6279 100644
--- 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