From 4ab58c8400fc9939e5cd8abd741a47e67efd9771 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 6 Oct 2026 03:10:44 +0200
Subject: [PATCH] Added repeat modes

---
 .../Player/Fullscreen/TrackDisplay.vue        |  8 ++++---
 app/components/Player/index.vue               | 13 ++++++++---
 app/plugins/player.ts                         | 22 ++++++++++++++++++-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/app/components/Player/Fullscreen/TrackDisplay.vue b/app/components/Player/Fullscreen/TrackDisplay.vue
index 5fc0306..b974d03 100644
--- a/app/components/Player/Fullscreen/TrackDisplay.vue
+++ b/app/components/Player/Fullscreen/TrackDisplay.vue
@@ -12,6 +12,8 @@ const {
 	prev,
 	shuffle,
 	repeat,
+	repeatOnce,
+	cycleRepeat,
 	secondsPlayed,
 	duration,
 	volume,
@@ -64,9 +66,9 @@ const durationFormatted = computed(() =>
 			<Icon name="lucide:play" v-else @click="play()" />
 			<Icon name="lucide:skip-forward" @click="next()" />
 			<Icon
-				name="lucide:repeat"
-				:class="{ repeating: repeat }"
-				@click="repeat = !repeat"
+				:name="repeatOnce ? 'lucide:repeat-1' : 'lucide:repeat'"
+				:class="{ repeating: repeat || repeatOnce }"
+				@click="cycleRepeat()"
 			/>
 		</div>
 
diff --git a/app/components/Player/index.vue b/app/components/Player/index.vue
index 778ee5c..64b3233 100644
--- a/app/components/Player/index.vue
+++ b/app/components/Player/index.vue
@@ -27,6 +27,8 @@ const {
 	prev,
 	shuffle,
 	repeat,
+	repeatOnce,
+	cycleRepeat,
 	secondsPlayed,
 	duration,
 	volume,
@@ -47,6 +49,7 @@ const queueOpen = ref(false)
 <template>
 	<div id="width-fixer" ref="width-fixer-ref"></div>
 	<article class="player" ref="player-ref" :class="{ active: song }">
+		<Icon name="lucide:repeat-1" class="icon-preload" aria-hidden="true" />
 		<template v-if="song">
 			<div class="track">
 				<NuxtImg
@@ -73,9 +76,9 @@ const queueOpen = ref(false)
 					<Icon name="lucide:play" v-else @click="play()" />
 					<Icon name="lucide:skip-forward" @click="next()" />
 					<Icon
-						name="lucide:repeat"
-						:class="{ repeating: repeat }"
-						@click="repeat = !repeat"
+						:name="repeatOnce ? 'lucide:repeat-1' : 'lucide:repeat'"
+						:class="{ repeating: repeat || repeatOnce }"
+						@click="cycleRepeat()"
 					/>
 				</div>
 				<div class="slider">
@@ -121,6 +124,10 @@ const queueOpen = ref(false)
 @use "@/styles/variables" as *;
 @use "@/styles/util" as *;
 
+.icon-preload {
+	display: none;
+}
+
 #width-fixer {
 	width: 100%;
 }
diff --git a/app/plugins/player.ts b/app/plugins/player.ts
index b6c89a2..bdbd3e8 100644
--- a/app/plugins/player.ts
+++ b/app/plugins/player.ts
@@ -29,6 +29,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 	const currentQueue = ref<Track[]>([])
 	const currentSong = ref<Track | null>(null)
 	const repeat = ref(false)
+	const repeatOnce = ref(false)
 	const isPlaying = ref(false)
 	const beatEnergy = ref(0)
 	const storedVolume = ref(DEFAULT_VOLUME)
@@ -369,7 +370,13 @@ export default defineNuxtPlugin((nuxtApp) => {
 			onend: () => {
 				stopBeatAnalysis("track ended")
 				void closeFullscreen()
-				next()
+				if (repeatOnce.value && sound.value === newSound) {
+					repeatOnce.value = false
+					newSound.seek(0)
+					newSound.play()
+				} else {
+					void next()
+				}
 				stopTracking()
 			},
 			onstop: () => {
@@ -421,6 +428,17 @@ export default defineNuxtPlugin((nuxtApp) => {
 		updateMediaSession()
 	}
 
+	const cycleRepeat = () => {
+		if (repeatOnce.value) {
+			repeatOnce.value = false
+			repeat.value = true
+		} else if (repeat.value) {
+			repeat.value = false
+		} else {
+			repeatOnce.value = true
+		}
+	}
+
 	const next = async (autoplay: boolean = true) => {
 		if (currentSong.value) {
 			prevQueue.value.unshift(currentSong.value)
@@ -571,6 +589,8 @@ export default defineNuxtPlugin((nuxtApp) => {
 				beatEnergy,
 				currentSong,
 				repeat,
+				repeatOnce,
+				cycleRepeat,
 				play,
 				pause,
 				next,