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

diff --git a/telemeta/htdocs/css/player.css b/telemeta/htdocs/css/player.css
index 3db91bbb44a628b0c11cdcef54a46d3d47fa4dc4..48799b15b28e52f673462414c8907cf46302b361 100644 (file)
--- 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 (file)
index 0000000..143425a
--- /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 540168d0d717141f1cb5fd945d09def9579af2ad..e16212ee17ca7949301844d9974b6e5e1728016f 100644 (file)
--- 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>\r
 <script src="{% url telemeta-js "soundmanager2.js" %}" type="text/javascript"></script>\r
 <script src="{% url telemeta-timeside "src/timeside.js" %}" type="text/javascript"></script>\r
+<script src="{% url telemeta-js "player.js" %}" type="text/javascript"></script>\r
 \r
 <script type="text/javascript">\r
-var sound;\r
-var map;\r
-var provider;\r
-var player;\r
-\r
-TimeSide.load(function() {\r
-    map = new TimeSide.MarkerMap();\r
-    provider = new TimeSide.SoundProvider({\r
-        duration: {{ item.get_duration }}\r
-    });\r
-    controller = new TimeSide.Controller({\r
-        player: '#player',\r
-        soundProvider: provider, \r
-        map: map\r
-    });\r
-});\r
-\r
 soundManager.url = '{% url telemeta-swf "./" %}';\r
 soundManager.flashVersion = 9;\r
 soundManager.consoleOnly = true;\r
-\r
-soundManager.onload = function() {\r
-    sound = soundManager.createSound({\r
-        id: 'sound',\r
-        url: '{% url telemeta-item-export item.id|urlencode,"mp3" %}'\r
-    });\r
-    \r
-    TimeSide.load(function() {\r
-        provider.setSource(sound);\r
-    });\r
-    //sound.load(); // Auto-loading overloads the Django test server\r
-}        \r
-\r
+load_player({{ item.get_duration }});\r
 </script>\r
 \r
 {% endblock %}\r
@@ -62,14 +34,19 @@ soundManager.onload = function() {
 {% block content %}\r
 \r
 {% if item.file %}\r
+<div id="player_maximized" class="ts-skin-lab">\r
+    <button>Minimize</button>\r
+</div>\r
 <div id="rightcol">\r
-    <div class="ts-skin-lab">\r
+    <div id="player_minimized" class="ts-skin-lab">\r
+    <button>Maximize</button>\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
-                      alt="" />\r
+                      alt="" /></a>\r
                 </div>\r
             </div>  \r
         </div>\r

diff --git a/telemeta/web/base.py b/telemeta/web/base.py
index d303f5884dda8c80e3ed764a2aaba9716105c809..9e63f824a56624e342419b910c1612a8756927f2 100644 (file)
--- 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