diff --git a/lib/Db/Show.php b/lib/Db/Show.php
index cbd9ba95247bdd907d208ba7bdb32d082dac4231..81dff63a7d28a4f2341316fd256370907c82481d 100644
--- a/lib/Db/Show.php
+++ b/lib/Db/Show.php
@@ -40,7 +40,7 @@ class Show extends Entity implements JsonSerializable {
public function jsonSerialize(): array {
return [
'id' => $this->id,
- 'imgurl' => $this->imgurl,
+ 'smallImageURL' => $this->imgurl,
'author' => $this->author,
'title' => $this->title,
'lastpub' => $this->lastpub,
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4c14e0298730562827c7c0c971ab954641ea2898..fac527b2c892b7c34ef4c060c4692aac6b3df24b 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -41,7 +41,7 @@ export default {
<style lang="scss">
.podcastSectionHeader {
- padding: 20px 20px 20px 65px;
+ padding: 0px 20px 0px 65px;
display: flex;
align-items: center;
background-image: var(--icon-podcast-header-000);
@@ -51,6 +51,7 @@ export default {
h1 {
flex-grow: 1;
font-size: 1.6em;
+ margin: 20px 0px 20px 0px;
}
a {
color: #1976d2;
diff --git a/src/components/ItemGrid.vue b/src/components/ItemGrid.vue
index 01aaa65252bee4376c08abef150686157fdb8cc0..d46258e8a22fc49aec3703e5a3e49ff9dc0d0f6d 100644
--- a/src/components/ItemGrid.vue
+++ b/src/components/ItemGrid.vue
@@ -27,12 +27,9 @@
:key="idx"
class="podcastCard">
<router-link :to="{ path: `/browse/show/${podcast.id}`}">
- <div v-show="podcast.smallImageURL"
+ <div
v-lazy:background-image="podcast.smallImageURL"
class="podcastImage" />
- <div v-show="podcast.imgurl"
- v-lazy:background-image="podcast.imgurl"
- class="podcastImage" />
<span class="title">
{{ podcast.title }}
</span>
diff --git a/src/components/ItemSlider.vue b/src/components/ItemSlider.vue
index a855b2bf670f912cdd9f7645d688338764165529..840db70e9ba49721170547b0c4aabebb4d53d6a7 100644
--- a/src/components/ItemSlider.vue
+++ b/src/components/ItemSlider.vue
@@ -35,7 +35,7 @@
:key="idx"
class="podcastCard">
<router-link :to="{ path: `/browse/show/${podcast.id}`}">
- <div v-lazy:background-image="podcast.imgurl"
+ <div v-lazy:background-image="podcast.smallImageURL"
class="podcastImage" />
<span class="title">
{{ podcast.title }}
@@ -70,6 +70,7 @@ export default {
}),
mounted() {
const slider = this.$el.querySelector('#slider')
+ console.log('scrollWidth: ', slider.scrollWidth, slider.clientWidth)
const vm = this
slider.addEventListener('scroll', function() {
if (slider.scrollLeft > 0) {
diff --git a/src/components/LoadMore.vue b/src/components/LoadMore.vue
index ebcf9585791b343d8a1492671f672c018db5fdbc..3d0e4d0898d8d536c74dfd85d1b51faa308d19f8 100644
--- a/src/components/LoadMore.vue
+++ b/src/components/LoadMore.vue
@@ -88,3 +88,15 @@ export default {
},
}
</script>
+
+<style lang="scss">
+
+.empty-content.tableLoading {
+ margin-top: 10px !important;
+
+ .empty-content__icon {
+ margin-bottom: 0px !important;
+ }
+}
+
+</style>
diff --git a/src/services/ShowApi.js b/src/services/ShowApi.js
index ed520059b7d21739bc57802d001b3a3f13859df1..ad22f003091b4aea7538305df56840bff7ff2bd3 100644
--- a/src/services/ShowApi.js
+++ b/src/services/ShowApi.js
@@ -35,7 +35,7 @@ export class ShowApi {
addShow(show) {
show = {
id: show.id,
- imgurl: show.smallImageURL,
+ smallImageURL: show.smallImageURL,
title: show.title,
author: show.author,
lastpub: show.lastpub,
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index 456ece97ac122f6ed28bd1a85bccebfdd226f792..2d5df76d31fb1b52c89b48655c80368878786883 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -23,8 +23,7 @@
<div style="padding-top: 10px;">
<BrowseEmpty v-show="loading" />
<div
- v-show="!loading"
- class="mainContent">
+ v-show="!loading">
<Header :title="t('podcast', 'Hot podcasts')">
<a href="#/browse/hot">Show all</a>
</Header>
diff --git a/src/views/BrowseAll.vue b/src/views/BrowseAll.vue
index 2575af017e5ed6cc5d4cbae68562bbd41142dc82..5e35b39ed0b9660ac2d4c052bddc054154ffca86 100644
--- a/src/views/BrowseAll.vue
+++ b/src/views/BrowseAll.vue
@@ -20,25 +20,22 @@
-
-->
<template>
- <div class="mainContent">
+ <div>
<Header :title="title" />
- <ItemGrid
- v-resize:debounce="onResize"
- :podcasts="podcasts" />
- <EmptyContent
- v-show="page"
- icon="icon-loading"
- class="tableLoading" />
+ <LoadMore :page="page"
+ @loadMore="queryPodcasts(page)">
+ <ItemGrid
+ :podcasts="podcasts" />
+ </LoadMore>
</div>
</template>
<script>
import ItemGrid from '../components/ItemGrid'
import Header from '../components/Header'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import LoadMore from '../components/LoadMore'
import { setBrowserTitle } from '../utils/misc.js'
import { ShowApi } from './../services/ShowApi'
-import resize from 'vue-resize-directive'
const showApiClient = new ShowApi()
@@ -47,10 +44,7 @@ export default {
components: {
ItemGrid,
Header,
- EmptyContent,
- },
- directives: {
- resize,
+ LoadMore,
},
data: () => ({
podcasts: [],
@@ -62,11 +56,6 @@ export default {
mounted() {
this.category = this.$route.params.category
this.categoryId = this.$route.params.categoryId
- this.queryPodcasts()
- document.getElementById('app-content-vue').addEventListener('scroll', this.handleScroll)
- },
- destroyed() {
- document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll)
},
methods: {
@@ -89,7 +78,6 @@ export default {
this.podcasts = this.podcasts.concat(podcasts.data.podcasts)
if (podcasts.meta.paging.next_page === null) {
this.page = null
- document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll)
} else {
this.page += 1
}
@@ -97,28 +85,6 @@ export default {
setBrowserTitle(this.title)
},
- preFill() {
- const yFill = document.getElementsByClassName('tableLoading')[0].getBoundingClientRect().bottom
- const playerPosY = document.getElementsByClassName('player')[0].getBoundingClientRect().top
- if (yFill > 0 && yFill < playerPosY) {
- this.queryPodcasts(this.page)
- }
- },
-
- /**
- * On scroll event, load more episodes if bottom reached
- */
- handleScroll() {
- const appContent = document.getElementById('app-content-vue')
- if (appContent.scrollTop === (appContent.scrollHeight - appContent.clientHeight)) {
- this.queryPodcasts(this.page)
- }
- },
-
- onResize() {
- this.preFill()
- },
-
},
}
</script>
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 054817610e670dde26647244c3e83420615f71fd..3a86662e8cbb5695746fc807c7ce8d9aab54252d 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -20,7 +20,7 @@
-
-->
<template>
- <div class="mainContent">
+ <div>
<Header :title="t('podcast', 'Library')">
<Actions>
<ActionButton
@@ -37,7 +37,7 @@
</Actions>
</Header>
<ItemSlider :podcasts="shows" />
- <LoadMore :finished="finished"
+ <LoadMore :page="page"
@loadMore="queryEpisodes(page)">
<Table
:episodes="episodes"
@@ -76,7 +76,6 @@ export default {
page: 0,
shows: [],
episodes: [],
- finished: false,
}),
computed: {
...mapGetters([
@@ -90,7 +89,6 @@ export default {
this.page = 0
this.finished = false
this.queryPodcasts(this.page)
- this.queryEpisodes(this.page)
},
methods: {
...mapActions([
@@ -114,7 +112,6 @@ export default {
this.episodes = this.episodes.concat(episodes.data.episodes)
if (episodes.meta.paging.next_page === null) {
this.page = null
- this.finished = true
} else {
this.page += 1
}
diff --git a/src/views/Listening.vue b/src/views/Listening.vue
index bd38d997d9cdf60bd02ce6ea874713a59e9251d8..c799fd4a3f17b3ecac74561fd79576e8e88401e2 100644
--- a/src/views/Listening.vue
+++ b/src/views/Listening.vue
@@ -22,25 +22,22 @@
<template>
<div>
<Header :title="t('podcast', 'Currently listening')" />
- <Table
- v-resize:debounce="onResize"
- :episodes="episodes"
- :extended="true"
- @doPlay="doPlay" />
- <EmptyContent
- v-show="page"
- icon="icon-loading"
- class="tableLoading" />
+ <LoadMore :page="page"
+ @loadMore="queryEpisodes(page)">
+ <Table
+ :episodes="episodes"
+ :extended="true"
+ @doPlay="doPlay" />
+ </LoadMore>
</div>
</template>
<script>
import Table from '../components/Table'
import Header from '../components/Header'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import LoadMore from '../components/LoadMore'
import { mapGetters, mapActions } from 'vuex'
import { setBrowserTitle } from '../utils/misc.js'
-import resize from 'vue-resize-directive'
import { EpisodeApi } from './../services/EpisodeApi'
const episodeApiClient = new EpisodeApi()
@@ -48,12 +45,9 @@ export default {
name: 'Listening',
components: {
Table,
- EmptyContent,
+ LoadMore,
Header,
},
- directives: {
- resize,
- },
data: () => ({
episodes: [],
page: 0,
@@ -65,13 +59,8 @@ export default {
},
mounted() {
setBrowserTitle(t('podcast', 'Currently listening'))
- document.getElementById('app-content-vue').addEventListener('scroll', this.handleScroll)
this.episodes = []
this.page = 0
- this.queryEpisodes(this.page)
- },
- destroyed() {
- document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll)
},
methods: {
...mapActions([
@@ -79,34 +68,11 @@ export default {
'playEpisode',
]),
- preFill() {
- const yFill = document.getElementsByClassName('tableLoading')[0].getBoundingClientRect().bottom
- const playerPosY = document.getElementsByClassName('player')[0].getBoundingClientRect().top
- if (yFill > 0 && yFill < playerPosY) {
- this.queryEpisodes(this.page)
- }
- },
-
- /**
- * On scroll event, load more episodes if bottom reached
- */
- handleScroll() {
- const appContent = document.getElementById('app-content-vue')
- if (appContent.scrollTop === (appContent.scrollHeight - appContent.clientHeight)) {
- this.queryEpisodes(this.page)
- }
- },
-
- onResize() {
- this.preFill()
- },
-
async queryEpisodes(page) {
const episodes = await episodeApiClient.queryEpisodes(null, page)
this.episodes = this.episodes.concat(episodes.data.episodes)
if (episodes.meta.paging.next_page === null) {
this.page = null
- document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll)
} else {
this.page += 1
}
diff --git a/src/views/Show.vue b/src/views/Show.vue
index e348d5a528cc5f39e00cd49cb84ff5a33eb8620c..98f92273581b1a5f3fb1a53063b9d6997526d67d 100644
--- a/src/views/Show.vue
+++ b/src/views/Show.vue
@@ -34,14 +34,12 @@
:podcastid="podcast.id"
:isshow="true"
@doSubscribe="doSubscribe" />
- <Table
- v-resize:debounce="onResize"
- :episodes="episodes"
- @doPlay="doPlay" />
- <EmptyContent
- v-show="page"
- icon="icon-loading"
- class="tableLoading" />
+ <LoadMore :page="page"
+ @loadMore="queryEpisodes(podcastId, page)">
+ <Table
+ :episodes="episodes"
+ @doPlay="doPlay" />
+ </LoadMore>
</div>
</transition>
</div>
@@ -50,12 +48,10 @@
<script>
import Table from '../components/Table'
import MediaHeader from '../components/MediaHeader'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import LoadMore from '../components/LoadMore'
import ShowEmpty from './placeholder/Show'
import { mapGetters, mapActions } from 'vuex'
import { setBrowserTitle } from '../utils/misc.js'
-import resize from 'vue-resize-directive'
-
import { ShowApi } from './../services/ShowApi'
import { EpisodeApi } from './../services/EpisodeApi'
const showApiClient = new ShowApi()
@@ -64,14 +60,11 @@ const episodeApiClient = new EpisodeApi()
export default {
name: 'Show',
components: {
- EmptyContent,
+ LoadMore,
Table,
MediaHeader,
ShowEmpty,
},
- directives: {
- resize,
- },
data: () => ({
podcast: {},
episodes: [],
@@ -88,14 +81,17 @@ export default {
watch: {
'$route'(to, from) {
this.podcastId = to.params.id
- this.initPage()
+ this.podcast = {}
+ this.episodes = []
+ this.page = 0
},
},
mounted() {
- this.initPage()
- },
- destroyed() {
- document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll)
+ this.podcast = {}
+ this.episodes = []
+ this.page = 0
+ this.podcastId = this.$route.params.id
+ this.queryShow(this.podcastId)
},
methods: {
@@ -106,24 +102,6 @@ export default {
'playEpisode',
]),
- initPage() {
- this.podcast = {}
- this.episodes = []
- this.page = 0
- this.podcastId = this.$route.params.id
- document.getElementById('app-content-vue').addEventListener('scroll', this.handleScroll)
- this.queryShow(this.podcastId)
- this.queryEpisodes(this.podcastId, this.page)
- },
-
- preFill() {
- const yFill = document.getElementsByClassName('tableLoading')[0].getBoundingClientRect().bottom
- const playerPosY = document.getElementsByClassName('player')[0].getBoundingClientRect().top
- if (yFill > 0 && yFill < playerPosY) {
- this.queryEpisodes(this.podcastId, this.page)
- }
- },
-
doSubscribe() {
if (this.showExists(this.podcastId)) {
this.removeShow(this.podcast)
@@ -148,22 +126,11 @@ export default {
this.episodes = this.episodes.concat(episodes.data.episodes)
if (episodes.meta.paging.next_page === null) {
this.page = null
- document.getElementById('app-content-vue').removeEventListener('scroll', this.handleScroll)
} else {
this.page += 1
}
},
- /**
- * On scroll event, load more if bottom reached
- */
- handleScroll() {
- const appContent = document.getElementById('app-content-vue')
- if (appContent.scrollTop === (appContent.scrollHeight - appContent.clientHeight)) {
- this.queryEpisodes(this.podcastId, this.page)
- }
- },
-
doPlay(episode) {
if (this.episodePlaying(episode.id)) {
this.pauseEpisode()
@@ -172,21 +139,6 @@ export default {
}
},
- onResize() {
- this.preFill()
- },
},
}
</script>
-
-<style lang="scss">
-
-.empty-content.tableLoading {
- margin-top: 10px !important;
-
- .empty-content__icon {
- margin-bottom: 0px !important;
- }
-}
-
-</style>
diff --git a/src/views/placeholder/Browse.vue b/src/views/placeholder/Browse.vue
index 0e21917276cd3e9e00fd83367ec595accd84ce49..8f1b60d130055dac945fc6adc7bd36142f67b8c1 100644
--- a/src/views/placeholder/Browse.vue
+++ b/src/views/placeholder/Browse.vue
@@ -21,7 +21,7 @@
-->
<template>
- <div class="mainContent">
+ <div>
<div
v-for="mainIndex in 3"
:key="mainIndex"