Build media URLs from public bucket config

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"
 				/>

app/pages/admin/albums.vue

@@ -14,7 +14,6 @@ const tableRows: Row[] = [
 		name: "file",
 		displayName: "Cover",
 		type: "image",
-		prefix: `${BACKEND_SERVE}`,
 	},
 	{
 		name: "name",

app/pages/admin/artists.vue

@@ -14,7 +14,6 @@ const tableRows: Row[] = [
 		name: "file",
 		displayName: "Cover",
 		type: "image",
-		prefix: `${BACKEND_SERVE}`,
 	},
 	{
 		name: "name",

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",

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"
 		/>

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,

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>

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)
 }