71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<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 }} {{ $strings.HeaderEpisodes }}</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">
|
|
{{ $strings.LabelFolder }}: <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> |