Castopod
/
nextcloud-gpodder
mirror of https://github.com/thrillfall/nextcloud-gpodder.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added more info to list view

This commit is contained in:
Kalle Fagerberg 2022-07-17 20:08:08 +02:00 committed by thrillfall
parent 71e8faf8cd
commit 82bcd0c6ea
3 changed files with 91 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
package-lock.json generated
View File

@ -12,7 +12,8 @@
"@nextcloud/dialogs": "^3.1.2",
"@nextcloud/router": "^2.0.0",
"@nextcloud/vue": "^5.3.1",
"vue": "^2.7.0"
"vue": "^2.7.7",
"vue-material-design-icons": "^5.1.2"
},
"devDependencies": {
"@nextcloud/babel-config": "^1.0.0",
@ -2521,9 +2522,9 @@
}
},
"node_modules/@vue/compiler-sfc": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.4.tgz",
"integrity": "sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==",
"version": "2.7.7",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
"integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
"dependencies": {
"@babel/parser": "^7.18.4",
"postcss": "^8.4.14",
@ -10867,11 +10868,11 @@
"peer": true
},
"node_modules/vue": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.4.tgz",
"integrity": "sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==",
"version": "2.7.7",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
"integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
"dependencies": {
"@vue/compiler-sfc": "2.7.4",
"@vue/compiler-sfc": "2.7.7",
"csstype": "^3.1.0"
}
},
@ -11023,9 +11024,9 @@
}
},
"node_modules/vue-material-design-icons": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz",
"integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w=="
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
"integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
},
"node_modules/vue-multiselect": {
"version": "2.1.6",
@ -13552,9 +13553,9 @@
}
},
"@vue/compiler-sfc": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.4.tgz",
"integrity": "sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==",
"version": "2.7.7",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
"integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
"requires": {
"@babel/parser": "^7.18.4",
"postcss": "^8.4.14",
@ -20002,11 +20003,11 @@
"peer": true
},
"vue": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.4.tgz",
"integrity": "sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==",
"version": "2.7.7",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
"integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
"requires": {
"@vue/compiler-sfc": "2.7.4",
"@vue/compiler-sfc": "2.7.7",
"csstype": "^3.1.0"
}
},
@ -20120,9 +20121,9 @@
}
},
"vue-material-design-icons": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz",
"integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w=="
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
"integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
},
"vue-multiselect": {
"version": "2.1.6",

3
package.json
View File

@ -30,7 +30,8 @@
"@nextcloud/dialogs": "^3.1.2",
"@nextcloud/router": "^2.0.0",
"@nextcloud/vue": "^5.3.1",
"vue": "^2.7.0"
"vue": "^2.7.7",
"vue-material-design-icons": "^5.1.2"
},
"browserslist": [
"extends @nextcloud/browserslist-config"

81
src/views/PersonalSettingsPage.vue
View File

@ -2,30 +2,64 @@
<div class="gpoddersync_settings">
<SettingsSection :title="t('gpoddersync', 'Synced subscriptions')"
:description="t('gpoddersync', 'Podcast subscriptions that has so far been synchronized with this Nextcloud account.')">
<span>Hello <span class="red_text">world</span> :)</span>
<ul>
<ListItem v-for="sub in subscriptions"
:key="sub.url"
:title="sub.podcast?.title ?? sub.url">
<div v-if="subscriptions.length > 0">
<ul>
<ListItem v-for="sub in subscriptions"
:key="sub.url"
:title="sub.podcast?.title ?? sub.url"
:details="formatSubscriptionDetails(sub)">
<template #icon>
<Avatar :size="44"
:url="sub.podcast?.image"
:display-name="sub.podcast?.author" />
</template>
<template #subtitle>
{{ sub.podcast?.description }}
</template>
<template #actions>
<ActionLink :href="sub.podcast?.link"
target="_blank"
icon="icon-external">
Podcast's homepage
</ActionLink>
<ActionLink :href="sub.url"
target="_blank">
<template #icon>
<Rss />
</template>
RSS feed
</ActionLink>
</template>
</ListItem>
</ul>
</div>
<div v-if="subscriptions.length === 0 && !isLoading">
<EmptyContent>
No subscriptions
<template #icon>
<Avatar :size="44"
:url="sub.podcast?.image"
:display-name="sub.podcast?.author" />
<Podcast />
</template>
<template #subtitle>
{{ sub.podcast?.description }}
<template #desc>
Start syncing podcasts from your favorite podcast client, such as
<a class="link" href="https://antennapod.org/" target="_blank">Antennapod</a>,
and then refresh this page to see them pop up here.
</template>
</ListItem>
</ul>
</EmptyContent>
</div>
</SettingsSection>
</div>
</template>
<script>
import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
import ListItem from '@nextcloud/vue/dist/Components/ListItem'
import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
import Podcast from 'vue-material-design-icons/Podcast'
import Rss from 'vue-material-design-icons/Rss.vue'
import { generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios'
import { showError } from '@nextcloud/dialogs'
@ -33,8 +67,12 @@ import { showError } from '@nextcloud/dialogs'
export default {
name: 'PersonalSettingsPage',
components: {
ActionLink,
Avatar,
EmptyContent,
ListItem,
Podcast,
Rss,
SettingsSection,
},
data() {
@ -57,11 +95,26 @@ export default {
this.isLoading = false
}
},
methods: {
formatSubscriptionDetails(sub) {
if (sub.listenedSeconds <= 0) {
return '(no time listened)'
}
const hours = Math.floor(sub.listenedSeconds / 3600)
const modMinutes = Math.floor(sub.listenedSeconds / 60) % 60
if (hours === 0) {
const modSeconds = sub.listenedSeconds % 60
return `(${modMinutes}min ${modSeconds}s listened)`
}
return `(${hours}h ${modMinutes}min listened)`
},
},
}
</script>
<style lang="scss" scoped>
.red_text {
color: red;
a.link {
text-decoration: underline;
color: var(--color-primary-element-light);
}
</style>