From ea130a32eea6d55353490122962b434b6be74a51 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sun, 6 Dec 2020 18:50:43 +0100
Subject: [PATCH] beginning to implement podcast view
---
lib/AppInfo/Application.php | 1 +
src/views/Podcast.vue | 88 ++++++++++++++++++++++++++++++++++---
2 files changed, 82 insertions(+), 7 deletions(-)
diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 18c9327..ab4851b 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -68,6 +68,7 @@ class Application extends App implements IBootstrap {
$manager = $this->getContainer()->getServer()->getContentSecurityPolicyManager();
$policy = new ContentSecurityPolicy();
$policy->addAllowedConnectDomain('https://de1.api.radio-browser.info');
+ $policy->addAllowedConnectDomain('https://api.fyyd.de');
$policy->addAllowedImageDomain('*');
$policy->addAllowedMediaDomain('*');
$manager->addDefaultPolicy($policy);
diff --git a/src/views/Podcast.vue b/src/views/Podcast.vue
index 08f8a97..2fc2901 100644
--- a/src/views/Podcast.vue
+++ b/src/views/Podcast.vue
@@ -25,6 +25,15 @@
<Navigation
:station-data="tableData" />
<AppContent>
+ <div class="podcastHeader">
+ <div
+ class="podcastImage"
+ :style="{ backgroundImage: `url(${podcast.image})` }" />
+ <div class="podcastDescription">
+ <h1>{{ podcast.title }}</h1>
+ <div>{{ podcast.description }}</div>
+ </div>
+ </div>
<Table
v-show="!pageLoading && tableData.length > 0"
v-resize="onResize"
@@ -79,6 +88,7 @@ export default {
Sidebar,
},
data: () => ({
+ podcast: {},
tableData: [],
pageLoading: false,
blurHashes: require('../assets/blurHashes.json'),
@@ -157,14 +167,15 @@ export default {
preFill() {
const route = this.$route
- this.loadStations(route.name)
+ console.log(route)
+ // this.queryPodcast(route.name)
},
async onRoute() {
this.tableData = []
this.pageLoading = true
- const route = this.$route
- this.loadStations(route.name)
+ const podcastId = this.$route.params.id
+ this.queryPodcast(podcastId)
},
/**
@@ -303,11 +314,29 @@ export default {
},
- async loadStations(menuState = 'TOP') {
+ async queryPodcast(podcastId) {
const vm = this
+ const menuState = 'TOP'
+ podcastId = 1084
+
+ let queryURI = 'https://api.fyyd.de/0.2/podcast?podcast_id=' + podcastId
+ try {
+ if (menuState === 'FAVORITES' || menuState === 'RECENT') {
+ axios.defaults.headers.requesttoken = requesttoken
+ } else {
+ delete axios.defaults.headers.requesttoken
+ }
+ await axios.get(queryURI)
+ .then(function(response) {
+ vm.processPodcast(response.data)
+ })
+ } catch (error) {
+ showError(t('radio', 'Could not fetch stations from remote API'))
+ }
+
const queryBase = this.$apiUrl + '/json/stations'
- let queryURI = queryBase
+ queryURI = queryBase
let sortBy = 'clickcount'
if (vm.$route.name === 'CATEGORIES') {
@@ -426,6 +455,15 @@ export default {
}
},
+ processPodcast(podcast) {
+ console.log(podcast)
+ this.podcast.image = podcast.data.imgURL
+ this.podcast.title = podcast.data.title
+ this.podcast.description = podcast.data.description
+ // vm.tableData = vm.tableData.concat(response.data)
+ // vm.pageLoading = false
+ },
+
/**
* On scroll event, load more stations if bottom reached
*/
@@ -433,7 +471,8 @@ export default {
window.onscroll = () => {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
const route = this.$route
- this.loadStations(route.name)
+ console.log(route)
+ // this.queryPodcast(route.name)
}
}
},
@@ -475,7 +514,7 @@ export default {
}
</script>
-<style>
+<style lang="scss">
@media only screen and (min-width: 1024px) {
.app-navigation-toggle {
@@ -483,4 +522,39 @@ export default {
}
}
+.podcastHeader {
+ width: 100%;
+ background: black;
+ min-height: 300px;
+ display: flex;
+ color: white;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ gap: 30px;
+
+}
+
+.podcastImage {
+ width: 260px;
+ height: 260px;
+ background: red;
+ background-size: cover;
+ background-position: center center;
+}
+
+.podcastDescription {
+ max-width: 500px;
+ max-height: 200px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ h1 {
+ font-size: 30px;
+ font-weight: bold;
+ padding-bottom: 10px;
+ line-height: 1.2em;
+ }
+}
+
</style>
--
GitLab