diff --git a/src/components/Table.vue b/src/components/Table.vue
index 5d25f985c21e1b91f8a652756016ce2b1c132bc8..a9014289b1743a2eff49e08116c09698ed5d55fb 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -49,7 +49,7 @@
<td
class="nameColumn"
@click="changeRoute(`/browse/show/${episode.podcast_id}/${episode.id}`)">
- <eq-animation>
+ <div class="eq-animation">
<div class="-amp-video-eq-col">
<div class="-amp-video-eq-1-1" />
<div class="-amp-video-eq-1-2" />
@@ -66,7 +66,7 @@
<div class="-amp-video-eq-4-1" />
<div class="-amp-video-eq-4-2" />
</div>
- </eq-animation>
+ </div>
<b>{{ episode.title }}</b>
<vue-show-more-text
:text="escapedEpisodeDescription(episode.description)"
@@ -309,7 +309,7 @@ table.episodeTable {
}
}
-eq-animation {
+.eq-animation {
align-items: flex-end;
display: none;
width: 20px;
@@ -322,14 +322,14 @@ eq-animation {
margin-right: 5px;
}
-eq-animation .-amp-video-eq-col {
+.eq-animation .-amp-video-eq-col {
flex: 1;
position: relative;
height: 100%;
margin-right: 1px;
}
-eq-animation .-amp-video-eq-col div {
+.eq-animation .-amp-video-eq-col div {
animation-name: amp-video-eq-animation;
animation-timing-function: linear;
animation-iteration-count: infinite;
@@ -383,7 +383,7 @@ eq-animation .-amp-video-eq-col div {
}
}
-table.episodeTable tr.selected eq-animation {
+table.episodeTable tr.selected .eq-animation {
display: flex;
}
</style>
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1e41dcb2cfcd6deda13604f092742e94865f502a
--- /dev/null
+++ b/src/views/Browse.vue
@@ -0,0 +1,203 @@
+<!--
+ - @copyright Copyright (c) 2020 Jonas Heinrich
+ -
+ - @author Jonas Heinrich <onny@project-insanity.org>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+<template>
+ <div class="mainContent">
+ <div class="podcastSection">
+ <h1>Hot podcasts</h1>
+ <div class="podcastSlider">
+ <div
+ v-for="(podcast, idx) in podcastsHot"
+ :key="idx"
+ class="podcastCard">
+ <router-link :to="{ path: `/browse/show/${podcast.id}`}">
+ <div
+ class="podcastImage"
+ :style="{ backgroundImage: `url(${podcast.smallImageURL})` }" />
+ <span class="title">
+ {{ podcast.title }}
+ </span>
+ <span class="subtitle">
+ {{ podcast.author }}
+ </span>
+ </router-link>
+ </div>
+ </div>
+ </div>
+
+ <div class="podcastSection">
+ <h1>New podcasts</h1>
+ <div class="podcastSlider">
+ <div
+ v-for="(podcast, idx) in podcastsHot"
+ :key="idx"
+ class="podcastCard">
+ <div
+ class="podcastImage"
+ :style="{ backgroundImage: `url(${podcast.smallImageURL})` }" />
+ <span class="title">
+ {{ podcast.title }}
+ </span>
+ <span class="subtitle">
+ {{ podcast.author }}
+ </span>
+ </div>
+ </div>
+ </div>
+
+ <div class="podcastSection">
+ <h1>Podcast charts</h1>
+ <div class="podcastSlider">
+ <div
+ v-for="(podcast, idx) in podcastsHot"
+ :key="idx"
+ class="podcastCard">
+ <div
+ class="podcastImage"
+ :style="{ backgroundImage: `url(${podcast.smallImageURL})` }" />
+ <span class="title">
+ {{ podcast.title }}
+ </span>
+ <span class="subtitle">
+ {{ podcast.author }}
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
+
+export default {
+ name: 'Browse',
+ data: () => ({
+ podcastsHot: {},
+ }),
+ mounted() {
+ this.queryTopPodcasts()
+ },
+ methods: {
+
+ async queryTopPodcasts() {
+
+ const vm = this
+
+ const queryURI = 'https://api.fyyd.de/0.2/feature/podcast/hot'
+ try {
+ delete axios.defaults.headers.requesttoken
+ await axios.get(queryURI)
+ .then(function(response) {
+ vm.processPodcasts(response.data)
+ })
+ } catch (error) {
+ showError(t('podcast', 'Could not fetch podcasts from remote API'))
+ }
+ },
+
+ processPodcasts(podcast) {
+ this.podcastsHot = podcast.data
+ },
+
+ },
+}
+</script>
+
+<style lang="scss">
+.mainContent {
+ padding: 30px;
+
+ h1 {
+ font-size: 1.6em;
+ margin-bottom: 20px;
+ }
+}
+
+.podcastSection {
+ margin-bottom: 30px;
+}
+
+.podcastSlider {
+ width: 100%;
+ display: flex;
+ overflow: hidden;
+ overflow-x: auto;
+ scrollbar-width: none;
+
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 30px;
+ height: 190px;
+ width: 100px;
+ background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
+ }
+
+ &:after {
+ content: '';
+ display: block;
+ position: absolute;
+ right: 30px;
+ height: 190px;
+ width: 100px;
+ background-image: linear-gradient(to left, white 0%, rgba(255,255,255,0) 100%);
+ }
+}
+
+.podcastCard {
+ width: 140px;
+ height: 190px;
+ margin-right: 20px;
+ flex-shrink: 0;
+
+ * {
+ cursor: pointer;
+ }
+
+ .podcastImage {
+ background-size: cover;
+ background-position: center;
+ box-shadow: 1px 1px 2px rgba(0,0,0,.5);
+ border: 1px solid rgba(0,0,0,.5);
+ border-radius: 5px;
+ width: 140px;
+ height: 140px;
+ margin-bottom: 5px;
+ }
+
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+ }
+ span.title {
+ font-size: 1em;
+ }
+ span.subtitle {
+ font-size: 0.9em;
+ color: #b5b1b1;
+ }
+}
+</style>
diff --git a/src/views/NotImplemented.vue b/src/views/NotImplemented.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f94e72ff914a2b5d4a1870bc07913ffffd9ce2b
--- /dev/null
+++ b/src/views/NotImplemented.vue
@@ -0,0 +1,41 @@
+<!--
+ - @copyright Copyright (c) 2020 Jonas Heinrich
+ -
+ - @author Jonas Heinrich <onny@project-insanity.org>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+
+<template>
+ <EmptyContent icon="icon-error">
+ Error loading site
+ <template #desc>
+ Feature not yet implemented
+ </template>
+ </EmptyContent>
+</template>
+
+<script>
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+
+export default {
+ name: 'NotImplemented',
+ components: {
+ EmptyContent,
+ },
+}
+</script>
diff --git a/src/views/Show.vue b/src/views/Show.vue
index e0db53a6ca2446cb3be8656b54f68d6b19ec06d5..97b792f9c7f6a71ca6c6d69f6bb6a6d3aa2dd614 100644
--- a/src/views/Show.vue
+++ b/src/views/Show.vue
@@ -103,6 +103,7 @@ export default {
onResize({ width, height }) {
const contentHeight = document.getElementById('app-content-vue').scrollHeight
const tableHeight = height
+ console.log(tableHeight, contentHeight)
if (tableHeight < contentHeight) {
this.preFill()
}