refactor: 🎨 add prettier and update deps
This commit is contained in:
parent
cbc9654af8
commit
b0a0414fd4
@ -1,9 +1,11 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
'@nextcloud',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
rules: {
|
||||
'sort-imports': 'error',
|
||||
'vue/attributes-order': ['error', { alphabetical: true }],
|
||||
'vue/first-attribute-linebreak': 'off',
|
||||
},
|
||||
}
|
||||
|
||||
12
composer.lock
generated
12
composer.lock
generated
@ -94,16 +94,16 @@
|
||||
},
|
||||
{
|
||||
"name": "php-cs-fixer/shim",
|
||||
"version": "v3.51.0",
|
||||
"version": "v3.54.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/PHP-CS-Fixer/shim.git",
|
||||
"reference": "a792394f7f3934f75a4df9dca544796c6f503027"
|
||||
"reference": "887c350fccbadb2b84278fdb963c25a0c304ac9c"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/PHP-CS-Fixer/shim/zipball/a792394f7f3934f75a4df9dca544796c6f503027",
|
||||
"reference": "a792394f7f3934f75a4df9dca544796c6f503027",
|
||||
"url": "https://api.github.com/repos/PHP-CS-Fixer/shim/zipball/887c350fccbadb2b84278fdb963c25a0c304ac9c",
|
||||
"reference": "887c350fccbadb2b84278fdb963c25a0c304ac9c",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -140,9 +140,9 @@
|
||||
"description": "A tool to automatically fix PHP code style",
|
||||
"support": {
|
||||
"issues": "https://github.com/PHP-CS-Fixer/shim/issues",
|
||||
"source": "https://github.com/PHP-CS-Fixer/shim/tree/v3.51.0"
|
||||
"source": "https://github.com/PHP-CS-Fixer/shim/tree/v3.54.0"
|
||||
},
|
||||
"time": "2024-02-28T19:51:07+00:00"
|
||||
"time": "2024-04-17T08:23:10+00:00"
|
||||
},
|
||||
{
|
||||
"name": "psalm/phar",
|
||||
|
||||
7326
package-lock.json
generated
7326
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -19,11 +19,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextcloud/axios": "^2.4.0",
|
||||
"@nextcloud/dialogs": "^5.2.0",
|
||||
"@nextcloud/initial-state": "^2.1.0",
|
||||
"@nextcloud/dialogs": "^5.3.1",
|
||||
"@nextcloud/initial-state": "^2.2.0",
|
||||
"@nextcloud/l10n": "^2.2.0",
|
||||
"@nextcloud/router": "^3.0.0",
|
||||
"@nextcloud/vue": "^8.11.0",
|
||||
"@nextcloud/router": "^3.0.1",
|
||||
"@nextcloud/vue": "^8.11.2",
|
||||
"vue": "^2",
|
||||
"vue-material-design-icons": "^5.3.0",
|
||||
"vue-router": "^3",
|
||||
@ -36,11 +36,15 @@
|
||||
"node": "^20.0.0",
|
||||
"npm": "^9.0.0"
|
||||
},
|
||||
"prettier": "@nextcloud/prettier-config",
|
||||
"devDependencies": {
|
||||
"@nextcloud/babel-config": "^1.0.0",
|
||||
"@nextcloud/browserslist-config": "^3.0.0",
|
||||
"@nextcloud/babel-config": "^1.1.1",
|
||||
"@nextcloud/browserslist-config": "^3.0.1",
|
||||
"@nextcloud/eslint-config": "^8.3.0",
|
||||
"@nextcloud/stylelint-config": "^2.4.0",
|
||||
"@nextcloud/webpack-vue-config": "^6.0.1"
|
||||
"@nextcloud/prettier-config": "^1.0.0",
|
||||
"@nextcloud/stylelint-config": "^3.0.0",
|
||||
"@nextcloud/webpack-vue-config": "^6.0.1",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.padding {
|
||||
.padding {
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,7 +27,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.padding {
|
||||
.padding {
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loading {
|
||||
.loading {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,17 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div>
|
||||
<NcAvatar :display-name="name"
|
||||
:is-no-user="true"
|
||||
:size="256"
|
||||
:url="image" />
|
||||
<NcAvatar :display-name="name" :is-no-user="true" :size="256" :url="image" />
|
||||
<h2>{{ name }}</h2>
|
||||
<p v-html="strippedDescription" />
|
||||
<div>
|
||||
<NcButton v-if="link"
|
||||
:href="link"
|
||||
target="_blank">
|
||||
<NcButton v-if="link" :href="link" target="_blank">
|
||||
<template #icon>
|
||||
<OpenInNewIcon :size="20" />
|
||||
</template>
|
||||
{{ title }}
|
||||
</NcButton>
|
||||
<NcButton v-if="url"
|
||||
:href="url"
|
||||
target="_blank">
|
||||
<NcButton v-if="url" :href="url" target="_blank">
|
||||
<template #icon>
|
||||
<DownloadIcon :size="20" />
|
||||
</template>
|
||||
@ -85,11 +78,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<NcAppNavigationList>
|
||||
<NcAppNavigationNewItem :name="t('repod', 'Add a RSS link')" @new-item="addSubscription">
|
||||
<NcAppNavigationNewItem
|
||||
:name="t('repod', 'Add a RSS link')"
|
||||
@new-item="addSubscription">
|
||||
<template #icon>
|
||||
<PlusIcon :size="20" />
|
||||
</template>
|
||||
@ -29,7 +31,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
ul {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,15 @@
|
||||
<div>
|
||||
<Loading v-if="loading" />
|
||||
<ul v-if="!loading">
|
||||
<NcListItem v-for="feed in feeds"
|
||||
<NcListItem
|
||||
v-for="feed in feeds"
|
||||
:key="feed.link"
|
||||
:details="formatLocaleDate(new Date(feed.fetchedAtUnix*1000))"
|
||||
:details="formatLocaleDate(new Date(feed.fetchedAtUnix * 1000))"
|
||||
:name="feed.title"
|
||||
:to="toUrl(feed.link)">
|
||||
<template #icon>
|
||||
<NcAvatar :display-name="feed.author"
|
||||
<NcAvatar
|
||||
:display-name="feed.author"
|
||||
:is-no-user="true"
|
||||
:url="feed.imageUrl" />
|
||||
</template>
|
||||
@ -61,9 +63,13 @@ export default {
|
||||
try {
|
||||
this.loading = true
|
||||
const currentSearch = this.value
|
||||
const feeds = await axios.get(generateUrl('/apps/repod/search?q={value}', { value: currentSearch }))
|
||||
const feeds = await axios.get(
|
||||
generateUrl('/apps/repod/search?q={value}', { value: currentSearch }),
|
||||
)
|
||||
if (currentSearch === this.value) {
|
||||
this.feeds = [...feeds.data].sort((a, b) => b.fetchedAtUnix - a.fetchedAtUnix)
|
||||
this.feeds = [...feeds.data].sort(
|
||||
(a, b) => b.fetchedAtUnix - a.fetchedAtUnix,
|
||||
)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<ul v-if="!loading">
|
||||
<li v-for="top in tops" :key="top.link">
|
||||
<router-link :to="toUrl(top.link)">
|
||||
<img :src="top.imageUrl" :title="top.author">
|
||||
<img :src="top.imageUrl" :title="top.author" />
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
@ -67,24 +67,24 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h2 {
|
||||
h2 {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
li {
|
||||
flex-basis: 10rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
overflow: scroll hidden;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div class="header">
|
||||
<img class="background" :src="imageUrl">
|
||||
<img class="background" :src="imageUrl" />
|
||||
<div class="content">
|
||||
<div>
|
||||
<NcAvatar :display-name="author || title"
|
||||
<NcAvatar
|
||||
:display-name="author || title"
|
||||
:is-no-user="true"
|
||||
:size="128"
|
||||
:url="imageUrl" />
|
||||
@ -19,12 +20,13 @@
|
||||
<a :href="link" target="_blank">
|
||||
<i>{{ author }}</i>
|
||||
</a>
|
||||
<br><br>
|
||||
<br /><br />
|
||||
<p>
|
||||
<small v-html="strippedDescription" />
|
||||
</p>
|
||||
</div>
|
||||
<NcAppNavigationNew v-if="!isSubscribed"
|
||||
<NcAppNavigationNew
|
||||
v-if="!isSubscribed"
|
||||
:text="t('repod', 'Subscribe')"
|
||||
@click="addSubscription">
|
||||
<template #icon>
|
||||
@ -90,7 +92,10 @@ export default {
|
||||
methods: {
|
||||
async addSubscription() {
|
||||
try {
|
||||
await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [this.url], remove: [] })
|
||||
await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), {
|
||||
add: [this.url],
|
||||
remove: [],
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
showError(t('repod', 'Error while adding the feed'))
|
||||
@ -100,55 +105,55 @@ export default {
|
||||
},
|
||||
copyFeed() {
|
||||
window.navigator.clipboard.writeText(this.url)
|
||||
showSuccess(t('repod', 'Feed\'s link copied to the clipboard'))
|
||||
showSuccess(t('repod', "Feed's link copied to the clipboard"))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.background {
|
||||
.background {
|
||||
filter: blur(1rem) brightness(50%);
|
||||
height: auto;
|
||||
left: 0;
|
||||
opacity: .4;
|
||||
opacity: 0.4;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.content {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.feed {
|
||||
.feed {
|
||||
display: flex;
|
||||
gap: .2rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
gap: 0.2rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
.header {
|
||||
height: 14rem;
|
||||
overflow: hidden;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.infos {
|
||||
.infos {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
.inner {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@media only screen and (max-width: 768px) {
|
||||
.inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,17 +2,19 @@
|
||||
<div>
|
||||
<Loading v-if="loading" />
|
||||
<ul v-if="!loading">
|
||||
<NcListItem v-for="episode in filteredEpisodes"
|
||||
<NcListItem
|
||||
v-for="episode in filteredEpisodes"
|
||||
:key="episode.guid"
|
||||
:active="isCurrentEpisode(episode)"
|
||||
:class="hasEnded(episode) ? 'ended': ''"
|
||||
:class="hasEnded(episode) ? 'ended' : ''"
|
||||
:details="formatLocaleDate(new Date(episode.pubDate?.date))"
|
||||
:force-display-actions="true"
|
||||
:name="episode.name"
|
||||
:title="episode.description"
|
||||
@click="modalEpisode = episode">
|
||||
<template #actions>
|
||||
<NcActionButton v-if="!isCurrentEpisode(episode)"
|
||||
<NcActionButton
|
||||
v-if="!isCurrentEpisode(episode)"
|
||||
:aria-label="t('repod', 'Play')"
|
||||
:name="t('repod', 'Play')"
|
||||
:title="t('repod', 'Play')"
|
||||
@ -21,7 +23,8 @@
|
||||
<PlayIcon :size="20" />
|
||||
</template>
|
||||
</NcActionButton>
|
||||
<NcActionButton v-if="isCurrentEpisode(episode)"
|
||||
<NcActionButton
|
||||
v-if="isCurrentEpisode(episode)"
|
||||
:aria-label="t('repod', 'Stop')"
|
||||
:name="t('repod', 'Stop')"
|
||||
:title="t('repod', 'Stop')"
|
||||
@ -33,7 +36,8 @@
|
||||
</template>
|
||||
<template #extra>
|
||||
<NcActions>
|
||||
<NcActionButton v-if="episode.duration && !hasEnded(episode)"
|
||||
<NcActionButton
|
||||
v-if="episode.duration && !hasEnded(episode)"
|
||||
:aria-label="t('repod', 'Mark as read')"
|
||||
:disabled="loadingAction"
|
||||
:name="t('repod', 'Mark as read')"
|
||||
@ -43,7 +47,8 @@
|
||||
<PlaylistPlayIcon :size="20" />
|
||||
</template>
|
||||
</NcActionButton>
|
||||
<NcActionButton v-if="episode.duration && hasEnded(episode)"
|
||||
<NcActionButton
|
||||
v-if="episode.duration && hasEnded(episode)"
|
||||
:aria-label="t('repod', 'Mark as unread')"
|
||||
:disabled="loadingAction"
|
||||
:name="t('repod', 'Mark as unread')"
|
||||
@ -53,7 +58,8 @@
|
||||
<PlaylistRemoveIcon :size="20" />
|
||||
</template>
|
||||
</NcActionButton>
|
||||
<NcActionLink v-if="episode.link"
|
||||
<NcActionLink
|
||||
v-if="episode.link"
|
||||
:href="episode.link"
|
||||
:name="t('repod', 'Open website')"
|
||||
target="_blank"
|
||||
@ -62,7 +68,8 @@
|
||||
<OpenInNewIcon :size="20" />
|
||||
</template>
|
||||
</NcActionLink>
|
||||
<NcActionLink v-if="episode.url"
|
||||
<NcActionLink
|
||||
v-if="episode.url"
|
||||
:href="episode.url"
|
||||
:name="t('repod', 'Download')"
|
||||
target="_blank"
|
||||
@ -74,14 +81,16 @@
|
||||
</NcActions>
|
||||
</template>
|
||||
<template #icon>
|
||||
<NcAvatar :display-name="episode.name"
|
||||
<NcAvatar
|
||||
:display-name="episode.name"
|
||||
:is-no-user="true"
|
||||
:url="episode.image" />
|
||||
</template>
|
||||
<template #indicator>
|
||||
<NcProgressBar v-if="isListening(episode)"
|
||||
<NcProgressBar
|
||||
v-if="isListening(episode)"
|
||||
class="progress"
|
||||
:value="episode.action.position * 100 / episode.action.total" />
|
||||
:value="(episode.action.position * 100) / episode.action.total" />
|
||||
</template>
|
||||
<template #subname>
|
||||
{{ episode.duration }}
|
||||
@ -89,7 +98,8 @@
|
||||
</NcListItem>
|
||||
</ul>
|
||||
<NcModal v-if="modalEpisode" @close="modalEpisode = null">
|
||||
<Modal :description="modalEpisode.description"
|
||||
<Modal
|
||||
:description="modalEpisode.description"
|
||||
:image="modalEpisode.image"
|
||||
:link="modalEpisode.link"
|
||||
:name="modalEpisode.name"
|
||||
@ -101,8 +111,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcActionButton, NcActionLink, NcActions, NcAvatar, NcListItem, NcModal, NcProgressBar } from '@nextcloud/vue'
|
||||
import { durationToSeconds, formatEpisodeTimestamp, formatLocaleDate } from '../../utils/time.js'
|
||||
import {
|
||||
NcActionButton,
|
||||
NcActionLink,
|
||||
NcActions,
|
||||
NcAvatar,
|
||||
NcListItem,
|
||||
NcModal,
|
||||
NcProgressBar,
|
||||
} from '@nextcloud/vue'
|
||||
import {
|
||||
durationToSeconds,
|
||||
formatEpisodeTimestamp,
|
||||
formatLocaleDate,
|
||||
} from '../../utils/time.js'
|
||||
import DownloadIcon from 'vue-material-design-icons/Download.vue'
|
||||
import { EventBus } from '../../store/bus.js'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
@ -175,8 +197,12 @@ export default {
|
||||
async mounted() {
|
||||
try {
|
||||
this.loading = true
|
||||
const episodes = await axios.get(generateUrl('/apps/repod/episodes/list?url={url}', { url: this.url }))
|
||||
this.episodes = [...episodes.data].sort((a, b) => new Date(b.pubDate?.date) - new Date(a.pubDate?.date))
|
||||
const episodes = await axios.get(
|
||||
generateUrl('/apps/repod/episodes/list?url={url}', { url: this.url }),
|
||||
)
|
||||
this.episodes = [...episodes.data].sort(
|
||||
(a, b) => new Date(b.pubDate?.date) - new Date(a.pubDate?.date),
|
||||
)
|
||||
EventBus.$on('updateEpisodesList', this.updateList)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
@ -191,18 +217,22 @@ export default {
|
||||
methods: {
|
||||
formatLocaleDate,
|
||||
hasEnded(episode) {
|
||||
return episode.action
|
||||
&& episode.action.position > 0
|
||||
&& episode.action.total > 0
|
||||
&& episode.action.position >= episode.action.total
|
||||
return (
|
||||
episode.action &&
|
||||
episode.action.position > 0 &&
|
||||
episode.action.total > 0 &&
|
||||
episode.action.position >= episode.action.total
|
||||
)
|
||||
},
|
||||
isCurrentEpisode(episode) {
|
||||
return this.currentEpisode && this.currentEpisode.url === episode.url
|
||||
},
|
||||
isListening(episode) {
|
||||
return episode.action
|
||||
&& episode.action.action.toLowerCase() === 'play'
|
||||
&& !this.hasEnded(episode)
|
||||
return (
|
||||
episode.action &&
|
||||
episode.action.action.toLowerCase() === 'play' &&
|
||||
!this.hasEnded(episode)
|
||||
)
|
||||
},
|
||||
load(episode) {
|
||||
this.$store.dispatch('player/load', episode)
|
||||
@ -220,7 +250,9 @@ export default {
|
||||
position: read ? durationToSeconds(episode.duration) : 0,
|
||||
total: durationToSeconds(episode.duration),
|
||||
}
|
||||
await axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [episode.action])
|
||||
await axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
|
||||
episode.action,
|
||||
])
|
||||
this.updateList(episode)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
@ -230,18 +262,18 @@ export default {
|
||||
}
|
||||
},
|
||||
updateList(episode) {
|
||||
this.episodes = this.episodes.map((e) => e.url === episode.url ? episode : e)
|
||||
this.episodes = this.episodes.map((e) => (e.url === episode.url ? episode : e))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ended {
|
||||
opacity: .4;
|
||||
}
|
||||
.ended {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: .4rem;
|
||||
}
|
||||
.progress {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div v-if="player.episode" class="footer">
|
||||
<img class="background" :src="player.episode.image">
|
||||
<img class="background" :src="player.episode.image" />
|
||||
<Loading v-if="!player.loaded" />
|
||||
<ProgressBar v-if="player.loaded" />
|
||||
<div v-if="player.loaded" class="player">
|
||||
<img :src="player.episode.image">
|
||||
<img :src="player.episode.image" />
|
||||
<Infos class="infos" />
|
||||
<Controls class="controls" />
|
||||
<Timer class="timer" />
|
||||
@ -40,18 +40,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.background {
|
||||
.background {
|
||||
filter: blur(1rem) brightness(50%);
|
||||
height: auto;
|
||||
left: 0;
|
||||
opacity: .4;
|
||||
opacity: 0.4;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.footer {
|
||||
background-color: var(--color-main-background);
|
||||
bottom: 0;
|
||||
height: 6rem;
|
||||
@ -59,30 +59,31 @@ export default {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 2000;
|
||||
}
|
||||
}
|
||||
|
||||
.player {
|
||||
.player {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
height: 6rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.timer {
|
||||
.timer {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.volume {
|
||||
.volume {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@media only screen and (max-width: 768px) {
|
||||
.infos {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.timer, .volume {
|
||||
.timer,
|
||||
.volume {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<div class="controls">
|
||||
<PauseIcon v-if="!player.paused"
|
||||
<PauseIcon
|
||||
v-if="!player.paused"
|
||||
class="pointer"
|
||||
:size="50"
|
||||
@click="$store.dispatch('player/pause')" />
|
||||
<PlayIcon v-if="player.paused"
|
||||
<PlayIcon
|
||||
v-if="player.paused"
|
||||
class="pointer"
|
||||
:size="50"
|
||||
@click="$store.dispatch('player/play')" />
|
||||
@ -30,11 +32,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.controls {
|
||||
.controls {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
<i>{{ player.episode.title }}</i>
|
||||
</router-link>
|
||||
<NcModal v-if="modal" @close="modal = false">
|
||||
<Modal :description="player.episode.description"
|
||||
<Modal
|
||||
:description="player.episode.description"
|
||||
:image="player.episode.image"
|
||||
:link="player.episode.link"
|
||||
:name="player.episode.name"
|
||||
@ -46,14 +47,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pointer {
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.root {
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<input class="progress"
|
||||
<input
|
||||
class="progress"
|
||||
:max="player.duration"
|
||||
min="0"
|
||||
type="range"
|
||||
:value="player.currentTime"
|
||||
@change="(event) => $store.dispatch('player/seek', event.target.value)">
|
||||
@change="(event) => $store.dispatch('player/seek', event.target.value)" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -19,11 +20,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.progress {
|
||||
.progress {
|
||||
height: 4px;
|
||||
min-height: 4px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 99%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<span>{{ formatTimer(new Date(player.currentTime*1000)) }}</span>
|
||||
<span>{{ formatTimer(new Date(player.currentTime * 1000)) }}</span>
|
||||
<span>/</span>
|
||||
<span>{{ formatTimer(new Date(player.duration*1000)) }}</span>
|
||||
<span>{{ formatTimer(new Date(player.duration * 1000)) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -23,10 +23,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<VolumeHighIcon v-if="player.volume > 0.7"
|
||||
<VolumeHighIcon v-if="player.volume > 0.7" class="pointer" :size="30" @click="mute" />
|
||||
<VolumeLowIcon
|
||||
v-if="player.volume > 0 && player.volume <= 0.3"
|
||||
class="pointer"
|
||||
:size="30"
|
||||
@click="mute" />
|
||||
<VolumeLowIcon v-if="player.volume > 0 && player.volume <= 0.3"
|
||||
<VolumeMediumIcon
|
||||
v-if="player.volume > 0.3 && player.volume <= 0.7"
|
||||
class="pointer"
|
||||
:size="30"
|
||||
@click="mute" />
|
||||
<VolumeMediumIcon v-if="player.volume > 0.3 && player.volume <= 0.7"
|
||||
class="pointer"
|
||||
:size="30"
|
||||
@click="mute" />
|
||||
<VolumeMuteIcon v-if="player.volume === 0"
|
||||
<VolumeMuteIcon
|
||||
v-if="player.volume === 0"
|
||||
class="pointer"
|
||||
:size="30"
|
||||
@click="$store.dispatch('player/volume', volumeMuted)" />
|
||||
<input max="1"
|
||||
<input
|
||||
max="1"
|
||||
min="0"
|
||||
step="0.1"
|
||||
type="range"
|
||||
:value="player.volume"
|
||||
@change="(event) => $store.dispatch('player/volume', event.target.value)">
|
||||
@change="(event) => $store.dispatch('player/volume', event.target.value)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -59,19 +60,19 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
input {
|
||||
transform: rotate(270deg);
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<NcAppNavigationItem :href="generateUrl('/apps/repod/opml/export')"
|
||||
<NcAppNavigationItem
|
||||
:href="generateUrl('/apps/repod/opml/export')"
|
||||
:name="t('repod', 'Export subscriptions')">
|
||||
<template #icon>
|
||||
<ExportIcon :size="20" />
|
||||
|
||||
@ -1,23 +1,41 @@
|
||||
<template>
|
||||
<NcAppNavigationItem :allow-collapse="true"
|
||||
<NcAppNavigationItem
|
||||
:allow-collapse="true"
|
||||
menu-placement="top"
|
||||
:name="t('repod', 'Filtering episodes')">
|
||||
<template #actions>
|
||||
<NcActionCheckbox :checked="all"
|
||||
<NcActionCheckbox
|
||||
:checked="all"
|
||||
:disabled="all"
|
||||
@update:checked="(checked) => $store.commit('settings/filters', { listened: checked, listening: checked, unlistened: checked })">
|
||||
@update:checked="
|
||||
(checked) =>
|
||||
$store.commit('settings/filters', {
|
||||
listened: checked,
|
||||
listening: checked,
|
||||
unlistened: checked,
|
||||
})
|
||||
">
|
||||
{{ t('repod', 'Show all') }}
|
||||
</NcActionCheckbox>
|
||||
<NcActionCheckbox :checked="filters.listened"
|
||||
@update:checked="(checked) => $store.commit('settings/filters', { listened: checked })">
|
||||
<NcActionCheckbox
|
||||
:checked="filters.listened"
|
||||
@update:checked="
|
||||
(checked) => $store.commit('settings/filters', { listened: checked })
|
||||
">
|
||||
{{ t('repod', 'Listened') }}
|
||||
</NcActionCheckbox>
|
||||
<NcActionCheckbox :checked="filters.listening"
|
||||
@update:checked="(checked) => $store.commit('settings/filters', { listening: checked })">
|
||||
<NcActionCheckbox
|
||||
:checked="filters.listening"
|
||||
@update:checked="
|
||||
(checked) => $store.commit('settings/filters', { listening: checked })
|
||||
">
|
||||
{{ t('repod', 'Listening') }}
|
||||
</NcActionCheckbox>
|
||||
<NcActionCheckbox :checked="filters.unlistened"
|
||||
@update:checked="(checked) => $store.commit('settings/filters', { unlistened: checked })">
|
||||
<NcActionCheckbox
|
||||
:checked="filters.unlistened"
|
||||
@update:checked="
|
||||
(checked) => $store.commit('settings/filters', { unlistened: checked })
|
||||
">
|
||||
{{ t('repod', 'Unlistened') }}
|
||||
</NcActionCheckbox>
|
||||
</template>
|
||||
|
||||
@ -4,16 +4,18 @@
|
||||
<NcModal v-if="modal" @close="modal = false">
|
||||
<div class="modal">
|
||||
<h2>{{ t('repod', 'Import OPML file') }}</h2>
|
||||
<form v-if="!loading"
|
||||
<form
|
||||
v-if="!loading"
|
||||
:action="generateUrl('/apps/repod/opml/import')"
|
||||
enctype="multipart/form-data"
|
||||
method="post"
|
||||
@submit.prevent="importOpml">
|
||||
<input accept="application/xml,.opml"
|
||||
<input
|
||||
accept="application/xml,.opml"
|
||||
name="import"
|
||||
required
|
||||
type="file">
|
||||
<input type="submit">
|
||||
type="file" />
|
||||
<input type="submit" />
|
||||
</form>
|
||||
<Loading v-if="loading" />
|
||||
</div>
|
||||
@ -64,10 +66,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal {
|
||||
.modal {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<NcAppNavigationItem href="https://apps.nextcloud.com/apps/repod#comments"
|
||||
<NcAppNavigationItem
|
||||
href="https://apps.nextcloud.com/apps/repod#comments"
|
||||
:name="t('repod', 'Rate RePod ❤️')">
|
||||
<template #icon>
|
||||
<StarIcon :size="20" />
|
||||
|
||||
@ -2,15 +2,9 @@
|
||||
<NcAppNavigationItem :name="t('repod', 'Playback speed')">
|
||||
<template #extra>
|
||||
<div class="extra">
|
||||
<MinusIcon class="pointer"
|
||||
:size="20"
|
||||
@click="changeRate(-.1)" />
|
||||
<NcCounterBubble class="counter">
|
||||
x{{ player.rate }}
|
||||
</NcCounterBubble>
|
||||
<PlusIcon class="pointer"
|
||||
:size="20"
|
||||
@click="changeRate(.1)" />
|
||||
<MinusIcon class="pointer" :size="20" @click="changeRate(-0.1)" />
|
||||
<NcCounterBubble class="counter"> x{{ player.rate }} </NcCounterBubble>
|
||||
<PlusIcon class="pointer" :size="20" @click="changeRate(0.1)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #icon>
|
||||
@ -55,17 +49,17 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.counter {
|
||||
.counter {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.extra {
|
||||
.extra {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
}
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<NcAppNavigationItem :loading="loading"
|
||||
:name="feed ? feed.title : url"
|
||||
:to="hash">
|
||||
<NcAppNavigationItem :loading="loading" :name="feed ? feed.title : url" :to="hash">
|
||||
<template #actions>
|
||||
<NcActionButton :aria-label="t(`core`, 'Delete')"
|
||||
<NcActionButton
|
||||
:aria-label="t(`core`, 'Delete')"
|
||||
:name="t(`core`, 'Delete')"
|
||||
:title="t(`core`, 'Delete')"
|
||||
@click="deleteSubscription">
|
||||
@ -13,7 +12,8 @@
|
||||
</NcActionButton>
|
||||
</template>
|
||||
<template #icon>
|
||||
<NcAvatar v-if="feed"
|
||||
<NcAvatar
|
||||
v-if="feed"
|
||||
:display-name="feed.author || feed.title"
|
||||
:is-no-user="true"
|
||||
:url="feed.imageUrl" />
|
||||
@ -60,7 +60,11 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const podcastData = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: this.url }))
|
||||
const podcastData = await axios.get(
|
||||
generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', {
|
||||
url: this.url,
|
||||
}),
|
||||
)
|
||||
this.feed = podcastData.data.data
|
||||
} catch (e) {
|
||||
this.failed = true
|
||||
@ -74,7 +78,10 @@ export default {
|
||||
if (confirm(t('repod', 'Are you sure you want to delete this subscription?'))) {
|
||||
try {
|
||||
this.loading = true
|
||||
await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [], remove: [this.url] })
|
||||
await axios.post(
|
||||
generateUrl('/apps/gpoddersync/subscription_change/create'),
|
||||
{ add: [], remove: [this.url] },
|
||||
)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
showError(t('repod', 'Error while removing the feed'))
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
</router-link>
|
||||
<Loading v-if="loading" />
|
||||
<NcAppNavigationList v-if="!loading">
|
||||
<Item v-for="subscriptionUrl of subscriptions"
|
||||
<Item
|
||||
v-for="subscriptionUrl of subscriptions"
|
||||
:key="subscriptionUrl"
|
||||
:url="subscriptionUrl" />
|
||||
</NcAppNavigationList>
|
||||
|
||||
@ -14,5 +14,5 @@ export default new Vue({
|
||||
el: '#content',
|
||||
router,
|
||||
store,
|
||||
render: h => h(App),
|
||||
render: (h) => h(App),
|
||||
})
|
||||
|
||||
@ -54,7 +54,11 @@ export const player = {
|
||||
audio.load()
|
||||
audio.play()
|
||||
|
||||
if (episode.action && episode.action.position && episode.action.position < episode.action.total) {
|
||||
if (
|
||||
episode.action &&
|
||||
episode.action.position &&
|
||||
episode.action.position < episode.action.total
|
||||
) {
|
||||
audio.currentTime = episode.action.position
|
||||
state.started = audio.currentTime
|
||||
}
|
||||
@ -84,7 +88,9 @@ export const player = {
|
||||
load: async (context, episode) => {
|
||||
context.commit('episode', episode)
|
||||
try {
|
||||
const action = await axios.get(generateUrl('/apps/repod/episodes/action?url={url}', { url: episode.url }))
|
||||
const action = await axios.get(
|
||||
generateUrl('/apps/repod/episodes/action?url={url}', { url: episode.url }),
|
||||
)
|
||||
context.commit('action', action.data)
|
||||
} catch {}
|
||||
},
|
||||
@ -118,7 +124,9 @@ export const player = {
|
||||
position: Math.round(audio.currentTime),
|
||||
total: Math.round(audio.duration),
|
||||
}
|
||||
axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [episode.action])
|
||||
axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
|
||||
episode.action,
|
||||
])
|
||||
EventBus.$emit('updateEpisodesList', episode)
|
||||
},
|
||||
volume: (_, volume) => {
|
||||
|
||||
@ -13,9 +13,16 @@ export const subscriptions = {
|
||||
},
|
||||
actions: {
|
||||
fetch: async (context) => {
|
||||
const metrics = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/metrics'))
|
||||
const subs = [...metrics.data.subscriptions].sort((a, b) => b.listenedSeconds - a.listenedSeconds)
|
||||
context.commit('set', subs.map(sub => sub.url))
|
||||
const metrics = await axios.get(
|
||||
generateUrl('/apps/gpoddersync/personal_settings/metrics'),
|
||||
)
|
||||
const subs = [...metrics.data.subscriptions].sort(
|
||||
(a, b) => b.listenedSeconds - a.listenedSeconds,
|
||||
)
|
||||
context.commit(
|
||||
'set',
|
||||
subs.map((sub) => sub.url),
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -6,9 +6,7 @@
|
||||
*/
|
||||
export const getCookie = (name) => {
|
||||
const cookies = document.cookie.split('; ')
|
||||
const value = cookies
|
||||
.find(c => c.startsWith(name + '='))
|
||||
?.split('=')[1]
|
||||
const value = cookies.find((c) => c.startsWith(name + '='))?.split('=')[1]
|
||||
if (value === undefined) {
|
||||
return null
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
// https://stackoverflow.com/a/53486112
|
||||
export const debounce = (fn, delay) => {
|
||||
let timeoutID = null
|
||||
return function() {
|
||||
return function () {
|
||||
clearTimeout(timeoutID)
|
||||
const args = arguments
|
||||
const that = this
|
||||
timeoutID = setTimeout(function() {
|
||||
timeoutID = setTimeout(function () {
|
||||
fn.apply(that, args)
|
||||
}, delay)
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// https://stackoverflow.com/a/5002618
|
||||
export const cleanHtml = (text) => {
|
||||
const pre = document.createElement('pre')
|
||||
pre.innerHTML = text.replace(/<br\s*\/?>/mg, '\n')
|
||||
pre.innerHTML = text.replace(/<br\s*\/?>/gm, '\n')
|
||||
const strippedText = pre.textContent || pre.innerText || ''
|
||||
return strippedText.replace(/\n/mg, '<br>')
|
||||
return strippedText.replace(/\n/gm, '<br>')
|
||||
}
|
||||
|
||||
@ -36,7 +36,8 @@ export const formatEpisodeTimestamp = (date) => {
|
||||
* @param {Date} date The date
|
||||
* @return {string}
|
||||
*/
|
||||
export const formatLocaleDate = (date) => date.toLocaleDateString(undefined, { dateStyle: 'medium' })
|
||||
export const formatLocaleDate = (date) =>
|
||||
date.toLocaleDateString(undefined, { dateStyle: 'medium' })
|
||||
|
||||
/**
|
||||
* Returns the number of seconds from a duration feed's entry
|
||||
@ -46,7 +47,7 @@ export const formatLocaleDate = (date) => date.toLocaleDateString(undefined, { d
|
||||
export const durationToSeconds = (duration) => {
|
||||
const splitDuration = duration.split(':').reverse()
|
||||
let seconds = parseInt(splitDuration[0])
|
||||
seconds += (splitDuration.length > 1) ? parseInt(splitDuration[1]) * 60 : 0
|
||||
seconds += (splitDuration.length > 2) ? parseInt(splitDuration[2]) * 60 * 60 : 0
|
||||
seconds += splitDuration.length > 1 ? parseInt(splitDuration[1]) * 60 : 0
|
||||
seconds += splitDuration.length > 2 ? parseInt(splitDuration[2]) * 60 * 60 : 0
|
||||
return seconds
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main {
|
||||
.main {
|
||||
padding: 15px 51px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<AppContent>
|
||||
<Loading v-if="loading" />
|
||||
<NcEmptyContent v-if="failed"
|
||||
class="error"
|
||||
:name="t('repod', 'Error loading feed')">
|
||||
<NcEmptyContent v-if="failed" class="error" :name="t('repod', 'Error loading feed')">
|
||||
<template #icon>
|
||||
<Alert />
|
||||
</template>
|
||||
</NcEmptyContent>
|
||||
<Banner v-if="feed"
|
||||
<Banner
|
||||
v-if="feed"
|
||||
:author="feed.author"
|
||||
:description="feed.description"
|
||||
:image-url="feed.imageUrl"
|
||||
@ -53,7 +52,9 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const podcastData = await axios.get(generateUrl('/apps/repod/podcast?url={url}', { url: this.url }))
|
||||
const podcastData = await axios.get(
|
||||
generateUrl('/apps/repod/podcast?url={url}', { url: this.url }),
|
||||
)
|
||||
this.feed = podcastData.data
|
||||
} catch (e) {
|
||||
this.failed = true
|
||||
@ -66,7 +67,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.error {
|
||||
.error {
|
||||
margin: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,11 +14,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
NcAppContent,
|
||||
NcButton,
|
||||
NcEmptyContent,
|
||||
} from '@nextcloud/vue'
|
||||
import { NcAppContent, NcButton, NcEmptyContent } from '@nextcloud/vue'
|
||||
import Alert from 'vue-material-design-icons/Alert.vue'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user