integrate timeside player

diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css
index da05c6108bb0ca6ee81efd86f2bb4b7fd897e7a4..d9db30df63d1b2ce31fb0e5d3e34c9ee93fe6597 100644 (file)
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -89,6 +89,7 @@ h3 {
 }\r
 #leftcol {\r
     position: relative;\r
+    z-index: -1;\r
     margin-right: 345px;\r
     min-height: 450px;\r
     min-width: 400px;\r
@@ -97,23 +98,27 @@ h3 {
     clear: both;\r
     position: absolute;\r
     right: .3em;\r
-    width: 308px;\r
-    text-align: right;\r
+    width: 362px;\r
     margin-top: 10px;\r
     border: 1px dotted #999;\r
     padding: 6px;\r
     background-color: #eee;\r
 }\r
-#rightcol div {\r
+#rightcol .analyzer {\r
+    text-align: right;\r
+}\r
+\r
+#rightcol .analyzer, #rightcol .exporter {\r
     text-align: left;\r
     position: relative;\r
 }\r
 #rightcol form {\r
-    width: 305px;\r
+    width: 360px;\r
     margin-top: 5px;\r
     background-color: #fff;\r
     border: 1px solid #adadad;\r
 }\r
+/*\r
 #item_player_c {\r
     width: 305px;\r
     padding: 2px 0 0;\r
@@ -122,6 +127,8 @@ h3 {
 }\r
 .item_visualization select { width: 240px; }\r
 .item_visualization .viewport { width: 305px; border: 1px solid #adadad; overflow: auto; margin-top: 5px; background-color: #fff;}\r
+*/\r
+\r
 \r
 .exporter {\r
     background-color: #fff;\r
@@ -139,7 +146,7 @@ h3 {
     background-color: #fff;\r
     color: #000;\r
     border: 1px solid #adadad;\r
-    width: 301px;\r
+    width: 356px;\r
     padding: 2px;\r
     margin: 5px 0 0;\r
     /* overflow: auto; */\r
@@ -613,4 +620,4 @@ table.listing tbody td a:hover, table.listing tbody th a:hover {
 table.listing tbody tr { border-top: 1px solid #ddd }\r
 table.listing tbody tr.even { background-color: #fcfcfc }\r
 table.listing tbody tr.odd { background-color: #f7f7f7 }\r
-table.listing tbody tr:hover { background: #f7f8fa !important }
\ No newline at end of file
+table.listing tbody tr:hover { background: #f7f8fa !important }\r

diff --git a/telemeta/htdocs/js/application.js b/telemeta/htdocs/js/application.js
index 3f8bba5cfb099af2641cb4fd5e22f3cae13322fe..446f233b251bd02e227d89fdbb141ebe7734a3f3 100644 (file)
--- a/telemeta/htdocs/js/application.js
+++ b/telemeta/htdocs/js/application.js
@@ -1,4 +1,15 @@
 function ployBlocks() {\r
+ \r
+  $('.extraInfos div.nett').css('display', 'block');\r
+  $('.closed').css('display', 'none');\r
+       $('.extraInfos h4').toggleClass('on').click(function() {\r
+      $(this)\r
+          .toggleClass('on')\r
+          .parent().find('div').eq(0).toggle();\r
+      return false;\r
+  });\r
+\r
+  /*\r
        var extraInfos = $$('.extraInfos div');\r
        for (i = 0; i <extraInfos.length; i++ ) {\r
                if(!extraInfos[i].hasClassName('nett')) {\r
@@ -18,4 +29,5 @@ function ployBlocks() {
                        return false;\r
                }\r
        }\r
-}
\ No newline at end of file
+  */\r
+}\r

diff --git a/telemeta/templates/collection_detail.html b/telemeta/templates/collection_detail.html
index f5883d2ed2b1919408165a93fe6370cd32ed8e3a..9750616e3541d828c2a9c22dc336f9909694f777 100644 (file)
--- a/telemeta/templates/collection_detail.html
+++ b/telemeta/templates/collection_detail.html
@@ -2,7 +2,7 @@
 {% load telemeta_utils %}\r
 \r
 {% block extra_javascript %}\r
-<script src="{% url telemeta-js "prototype-1.6.0.2.js" %}" type="text/javascript"></script>\r
+<script src="{% url telemeta-js "jquery.js" %}" type="text/javascript"></script>\r
 <script src="{% url telemeta-js "application.js" %}" type="text/javascript"></script>\r
 <script src="{% url telemeta-js "swfobject.js" %}" type="text/javascript"></script>\r
 {% endblock %}\r

diff --git a/telemeta/templates/mediaitem_detail.html b/telemeta/templates/mediaitem_detail.html
index cffa0175cbc892ea30e8a79a3508995ee74285b4..d2319f84df9998d14e44f832d490b14996551cfc 100644 (file)
--- a/telemeta/templates/mediaitem_detail.html
+++ b/telemeta/templates/mediaitem_detail.html
@@ -1,10 +1,59 @@
 {% extends "base.html" %}\r
 {% load telemeta_utils %}\r
 \r
+{% block extra_style %}\r
+<link rel="stylesheet" type="text/css" href="{% url telemeta-timeside "css/timeside.css" %}" />\r
+{% endblock %}\r
 {% block extra_javascript %}\r
-<script src="{% url telemeta-js "prototype-1.6.0.2.js" %}" type="text/javascript"></script>\r
+\r
+<script src="{% url telemeta-js "jquery.js" %}" type="text/javascript"></script>\r
 <script src="{% url telemeta-js "application.js" %}" type="text/javascript"></script>\r
+<!--\r
 <script src="{% url telemeta-js "swfobject.js" %}" type="text/javascript"></script>\r
+-->\r
+<script src="{% url telemeta-js "wz_jsgraphics.js" %}" type="text/javascript"></script>\r
+<script src="{% url telemeta-timeside "src/timeside.js" %}" type="text/javascript"></script>\r
+\r
+<script src="{% url telemeta-js "soundmanager2.js" %}" type="text/javascript"></script>\r
+<script type="text/javascript">\r
+soundManager.url = '{% url telemeta-swf "./" %}';\r
+soundManager.flashVersion = 9;\r
+soundManager.consoleOnly = true;\r
+</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
+\r
+soundManager.onload = function() {\r
+    sound = soundManager.createSound({\r
+        id: 'sound',\r
+        url: '{% url telemeta-item-export item.id|urlencode,"mp3" %}',\r
+        autoLoad: true\r
+    });\r
+\r
+    TimeSide.load(function() {\r
+        map = new TimeSide.MarkerMap();\r
+        provider = new TimeSide.SoundProvider(sound);\r
+        provider.forceDuration({{ item.get_duration }});\r
+        player = new TimeSide.Player({\r
+            container: $('#player').get(0), \r
+            image: '{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}'\r
+        });\r
+        controller = new TimeSide.Controller({\r
+            player: player,\r
+            soundProvider: provider, \r
+            map: map\r
+        });\r
+    });\r
+}        \r
+\r
+</script>\r
+\r
 {% endblock %}\r
 \r
 \r
@@ -18,32 +67,34 @@
 \r
 {% if item.file %}\r
 <div id="rightcol">\r
+    \r
+    <div id="player" class="timeside-player">\r
+        <div class="viewer">\r
+            <div class="wave">\r
+                <div class="image-container">\r
+                    <img class="image" src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}" \r
+                      style="width: 334px; height: 200px;" alt="" />\r
+                </div>\r
+            </div>  \r
+        </div>\r
+    </div>\r
+\r
     <div class="item_visualization">\r
-        {% if 0 %} {# Use 1/0 for alternate player #}\r
-        <!-- This is the XSPF Web Music Player, under the BSD license, from: http://musicplayer.sourceforge.net/-->\r
-        <object type="application/x-shockwave-flash" width="300" height="20" data="{% url telemeta-swf "xspf_player.swf" %}?playlist_url={% url telemeta-item-xspf item.id|urlencode %}">\r
-        <param name="movie" value="{% url telemeta-swf "xspf_player.swf" %}?playlist_url={% url telemeta-item-xspf item.id|urlencode %}" />\r
-        </object><br/>\r
-        {% else %}      \r
-        <!-- This is Jeroen Wijering's Flash MP3 Player, under CC Attribution-NonCommercial-ShareAlike 2.0 license from: http://www.jeroenwijering.com/?item=Flash_MP3_Player-->\r
-        <p id="item_player_c"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player.</p>\r
-            <script type="text/javascript">\r
-              var so = new SWFObject('{% url telemeta-swf "mp3player.swf" %}','line','300','20','7');\r
-              so.addVariable("file","{% url telemeta-item-export item.id|urlencode,"mp3" %}");\r
-              so.addVariable("type","mp3");\r
-              so.write('item_player_c');\r
-            </script>\r
-        {% endif %}\r
-        <div class="viewport">\r
-            <img src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}" alt="" />\r
-        </div>        \r
-        <form method="get" action="#">\r
+        <form method="get" action="#" onsubmit="player.setImage(this.visualizer_id.value); return false;">\r
+            <!--\r
             <select name="visualizer_id" onchange="this.form.submit()">\r
                 {% for v in visualizers %}\r
                 <option value="{{ v.id }}" {% ifequal v.id visualizer_id %} selected="selected" {% endifequal %}>\r
                 {{v.name}}</option>\r
                 {% endfor %}\r
             </select>\r
+            -->\r
+            <select name="visualizer_id" onchange="player.setImage(this.value);">\r
+                {% for v in visualizers %}\r
+                <option value="{% url telemeta-item-visualize item.id|urlencode,v.id %}">\r
+                {{v.name}}</option>\r
+                {% endfor %}\r
+            </select>\r
             <input type="submit" value="Set" />\r
         </form>\r
 \r
@@ -196,4 +247,4 @@
 {% endblock %}\r
 {% else %}\r
     <p>No such item</p>\r
-{% endif %}
\ No newline at end of file
+{% endif %}\r

diff --git a/telemeta/urls.py b/telemeta/urls.py
index b3ed6ec2d4206ff1af62baced1404827989742fb..e2f831047bbb8fc1b60792a3b26b03a97884a862 100644 (file)
--- a/telemeta/urls.py
+++ b/telemeta/urls.py
@@ -132,4 +132,7 @@ urlpatterns = patterns('',
     url(r'^swf/(?P<path>.*)$', 'django.views.static.serve', 
         {'document_root': htdocs+'/swf'},
         name="telemeta-swf"),
+    url(r'^timeside/(?P<path>.*)$', 'django.views.static.serve', 
+        {'document_root': htdocs+'/timeside'},
+        name="telemeta-timeside"),
 )