From 778f2d446f782e6ad32854ebf4e302695af1ad4b Mon Sep 17 00:00:00 2001 From: phillychi3 Date: Fri, 27 Dec 2024 14:34:17 +0800 Subject: [PATCH] feat: edit api path --- frontend/web/src/lib/api.ts | 1 + frontend/web/src/lib/components/Filepreview.svelte | 3 ++- frontend/web/src/lib/stores/player.ts | 3 ++- frontend/web/src/routes/app/+layout.svelte | 3 ++- frontend/web/src/routes/app/+page.svelte | 3 ++- frontend/web/src/routes/app/+page.ts | 3 ++- frontend/web/src/routes/app/albums/+page.svelte | 3 ++- frontend/web/src/routes/app/albums/+page.ts | 3 ++- frontend/web/src/routes/app/albums/[albumid]/+page.svelte | 3 ++- frontend/web/src/routes/app/albums/[albumid]/+page.ts | 3 ++- frontend/web/src/routes/app/file/+page.ts | 3 ++- frontend/web/src/routes/app/music/+page.svelte | 3 ++- frontend/web/src/routes/app/music/+page.ts | 3 ++- frontend/web/src/routes/app/setting/+page.svelte | 8 +++++--- frontend/web/src/routes/app/video/+page.svelte | 3 ++- frontend/web/src/routes/app/video/+page.ts | 3 ++- frontend/web/src/routes/app/videoplay/+page.svelte | 3 ++- frontend/web/src/routes/app/videoplay/+page.ts | 3 ++- frontend/web/src/routes/login/+page.svelte | 3 ++- frontend/web/vite.config.ts | 7 ++++++- 20 files changed, 46 insertions(+), 21 deletions(-) create mode 100644 frontend/web/src/lib/api.ts diff --git a/frontend/web/src/lib/api.ts b/frontend/web/src/lib/api.ts new file mode 100644 index 0000000..c605f30 --- /dev/null +++ b/frontend/web/src/lib/api.ts @@ -0,0 +1 @@ +export const APIUrl = import.meta.env.DEV ? 'http://localhost:8000' : '/api' diff --git a/frontend/web/src/lib/components/Filepreview.svelte b/frontend/web/src/lib/components/Filepreview.svelte index 0d1ab8e..3061149 100644 --- a/frontend/web/src/lib/components/Filepreview.svelte +++ b/frontend/web/src/lib/components/Filepreview.svelte @@ -1,5 +1,6 @@ diff --git a/frontend/web/src/routes/app/+page.svelte b/frontend/web/src/routes/app/+page.svelte index 18585e7..29e681e 100644 --- a/frontend/web/src/routes/app/+page.svelte +++ b/frontend/web/src/routes/app/+page.svelte @@ -7,6 +7,7 @@ import CD from '$lib/image/cd.svelte' import Album from '$lib/image/album.svelte' import { goto } from '$app/navigation' + import { APIUrl } from '$lib/api' export let data const { info, error, status } = data @@ -24,7 +25,7 @@ playVideo(video) } function getCoverArtUrl(coverArt: string) { - return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400` + return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400` } diff --git a/frontend/web/src/routes/app/+page.ts b/frontend/web/src/routes/app/+page.ts index ff66e86..b035272 100644 --- a/frontend/web/src/routes/app/+page.ts +++ b/frontend/web/src/routes/app/+page.ts @@ -1,8 +1,9 @@ import type { PageLoad } from './$types' +import { APIUrl } from '$lib/api' export const load = (async ({ fetch }) => { try { - const responsemusic = await fetch('http://localhost:8000/file/info') + const responsemusic = await fetch(`${APIUrl}/file/info`) if (!responsemusic.ok) { return { diff --git a/frontend/web/src/routes/app/albums/+page.svelte b/frontend/web/src/routes/app/albums/+page.svelte index 9a05b65..a2e1918 100644 --- a/frontend/web/src/routes/app/albums/+page.svelte +++ b/frontend/web/src/routes/app/albums/+page.svelte @@ -5,13 +5,14 @@ import { getContext } from 'svelte' import type { MusicTrack } from '$lib/types' import Album from '$lib/image/album.svelte' + import { APIUrl } from '$lib/api' export let data: PageData const { albums, error, status } = data const playMusic = getContext<(track: MusicTrack) => void>('playMusic') function getCoverArtUrl(coverArt: string) { - return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400` + return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400` } function playAlbum(album: any) { diff --git a/frontend/web/src/routes/app/albums/+page.ts b/frontend/web/src/routes/app/albums/+page.ts index e0320d0..69e0f46 100644 --- a/frontend/web/src/routes/app/albums/+page.ts +++ b/frontend/web/src/routes/app/albums/+page.ts @@ -1,8 +1,9 @@ import type { PageLoad } from './$types' +import { APIUrl } from '$lib/api' export const load = (async ({ fetch }) => { try { - const response = await fetch('http://localhost:8000/file/album') + const response = await fetch(`${APIUrl}/file/album`) if (!response.ok) { return { diff --git a/frontend/web/src/routes/app/albums/[albumid]/+page.svelte b/frontend/web/src/routes/app/albums/[albumid]/+page.svelte index 74d978c..fe9843f 100644 --- a/frontend/web/src/routes/app/albums/[albumid]/+page.svelte +++ b/frontend/web/src/routes/app/albums/[albumid]/+page.svelte @@ -4,6 +4,7 @@ import { getContext } from 'svelte' import type { MusicTrack } from '$lib/types' import Album from '$lib/image/album.svelte' + import { APIUrl } from '$lib/api' export let data: PageData const { album } = data @@ -11,7 +12,7 @@ const playMusiclist = getContext<(track: MusicTrack) => void>('playMusiclist') function getCoverArtUrl(coverArt: string) { - return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400` + return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400` } function formatDuration(seconds: number) { diff --git a/frontend/web/src/routes/app/albums/[albumid]/+page.ts b/frontend/web/src/routes/app/albums/[albumid]/+page.ts index ca63434..479cddb 100644 --- a/frontend/web/src/routes/app/albums/[albumid]/+page.ts +++ b/frontend/web/src/routes/app/albums/[albumid]/+page.ts @@ -1,7 +1,8 @@ import type { PageLoad } from './$types' +import { APIUrl } from '$lib/api' export const load: PageLoad = async ({ fetch, params }) => { - const response = await fetch(`http://localhost:8000/file/album?album_id=${params.albumid}`) + const response = await fetch(`${APIUrl}/file/album?album_id=${params.albumid}`) const album = await response.json() return { album } } diff --git a/frontend/web/src/routes/app/file/+page.ts b/frontend/web/src/routes/app/file/+page.ts index 0f55842..2abf710 100644 --- a/frontend/web/src/routes/app/file/+page.ts +++ b/frontend/web/src/routes/app/file/+page.ts @@ -1,8 +1,9 @@ import type { PageLoad } from './$types' +import { APIUrl } from '$lib/api' export const load = (async ({ fetch }) => { try { - const response = await fetch('http://localhost:8000/file/file') + const response = await fetch(`${APIUrl}/file/file`) if (!response.ok) { return { diff --git a/frontend/web/src/routes/app/music/+page.svelte b/frontend/web/src/routes/app/music/+page.svelte index 5ba8ab0..bebe53e 100644 --- a/frontend/web/src/routes/app/music/+page.svelte +++ b/frontend/web/src/routes/app/music/+page.svelte @@ -4,6 +4,7 @@ import type { MusicTrack } from '$lib/types' import { Play } from 'lucide-svelte' import CD from '$lib/image/cd.svelte' + import { APIUrl } from '$lib/api' const { musics, error, status } = data const playMusic = getContext<(track: MusicTrack) => void>('playMusic') @@ -12,7 +13,7 @@ } function getCoverArtUrl(coverArt: string) { - return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400` + return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400` } diff --git a/frontend/web/src/routes/app/music/+page.ts b/frontend/web/src/routes/app/music/+page.ts index ea5d946..8722fbd 100644 --- a/frontend/web/src/routes/app/music/+page.ts +++ b/frontend/web/src/routes/app/music/+page.ts @@ -1,8 +1,9 @@ import type { PageLoad } from './$types' +import { APIUrl } from '$lib/api' export const load = (async ({ fetch }) => { try { - const response = await fetch('http://localhost:8000/file/music') + const response = await fetch(`${APIUrl}/file/music`) if (!response.ok) { return { diff --git a/frontend/web/src/routes/app/setting/+page.svelte b/frontend/web/src/routes/app/setting/+page.svelte index c889de1..8da1dad 100644 --- a/frontend/web/src/routes/app/setting/+page.svelte +++ b/frontend/web/src/routes/app/setting/+page.svelte @@ -2,6 +2,8 @@ import { on } from 'svelte/events' import type { PageData } from './$types' import { Folder, File } from 'lucide-svelte' + import { APIUrl } from '$lib/api' + let { data }: { data: PageData } = $props() interface DirectoryContent { @@ -27,7 +29,7 @@ async function fetchDirs(path: string) { try { const response = await fetch( - `http://localhost:8000/setting/dir?path=${encodeURIComponent(path)}` + `${APIUrl}/setting/dir?path=${encodeURIComponent(path)}` ) const data: DirectoryContent = await response.json() @@ -69,7 +71,7 @@ async function handleScan() { try { scanStatus = '掃描中...' - const response = await fetch(`http://localhost:8000/file/parse_file`, { + const response = await fetch(`${APIUrl}/file/parse_file`, { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -101,7 +103,7 @@ async function handleScanDir() { try { scanStatus = '掃描中...' - const response = await fetch(`http://localhost:8000/file/scanall`, { + const response = await fetch(`${APIUrl}/file/scanall`, { method: 'POST', headers: { 'Content-Type': 'application/json' diff --git a/frontend/web/src/routes/app/video/+page.svelte b/frontend/web/src/routes/app/video/+page.svelte index 8629bd9..bc7f9ce 100644 --- a/frontend/web/src/routes/app/video/+page.svelte +++ b/frontend/web/src/routes/app/video/+page.svelte @@ -3,6 +3,7 @@ import { getContext } from 'svelte' import type { Video } from '$lib/types' import { Play } from 'lucide-svelte' + import { APIUrl } from '$lib/api' export let data const { videos, error, status } = data @@ -23,7 +24,7 @@ return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}` } function getCoverArtUrl(coverArt: string) { - return `http://localhost:8000/file/image?image_id=${coverArt}&image_size=400` + return `${APIUrl}/file/image?image_id=${coverArt}&image_size=400` } diff --git a/frontend/web/src/routes/app/video/+page.ts b/frontend/web/src/routes/app/video/+page.ts index 7a595e1..4b2287e 100644 --- a/frontend/web/src/routes/app/video/+page.ts +++ b/frontend/web/src/routes/app/video/+page.ts @@ -1,8 +1,9 @@ import type { PageLoad } from './$types' +import { APIUrl } from '$lib/api' export const load = (async ({ fetch }) => { try { - const response = await fetch('http://localhost:8000/file/video') + const response = await fetch(`${APIUrl}/file/video`) if (!response.ok) { return { diff --git a/frontend/web/src/routes/app/videoplay/+page.svelte b/frontend/web/src/routes/app/videoplay/+page.svelte index 50ed7af..be300fa 100644 --- a/frontend/web/src/routes/app/videoplay/+page.svelte +++ b/frontend/web/src/routes/app/videoplay/+page.svelte @@ -4,6 +4,7 @@ import type { PageData } from './$types' import 'vidstack/bundle' import type { MediaPlayerElement } from 'vidstack/elements' + import { APIUrl } from '$lib/api' export let data: PageData const { video } = data @@ -42,7 +43,7 @@
- + diff --git a/frontend/web/src/routes/app/videoplay/+page.ts b/frontend/web/src/routes/app/videoplay/+page.ts index c369fa4..2d3718b 100644 --- a/frontend/web/src/routes/app/videoplay/+page.ts +++ b/frontend/web/src/routes/app/videoplay/+page.ts @@ -1,5 +1,6 @@ import type { PageLoad } from './$types' import { error } from '@sveltejs/kit' +import { APIUrl } from '$lib/api' export const load: PageLoad = async ({ url, fetch }) => { const videoId = url.searchParams.get('id') @@ -9,7 +10,7 @@ export const load: PageLoad = async ({ url, fetch }) => { } try { - const response = await fetch(`http://localhost:8000/file/video?video_id=${videoId}`) + const response = await fetch(`${APIUrl}/file/video?video_id=${videoId}`) if (!response.ok) throw new Error('影片載入失敗') const video = await response.json() diff --git a/frontend/web/src/routes/login/+page.svelte b/frontend/web/src/routes/login/+page.svelte index 2f30c10..b7a641a 100644 --- a/frontend/web/src/routes/login/+page.svelte +++ b/frontend/web/src/routes/login/+page.svelte @@ -2,6 +2,7 @@ import { goto } from '$app/navigation' import { Music } from 'lucide-svelte' import Cookies from 'js-cookie' + import { APIUrl } from '$lib/api'; interface LoginResponse { access_token: string @@ -20,7 +21,7 @@ } try { - const response = await fetch('http://localhost:8000/auth/login', { + const response = await fetch(`${APIUrl}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' diff --git a/frontend/web/vite.config.ts b/frontend/web/vite.config.ts index a215d01..1320fe2 100644 --- a/frontend/web/vite.config.ts +++ b/frontend/web/vite.config.ts @@ -3,5 +3,10 @@ import { vite as vidstack } from 'vidstack/plugins' import { defineConfig } from 'vite' export default defineConfig({ - plugins: [vidstack(), sveltekit()] + plugins: [vidstack(), sveltekit()], + server: { + proxy: { + '/api': 'http://localhost:8000' + } + } })