hot reload

aircox/templates/aircox/episode_detail.html

@@ -2,19 +2,11 @@
 {% comment %}List of a show's episodes for a specific{% endcomment %}
 {% load i18n aircox %}
 
-{% block head_extra %}
-<script id="page">
-    window.addEventListener('load', ev => {
-        Vue.set(aircox.app, 'page', {
-                podcasts: new aircox.Set(aircox.Sound, {items: {{ podcasts|json|safe }}})
-        });
-    });
-</script>
-{% endblock head_extra %}
-
 {% include "aircox/program_sidebar.html" %}
 
 {% block content %}
+<a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}">
+<template v-slot="{podcasts,page}">
 {{ block.super }}
 
 <div class="columns is-desktop">
@@ -46,9 +38,9 @@
         </ul>
     </section>
 
-    {% if podcasts %}
+    {% if object.podcasts %}
     <section class="column">
-        <a-playlist v-if="page" :set="page.podcasts"
+        <a-playlist v-if="page" :set="podcasts"
             name="{{ page.title }}"
             :player="player" :actions="['play']"
             @select="player.playItems('queue', $event.item)">
@@ -81,5 +73,6 @@
 </section>
 {% endif %}
 
+</template></a-episode>
 {% endblock %}
 

aircox/templates/aircox/widgets/episode_item.html

@@ -41,3 +41,15 @@ Context variables:
 {% endif %}
 {% endblock %}
 
+
+{% block actions %}
+{% if object.sound_set.public.count %}
+<button class="button is-round" @click="player.playButtonClick($event)"
+        data-sounds="{{ object.podcasts|json }}">
+    <span class="icon is-small">
+        <span class="fas fa-play"></span>
+    </span>
+</button>
+{% endif %}
+{% endblock %}
+

aircox/templates/aircox/widgets/page_item.html

@@ -30,7 +30,7 @@ Context variables:
     {% if has_cover|default_if_none:True %}
     <div class="media-left">
         <img src="{% thumbnail object.cover|default:station.default_cover 128x128 crop=scale %}"
-            class="small-cover">
+            class="cover is-small">
     </div>
     {% endif %}
     <div class="media-content">
@@ -55,6 +55,8 @@ Context variables:
         </div>
         {% endif %}
     </div>
+
+    {% block actions %}{% endblock %}
 </article>
 {% endif %}