rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

podcasts & player

Browse Source
This commit is contained in:
bkfox
2023-11-24 20:46:56 +01:00
parent 474016f776
commit 62ada47352
14 changed files with 490 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
aircox/models/episode.py
View File

@ -10,8 +10,13 @@ from .program import ProgramChildQuerySet
__all__ = ("Episode",)
class EpisodeQuerySet(ProgramChildQuerySet):
def with_podcasts(self):
return self.filter(sound__is_public=True).distinct()
class Episode(Page):
objects = ProgramChildQuerySet.as_manager()
objects = EpisodeQuerySet.as_manager()
detail_url_name = "episode-detail"
template_prefix = "episode"
@ -26,6 +31,7 @@ class Episode(Page):
@cached_property
def podcasts(self):
"""Return serialized data about podcasts."""
from .sound import Sound
from ..serializers import PodcastSerializer
podcasts = [PodcastSerializer(s).data for s in self.sound_set.public().order_by("type")]
@ -35,7 +41,14 @@ class Episode(Page):
else:
cover = None
archive_index = 1
for index, podcast in enumerate(podcasts):
if podcast["type"] == Sound.TYPE_ARCHIVE:
if archive_index > 1:
podcast["name"] = f"{self.title} - {archive_index}"
else:
podcast["name"] = self.title
podcasts[index]["cover"] = cover
podcasts[index]["page_url"] = self.get_absolute_url()
podcasts[index]["page_title"] = self.title

460
aircox/static/aircox/css/chunk-common.css
View File

@ -84,7 +84,7 @@ fieldset[disabled] .pagination-ellipsis {
}
.title:not(:last-child),
.subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .progress:not(:last-child), .content:not(:last-child), .box:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .breadcrumb:not(:last-child) {
.subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .breadcrumb:not(:last-child) {
margin-bottom: 1.5rem;
}
@ -8819,188 +8819,6 @@ div.icon-text {
display: flex;
}
.progress {
-moz-appearance: none;
-webkit-appearance: none;
border: none;
border-radius: 9999px;
display: block;
height: 1rem;
overflow: hidden;
padding: 0;
width: 100%;
}
.progress::-webkit-progress-bar {
background-color: hsl(0deg, 0%, 93%);
}
.progress::-webkit-progress-value {
background-color: hsl(0deg, 0%, 29%);
}
.progress::-moz-progress-bar {
background-color: hsl(0deg, 0%, 29%);
}
.progress::-ms-fill {
background-color: hsl(0deg, 0%, 29%);
border: none;
}
.progress.is-white::-webkit-progress-value {
background-color: #fff;
}
.progress.is-white::-moz-progress-bar {
background-color: #fff;
}
.progress.is-white::-ms-fill {
background-color: #fff;
}
.progress.is-white:indeterminate {
background-image: linear-gradient(to right, #fff 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-black::-webkit-progress-value {
background-color: #000;
}
.progress.is-black::-moz-progress-bar {
background-color: #000;
}
.progress.is-black::-ms-fill {
background-color: #000;
}
.progress.is-black:indeterminate {
background-image: linear-gradient(to right, #000 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-light::-webkit-progress-value {
background-color: hsl(0deg, 0%, 96%);
}
.progress.is-light::-moz-progress-bar {
background-color: hsl(0deg, 0%, 96%);
}
.progress.is-light::-ms-fill {
background-color: hsl(0deg, 0%, 96%);
}
.progress.is-light:indeterminate {
background-image: linear-gradient(to right, hsl(0deg, 0%, 96%) 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-dark::-webkit-progress-value {
background-color: hsl(0deg, 0%, 21%);
}
.progress.is-dark::-moz-progress-bar {
background-color: hsl(0deg, 0%, 21%);
}
.progress.is-dark::-ms-fill {
background-color: hsl(0deg, 0%, 21%);
}
.progress.is-dark:indeterminate {
background-image: linear-gradient(to right, hsl(0deg, 0%, 21%) 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-primary::-webkit-progress-value {
background-color: hsl(171deg, 100%, 41%);
}
.progress.is-primary::-moz-progress-bar {
background-color: hsl(171deg, 100%, 41%);
}
.progress.is-primary::-ms-fill {
background-color: hsl(171deg, 100%, 41%);
}
.progress.is-primary:indeterminate {
background-image: linear-gradient(to right, hsl(171deg, 100%, 41%) 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-link::-webkit-progress-value {
background-color: hsl(229deg, 53%, 53%);
}
.progress.is-link::-moz-progress-bar {
background-color: hsl(229deg, 53%, 53%);
}
.progress.is-link::-ms-fill {
background-color: hsl(229deg, 53%, 53%);
}
.progress.is-link:indeterminate {
background-image: linear-gradient(to right, hsl(229deg, 53%, 53%) 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-info::-webkit-progress-value {
background-color: hsl(207deg, 61%, 53%);
}
.progress.is-info::-moz-progress-bar {
background-color: hsl(207deg, 61%, 53%);
}
.progress.is-info::-ms-fill {
background-color: hsl(207deg, 61%, 53%);
}
.progress.is-info:indeterminate {
background-image: linear-gradient(to right, hsl(207deg, 61%, 53%) 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-success::-webkit-progress-value {
background-color: hsl(153deg, 53%, 53%);
}
.progress.is-success::-moz-progress-bar {
background-color: hsl(153deg, 53%, 53%);
}
.progress.is-success::-ms-fill {
background-color: hsl(153deg, 53%, 53%);
}
.progress.is-success:indeterminate {
background-image: linear-gradient(to right, hsl(153deg, 53%, 53%) 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-warning::-webkit-progress-value {
background-color: hsl(44deg, 100%, 77%);
}
.progress.is-warning::-moz-progress-bar {
background-color: hsl(44deg, 100%, 77%);
}
.progress.is-warning::-ms-fill {
background-color: hsl(44deg, 100%, 77%);
}
.progress.is-warning:indeterminate {
background-image: linear-gradient(to right, hsl(44deg, 100%, 77%) 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress.is-danger::-webkit-progress-value {
background-color: hsl(348deg, 86%, 61%);
}
.progress.is-danger::-moz-progress-bar {
background-color: hsl(348deg, 86%, 61%);
}
.progress.is-danger::-ms-fill {
background-color: hsl(348deg, 86%, 61%);
}
.progress.is-danger:indeterminate {
background-image: linear-gradient(to right, hsl(348deg, 86%, 61%) 30%, hsl(0deg, 0%, 93%) 30%);
}
.progress:indeterminate {
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-name: moveIndeterminate;
animation-timing-function: linear;
background-color: hsl(0deg, 0%, 93%);
background-image: linear-gradient(to right, hsl(0deg, 0%, 29%) 30%, hsl(0deg, 0%, 93%) 30%);
background-position: top left;
background-repeat: no-repeat;
background-size: 150% 150%;
}
.progress:indeterminate::-webkit-progress-bar {
background-color: transparent;
}
.progress:indeterminate::-moz-progress-bar {
background-color: transparent;
}
.progress:indeterminate::-ms-fill {
animation-name: none;
}
.progress.is-small {
height: 0.75rem;
}
.progress.is-medium {
height: 1.25rem;
}
.progress.is-large {
height: 1.5rem;
}
@keyframes moveIndeterminate {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
.table {
background-color: #fff;
color: hsl(0deg, 0%, 21%);
@ -9567,76 +9385,27 @@ a.navbar-item.is-active {
font-weight: 100;
}
.player {
z-index: 10000;
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
}
.player .player-panels {
height: 0%;
transition: height 3s;
}
.player .player-panels.is-open {
height: auto;
}
.player .player-panel {
margin: 0.4em;
max-height: 80%;
overflow-y: auto;
}
.player .progress {
margin: 0em;
padding: 0em;
border-color: hsl(207deg, 61%, 53%);
border-style: "solid";
}
.player .player-bar {
border-top: 1px hsl(0deg, 0%, 71%) solid;
}
.player .player-bar > div {
height: 3.75em !important;
}
.player .player-bar > .media-left:not(:last-child) {
margin-right: 0em;
}
.player .player-bar > .media-cover {
border-left: 1px black solid;
}
.player .player-bar .cover {
font-size: 1.5rem !important;
height: 2.5em !important;
}
.player .player-bar > .media-content {
padding-top: 0.4em;
padding-left: 0.4em;
}
.player .player-bar .button {
font-size: 1.5rem !important;
height: 100%;
padding: auto 0.2em !important;
min-width: 2.5em;
border-radius: 0px;
transition: background-color 1s;
}
.player .player-bar .title {
margin: 0em;
}
:root {
--text-color: black;
--highlight-color: rgba(255, 255, 0, 1);
--highlight-color-alpha: rgba(255, 255, 0, 0.6);
--highlight-color-alpha: rgba(255, 255, 0, 0.7);
--highlight-color-2: rgb(0, 0, 254);
--highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
--highlight-color-2-alpha: rgb(0, 0, 254, 0.7);
--header-height: 30em;
--heading-height: 30em;
--heading-title-bg-color: rgba(255, 255, 0, 1);
--heading-bg-color: var(--highlight-color);
--heading-bg-highlight-color: var(--highlight-color-2);
--heading-font-family: default;
--preview-media-height: 10em;
--preview-media-cover-size: 10em;
--preview-cover-size: 24em;
--preview-cover-small-size: 10em;
--heading-font-family: default;
--player-panel-bg: var(--highlight-color-alpha);
--player-bar-bg: var(--highlight-color);
--progress-border: 1px var(--highlight-color-2) solid;
--progress-bg-color: transparent;
--progress-bar-color: var(--highlight-color-2);
}
body {
@ -9649,35 +9418,6 @@ section > .toolbar {
margin-bottom: 1.5em;
}
aside > section {
margin-bottom: 2em;
}
aside .cover.is-small {
width: 10em;
}
aside .cover.is-tiny {
height: 2em;
}
aside .media .subtitle {
font-size: 1em;
}
.sound-item {
margin-bottom: 0.2em;
}
.sound-item .cover {
height: 5em;
}
.sound-item .media-content a {
padding: 0em;
}
.sound-item .media-right .button {
margin-right: 0.2em;
min-width: 2.5em;
display: inline-block;
}
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
font-family: var(--heading-font-family);
}
@ -9689,6 +9429,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
background-color: var(--highlight-color-alpha);
color: var(--highlight-color-2);
text-decoration: none;
padding: 0.4em;
}
.page .content {
font-size: 2em;
@ -9700,10 +9441,10 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
margin-top: unset;
padding-top: unset !important;
margin-bottom: 1.2em;
border-bottom: 1px solid black;
}
.page section.container:not(:first-child) {
margin-top: 2em;
border-top: 1px solid black;
}
.d-inline {
@ -9755,6 +9496,10 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
flex-grow: 0 !important;
}
.no-border {
border: 0px !important;
}
.is-clickable {
cursor: pointer;
}
@ -9765,24 +9510,49 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
border-radius: 0.2em;
}
.button.action {
.button {
border-radius: 0px;
border-color: var(--highlight-color-2-alpha);
}
.button:hover {
border-color: var(--highlight-color-2) !important;
color: var(--highlight-color-2) !important;
opacity: 1 !important;
}
.actions .button, .button.action {
background-color: var(--highlight-color);
justify-content: center;
padding: 0.4em !important;
min-width: 2em;
}
.button.action .icon {
.actions .button .icon, .button.action .icon {
margin: 0em !important;
}
.button.action label {
.actions .button .not-selected, .button.action .not-selected {
opacity: 0.6;
}
.actions .button label, .button.action label {
margin-left: 0.4em;
}
.actions .button:hover, .actions .button .selected, .button.action:hover, .button.action .selected {
color: var(--highlight-color-2) !important;
}
.button .dropdown-trigger {
border-radius: 1.5em;
}
.list-filters {
text-align: right;
.button-group .button {
background-color: transparent;
border-top: 0px;
border-bottom: 0px;
height: 100%;
}
.button-group .button:last-child {
border-right: 0px;
}
.actions.no-label label {
display: none;
}
.title {
@ -9809,10 +9579,6 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
background-color: var(--heading-title-bg-color);
}
.actions.no-label label {
display: none;
}
.dropdown-item {
font-size: unset !important;
}
@ -9875,7 +9641,7 @@ nav li a, nav li .button {
.preview {
position: relative;
background-size: cover;
margin-bottom: 1.2em !important;
margin-bottom: 2em !important;
}
.preview.preview-card:not(.wide) {
max-width: 30em;
@ -10069,3 +9835,137 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
display: none;
}
}
.a-progress {
display: flex;
flex-direction: row;
margin: 0em;
padding: 0em;
background-color: var(--progress-bg-color);
}
.a-progress .a-progress-bar-container {
flex-grow: 1;
margin: 0em 0.8em;
border: var(--progress-border);
}
.a-progress .a-progress-bar {
background-color: var(--progress-bar-color);
}
.playlist .header, .a-playlist .header {
display: flex;
flex-direction: row;
}
.playlist .title, .a-playlist .title {
font-size: 1em;
margin: 0;
padding: 0.8em;
}
.playlist li, .a-playlist li {
list-style: none;
border-bottom: 1px var(--highlight-color-2) solid;
}
.playlist li:last-child, .a-playlist li:last-child {
border-bottom: 0px;
}
.a-sound-item {
display: flex;
align-items: center;
flex-direction: row;
height: 3em;
background-color: var(--highlight-color-alpha);
}
.a-sound-item.playing, .a-sound-item.playing .title {
color: var(--highlight-color-2) !important;
}
.a-sound-item:hover {
background-color: var(--highlight-color);
}
.a-sound-item:hover .title {
color: var(--highlight-color-2) !important;
}
.a-sound-item .title {
margin: 0em;
padding: 0em;
font-size: 1.4em;
}
.a-sound-item .title .icon {
padding: 0em 0.8em;
}
.a-sound-item .button {
width: 3em;
}
.a-player {
z-index: 10000;
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
}
.a-player a {
color: var(--highlight-color-2);
}
.a-player-panels {
background: var(--player-panel-bg);
height: 0%;
transition: height 1s;
}
.a-player-panels.is-open {
height: auto;
}
.a-player-panel {
padding-bottom: 0.8em;
max-height: 80%;
overflow-y: auto;
}
.a-player-panel .a-sound-item:not(:hover) {
background-color: transparent;
}
.a-player-bar {
display: flex;
background: var(--player-bar-bg);
flex-direction: row;
justify-content: center;
border-top: 1px hsl(0deg, 0%, 71%) solid;
height: 3.75em !important;
}
.a-player-bar > * {
height: 100%;
}
.a-player-bar .cover {
height: 100%;
}
.a-player-bar .title {
font-size: 1em;
margin: 0em;
}
.a-player-bar .title:last-child {
font-size: 1.6em;
}
.a-player-bar .button {
font-size: 1.6em;
height: 100%;
padding: auto 0.2em !important;
min-width: 2.5em;
border-radius: 0px;
transition: background-color 0.5s;
}
.a-player-bar .button:hover {
color: var(--highlight-color-2) !important;
}
.a-player-bar .button.active {
color: var(--highlight-color-2);
}
.a-player-bar .button.open {
background-color: var(--highlight-color-2);
color: var(--highlight-color);
}
.a-player-bar-content {
flex-grow: 1;
padding-top: 0.8em;
padding-left: 0.8em;
padding-right: 0.8em;
}

12
aircox/static/aircox/js/chunk-common.js
View File

File diff suppressed because one or more lines are too long

2
aircox/templates/aircox/basepage_list.html
View File

@ -11,7 +11,7 @@
{% with parent.title as title %}
{% with model|default:"Publications"|verbose_name:True|capfirst as model %}
{% comment %}Translators: title when pages are filtered for a specific parent page, e.g.: Articles of My Incredible Show{% endcomment %}
{% blocktranslate %}{{ model }} of {{ title }}{% endblocktranslate %}
{% blocktranslate %}All {{ model }}{% endblocktranslate %}
{% endwith %}
{% endwith %}
{% endif %}

34
aircox/templates/aircox/episode_detail.html
View File

@ -8,13 +8,27 @@
{% endwith %}
{% endblock %}
{% block content %}
{% block content-container %}
{{ block.container }}
<a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}">
<template v-slot="{podcasts,page}">
{{ block.super }}
{% if object.podcasts %}
<section class="container no-border">
<h3 class="title is-3">{% translate "Podcasts" %}</h3>
<a-playlist v-if="page" :set="podcasts"
name="{{ page.title }}"
list-class="menu-list" item-class="menu-item"
:player="player" :actions="['play']"
@select="player.playItems('queue', $event.item)">
</a-playlist>
</section>
{% endif %}
{% if tracks %}
<section>
<section class="container">
<h3 class="title is-3">{% translate "Playlist" %}</h3>
<table class="table is-hoverable is-fullwidth">
<tbody>
@ -28,24 +42,10 @@
{% endfor %}
</tbody>
</table>
<ol>
</ol>
</section>
{% endif %}
{% if object.podcasts %}
<section>
<a-playlist v-if="page" :set="podcasts"
name="{{ page.title }}"
list-class="menu-list" item-class="menu-item"
:player="player" :actions="['play']"
@select="player.playItems('queue', $event.item)">
<template v-slot:header>
<h3 class="title is-3">{% translate "Podcasts" %}</h3>
</template>
</a-playlist>
</section>
{% endif %}
</template>
</a-episode>
{% endblock %}

8
aircox/templates/aircox/program_detail.html
View File

@ -9,7 +9,7 @@
{{ block.super }}
{% if episodes %}
<section class="container">
<h4 class="title is-3">{% translate "Last Episodes" %}</h4>
<h3 class="title is-3">{% translate "Last Episodes" %}</h3>
<section class="card-grid">
{% for object in episodes|slice:":3" %}
{% page_widget "card" object %}
@ -18,8 +18,7 @@
<nav class="has-text-right">
<li class="nav-item">
<a href="{% url "episode-list" parent_slug=program.slug %}"
class="button action">
<a href="{% url "episode-list" parent_slug=program.slug %}">
{% translate "All episodes" %}
</a>
</li>
@ -30,7 +29,7 @@
{% if articles %}
<section class="container">
<h4 class="title is-4">{% translate "Last Articles" %}</h4>
<h3 class="title is-3">{% translate "Last Articles" %}</h3>
<section class="card-grid">
{% for object in articles|slice:3 %}
@ -41,7 +40,6 @@
<nav class="has-text-right">
<li class="nav-item">
<a href="{% url "article-list" parent_slug=program.slug %}"
class="button action"
aria-label="{% translate "Show all program's articles" %}">
{% translate "All articles" %}
</a>

13
aircox/templates/aircox/widgets/player.html
View File

@ -5,7 +5,7 @@ The audio player
<br>
<div class="box is-fullwidth is-fixed-bottom is-paddingless player"
<div class="is-fullwidth is-fixed-bottom is-paddingless player-container"
role="{% translate "player" %}"
aria-description="{% translate "Audio player used to listen to the radio and podcasts" %}">
<noscript>
@ -22,11 +22,11 @@ The audio player
:live-args="{% player_live_attr %}"
button-title="{% translate "Play or pause audio" %}">
<template v-slot:content="{ loaded, live, current }">
<h4 v-if="loaded" class="title is-4">
<h4 v-if="loaded" class="title">
[[ loaded.name ]]
</h4>
<h4 v-else-if="current && current.data.type == 'track'"
class="title is-4" aria-description="{% translate "Track currently on air" %}">
class="title" aria-description="{% translate "Track currently on air" %}">
<span class="has-text-info is-size-3">&#9836;</span>
<span>[[ current.data.title ]]</span>
<span class="has-text-grey-dark has-text-weight-light">
@ -34,12 +34,11 @@ The audio player
<i v-if="current.data.info">([[ current.data.info ]])</i>
</span>
</h4>
<div v-else-if="live && current && current.data.type == 'diffusion'">
<h4 class="title is-4" aria-description="{% translate "Diffusion currently on air" %}">
<h4 v-else-if="live && current && current.data.type == 'diffusion'"
class="title"
aria-description="{% translate "Diffusion currently on air" %}">
<a :href="current.data.url">[[ current.data.title ]]</a>
</h4>
<div class="">[[ current.data.info ]]</div>
</div>
<h4 v-else class="title is-4" aria-description="{% translate "Currently playing" %}">
{{ request.station.name }}
</h4>

6
aircox/views/page.py
View File

@ -40,11 +40,7 @@ class BasePageListView(AttachedToMixin, ParentMixin, BaseView, ListView):
if not context.get("page"):
if not context.get("title"):
model = self.model._meta.verbose_name_plural
if parent:
parent = parent.display_title
title = _("{model} of {parent}")
else:
title = _("{model}")
title = _("{model}")
context["title"] = title.format(model=model, parent=parent)
if not context.get("cover") and parent and parent.cover: