work on admin interface, player, list of sounds

cms/templates/cms/base_site.html

@@ -67,8 +67,13 @@
             </nav>
         </div>
 
+        {% block footer %}
         <footer class="footer">
             {% render_sections position="footer" %}
+            <div class="small">Propulsed by
+                <a href="https://github.com/bkfox/aircox">Aircox</a>
+            </div>
         </footer>
+        {% endblock %}
     </body>
 </html>

cms/templates/cms/diffusion_page.html

@@ -34,16 +34,26 @@
 {% if podcasts %}
 <section class="podcasts list">
     <h2>{% trans "Podcasts" %}</h2>
-    {% for item in podcasts %}
-    {% include 'cms/snippets/sound_list_item.html' %}
-    {% endfor %}
+    <div id="player_diff_{{ page.id }}" class="player">
+        {% include 'cms/snippets/player.html' %}
+
+        <script>
+        var podcasts = new Player('player_diff_{{ page.id }}', undefined, true)
+        {% for item in podcasts %}
+        podcasts.playlist.add(new Sound(
+            title='{{ item.name|escape }}',
+            detail='{{ item.detail_url }}',
+            duration={{ item.duration|date:"H*3600+i*60+s" }},
+            streams='{{ item.url }}',
+            {% if page and page.cover %}cover='{{ page.icon }}',{% endif %}
+            undefined
+        ));
+        {% endfor %}
+        </script>
+    </div>
 </section>
 {% endif %}
 {% endwith %}
-
-{# TODO: podcasts #}
 {% endblock %}
 
 
-
-

cms/templates/cms/publication.html

@@ -6,23 +6,30 @@
 
 {% load aircox_cms %}
 
+{% if not object_list %}
+{% block title %}
+<h1 class="detail_title">{{ page.title }}</h1>
+{% endblock %}
+{% endif %}
+
 {% block content %}
 {% if object_list %}
 {# list view #}
-    <div class="body summary">
+    <section class="body summary">
     {{ page.summary }}
     <a href="?" class="go_back">{% trans "Go back to the publication" %}</a>
-    </div>
+    </section>
 
     {% with list_paginator=paginator %}
     {% include "cms/snippets/list.html" %}
     {% endwith %}
 {% else %}
 {# detail view #}
+    {% if page.cover %}
+    {% image page.cover max-600x480 class="detail_cover cover" height="" width="" %}
+    {% endif %}
+
     <div class="content">
-        {% if page.cover %}
-        {% image page.cover max-600x480 class="cover" height="" width="" %}
-        {% endif %}
         <section class="body">
         {{ page.body|richtext}}
         </section>

cms/templates/cms/sections/section_list.html

@@ -7,11 +7,10 @@
 {% endwith %}
 {% endif %}
 
+{% with url=url url_text=self.url_text %}
 {% include "cms/snippets/list.html" %}
+{% endwith %}
 
-{% if url %}
-<nav><a href="{{ url }}">{{ self.url_text }}</a></nav>
-{% endif %}
 {% endblock %}
 
 

cms/templates/cms/sections/section_player.html

@@ -1,59 +1,24 @@
 {% extends 'cms/sections/section_item.html' %}
 
-{% load staticfiles %}
-{% load i18n %}
-
 
 {% block content %}
-<style>
-
-
-
-</style>
 <div id="player" class="player">
-    <audio preload="metadata">
-        {% trans "Your browser does not support the <code>audio</code> element." %}
-        {% for stream in streams %}
-        <source src="{{ stream }}" />
-        {% endfor %}
-    </audio>
-
-    <div class="controls flex_row">
-        <progress class="flex_item" value="0" max="1"></progress>
-        <span class="info duration"></span>
-
-        <input type="checkbox" class="single" id="player_single_mode">
-        <label for="player_single_mode" class="info" title="{% trans "single mode" %}">↻</label>
-    </div>
-
-    <div class="playlist">
-        <li class='item list_item flex_row' style="display: none;">
-            <div class="button">
-                <img src="{% static "cms/images/play.png" %}" class="play"
-                    title="{% trans "play" %}" />
-                <img src="{% static "cms/images/pause.png" %}" class="pause"
-                    title="{% trans "pause" %}" />
-                <img src="{% static "cms/images/loading.png" %}" class="loading"
-                    title="{% trans "loading..." %}" />
-            </div>
-
-            <h3 class="title flex_item">{{ self.live_title }}</h3>
-            <div class="actions">
-                <a class="action detail" title="{% trans "more informations" %}">➔</a>
-                <a class="action remove" title="{% trans "remove this sound" %}">✖</a>
-            </div>
-            <span class="info duration"></span>
-        </li>
-    </div>
+    {% include "cms/snippets/player.html" %}
 </div>
 
 <script>
-var player = new Player('player');
-var sound = player.playlist.add(new Sound('{{ self.live_title }}', '', undefined,
-    streams=[
-        {% for stream in streams %}'{{ stream }}',{% endfor %}
-    ]), on_air_url = '{% url 'controllers.on_air' %}');
-player.select(sound, false);
+var player = new Player('player', '{% url 'controllers.on_air' %}');
+var sound = player.playlist.add(
+    new Sound(
+        '{{ self.live_title }}',
+        '', undefined,
+        streams=[ {% for stream in streams %}'{{ stream }}',{% endfor %} ],
+        cover = undefined,
+        on_air = true
+    )
+);
+sound.item.className += ' live';
+player.playlist.select(sound, false);
 
 </script>
 {% endblock %}

cms/templates/cms/sections/section_publication_info.html

@@ -1,6 +1,7 @@
 {% extends "cms/sections/section_item.html" %}
 {% load i18n %}
 
+{% block content %}
 <div class="meta">
     <div class="author">
         {% if page.publish_as %}
@@ -24,4 +25,5 @@
     {% endfor %}
     </div>
 </div>
+{% endblock %}
 

cms/templates/cms/snippets/list.html

@@ -56,6 +56,8 @@ Options:
     {% endif %}
 {% endwith %}
 </nav>
+{% elif url and url_text %}
+<nav><a href="{{ url }}">{{ url_text }}</a></nav>
 {% endif %}
 
 </ul>

cms/templates/cms/snippets/player.html

@@ -0,0 +1,45 @@
+{% load staticfiles %}
+{% load i18n %}
+
+<audio preload="metadata">
+    {% trans "Your browser does not support the <code>audio</code> element." %}
+    {% for stream in streams %}
+    <source src="{{ stream }}" />
+    {% endfor %}
+</audio>
+
+<div class="playlist">
+    <li class='item list_item flex_row' style="display: none;">
+        <div class="button">
+            <img src="{% static "cms/images/play.png" %}" class="play"
+                title="{% trans "play" %}" />
+            <img src="{% static "cms/images/pause.png" %}" class="pause"
+                title="{% trans "pause" %}" />
+            <img src="{% static "cms/images/loading.png" %}" class="loading"
+                title="{% trans "loading..." %}" />
+        </div>
+
+        <div class="flex_item">
+            <h3 class="title flex_item">{{ self.live_title }}</h3>
+            <div class="content flex_row">
+                <span class="info duration flex_item"></span>
+                <span class="actions">
+                    <a class="action detail" title="{% trans "more informations" %}">➔</a>
+                    <a class="action remove" title="{% trans "remove this sound" %}">✖</a>
+                </span>
+            </div>
+        </div>
+    </li>
+</div>
+
+<div class="controls">
+    <span class="progress">
+        <span class="info duration"></span>
+        <progress class="flex_item progress" value="0" max="1"></progress>
+    </span>
+
+    <input type="checkbox" class="single" id="player_single_mode">
+    <label for="player_single_mode" class="info"
+        title="{% trans "enable and disable single mode" %}">↻</label>
+</div>
+

cms/templates/cms/snippets/sound_list_item.html

@@ -1,22 +1,37 @@
 {% load static %}
+{% load i18n %}
 
 {# TODO: complete archive podcast -> info #}
-<div class="list_item sound">
-<a onclick="player.select(player.playlist.add(new Sound(
+<script>
+function add_sound_{{ item.id }}(event) {
+    var sound = new Sound(
         title='{{ item.name|escape }}',
         detail='{{ item.detail_url }}',
         duration={{ item.duration|date:"H*3600+i*60+s" }},
-        streams='{{ item.url }}')));" class="flex_row">
+        streams='{{ item.url }}',
+        {% if page and page.cover %}cover='{{ page.icon }}'{% endif %}
+    );
+
+    sound = player.playlist.add(sound);
+
+    if(event.target.dataset.action != 'add')
+        player.select(sound, true);
+}
+</script>
+
+<a class="list_item sound flex_row" onclick="add_sound_{{ item.id }}(event)">
     <img src="{% static "cms/images/listen.png" %}" class="icon"/>
     <h3 class="flex_item">{{ item.name }}</h3>
 
-    <span class="info">
+    <time class="info">
         {% if item.duration.hour > 0 %}
         {{ item.duration|date:'H:i:s' }}
         {% else %}
         {{ item.duration|date:'i:s' }}
         {% endif %}
-    </span>
-</a>
-</div>
+    </time>
+
+    <img src="{% static "cms/images/add.png" %}" class="icon"
+         data-action='add' alt="{% trans "add this sound to the playlist" %}"/>
+</a>