From: olivier <>
Date: Fri, 12 Dec 2008 19:43:57 +0000 (+0000)
Subject: integrate timeside player
X-Git-Tag: 1.1~772
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=a3663461ae08895c22878e68d4353cd89cf1c822;p=telemeta.git

integrate timeside player
---

diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css
index da05c610..d9db30df 100644
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -89,6 +89,7 @@ h3 {
 }
 #leftcol {
     position: relative;
+    z-index: -1;
     margin-right: 345px;
     min-height: 450px;
     min-width: 400px;
@@ -97,23 +98,27 @@ h3 {
     clear: both;
     position: absolute;
     right: .3em;
-    width: 308px;
-    text-align: right;
+    width: 362px;
     margin-top: 10px;
     border: 1px dotted #999;
     padding: 6px;
     background-color: #eee;
 }
-#rightcol div {
+#rightcol .analyzer {
+    text-align: right;
+}
+
+#rightcol .analyzer, #rightcol .exporter {
     text-align: left;
     position: relative;
 }
 #rightcol form {
-    width: 305px;
+    width: 360px;
     margin-top: 5px;
     background-color: #fff;
     border: 1px solid #adadad;
 }
+/*
 #item_player_c {
     width: 305px;
     padding: 2px 0 0;
@@ -122,6 +127,8 @@ h3 {
 }
 .item_visualization select { width: 240px; }
 .item_visualization .viewport { width: 305px; border: 1px solid #adadad; overflow: auto; margin-top: 5px; background-color: #fff;}
+*/
+
 
 .exporter {
     background-color: #fff;
@@ -139,7 +146,7 @@ h3 {
     background-color: #fff;
     color: #000;
     border: 1px solid #adadad;
-    width: 301px;
+    width: 356px;
     padding: 2px;
     margin: 5px 0 0;
     /* overflow: auto; */
@@ -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 }
 table.listing tbody tr.even { background-color: #fcfcfc }
 table.listing tbody tr.odd { background-color: #f7f7f7 }
-table.listing tbody tr:hover { background: #f7f8fa !important }
\ No newline at end of file
+table.listing tbody tr:hover { background: #f7f8fa !important }
diff --git a/telemeta/htdocs/js/application.js b/telemeta/htdocs/js/application.js
index 3f8bba5c..446f233b 100644
--- a/telemeta/htdocs/js/application.js
+++ b/telemeta/htdocs/js/application.js
@@ -1,4 +1,15 @@
 function ployBlocks() {
+ 
+  $('.extraInfos div.nett').css('display', 'block');
+  $('.closed').css('display', 'none');
+	$('.extraInfos h4').toggleClass('on').click(function() {
+      $(this)
+          .toggleClass('on')
+          .parent().find('div').eq(0).toggle();
+      return false;
+  });
+
+  /*
 	var extraInfos = $$('.extraInfos div');
 	for (i = 0; i <extraInfos.length; i++ ) {
 		if(!extraInfos[i].hasClassName('nett')) {
@@ -18,4 +29,5 @@ function ployBlocks() {
 			return false;
 		}
 	}
-}
\ No newline at end of file
+  */
+}
diff --git a/telemeta/templates/collection_detail.html b/telemeta/templates/collection_detail.html
index f5883d2e..9750616e 100644
--- a/telemeta/templates/collection_detail.html
+++ b/telemeta/templates/collection_detail.html
@@ -2,7 +2,7 @@
 {% load telemeta_utils %}
 
 {% block extra_javascript %}
-<script src="{% url telemeta-js "prototype-1.6.0.2.js" %}" type="text/javascript"></script>
+<script src="{% url telemeta-js "jquery.js" %}" type="text/javascript"></script>
 <script src="{% url telemeta-js "application.js" %}" type="text/javascript"></script>
 <script src="{% url telemeta-js "swfobject.js" %}" type="text/javascript"></script>
 {% endblock %}
diff --git a/telemeta/templates/mediaitem_detail.html b/telemeta/templates/mediaitem_detail.html
index cffa0175..d2319f84 100644
--- a/telemeta/templates/mediaitem_detail.html
+++ b/telemeta/templates/mediaitem_detail.html
@@ -1,10 +1,59 @@
 {% extends "base.html" %}
 {% load telemeta_utils %}
 
+{% block extra_style %}
+<link rel="stylesheet" type="text/css" href="{% url telemeta-timeside "css/timeside.css" %}" />
+{% endblock %}
 {% block extra_javascript %}
-<script src="{% url telemeta-js "prototype-1.6.0.2.js" %}" type="text/javascript"></script>
+
+<script src="{% url telemeta-js "jquery.js" %}" type="text/javascript"></script>
 <script src="{% url telemeta-js "application.js" %}" type="text/javascript"></script>
+<!--
 <script src="{% url telemeta-js "swfobject.js" %}" type="text/javascript"></script>
+-->
+<script src="{% url telemeta-js "wz_jsgraphics.js" %}" type="text/javascript"></script>
+<script src="{% url telemeta-timeside "src/timeside.js" %}" type="text/javascript"></script>
+
+<script src="{% url telemeta-js "soundmanager2.js" %}" type="text/javascript"></script>
+<script type="text/javascript">
+soundManager.url = '{% url telemeta-swf "./" %}';
+soundManager.flashVersion = 9;
+soundManager.consoleOnly = true;
+</script>
+
+<script type="text/javascript">
+var sound;
+var map;
+var provider;
+var player;
+
+TimeSide.load(function() {});
+
+soundManager.onload = function() {
+    sound = soundManager.createSound({
+        id: 'sound',
+        url: '{% url telemeta-item-export item.id|urlencode,"mp3" %}',
+        autoLoad: true
+    });
+
+    TimeSide.load(function() {
+        map = new TimeSide.MarkerMap();
+        provider = new TimeSide.SoundProvider(sound);
+        provider.forceDuration({{ item.get_duration }});
+        player = new TimeSide.Player({
+            container: $('#player').get(0), 
+            image: '{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}'
+        });
+        controller = new TimeSide.Controller({
+            player: player,
+            soundProvider: provider, 
+            map: map
+        });
+    });
+}        
+
+</script>
+
 {% endblock %}
 
 
@@ -18,32 +67,34 @@
 
 {% if item.file %}
 <div id="rightcol">
+    
+    <div id="player" class="timeside-player">
+        <div class="viewer">
+            <div class="wave">
+                <div class="image-container">
+                    <img class="image" src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}" 
+                      style="width: 334px; height: 200px;" alt="" />
+                </div>
+            </div>  
+        </div>
+    </div>
+
     <div class="item_visualization">
-        {% if 0 %} {# Use 1/0 for alternate player #}
-        <!-- This is the XSPF Web Music Player, under the BSD license, from: http://musicplayer.sourceforge.net/-->
-        <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 %}">
-        <param name="movie" value="{% url telemeta-swf "xspf_player.swf" %}?playlist_url={% url telemeta-item-xspf item.id|urlencode %}" />
-        </object><br/>
-        {% else %}      
-        <!-- 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-->
-        <p id="item_player_c"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player.</p>
-            <script type="text/javascript">
-              var so = new SWFObject('{% url telemeta-swf "mp3player.swf" %}','line','300','20','7');
-              so.addVariable("file","{% url telemeta-item-export item.id|urlencode,"mp3" %}");
-              so.addVariable("type","mp3");
-              so.write('item_player_c');
-            </script>
-        {% endif %}
-        <div class="viewport">
-            <img src="{% url telemeta-item-visualize item.id|urlencode,visualizer_id %}" alt="" />
-        </div>        
-        <form method="get" action="#">
+        <form method="get" action="#" onsubmit="player.setImage(this.visualizer_id.value); return false;">
+            <!--
             <select name="visualizer_id" onchange="this.form.submit()">
                 {% for v in visualizers %}
                 <option value="{{ v.id }}" {% ifequal v.id visualizer_id %} selected="selected" {% endifequal %}>
                 {{v.name}}</option>
                 {% endfor %}
             </select>
+            -->
+            <select name="visualizer_id" onchange="player.setImage(this.value);">
+                {% for v in visualizers %}
+                <option value="{% url telemeta-item-visualize item.id|urlencode,v.id %}">
+                {{v.name}}</option>
+                {% endfor %}
+            </select>
             <input type="submit" value="Set" />
         </form>
 
@@ -196,4 +247,4 @@
 {% endblock %}
 {% else %}
     <p>No such item</p>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/telemeta/urls.py b/telemeta/urls.py
index b3ed6ec2..e2f83104 100644
--- 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"),
 )