mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-01-30 14:59:38 +00:00
Add:OPML Upload for bulk adding podcasts #588
This commit is contained in:
advplyr
parent
e5469cc0f8
commit
514893646a
16 changed files with 359 additions and 18 deletions
71
client/components/cards/PodcastFeedSummaryCard.vue
Normal file
71
client/components/cards/PodcastFeedSummaryCard.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div ref="wrapper" class="w-full p-2 border border-white border-opacity-10 rounded">
|
||||
<div class="flex">
|
||||
<div class="w-16 min-w-16">
|
||||
<div class="w-full h-16 bg-primary">
|
||||
<img v-if="image" :src="image" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<p class="text-gray-400 text-xxs pt-1 text-center">{{ numEpisodes }} Episodes</p>
|
||||
</div>
|
||||
<div class="flex-grow pl-2" :style="{ maxWidth: detailsWidth + 'px' }">
|
||||
<p class="mb-1">{{ title }}</p>
|
||||
<p class="text-xs mb-1 text-gray-300">{{ author }}</p>
|
||||
<p class="text-xs mb-2 text-gray-200">{{ description }}</p>
|
||||
<p class="text-xs truncate text-blue-200">
|
||||
Folder: <span class="font-mono">{{ folderPath }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
feed: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
libraryFolderPath: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: 900
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.metadata.title || 'No Title'
|
||||
},
|
||||
image() {
|
||||
return this.metadata.imageUrl
|
||||
},
|
||||
description() {
|
||||
return this.metadata.description || ''
|
||||
},
|
||||
author() {
|
||||
return this.metadata.author || ''
|
||||
},
|
||||
metadata() {
|
||||
return this.feed || {}
|
||||
},
|
||||
numEpisodes() {
|
||||
return this.feed.numEpisodes || 0
|
||||
},
|
||||
folderPath() {
|
||||
if (!this.libraryFolderPath) return ''
|
||||
return `${this.libraryFolderPath}\\${this.$sanitizeFilename(this.title)}`
|
||||
},
|
||||
detailsWidth() {
|
||||
return this.width - 85
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
updated() {
|
||||
this.width = this.$refs.wrapper.clientWidth
|
||||
},
|
||||
mounted() {
|
||||
this.width = this.$refs.wrapper.clientWidth
|
||||
}
|
||||
}
|
||||
</script>
|
||||
168
client/components/modals/podcast/OpmlFeedsModal.vue
Normal file
168
client/components/modals/podcast/OpmlFeedsModal.vue
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<modals-modal v-model="show" name="opml-feeds-modal" :width="1000" :height="'unset'" :processing="processing">
|
||||
<template #outer>
|
||||
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
|
||||
<p class="font-book text-3xl text-white truncate">{{ title }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
|
||||
<div class="w-full p-4">
|
||||
<div class="flex items-center -mx-2 mb-2">
|
||||
<div class="w-full md:w-2/3 p-2">
|
||||
<ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" label="Folder" />
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 p-2 pt-6">
|
||||
<ui-checkbox v-model="autoDownloadEpisodes" label="Auto Download New Episodes" checkbox-bg="primary" border-color="gray-600" label-class="text-sm font-semibold pl-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-lg font-semibold mb-2">Podcasts to Add</p>
|
||||
|
||||
<div class="w-full overflow-y-auto" style="max-height: 50vh">
|
||||
<template v-for="(feed, index) in feedMetadata">
|
||||
<cards-podcast-feed-summary-card :key="index" :feed="feed" :library-folder-path="selectedFolderPath" class="my-1" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center py-4">
|
||||
<div class="flex-grow" />
|
||||
<ui-btn color="success" @click="submit">Add Podcasts</ui-btn>
|
||||
</div>
|
||||
</div>
|
||||
</modals-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Boolean,
|
||||
feeds: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
processing: false,
|
||||
selectedFolderId: null,
|
||||
fullPath: null,
|
||||
autoDownloadEpisodes: false,
|
||||
feedMetadata: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
show: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
title() {
|
||||
return 'OPML Feeds'
|
||||
},
|
||||
currentLibrary() {
|
||||
return this.$store.getters['libraries/getCurrentLibrary']
|
||||
},
|
||||
folders() {
|
||||
if (!this.currentLibrary) return []
|
||||
return this.currentLibrary.folders || []
|
||||
},
|
||||
folderItems() {
|
||||
return this.folders.map((fold) => {
|
||||
return {
|
||||
value: fold.id,
|
||||
text: fold.fullPath
|
||||
}
|
||||
})
|
||||
},
|
||||
selectedFolder() {
|
||||
return this.folders.find((f) => f.id === this.selectedFolderId)
|
||||
},
|
||||
selectedFolderPath() {
|
||||
if (!this.selectedFolder) return ''
|
||||
return this.selectedFolder.fullPath
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toFeedMetadata(feed) {
|
||||
var metadata = feed.metadata
|
||||
return {
|
||||
title: metadata.title,
|
||||
author: metadata.author,
|
||||
description: metadata.description,
|
||||
releaseDate: '',
|
||||
genres: [...metadata.categories],
|
||||
feedUrl: metadata.feedUrl,
|
||||
imageUrl: metadata.image,
|
||||
itunesPageUrl: '',
|
||||
itunesId: '',
|
||||
itunesArtistId: '',
|
||||
language: '',
|
||||
numEpisodes: feed.numEpisodes
|
||||
}
|
||||
},
|
||||
init() {
|
||||
this.feedMetadata = this.feeds.map(this.toFeedMetadata)
|
||||
|
||||
if (this.folderItems[0]) {
|
||||
this.selectedFolderId = this.folderItems[0].value
|
||||
}
|
||||
},
|
||||
async submit() {
|
||||
this.processing = true
|
||||
var newFeedPayloads = this.feedMetadata.map((metadata) => {
|
||||
return {
|
||||
path: `${this.selectedFolderPath}\\${this.$sanitizeFilename(metadata.title)}`,
|
||||
folderId: this.selectedFolderId,
|
||||
libraryId: this.currentLibrary.id,
|
||||
media: {
|
||||
metadata: {
|
||||
...metadata
|
||||
},
|
||||
autoDownloadEpisodes: this.autoDownloadEpisodes
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('New feed payloads', newFeedPayloads)
|
||||
|
||||
for (const podcastPayload of newFeedPayloads) {
|
||||
await this.$axios
|
||||
.$post('/api/podcasts', podcastPayload)
|
||||
.then(() => {
|
||||
this.$toast.success(`${podcastPayload.media.metadata.title}: Podcast created successfully`)
|
||||
})
|
||||
.catch((error) => {
|
||||
var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to create podcast'
|
||||
console.error('Failed to create podcast', podcastPayload, error)
|
||||
this.$toast.error(`${podcastPayload.media.metadata.title}: ${errorMsg}`)
|
||||
})
|
||||
}
|
||||
this.processing = false
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#podcast-wrapper {
|
||||
min-height: 400px;
|
||||
max-height: 80vh;
|
||||
}
|
||||
#episodes-scroll {
|
||||
max-height: calc(80vh - 200px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<input ref="fileInput" id="hidden-input" type="file" :accept="accept" class="hidden" @change="inputChanged" />
|
||||
<input ref="fileInput" type="file" :accept="accept" class="hidden" @change="inputChanged" />
|
||||
<ui-btn @click="clickUpload" color="primary" type="text"><slot /></ui-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
|
||||
<app-book-shelf-toolbar page="podcast-search" />
|
||||
|
||||
<div class="w-full h-full overflow-y-auto p-12 relative">
|
||||
<div class="w-full max-w-3xl mx-auto">
|
||||
<form @submit.prevent="submit" class="flex">
|
||||
<div class="w-full max-w-4xl mx-auto flex">
|
||||
<form @submit.prevent="submit" class="flex flex-grow">
|
||||
<ui-text-input v-model="searchInput" :disabled="processing" placeholder="Enter search term or RSS feed URL" class="flex-grow mr-2" />
|
||||
<ui-btn type="submit" :disabled="processing">Submit</ui-btn>
|
||||
</form>
|
||||
<ui-file-input :accept="'.opml, .txt'" class="mx-2" @change="opmlFileUpload"> Upload OPML File </ui-file-input>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-3xl mx-auto py-4">
|
||||
|
|
@ -32,6 +34,7 @@
|
|||
</div>
|
||||
|
||||
<modals-podcast-new-modal v-model="showNewPodcastModal" :podcast-data="selectedPodcast" :podcast-feed-data="selectedPodcastFeed" />
|
||||
<modals-podcast-opml-feeds-modal v-model="showOPMLFeedsModal" :feeds="opmlFeeds" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -62,7 +65,9 @@ export default {
|
|||
processing: false,
|
||||
showNewPodcastModal: false,
|
||||
selectedPodcast: null,
|
||||
selectedPodcastFeed: null
|
||||
selectedPodcastFeed: null,
|
||||
showOPMLFeedsModal: false,
|
||||
opmlFeeds: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -71,6 +76,36 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
async opmlFileUpload(file) {
|
||||
this.processing = true
|
||||
var txt = await new Promise((resolve) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
resolve(reader.result)
|
||||
}
|
||||
reader.readAsText(file)
|
||||
})
|
||||
|
||||
if (!txt || !txt.includes('<opml') || !txt.includes('<outline ')) {
|
||||
// Quick lazy check for valid OPML
|
||||
this.$toast.error('Invalid OPML file <opml> tag not found OR an <outline> tag was not found')
|
||||
this.processing = false
|
||||
return
|
||||
}
|
||||
|
||||
await this.$axios
|
||||
.$post(`/api/podcasts/opml`, { opmlText: txt })
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
this.opmlFeeds = data.feeds || []
|
||||
this.showOPMLFeedsModal = true
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed', error)
|
||||
this.$toast.error('Failed to parse OPML file')
|
||||
})
|
||||
this.processing = false
|
||||
},
|
||||
submit() {
|
||||
if (!this.searchInput) return
|
||||
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<input ref="fileInput" id="hidden-input" type="file" multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
|
||||
<input ref="fileFolderInput" id="hidden-input" type="file" webkitdirectory multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
|
||||
<input ref="fileInput" type="file" multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
|
||||
<input ref="fileFolderInput" type="file" webkitdirectory multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ module.exports = {
|
|||
minWidth: {
|
||||
'6': '1.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
'48': '12rem',
|
||||
|
|
@ -75,6 +76,9 @@ module.exports = {
|
|||
mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
|
||||
book: ['Gentium Book Basic', 'serif']
|
||||
},
|
||||
fontSize: {
|
||||
xxs: '0.625rem'
|
||||
},
|
||||
zIndex: {
|
||||
'50': 50
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue