Added shuffle and repeating

app/components/Player/index.vue

@@ -17,7 +17,7 @@ onMounted(() => {
 })
 
 const song = useSong()
-const { isPlaying, play, pause, next, prev } = usePlayer()
+const { isPlaying, play, pause, next, prev, shuffle, repeat } = usePlayer()
 </script>
 
 <template>
@@ -38,12 +38,16 @@ const { isPlaying, play, pause, next, prev } = usePlayer()
 				</div>
 			</div>
 			<div class="controls">
-				<Icon name="lucide:shuffle" />
+				<Icon name="lucide:shuffle" @click="shuffle()" />
 				<Icon name="lucide:skip-back" @click="prev()" />
 				<Icon name="lucide:pause" v-if="isPlaying" @click="pause()" />
 				<Icon name="lucide:play" v-else @click="play()" />
 				<Icon name="lucide:skip-forward" @click="next()" />
-				<Icon name="lucide:repeat" />
+				<Icon
+					name="lucide:repeat"
+					:class="{ repeating: repeat }"
+					@click="repeat = !repeat"
+				/>
 			</div>
 			<div class="misc-btns"></div>
 		</template>
@@ -113,6 +117,11 @@ const { isPlaying, play, pause, next, prev } = usePlayer()
 	span {
 		font-size: 24px;
 		cursor: pointer;
+		transition: color 0.2s ease;
+	}
+
+	.repeating {
+		color: $color-accent;
 	}
 }
 </style>

app/plugins/player.ts

@@ -146,6 +146,10 @@ export default defineNuxtPlugin((nuxtApp) => {
 		sound.value = null
 	}
 
+	const shuffle = () => {
+		queue.value.sort(() => Math.random() - 0.5)
+	}
+
 	// Info
 	const getDuration = () =>
 		new Promise<number>((resolve) => {
@@ -174,6 +178,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 				prev,
 				addToQueue,
 				clear,
+				shuffle,
 				getDuration,
 				getSecondsPlayed,
 				setSecondsPlayed,