first init

diff --git a/timeside/server/templates/timeside/base.html b/timeside/server/templates/timeside/base.html
index c7fe18f288f9ad66f64fc9f3bdb51075d31dc453..a5dfa79b068f5ec7585eeaf7945f11c51f72c19d 100644 (file)
--- a/timeside/server/templates/timeside/base.html
+++ b/timeside/server/templates/timeside/base.html
@@ -14,8 +14,11 @@
 {% block extra_stylesheets %}{% endblock %}
 
 {% block javascript %}
-    <script src="{{ STATIC_URL }}timeside/js/libs/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
-    <script src="{{ STATIC_URL }}timeside/js/timeside.js" type="text/javascript"></script>
+    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
+    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+    <script src="{{ STATIC_URL }}timeside/js/libs/soundmanager2-nodebug-jsmin.js"></script>
+    <script src="{{ STATIC_URL }}timeside/js/timeside.js"></script>
+    <script src="{{ STATIC_URL }}timeside/js/libs/waves/waves.umd.js"></script>
 {% endblock %}
 
 {% block extra_javascript %}{% endblock %}

diff --git a/timeside/server/templates/timeside/item_detail.html b/timeside/server/templates/timeside/item_detail.html
new file mode 100644 (file)
index 0000000..cf570ce
--- /dev/null
+++ b/timeside/server/templates/timeside/item_detail.html
@@ -0,0 +1,83 @@
+{% extends "timeside/base.html" %}
+{% load i18n %}
+
+{% block extra_stylesheets %}
+{% endblock %}
+
+{% block extra_javascript %}
+<script type="text/javascript">
+
+$(window).ready(function( ){
+
+var timeline = waves.ui.timeline;
+var segment = waves.ui.segment;
+var d3 = timeline.d3;
+
+var data = [
+    {
+        start: 100,
+        duration: 200
+    }, {
+        start: 650,
+        duration: 300
+    }
+];
+
+var graph = timeline()
+    .width(400)
+    .height(120)
+    .xDomain([0, 1000]);
+
+var segmentLayer = segment()
+    .params({
+        interactions: { editable: true },
+        opacity: 0.4,
+        handlerOpacity: 0.6
+    })
+    .data(data)
+    .color('steelblue');
+
+graph.add(segmentLayer);
+
+d3.select('#timeline').call(graph.draw);
+
+
+});
+
+</script>
+{% endblock %}
+
+{% block content %}
+
+<h1>{{ object.title }}</h1>
+
+{% block html5-player %}
+ <audio controls>
+  <source src="download/ogg" type="audio/ogg">
+  <source src="download/mp3" type="audio/mpeg">
+Your browser does not support the audio element.
+</audio>
+{% endblock html5-player %}
+
+<div id="timeline"></div>
+
+<ul>
+   <li>File: {{ object.file }}</li>
+   {% if object.url %}<li>url : {{ object.url }}</li>{% endif %}
+   <li>mime_type : {{ object.mime_type }}</li>
+   <li>sha1 : {{ object.sha1 }}</li>
+   <li>hdf5 : {{ object.hdf5 }}</li>
+   <li>uuid : {{ object.uuid }}</li>
+   <li>author: {{ object.author }}</li>
+   <li>lock : {{ object.lock }}</li>
+</ul>
+
+Results:
+
+<ul>
+{% for result in object.results.all %}
+  <li><a href="{% if 'image' in result.mime_type %}{% url "timeside-result-png" result.id %}{% elif 'audio' in result.mime_type %}{% url "timeside-result-audio" result.id %}{% else %}{% url "timeside-result-json" result.id %}{% endif %}">{{ result.preset.processor }}</a> ({{ result.uuid }})</li>
+{% endfor %}
+<ul>
+
+{% endblock content %}