From 069ef37825eb918a21f4ba2b60b0f0b6d459a707 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 29 Sep 2026 16:22:22 +0200
Subject: [PATCH] Build media URLs from public bucket config

---
 app/components/Album/Slider.vue | 2 +-
 app/pages/admin/albums.vue      | 1 -
 app/pages/admin/artists.vue     | 1 -
 app/pages/admin/songs.vue       | 2 --
 app/pages/artist/[id]/index.vue | 2 +-
 app/plugins/player.ts           | 5 +++--
 app/ui/Table.vue                | 6 ++----
 app/utils/file.ts               | 9 +++++----
 8 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/app/components/Album/Slider.vue b/app/components/Album/Slider.vue
index 5d83b17..90122e8 100644
--- a/app/components/Album/Slider.vue
+++ b/app/components/Album/Slider.vue
@@ -32,7 +32,7 @@ const data = await Promise.allSettled(
 					v-for="album in item.albums"
 					:key="album._id"
 					:name="album.name"
-					:file="`${BACKEND_SERVE}${album.file}`"
+					:file="GET_FILE(album.file)"
 					:artists="album.artists"
 					:_id="album._id"
 				/>
diff --git a/app/pages/admin/albums.vue b/app/pages/admin/albums.vue
index 95a61c7..af55cdb 100644
--- a/app/pages/admin/albums.vue
+++ b/app/pages/admin/albums.vue
@@ -14,7 +14,6 @@ const tableRows: Row[] = [
 		name: "file",
 		displayName: "Cover",
 		type: "image",
-		prefix: `${BACKEND_SERVE}`,
 	},
 	{
 		name: "name",
diff --git a/app/pages/admin/artists.vue b/app/pages/admin/artists.vue
index 1830454..ec91c9f 100644
--- a/app/pages/admin/artists.vue
+++ b/app/pages/admin/artists.vue
@@ -14,7 +14,6 @@ const tableRows: Row[] = [
 		name: "file",
 		displayName: "Cover",
 		type: "image",
-		prefix: `${BACKEND_SERVE}`,
 	},
 	{
 		name: "name",
diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
index 8741e23..8971ca6 100644
--- a/app/pages/admin/songs.vue
+++ b/app/pages/admin/songs.vue
@@ -14,8 +14,6 @@ const tableRows: Row[] = [
 		name: "fileDir",
 		displayName: "Audio File",
 		type: "audio",
-		prefix: `${BACKEND_SERVE}`,
-		suffix: "/high.m4a",
 	},
 	{
 		name: "name",
diff --git a/app/pages/artist/[id]/index.vue b/app/pages/artist/[id]/index.vue
index ed51e39..5f4b3a1 100644
--- a/app/pages/artist/[id]/index.vue
+++ b/app/pages/artist/[id]/index.vue
@@ -90,7 +90,7 @@ const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
 			v-for="album in albumsData"
 			:key="album._id"
 			:name="album.name"
-			:file="`${BACKEND_SERVE}${album.file}`"
+			:file="GET_FILE(album.file)"
 			:artists="album.artists"
 			:_id="album._id"
 		/>
diff --git a/app/plugins/player.ts b/app/plugins/player.ts
index ab0d1ef..97b7368 100644
--- a/app/plugins/player.ts
+++ b/app/plugins/player.ts
@@ -1,6 +1,7 @@
 import { Howl } from "howler"
 
 export default defineNuxtPlugin((nuxtApp) => {
+	const mediaBaseUrl = useRuntimeConfig().public.mediaBaseUrl
 	const { close: closeFullscreen } = useFullscreen()
 	const VOLUME_STORAGE_KEY = "music-v2-player-volume"
 	const DEFAULT_VOLUME = 0.5
@@ -84,7 +85,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 				album: currentSong.value.album.name,
 				artwork: [
 					{
-						src: GET_FILE(currentSong.value.album.file),
+						src: GET_FILE(currentSong.value.album.file, mediaBaseUrl),
 						sizes: "512x512",
 					},
 				],
@@ -183,7 +184,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 		if (!song) throw new Error("Song not provided")
 
 		const newSound = new Howl({
-			src: [GET_AUDIO_FILE(song.fileDir)],
+			src: [GET_AUDIO_FILE(song.fileDir, mediaBaseUrl)],
 			html5: false,
 			autoplay: false,
 			volume: storedVolume.value,
diff --git a/app/ui/Table.vue b/app/ui/Table.vue
index 2a30774..a174f43 100644
--- a/app/ui/Table.vue
+++ b/app/ui/Table.vue
@@ -4,8 +4,6 @@ export type Row = {
 	class?: string
 	width?: string
 	type?: "image" | "audio"
-	prefix?: string
-	suffix?: string
 	displayName?: string
 }
 
@@ -37,12 +35,12 @@ const { rows, data } = defineProps<TableProps>()
 					<slot :name="row.name" :item="item" :index="i">
 						<nuxt-img
 							v-if="row.type == 'image'"
-							:src="`${row.prefix}${item[row.name]}`"
+							:src="GET_FILE(item[row.name])"
 						/>
 						<audio
 							v-else-if="row.type == 'audio'"
 							controls
-							:src="`${row.prefix}${item[row.name]}${row.suffix}`"
+							:src="GET_AUDIO_FILE(item[row.name])"
 						/>
 						<p v-else>{{ item[row.name] }}</p>
 					</slot>
diff --git a/app/utils/file.ts b/app/utils/file.ts
index 26786b9..f310dfe 100644
--- a/app/utils/file.ts
+++ b/app/utils/file.ts
@@ -1,6 +1,7 @@
-export const BACKEND_SERVE = "/static/"
+export const GET_FILE = (file: string, baseUrl = useRuntimeConfig().public.mediaBaseUrl) => {
+	return `${String(baseUrl).replace(/\/+$/, "")}/${file.replace(/^\/+/, "")}`
+}
 
-export const GET_FILE = (file: string) => `${BACKEND_SERVE}${file}`
-export const GET_AUDIO_FILE = (file: string) => {
-	return `${GET_FILE(file)}/high.m4a`
+export const GET_AUDIO_FILE = (file: string, baseUrl?: string) => {
+	return GET_FILE(`${file}/high.m4a`, baseUrl)
 }