Stop ok

src/components/Player/Bar.vue

@@ -13,7 +13,7 @@
 			@volumechange="volume = audio.volume" />
 		<NcLoadingIcon v-if="loading" />
 		<div v-if="!loading"
-			class="progress"
+			class="pointer"
 			@click="(event) => audio.fastSeek(event.x * duration / event.target.offsetWidth)">
 			<NcProgressBar size="medium" :value="currentTime * 100 / duration" />
 		</div>
@@ -27,18 +27,39 @@
 					<i>{{ episode.podcastName }}</i>
 				</a>
 			</div>
-			<Pause v-if="!paused" :size="50" @click="() => audio.pause()" />
-			<Play v-if="paused" :size="50" @click="() => audio.play()" />
+			<PauseButton v-if="!paused"
+				class="pointer"
+				:size="50"
+				@click="() => audio.pause()" />
+			<PlayButton v-if="paused"
+				class="pointer"
+				:size="50"
+				@click="() => audio.play()" />
+			<StopButton class="pointer"
+				:size="30"
+				@click="stop" />
 			<div class="time">
 				<span class="current">{{ formatTimer(new Date(currentTime*1000)) }}</span>
 				<span class="divider">/</span>
 				<span class="length">{{ formatTimer(new Date(duration*1000)) }}</span>
 			</div>
 			<div class="volume">
-				<VolumeHigh v-if="audio.volume > 0.7" :size="30" />
-				<VolumeLow v-if="audio.volume > 0 && audio.volume <= 0.3" :size="30" />
-				<VolumeMedium v-if="audio.volume > 0.3 && audio.volume <= 0.7" :size="30" />
-				<VolumeMute v-if="audio.volume == 0" :size="30" />
+				<VolumeHigh v-if="volume > 0.7"
+					class="pointer"
+					:size="30"
+					@click="mute" />
+				<VolumeLow v-if="volume > 0 && volume <= 0.3"
+					class="pointer"
+					:size="30"
+					@click="mute" />
+				<VolumeMedium v-if="volume > 0.3 && volume <= 0.7"
+					class="pointer"
+					:size="30"
+					@click="mute" />
+				<VolumeMute v-if="volume == 0"
+					class="pointer"
+					:size="30"
+					@click="unmute" />
 			</div>
 		</div>
 	</div>
@@ -46,8 +67,9 @@
 
 <script>
 import { NcLoadingIcon, NcProgressBar } from '@nextcloud/vue'
-import Pause from 'vue-material-design-icons/Pause.vue'
-import Play from 'vue-material-design-icons/Play.vue'
+import PauseButton from 'vue-material-design-icons/Pause.vue'
+import PlayButton from 'vue-material-design-icons/Play.vue'
+import StopButton from 'vue-material-design-icons/Stop.vue'
 import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
 import VolumeLow from 'vue-material-design-icons/VolumeLow.vue'
 import VolumeMedium from 'vue-material-design-icons/VolumeMedium.vue'
@@ -59,8 +81,9 @@ export default {
 	components: {
 		NcLoadingIcon,
 		NcProgressBar,
-		Pause,
-		Play,
+		PauseButton,
+		PlayButton,
+		StopButton,
 		VolumeHigh,
 		VolumeLow,
 		VolumeMedium,
@@ -72,7 +95,8 @@ export default {
 			duration: 0,
 			loading: true,
 			paused: true,
-			volume: 0,
+			volume: 1,
+			volumeMuted: 0,
 		}
 	},
 	computed: {
@@ -88,6 +112,16 @@ export default {
 	},
 	methods: {
 		formatTimer,
+		mute() {
+			this.volumeMuted = this.audio.volume
+			this.audio.volume = 0
+		},
+		stop() {
+			this.$store.commit('player/play', null)
+		},
+		unmute() {
+			this.audio.volume = this.volumeMuted
+		},
 	},
 }
 </script>
@@ -107,16 +141,32 @@ export default {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		width: 44%;
+		width: 45%;
 	}
 
 	.player {
 		display: flex;
 		gap: 1rem;
 		height: calc(6rem - 6px);
+		justify-content: space-between;
 	}
 
-	.progress {
+	.pointer {
 		cursor: pointer;
 	}
+
+	.time, .volume {
+		align-items: center;
+		display: flex;
+		gap: 5px;
+		justify-content: center;
+	}
+
+	.time {
+		width: 25%;
+	}
+
+	.volume {
+		width: 10%;
+	}
 </style>