Commit 694664ab authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt

implement series page

parent 30691fbe
Pipeline #2008 passed with stages
in 5 minutes and 15 seconds
<template>
<app-page :title="series.name">
<app-image :src="coverImage" :size="windowWidth / 4" auto-size :aspect-ratio="coverAspectRatio"
cover cover-screen calculate-luminosity role="presentation" v-if="coverImage"/>
<app-container class="my-5">
<app-header :title="series.name" class="mb-3"/>
<div class="mb-2">
<app-markdown v-if="series.description">{{ series.description }}</app-markdown>
<SuggestContent v-else missing-text-translation-key="series_page.missing_description"
:context="series"/>
</div>
<app-auto-grid>
<div>
<h2 class="t-4 mt-5">Kommende Sendungen</h2>
</div>
</app-auto-grid>
<app-section>
<app-auto-grid :sizes="{ md: [2, 1], lg: [2, 1], xl: [2, 1] }" :gap-modifier="2">
<div>
<app-markdown v-if="series.description">{{ series.description }}</app-markdown>
<SuggestContent v-else missing-text-translation-key="series_page.missing_description"
:context="{ title: series.name, ...series }" type="series"/>
</div>
</app-auto-grid>
</app-section>
<app-section>
<app-auto-grid :sizes="{ md: [2, 1], lg: [2, 1], xl: [2, 1] }" :gap-modifier="2">
<div>
<app-paginator :collection="dataSources.recordings" behavior="append"
no-loader :min-height="0" :page-size="recordingCollection.count"
:filters="recordingFilters" id="recent_recordings">
<template v-slot:header>
<app-header :title="$t('series_page.recent_posts')" :level="2" class="mb-3"/>
</template>
<template v-slot:default="{ items, isLoading }">
<app-auto-grid :default-size="recordingCollection.columns" v-if="items.length > 0">
<div v-for="recording in items" :key="recording.id">
<RecordingPreview :recording="recording" class="mb-3"/>
</div>
</app-auto-grid>
<div class="content" v-else-if="items.length === 0 && !isLoading">
<p>{{ $t('series_page.no_recordings') }}</p>
</div>
</template>
<template v-slot:footer="{ isLoading, hasNext }">
<div style="height: 100px; position: relative" v-if="hasNext">
<app-spinner-area v-if="isLoading"/>
<app-paginator-nav class="mt-3"/>
</div>
</template>
</app-paginator>
</div>
<div>
<app-paginator :collection="dataSources.broadcasts" :filters="broadcastFilters"
:page-size="3" :page-limit="1" :empty-message="$t('series_page.no_broadcasts')">
<template v-slot:header>
<app-header :title="$t('series_page.upcoming_broadcasts')" :level="2" class="mb-3"/>
</template>
<template v-slot:default="{ items }">
<app-auto-grid :default-size="1">
<div v-for="broadcast in items" :key="broadcast.id">
<BroadcastPreview :broadcast="broadcast" :series="series"/>
</div>
</app-auto-grid>
</template>
</app-paginator>
</div>
</app-auto-grid>
</app-section>
</app-container>
</app-page>
</template>
<script>
import SuggestContent from '../components/generic/SuggestContent'
import RecordingPreview from '../components/model/RecordingPreview'
import { imageUrl } from '../components/model/mixins'
import BroadcastPreview from '../components/model/BroadcastPreview'
export default {
name: 'SeriesPage',
components: { SuggestContent },
components: { BroadcastPreview, RecordingPreview, SuggestContent },
mixins: [imageUrl('series')],
props: {
series: Object
},
......@@ -28,6 +84,49 @@
return {
broadcasts: null
}
}
},
computed: {
recordingFilters () {
return {
is_available: 1,
series: this.series.id
}
},
broadcastFilters () {
return {
end_time__gt: new Date().toISOString(),
series: this.series.id
}
},
recordingCollection () {
return {
xs: { count: 5, columns: 1 },
md: { count: 15, columns: 3 }
}[this.$mq] || { count: 28, columns: 4 }
},
coverAspectRatio () {
return this.windowWidth / this.windowHeight
}
},
inject: ['dataSources']
}
</script>
<i18n lang="yaml">
en:
series_page.upcoming_broadcasts: Upcoming Broadcasts
series_page.recent_posts: Recent Posts
series_page.no_recordings: >
There haven’t been any posts for this program yet.
Please check back later.
series_page.no_broadcasts: >
No broadcasts are currently planned.
de:
series_page.upcoming_broadcasts: Kommende Sendungen
series_page.recent_posts: Letzte Beiträge
series_page.no_recordings: >
In dieser Sendereihe wurden bisher keine Beiträge veröffentlicht.
Probiere es doch später noch einmal.
series_page.no_broadcasts: >
Derzeit sind keine Sendungen geplant.
</i18n>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment