From 2528693e7ee3dbffb3b6cea0903d56eb8e68c266 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Tue, 9 Dec 2025 17:08:05 +0100
Subject: [PATCH 1/2] For example song, use play-pause and stop buttons

---
 src/ui/listen/example-song-player.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/ui/listen/example-song-player.vue b/src/ui/listen/example-song-player.vue
index 42289b212..669e6bb93 100644
--- a/src/ui/listen/example-song-player.vue
+++ b/src/ui/listen/example-song-player.vue
@@ -66,17 +66,23 @@
 
 	const rawPattern = computed(() => songToBeatbox(songParts.value, state.value, playbackSettings.value));
 
-	const playStop = () => {
+	const playPause = () => {
 		const p = abstractPlayerRef.value!.getOrCreatePlayer();
 		if(!p.playing) {
 			stopAllPlayers();
 			p.play();
 		} else {
 			p.stop();
-			p.setPosition(0);
 		}
 	};
 
+	const stop = () => {
+		const p = abstractPlayerRef.value!.getOrCreatePlayer();
+		if(p.playing)
+			p.stop();
+		p.setPosition(0);
+	};
+
 	const setPosition = ($event: MouseEvent) => {
 		const length = 4 * getEffectiveSongLength(songParts.value, state.value);
 		const el = songRef.value!;
@@ -116,7 +122,8 @@
 			/>
 		</div>
 		<ul class="actions icon-list">
-			<li><a href="javascript:" v-tooltip="i18n.t('example-song-player.listen')" @click="playStop()" draggable="false"><fa :icon="abstractPlayerRef?.playerRef?.playing ? 'stop' : 'play-circle'"/></a></li>
+			<li><a href="javascript:" v-tooltip="i18n.t('example-song-player.listen')" @click="playPause()" draggable="false"><fa :icon="abstractPlayerRef?.playerRef?.playing ? 'pause' : 'play-circle'"/></a></li>
+			<li><a href="javascript:" v-tooltip="i18n.t('example-song-player.stop')" @click="stop()" draggable="false"><fa icon="stop"/></a></li>
 			<li><a href="javascript:" v-tooltip="i18n.t('example-song-player.download-mp3')" @click="handleDownload()" draggable="false"><fa icon="download"/></a></li>
 		</ul>
 	</div>

From 118498abd9724d34a71e6a5784e2135c9c9101b0 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 10 Dec 2025 11:19:30 +0100
Subject: [PATCH 2/2] Small refactor

---
 src/ui/listen/example-song-player.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ui/listen/example-song-player.vue b/src/ui/listen/example-song-player.vue
index 669e6bb93..800d5b913 100644
--- a/src/ui/listen/example-song-player.vue
+++ b/src/ui/listen/example-song-player.vue
@@ -34,6 +34,7 @@
 
 	const songRef = ref<HTMLElement | null>(null);
 	const abstractPlayerRef = ref<InstanceType<typeof AbstractPlayer>>();
+	const getOrCreatePlayer = () => abstractPlayerRef.value!.getOrCreatePlayer();
 
 	const normalizedSong = computed((): Array<Required<Exclude<ExampleSong[0], string>>> => props.song.flatMap((part) => {
 		const result = {
@@ -67,7 +68,7 @@
 	const rawPattern = computed(() => songToBeatbox(songParts.value, state.value, playbackSettings.value));
 
 	const playPause = () => {
-		const p = abstractPlayerRef.value!.getOrCreatePlayer();
+		const p = getOrCreatePlayer();
 		if(!p.playing) {
 			stopAllPlayers();
 			p.play();
@@ -77,7 +78,7 @@
 	};
 
 	const stop = () => {
-		const p = abstractPlayerRef.value!.getOrCreatePlayer();
+		const p = getOrCreatePlayer();
 		if(p.playing)
 			p.stop();
 		p.setPosition(0);
@@ -97,7 +98,7 @@
 		download({
 			type: ExportType.MP3,
 			filename: props.tuneName,
-			player: abstractPlayerRef.value!.getOrCreatePlayer()
+			player: getOrCreatePlayer()
 		});
 	};
 </script>