feat: add utility function to format URLs and create new CSS file for styling

This commit is contained in:
2026-05-26 19:56:52 +07:00
parent b2f3e9661e
commit 8df58d74de
14 changed files with 24 additions and 40 deletions
+2 -1
View File
@@ -1,2 +1,3 @@
VITE_API_BASE_URL=http://localhost:3002/api
VITE_API_BASE_URL=http://localhost:3000/api
VITE_SERVER_URL=http://localhost:3000
VITE_APP_NAME=NOCTUNE
+2 -1
View File
@@ -1,2 +1,3 @@
VITE_API_BASE_URL=http://localhost:3001/api
VITE_API_BASE_URL=http://localhost:3000/api
VITE_SERVER_URL=http://localhost:3000
VITE_APP_NAME=NOCTUNE
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noctune - Music That Hits Different</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<script type="module" crossorigin src="/assets/index-iVZX2_zV.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-3bN2l3Ol.css">
<script type="module" crossorigin src="/assets/index-C2ZrghzO.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-eqvJxEw1.css">
</head>
<body class="bg-noctune-cream">
<div id="app"></div>
+1 -5
View File
@@ -60,6 +60,7 @@ import { useAuthStore } from '../stores/authStore.js'
import { usePlayerStore } from '../stores/playerStore.js'
import { useQueueStore } from '../stores/queueStore.js'
import api from '../lib/api.js'
import { formatUrl } from '../lib/utils.js'
const router = useRouter()
const authStore = useAuthStore()
@@ -70,11 +71,6 @@ const query = ref('')
const searchResults = ref(null)
let searchTimeout = null
function formatUrl(url) {
if (!url) return ''
return url.startsWith('http') ? url : `http://localhost:3001${url}`
}
function onSearch() {
clearTimeout(searchTimeout)
if (!query.value.trim()) {
+2 -5
View File
@@ -59,6 +59,7 @@ import { ref, computed, watch, onMounted } from 'vue'
import { usePlayerStore } from '../stores/playerStore.js'
import { useQueueStore } from '../stores/queueStore.js'
import { useAuthStore } from '../stores/authStore.js'
import { formatUrl } from '../lib/utils.js'
const playerStore = usePlayerStore()
const queueStore = useQueueStore()
@@ -78,11 +79,7 @@ onMounted(() => {
playerStore.onEnd(onTrackEnd)
})
const coverSrc = computed(() => {
const url = playerStore.currentTrack?.coverUrl
if (!url) return ''
return url.startsWith('http') ? url : `http://localhost:3001${url}`
})
const coverSrc = computed(() => formatUrl(playerStore.currentTrack?.coverUrl))
function onSeek(e) {
playerStore.seek(parseFloat(e.target.value))
+6
View File
@@ -0,0 +1,6 @@
const SERVER_URL = import.meta.env.VITE_SERVER_URL || 'http://localhost:3000'
export function formatUrl(url) {
if (!url) return ''
return url.startsWith('http') ? url : `${SERVER_URL}${url}`
}
+1 -1
View File
@@ -14,7 +14,7 @@ export const useAuthStore = defineStore('auth', () => {
async function checkSession() {
try {
const { data } = await api.get('/auth/me')
if (data.success) user.value = data.data
if (data.success) user.value = data.data.user
} catch {
user.value = null
}
+2 -3
View File
@@ -1,6 +1,7 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import audioEngine from '../lib/audioEngine.js'
import { formatUrl } from '../lib/utils.js'
export const usePlayerStore = defineStore('player', () => {
const currentTrack = ref(null)
@@ -22,9 +23,7 @@ export const usePlayerStore = defineStore('player', () => {
isPlaying.value = false
stopSeekInterval()
const audioUrl = track.audioUrl.startsWith('http')
? track.audioUrl
: `http://localhost:3001${track.audioUrl}`
const audioUrl = formatUrl(track.audioUrl)
audioEngine.load(audioUrl)
audioEngine.on('play', () => { isPlaying.value = true })
+1 -5
View File
@@ -61,6 +61,7 @@ import { usePlayerStore } from '../stores/playerStore.js'
import { useQueueStore } from '../stores/queueStore.js'
import { useAuthStore } from '../stores/authStore.js'
import api from '../lib/api.js'
import { formatUrl } from '../lib/utils.js'
const playerStore = usePlayerStore()
const queueStore = useQueueStore()
@@ -69,11 +70,6 @@ const authStore = useAuthStore()
const tracks = ref([])
const loading = ref(true)
function formatUrl(url) {
if (!url) return ''
return url.startsWith('http') ? url : `http://localhost:3001${url}`
}
function isCurrentTrack(track) {
return playerStore.currentTrack?._id === track._id
}
+1 -5
View File
@@ -74,6 +74,7 @@ import { usePlayerStore } from '../stores/playerStore.js'
import { useQueueStore } from '../stores/queueStore.js'
import { useAuthStore } from '../stores/authStore.js'
import api from '../lib/api.js'
import { formatUrl } from '../lib/utils.js'
const playerStore = usePlayerStore()
const queueStore = useQueueStore()
@@ -84,11 +85,6 @@ const allTracks = ref([])
const loading = ref(true)
const allLoading = ref(true)
function formatUrl(url) {
if (!url) return ''
return url.startsWith('http') ? url : `http://localhost:3001${url}`
}
function isCurrentTrack(track) {
return playerStore.currentTrack?._id === track._id
}
+1 -5
View File
@@ -82,6 +82,7 @@ import { usePlayerStore } from '../stores/playerStore.js'
import { useQueueStore } from '../stores/queueStore.js'
import { useAuthStore } from '../stores/authStore.js'
import api from '../lib/api.js'
import { formatUrl } from '../lib/utils.js'
const route = useRoute()
const playerStore = usePlayerStore()
@@ -91,11 +92,6 @@ const authStore = useAuthStore()
const playlist = ref(null)
const loading = ref(true)
function formatUrl(url) {
if (!url) return ''
return url.startsWith('http') ? url : `http://localhost:3001${url}`
}
function isCurrentTrack(track) {
return playerStore.currentTrack?._id === track._id
}
+1 -5
View File
@@ -76,6 +76,7 @@ import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/authStore.js'
import api from '../lib/api.js'
import { formatUrl } from '../lib/utils.js'
const router = useRouter()
const authStore = useAuthStore()
@@ -94,11 +95,6 @@ const userDisplayName = computed(() => {
return authStore.user?.name || authStore.user?.username || 'User'
})
function formatUrl(url) {
if (!url) return ''
return url.startsWith('http') ? url : `http://localhost:3001${url}`
}
function toggleEdit() {
editing.value = !editing.value
if (editing.value) {