Show.vue

<!--
  - @copyright Copyright (c) 2021 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>
		<ShowEmpty v-show="loading" />
		<transition name="fade">
			<div v-show="!loading">
				<MediaHeader
					:imgurl="podcast.smallImageURL"
					:title="podcast.title"
					:author="podcast.author"
					:htmlurl="podcast.htmlURL"
					:categories="podcast.categories"
					:description="podcast.description"
					:podcastid="podcast.id"
					:isshow="true"
					@doSubscribe="doSubscribe" />
				<Table
					v-resize="onResize"
					:episodes="episodes"
					@doPlay="doPlay" />
				<EmptyContent
					v-show="page"
					icon="icon-loading"
					class="tableLoading" />
			</div>
		</transition>
	</div>
</template>

<script>
import Table from '../components/Table'
import MediaHeader from '../components/MediaHeader'
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
import ShowEmpty from './placeholder/Show'

import { FyydApi } from './../services/FyydApi'

const fyydClient = new FyydApi()

export default {
	name: 'Show',
	components: {
		EmptyContent,
		Table,
		MediaHeader,
		ShowEmpty,
	},
	data: () => ({
		podcast: {},
		episodes: [],
		page: 0,
		podcastId: null,
		loading: true,
	}),
	computed: {
		isSubscribed() {
			return this.$store.getters.showExists(this.podcastId)
		},
	},
	watch: {
		'$route'(to, from) {
			this.podcastId = to.params.id
			this.initPage()
		},
	},
	mounted() {
		this.initPage()
	},
	destroyed() {
	  window.removeEventListener('scroll', this.handleScroll)
	},
	methods: {

		isPlaying(episodeId) {
			return this.$store.getters.isPlaying(episodeId)
		},

		initPage() {
			this.podcast = {}
			this.episodes = []
			this.page = 0
			this.podcastId = this.$route.params.id
			window.addEventListener('scroll', this.handleScroll)
			this.queryPodcast(this.podcastId)
			this.queryEpisodes(this.podcastId, this.page)
		},

		onResize({ width, height }) {

			const rect = document.getElementsByClassName('episodeTable')[0].getBoundingClientRect()
			console.log(rect.top, rect.right, rect.bottom, rect.left)

			const contentHeight = document.getElementById('app-content-vue').scrollHeight
			const tableHeight = height
			console.log(tableHeight, contentHeight)
			if (tableHeight < contentHeight) {
				this.preFill()
			}
		},

		doSubscribe() {
			if (this.isSubscribed) {
				this.$store.dispatch('removeShow', this.podcast)
			} else {
				this.$store.dispatch('addShow', this.podcast)
			}
		},

		preFill() {
			console.log('prefilling')
			// this.queryPodcast(podcastId)
		},

		async queryPodcast(podcastId) {
			const podcast = await fyydClient.queryPodcast(podcastId)
			this.processPodcast(podcast.data)
		},

		async queryEpisodes(podcastId, page) {
			const episodes = await fyydClient.queryEpisodes(podcastId, page)
			this.episodes = this.episodes.concat(episodes.data.episodes)
			if (episodes.meta.paging.next_page === null) {
				this.page = null
				window.removeEventListener('scroll', this.handleScroll)
			} else {
				this.page += 1
			}
		},

		processPodcast(podcast) {
			this.podcast = podcast
			document.title = podcast.title + ' - Podcast - Nextcloud'
			this.loading = false
		},

		/**
		 * On scroll event, load more episodes if bottom reached
		 */
		handleScroll() {
			if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
				if (!this.episodesLoaded) {
					this.queryEpisodes(this.podcastId, this.page)
				}
			}
		},

		doPlay(episode) {
			if (this.isPlaying(episode.id)) {
				this.$store.dispatch('pauseEpisode')
			} else {
				this.$store.dispatch('playEpisode', episode)
			}
		},
	},
}
</script>

<style lang="scss">

.empty-content.tableLoading {
	margin-top: 10px !important;

	.empty-content__icon {
		margin-bottom: 0px !important;
	}
}

</style>