hot reload

aircox/models/episode.py

@@ -6,6 +6,7 @@ from django.utils import timezone as tz
 from django.utils.translation import gettext_lazy as _
 from django.utils.functional import cached_property
 
+from easy_thumbnails.files import get_thumbnailer
 
 from aircox import settings, utils
 from .program import Program, ProgramChildQuerySet, \
@@ -25,6 +26,24 @@ class Episode(Page):
     def program(self):
         return getattr(self.parent, 'program', None)
 
+    @cached_property
+    def podcasts(self):
+        """ Return serialized data about podcasts. """
+        from ..serializers import PodcastSerializer
+        podcasts = [PodcastSerializer(s).data
+                    for s in self.sound_set.public().order_by('type') ]
+        if self.cover:
+            options = {'size': (128,128), 'crop':'scale'}
+            cover = get_thumbnailer(self.cover).get_thumbnail(options).url
+        else:
+            cover = None
+
+        for index, podcast in enumerate(podcasts):
+            podcasts[index]['cover'] = cover
+            podcasts[index]['page_url'] = self.get_absolute_url()
+            podcasts[index]['page_title'] = self.title
+        return podcasts
+
     @program.setter
     def program(self, value):
         self.parent = value

aircox/static/aircox/admin.css

@@ -7463,22 +7463,31 @@ section > .toolbar {
   padding: 1em;
   margin-bottom: 1.5em; }
 
-main .cover {
-  margin: 1em 0em;
-  border: 0.2em black solid; }
-
-main .small-cover {
+main .cover.is-small {
   width: 10em; }
 
+main .cover.is-tiny {
+  height: 2em; }
+
+.sound-item .cover {
+  height: 5em; }
+
 aside > section {
   margin-bottom: 2em; }
 
 aside .cover {
   margin-bottom: 2em; }
 
-aside .small-cover {
-  width: 4em; }
+aside .cover.is-small {
+  width: 10em; }
+
+aside .cover.is-tiny {
+  height: 2em; }
 
 aside .media .subtitle {
   font-size: 1em; }
 
+.is-round, .sound-item .button {
+  border: 1px #7a7a7a solid;
+  border-radius: 1em; }
+

aircox/static/aircox/main.css

@@ -7442,22 +7442,31 @@ section > .toolbar {
   padding: 1em;
   margin-bottom: 1.5em; }
 
-main .cover {
-  margin: 1em 0em;
-  border: 0.2em black solid; }
-
-main .small-cover {
+main .cover.is-small {
   width: 10em; }
 
+main .cover.is-tiny {
+  height: 2em; }
+
+.sound-item .cover {
+  height: 5em; }
+
 aside > section {
   margin-bottom: 2em; }
 
 aside .cover {
   margin-bottom: 2em; }
 
-aside .small-cover {
-  width: 4em; }
+aside .cover.is-small {
+  width: 10em; }
+
+aside .cover.is-tiny {
+  height: 2em; }
 
 aside .media .subtitle {
   font-size: 1em; }
 
+.is-round, .sound-item .button {
+  border: 1px #7a7a7a solid;
+  border-radius: 1em; }
+

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 %}
 

aircox/views/episode.py

@@ -4,7 +4,6 @@ import datetime
 from django.views.generic import ListView
 
 from ..models import Diffusion, Episode, Program, StaticPage, Sound
-from ..serializers import PodcastSerializer
 from .base import BaseView
 from .program import ProgramPageDetailView
 from .page import PageListView
@@ -20,8 +19,6 @@ class EpisodeDetailView(ProgramPageDetailView):
     def get_context_data(self, **kwargs):
         if not 'tracks' in kwargs:
             kwargs['tracks'] = self.object.track_set.order_by('position')
-        if not 'podcasts' in kwargs:
-            kwargs['podcasts'] = [PodcastSerializer(s).data for s in self.object.sound_set.public() ]
         return super().get_context_data(**kwargs)