From c101588eaf4d48ad879fef889394e817685b0de3 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Wed, 17 Jan 2024 17:40:26 +0100
Subject: [PATCH] style: add icon to the playback speed setting

---
 src/components/Sidebar/Settings.vue | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/Sidebar/Settings.vue b/src/components/Sidebar/Settings.vue
index ca85652..bfd6498 100644
--- a/src/components/Sidebar/Settings.vue
+++ b/src/components/Sidebar/Settings.vue
@@ -1,8 +1,13 @@
 <template>
 	<NcAppNavigationSettings>
 		<div class="setting">
-			<label id="">{{ t('repod', 'Playback speed') }}</label>
-			<div class="buttons">
+			<label>
+				<SpeedometerSlow v-if="player.rate < 1" />
+				<SpeedometerMedium v-if="player.rate === 1" />
+				<Speedometer v-if="player.rate > 1" />
+				{{ t('repod', 'Playback speed') }}
+			</label>
+			<div>
 				<Minus :size="20" @click="changeRate(-.5)" />
 				<NcCounterBubble>x{{ player.rate }}</NcCounterBubble>
 				<Plus :size="20" @click="changeRate(.5)" />
@@ -15,6 +20,9 @@
 import { NcAppNavigationSettings, NcCounterBubble } from '@nextcloud/vue'
 import Minus from 'vue-material-design-icons/Minus.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import Speedometer from 'vue-material-design-icons/Speedometer.vue'
+import SpeedometerMedium from 'vue-material-design-icons/SpeedometerMedium.vue'
+import SpeedometerSlow from 'vue-material-design-icons/SpeedometerSlow.vue'
 
 export default {
 	name: 'Settings',
@@ -23,6 +31,9 @@ export default {
 		NcAppNavigationSettings,
 		NcCounterBubble,
 		Plus,
+		Speedometer,
+		SpeedometerMedium,
+		SpeedometerSlow,
 	},
 	computed: {
 		player() {
@@ -31,20 +42,22 @@ export default {
 	},
 	methods: {
 		changeRate(diff) {
-			this.$store.dispatch('player/rate', this.player.rate + diff)
+			if (this.player.rate + diff > 0) {
+				this.$store.dispatch('player/rate', this.player.rate + diff)
+			}
 		},
 	},
 }
 </script>
 
 <style scoped>
-    .buttons {
-        display: flex;
-        gap: .5rem;
-    }
-
     .setting {
         display: flex;
         justify-content: space-between;
     }
+
+	.setting > label, .setting > div {
+        display: flex;
+        gap: .5rem;
+    }
 </style>