From: olivier <>
Date: Mon, 22 Dec 2008 21:23:45 +0000 (+0000)
Subject: enable player width maximization ; move js stuff out of the media item template into... 
X-Git-Tag: 1.1~760
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=1db848f5885a6a25ce935628e553dd7bbbc1e64b;p=telemeta.git

enable player width maximization ; move js stuff out of the media item template into player.js
---

diff --git a/telemeta/htdocs/css/player.css b/telemeta/htdocs/css/player.css
index 3db91bbb..48799b15 100644
--- a/telemeta/htdocs/css/player.css
+++ b/telemeta/htdocs/css/player.css
@@ -1,7 +1,37 @@
 .ts-player {
     padding-bottom: 0;
+    clear: both;
+    padding-top: 16px !important;
 }
 
 .ts-player .ts-wave {
     height: 200px;
 }
+.ts-player .ts-image {
+    width: 334px;
+    height: 200px;
+}
+
+#player_maximized, #player_minimized {
+    position: relative;
+}
+
+
+#player_maximized button, #player_minimized button {
+    position: absolute;
+    right: 12px;
+    top: 2px;
+    font-size: 10px;
+    padding: 2px;
+    margin: 1px;
+    background: transparent;
+    color: transparent;
+    width: 20px;
+    height: 10px;
+    border: solid 1px white;
+    border-top: solid 2px white;
+}
+#player_maximized {
+    margin: 10px 0 15px 0;
+    display: none;
+}
diff --git a/telemeta/htdocs/js/player.js b/telemeta/htdocs/js/player.js
new file mode 100644
index 00000000..143425a0
--- /dev/null
+++ b/telemeta/htdocs/js/player.js
@@ -0,0 +1,73 @@
+var sound = null;
+var soundUrl = null;
+var soundEngineReady = false;
+var map;
+var provider;
+var player;
+
+function togglePlayerMaximization() {
+    var view = $('#player');
+    $('#player_maximized #player_minimized').css('display', 'none');
+    var button;
+    var ctr;
+    if (view.parents('#player_maximized').length) {
+        ctr = $('#player_minimized').append(view);
+    } else {
+        ctr = $('#player_maximized').append(view);
+    }
+    ctr.css({opacity: 0, display: 'block'});
+    player.resize();
+    ctr.animate({opacity: 1}, 200, null);
+}
+
+function load_sound() {
+    if (!sound && soundUrl && soundEngineReady) {
+        sound = soundManager.createSound({
+            id: 'sound',
+            url: soundUrl
+        });
+        
+        TimeSide.load(function() {
+            provider.setSource(sound);
+        });
+        // sound.load(); // Auto-loading overloads the Django test server
+    }
+}
+
+function load_player(duration) {
+    $(document).ready(function () {
+        soundUrl = $('.ts-wave a').attr('href');
+
+        $('.ts-wave a img').insertAfter('.ts-wave a');
+        $('.ts-wave a').remove();
+
+        TimeSide.load(function() {
+            map = new TimeSide.MarkerMap();
+            provider = new TimeSide.SoundProvider({duration: duration});
+            player = new TimeSide.Player('#player');
+            controller = new TimeSide.Controller({
+                player: player,
+                soundProvider: provider, 
+                map: map
+            });
+        });
+
+        $('#player_maximized button, #player_minimized button').click(function() {
+            togglePlayerMaximization();
+            this.blur();
+            return false;
+        });
+
+        load_sound();
+    });    
+
+    soundManager.onload = function() {
+        soundEngineReady = true;
+        load_sound();
+    }
+
+}
+
+
+
+
diff --git a/telemeta/templates/mediaitem_detail.html b/telemeta/templates/mediaitem_detail.html
index 540168d0..e16212ee 100644
--- a/telemeta/templates/mediaitem_detail.html
+++ b/telemeta/templates/mediaitem_detail.html
@@ -13,41 +13,13 @@
 <script src="{% url telemeta-js "wz_jsgraphics.js" %}" type="text/javascript"></script>
 <script src="{% url telemeta-js "soundmanager2.js" %}" type="text/javascript"></script>
 <script src="{% url telemeta-timeside "src/timeside.js" %}" type="text/javascript"></script>
+<script src="{% url telemeta-js "player.js" %}" type="text/javascript"></script>
 
 <script type="text/javascript">
-var sound;
-var map;
-var provider;
-var player;
-
-TimeSide.load(function() {
-    map = new TimeSide.MarkerMap();
-    provider = new TimeSide.SoundProvider({
-        duration: {{ item.get_duration }}
-    });
-    controller = new TimeSide.Controller({
-        player: '#player',
-        soundProvider: provider, 
-        map: map
-    });
-});
-
 soundManager.url = '{% url telemeta-swf "./" %}';
 soundManager.flashVersion = 9;
 soundManager.consoleOnly = true;
-
-soundManager.onload = function() {
-    sound = soundManager.createSound({
-        id: 'sound',
-        url: '{% url telemeta-item-export item.id|urlencode,"mp3" %}'
-    });
-    
-    TimeSide.load(function() {
-        provider.setSource(sound);
-    });
-    //sound.load(); // Auto-loading overloads the Django test server
-}        
-
+load_player({{ item.get_duration }});
 </script>
 
 {% endblock %}
@@ -62,14 +34,19 @@ soundManager.onload = function() {
 {% block content %}
 
 {% if item.file %}
+<div id="player_maximized" class="ts-skin-lab">
+    <button>Minimize</button>
+</div>
 <div id="rightcol">
-    <div class="ts-skin-lab">
+    <div id="player_minimized" class="ts-skin-lab">
+    <button>Maximize</button>
     <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 %}" 
-                      alt="" />
+                      alt="" /></a>
                 </div>
             </div>  
         </div>
diff --git a/telemeta/web/base.py b/telemeta/web/base.py
index d303f588..9e63f824 100644
--- a/telemeta/web/base.py
+++ b/telemeta/web/base.py
@@ -88,7 +88,7 @@ class WebView(Component):
         
         item = MediaItem.objects.get(pk=item_id)
 
-        stream = visualizer.render(item)
+        stream = visualizer.render(item, width=1500, height=200)
         response = HttpResponse(stream, mimetype = 'image/png')
         return response