byntangxyz/noctune-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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