From 9ebd96cec1a10c26d20850823f93b8eaca249b99 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Tue, 16 Jan 2024 22:12:07 +0100
Subject: [PATCH] feat: add playback speed setting (close #39)

---
 l10n/fr.js                               |  1 +
 l10n/fr.json                             |  1 +
 src/components/Atoms/AdaptativeList.vue  | 22 ----------
 src/components/Atoms/AppContent.vue      | 27 +++++++++++++
 src/components/Atoms/AppNavigation.vue   | 33 +++++++++++++++
 src/components/Discover/Search.vue       |  6 +--
 src/components/Feed/Episodes.vue         |  6 +--
 src/components/Sidebar/Settings.vue      | 50 +++++++++++++++++++++++
 src/components/Sidebar/Subscriptions.vue | 51 +++++++++++++-----------
 src/store/player.js                      |  8 ++++
 src/views/Discover.vue                   |  9 +++--
 src/views/Feed.vue                       |  9 +++--
 translationfiles/fr/repod.po             |  4 ++
 translationfiles/templates/repod.pot     | 16 +++++---
 14 files changed, 175 insertions(+), 68 deletions(-)
 delete mode 100644 src/components/Atoms/AdaptativeList.vue
 create mode 100644 src/components/Atoms/AppContent.vue
 create mode 100644 src/components/Atoms/AppNavigation.vue
 create mode 100644 src/components/Sidebar/Settings.vue

diff --git a/l10n/fr.js b/l10n/fr.js
index bc0be7a..aea368f 100644
--- a/l10n/fr.js
+++ b/l10n/fr.js
@@ -19,6 +19,7 @@ OC.L10N.register(
     "Delete" : "Supprimer",
     "Are you sure you want to delete this subscription?" : "Êtes-vous sûr de vouloir supprimer ce flux ?",
     "Error while removing the feed" : "Erreur lors de la suppression du flux",
+    "Playback speed" : "Vitesse de lecture",
     "Add a podcast" : "Ajouter un podcast",
     "Could not fetch subscriptions" : "Impossible de récupérer les flux",
     "Find a podcast" : "Chercher un podcast",
diff --git a/l10n/fr.json b/l10n/fr.json
index bfdaf34..caf1bbd 100644
--- a/l10n/fr.json
+++ b/l10n/fr.json
@@ -17,6 +17,7 @@
     "Delete" : "Supprimer",
     "Are you sure you want to delete this subscription?" : "Êtes-vous sûr de vouloir supprimer ce flux ?",
     "Error while removing the feed" : "Erreur lors de la suppression du flux",
+    "Playback speed" : "Vitesse de lecture",
     "Add a podcast" : "Ajouter un podcast",
     "Could not fetch subscriptions" : "Impossible de récupérer les flux",
     "Find a podcast" : "Chercher un podcast",
diff --git a/src/components/Atoms/AdaptativeList.vue b/src/components/Atoms/AdaptativeList.vue
deleted file mode 100644
index 7ec4189..0000000
--- a/src/components/Atoms/AdaptativeList.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-	<ul :class="episode ? 'margin' : ''">
-		<slot />
-	</ul>
-</template>
-
-<script>
-export default {
-	name: 'AdaptativeList',
-	computed: {
-		episode() {
-			return this.$store.state.player.episode
-		},
-	},
-}
-</script>
-
-<style scoped>
-	.margin {
-		margin-bottom: 6rem;
-	}
-</style>
diff --git a/src/components/Atoms/AppContent.vue b/src/components/Atoms/AppContent.vue
new file mode 100644
index 0000000..263e73a
--- /dev/null
+++ b/src/components/Atoms/AppContent.vue
@@ -0,0 +1,27 @@
+<template>
+	<NcAppContent :class="episode ? 'margin' : ''">
+		<slot />
+	</NcAppContent>
+</template>
+
+<script>
+import { NcAppContent } from '@nextcloud/vue'
+
+export default {
+	name: 'AppContent',
+	components: {
+		NcAppContent,
+	},
+	computed: {
+		episode() {
+			return this.$store.state.player.episode
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.margin {
+		padding-bottom: 6rem;
+	}
+</style>
diff --git a/src/components/Atoms/AppNavigation.vue b/src/components/Atoms/AppNavigation.vue
new file mode 100644
index 0000000..2f3a2db
--- /dev/null
+++ b/src/components/Atoms/AppNavigation.vue
@@ -0,0 +1,33 @@
+<template>
+	<NcAppNavigation :class="episode ? 'margin' : ''">
+		<slot />
+		<template #list>
+			<slot name="list" />
+		</template>
+		<template #footer>
+			<slot name="footer" />
+		</template>
+	</NcAppNavigation>
+</template>
+
+<script>
+import { NcAppNavigation } from '@nextcloud/vue'
+
+export default {
+	name: 'AppNavigation',
+	components: {
+		NcAppNavigation,
+	},
+	computed: {
+		episode() {
+			return this.$store.state.player.episode
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.margin {
+		padding-bottom: 6rem;
+	}
+</style>
diff --git a/src/components/Discover/Search.vue b/src/components/Discover/Search.vue
index 56cda0c..3cf229b 100644
--- a/src/components/Discover/Search.vue
+++ b/src/components/Discover/Search.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<Loading v-if="loading" />
-		<AdaptativeList v-if="!loading">
+		<ul v-if="!loading">
 			<NcListItem v-for="feed in feeds"
 				:key="feed.link"
 				:details="moment(feed.fetchedAtUnix*1000).fromNow()"
@@ -16,13 +16,12 @@
 					{{ feed.author }}
 				</template>
 			</NcListItem>
-		</AdaptativeList>
+		</ul>
 	</div>
 </template>
 
 <script>
 import { NcAvatar, NcListItem } from '@nextcloud/vue'
-import AdaptativeList from '../Atoms/AdaptativeList.vue'
 import Loading from '../Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { debounce } from '../../utils/debounce.js'
@@ -34,7 +33,6 @@ import { toUrl } from '../../utils/url.js'
 export default {
 	name: 'Search',
 	components: {
-		AdaptativeList,
 		Loading,
 		NcAvatar,
 		NcListItem,
diff --git a/src/components/Feed/Episodes.vue b/src/components/Feed/Episodes.vue
index 233641e..3579d55 100644
--- a/src/components/Feed/Episodes.vue
+++ b/src/components/Feed/Episodes.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<Loading v-if="loading" />
-		<AdaptativeList v-if="!loading">
+		<ul v-if="!loading">
 			<NcListItem v-for="episode in episodes"
 				:key="episode.guid"
 				:active="isCurrentEpisode(episode)"
@@ -34,7 +34,7 @@
 					</NcActionButton>
 				</template>
 			</NcListItem>
-		</AdaptativeList>
+		</ul>
 		<NcModal v-if="modalEpisode" @close="closeModal">
 			<Modal :description="modalEpisode.description"
 				:image="modalEpisode.image"
@@ -50,7 +50,6 @@
 <script>
 import { NcActionButton, NcAvatar, NcListItem, NcModal } from '@nextcloud/vue'
 import { decodeUrl, encodeUrl } from '../../utils/url.js'
-import AdaptativeList from '../Atoms/AdaptativeList.vue'
 import Loading from '../Atoms/Loading.vue'
 import Modal from './Modal.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
@@ -63,7 +62,6 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Episodes',
 	components: {
-		AdaptativeList,
 		Loading,
 		Modal,
 		NcActionButton,
diff --git a/src/components/Sidebar/Settings.vue b/src/components/Sidebar/Settings.vue
new file mode 100644
index 0000000..ca85652
--- /dev/null
+++ b/src/components/Sidebar/Settings.vue
@@ -0,0 +1,50 @@
+<template>
+	<NcAppNavigationSettings>
+		<div class="setting">
+			<label id="">{{ t('repod', 'Playback speed') }}</label>
+			<div class="buttons">
+				<Minus :size="20" @click="changeRate(-.5)" />
+				<NcCounterBubble>x{{ player.rate }}</NcCounterBubble>
+				<Plus :size="20" @click="changeRate(.5)" />
+			</div>
+		</div>
+	</NcAppNavigationSettings>
+</template>
+
+<script>
+import { NcAppNavigationSettings, NcCounterBubble } from '@nextcloud/vue'
+import Minus from 'vue-material-design-icons/Minus.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'Settings',
+	components: {
+		Minus,
+		NcAppNavigationSettings,
+		NcCounterBubble,
+		Plus,
+	},
+	computed: {
+		player() {
+			return this.$store.state.player
+		},
+	},
+	methods: {
+		changeRate(diff) {
+			this.$store.dispatch('player/rate', this.player.rate + diff)
+		},
+	},
+}
+</script>
+
+<style scoped>
+    .buttons {
+        display: flex;
+        gap: .5rem;
+    }
+
+    .setting {
+        display: flex;
+        justify-content: space-between;
+    }
+</style>
diff --git a/src/components/Sidebar/Subscriptions.vue b/src/components/Sidebar/Subscriptions.vue
index 3b3772d..a2d0c11 100644
--- a/src/components/Sidebar/Subscriptions.vue
+++ b/src/components/Sidebar/Subscriptions.vue
@@ -1,41 +1,47 @@
 <template>
-	<NcAppNavigation>
-		<NcAppContentList>
-			<router-link to="/">
-				<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
-					<template #icon>
-						<Plus :size="20" />
-					</template>
-				</NcAppNavigationNew>
-			</router-link>
-			<Loading v-if="loading" />
-			<AdaptativeList v-if="!loading">
-				<Item v-for="subscriptionUrl of subscriptions"
-					:key="subscriptionUrl"
-					:url="subscriptionUrl" />
-			</AdaptativeList>
-		</NcAppContentList>
-	</NcAppNavigation>
+	<AppNavigation>
+		<template #list>
+			<NcAppContentList>
+				<router-link to="/">
+					<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
+						<template #icon>
+							<Plus :size="20" />
+						</template>
+					</NcAppNavigationNew>
+				</router-link>
+				<Loading v-if="loading" />
+				<ul v-if="!loading">
+					<Item v-for="subscriptionUrl of subscriptions"
+						:key="subscriptionUrl"
+						:url="subscriptionUrl" />
+				</ul>
+			</NcAppContentList>
+		</template>
+		<template #footer>
+			<Settings />
+		</template>
+	</AppNavigation>
 </template>
 
 <script>
-import { NcAppContentList, NcAppNavigation, NcAppNavigationNew } from '@nextcloud/vue'
-import AdaptativeList from '../Atoms/AdaptativeList.vue'
+import { NcAppContentList, NcAppNavigationNew } from '@nextcloud/vue'
+import AppNavigation from '../Atoms/AppNavigation.vue'
 import Item from './Item.vue'
 import Loading from '../Atoms/Loading.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import Settings from './Settings.vue'
 import { showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'Subscriptions',
 	components: {
-		AdaptativeList,
+		AppNavigation,
 		Item,
 		Loading,
 		NcAppContentList,
-		NcAppNavigation,
 		NcAppNavigationNew,
 		Plus,
+		Settings,
 	},
 	data() {
 		return {
@@ -43,9 +49,6 @@ export default {
 		}
 	},
 	computed: {
-		currentEpisode() {
-			return this.$store.state.player.episode
-		},
 		subscriptions() {
 			return this.$store.state.subscriptions.subscriptions
 		},
diff --git a/src/store/player.js b/src/store/player.js
index 3b4cb68..f14bab1 100644
--- a/src/store/player.js
+++ b/src/store/player.js
@@ -10,6 +10,7 @@ audio.onended = () => store.dispatch('player/stop')
 audio.onloadeddata = () => store.commit('player/loaded', true)
 audio.onplay = () => store.commit('player/paused', false)
 audio.onpause = () => store.commit('player/paused', true)
+audio.onratechange = () => store.commit('player/rate', audio.playbackRate)
 audio.onseeked = () => store.commit('player/currentTime', audio.currentTime)
 audio.ontimeupdate = () => store.commit('player/currentTime', audio.currentTime)
 audio.onvolumechange = () => store.commit('player/volume', audio.volume)
@@ -24,6 +25,7 @@ export const player = {
 		paused: null,
 		podcastUrl: null,
 		volume: 1,
+		rate: 1,
 	},
 	mutations: {
 		action: (state, action) => {
@@ -66,6 +68,9 @@ export const player = {
 		volume: (state, volume) => {
 			state.volume = volume
 		},
+		rate: (state, rate) => {
+			state.rate = rate
+		},
 	},
 	actions: {
 		load: async (context, episode) => {
@@ -101,6 +106,9 @@ export const player = {
 		volume: (_, volume) => {
 			audio.volume = volume
 		},
+		rate: (_, rate) => {
+			audio.playbackRate = rate
+		},
 	},
 }
 
diff --git a/src/views/Discover.vue b/src/views/Discover.vue
index 6aa446e..47d229a 100644
--- a/src/views/Discover.vue
+++ b/src/views/Discover.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcAppContent class="main">
+	<AppContent class="main">
 		<NcTextField :label="t('repod', 'Find a podcast')" :value.sync="search">
 			<Magnify :size="20" />
 		</NcTextField>
@@ -7,13 +7,14 @@
 		<Tops v-if="!search" type="hot" />
 		<Tops v-if="!search" type="new" />
 		<AddRss v-if="!search" />
-	</NcAppContent>
+	</AppContent>
 </template>
 
 <script>
-import { NcAppContent, NcTextField } from '@nextcloud/vue'
 import AddRss from '../components/Discover/AddRss.vue'
+import AppContent from '../components/Atoms/AppContent.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
+import { NcTextField } from '@nextcloud/vue'
 import Search from '../components/Discover/Search.vue'
 import Tops from '../components/Discover/Tops.vue'
 
@@ -21,8 +22,8 @@ export default {
 	name: 'Discover',
 	components: {
 		AddRss,
+		AppContent,
 		Magnify,
-		NcAppContent,
 		NcTextField,
 		Search,
 		Tops,
diff --git a/src/views/Feed.vue b/src/views/Feed.vue
index 677b86d..7f1e4f4 100644
--- a/src/views/Feed.vue
+++ b/src/views/Feed.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcAppContent>
+	<AppContent>
 		<Loading v-if="loading" />
 		<NcEmptyContent v-if="failed"
 			class="error"
@@ -15,15 +15,16 @@
 			:link="feed.link"
 			:title="feed.title" />
 		<Episodes v-if="feed" />
-	</NcAppContent>
+	</AppContent>
 </template>
 
 <script>
-import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
+import AppContent from '../components/Atoms/AppContent.vue'
 import Banner from '../components/Feed/Banner.vue'
 import Episodes from '../components/Feed/Episodes.vue'
 import Loading from '../components/Atoms/Loading.vue'
+import { NcEmptyContent } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
@@ -31,10 +32,10 @@ export default {
 	name: 'Feed',
 	components: {
 		Alert,
+		AppContent,
 		Banner,
 		Episodes,
 		Loading,
-		NcAppContent,
 		NcEmptyContent,
 	},
 	data() {
diff --git a/translationfiles/fr/repod.po b/translationfiles/fr/repod.po
index 8df5e46..ebda50c 100644
--- a/translationfiles/fr/repod.po
+++ b/translationfiles/fr/repod.po
@@ -86,6 +86,10 @@ msgstr "Êtes-vous sûr de vouloir supprimer ce flux ?"
 msgid "Error while removing the feed"
 msgstr "Erreur lors de la suppression du flux"
 
+#: /app/specialVueFakeDummyForL10nScript.js:15
+msgid "Playback speed"
+msgstr "Vitesse de lecture"
+
 msgid "Add a podcast"
 msgstr "Ajouter un podcast"
 
diff --git a/translationfiles/templates/repod.pot b/translationfiles/templates/repod.pot
index a68004b..1b6ff60 100644
--- a/translationfiles/templates/repod.pot
+++ b/translationfiles/templates/repod.pot
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Nextcloud 3.14159\n"
 "Report-Msgid-Bugs-To: translations\\@example.com\n"
-"POT-Creation-Date: 2024-01-15 23:19+0000\n"
+"POT-Creation-Date: 2024-01-16 21:09+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -98,25 +98,29 @@ msgid "Error while removing the feed"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:15
-msgid "Add a podcast"
+msgid "Playback speed"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:16
-msgid "Could not fetch subscriptions"
+msgid "Add a podcast"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:17
-msgid "Find a podcast"
+msgid "Could not fetch subscriptions"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:18
-msgid "Error loading feed"
+msgid "Find a podcast"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:19
-msgid "Missing required app"
+msgid "Error loading feed"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:20
+msgid "Missing required app"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:21
 msgid "Install GPodder Sync"
 msgstr ""