Show.vue

<!--
  - @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>
		<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"
					:issubscribed="issubscribed"
					@doSubscribe="doSubscribe" />
				<Table
					v-resize="onResize"
					:episodes="podcast.episodes"
					@doPlay="doPlay" />
				<EmptyContent
					v-show="nextPage"
					icon="icon-loading"
					class="tableLoading" />
			</div>
		</transition>
	</div>
</template>

<script>
import Table from '../components/Table'
import MediaHeader from '../components/MediaHeader'

import { showError } from '@nextcloud/dialogs'
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'

import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'

import { audioPlayer, doPlay } from '../services/player'

import ShowEmpty from './placeholder/Show'

const requesttoken = axios.defaults.headers.requesttoken

export default {
	name: 'Show',
	components: {
		EmptyContent,
		Table,
		MediaHeader,
		ShowEmpty,
	},
	data: () => ({
		podcast: {
			episodes: [],
		},
		loading: true,
		nextPage: null,
		podcastId: null,
		issubscribed: false,
	}),
	computed: {
		player() {
			return this.$store.state.player
		},
	},
	watch: {
		'$route'(to, from) {
			this.loading = true
			this.nextPage = null
			this.podcastId = to.params.id
			this.queryPodcast(this.podcastId)
		},
		'player.volume'(newVolume, oldVolume) {
			if (audioPlayer !== null) {
				audioPlayer.volume(newVolume)
			}
		},
		'player.isPaused'(newState, oldState) {
			if (newState === true && audioPlayer !== null) {
				audioPlayer.pause()
			} else if (newState === false && audioPlayer !== null) {
				audioPlayer.play()
			}
		},
	},
	mounted() {
		this.podcastId = this.$route.params.id
		this.queryPodcast(this.podcastId)
	},
	created() {
	  window.addEventListener('scroll', this.handleScroll)
	},
	destroyed() {
	  window.removeEventListener('scroll', this.handleScroll)
	},
	methods: {

		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()
			}
		},

		doPlay(episode) {
			doPlay(episode)
		},

		async doSubscribe() {
			const podcastShow = {
				id: this.podcast.id,
				imgurl: this.podcast.smallImageURL,
				title: this.podcast.title,
				author: this.podcast.author,
			}
			try {
				axios.defaults.headers.requesttoken = requesttoken
				await axios
					.post(generateUrl('/apps/podcast/api/shows'), podcastShow)
					.then(response => {
						this.issubscribed = true
					})
			} catch (error) {
				showError(t('podcast', 'Could not subscribe to podcast'))
			}

		},

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

		async queryPodcast(podcastId) {

			const vm = this

			const queryURI = this.$apiUrl + '/podcast/episodes'
			try {
				delete axios.defaults.headers.requesttoken
				await axios.get(queryURI, {
					params: {
						podcast_id: podcastId,
						count: 20,
						page: vm.nextPage,
					},
				})
					.then(function(response) {
						vm.nextPage = response.data.meta.paging.next_page
						vm.processPodcast(response.data)
					})
			} catch (error) {
				showError(t('podcast', 'Could not fetch stations from remote API'))
			}
		},

		processPodcast(podcast) {
			if (podcast.meta.paging.page === podcast.meta.paging.last_page) {
				this.nextPage = false
				window.removeEventListener('scroll', this.handleScroll)
			} else {
				this.nextPage = podcast.meta.paging.next_page
			}
			if (podcast.meta.paging.page === 0) {
				this.podcast = podcast.data
			} else {
				this.podcast.episodes = this.podcast.episodes.concat(podcast.data.episodes)
			}
			document.title = podcast.data.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.queryPodcast(this.podcastId)
				}
			}
		},
	},
}
</script>

<style lang="scss">

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

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

</style>