UI mejorada

components/AuroraBackground.client.vue

@@ -201,7 +201,7 @@ onMounted(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  z-index: 0; /* Render above body background but below main content */
   overflow: hidden;
   pointer-events: none;
 }
@@ -357,4 +357,4 @@ onMounted(() => {
   will-change: transform;
   transform: translateZ(0);
 }
-</style>
+</style>

components/MainContainer.client.vue

@@ -56,7 +56,15 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
 
 <style scoped>
 .main-container {
-  height: 90vh;
+  /* Parametrized viewport sizing */
+  --app-vertical-margin: 10px; /* Top/bottom margin between both components */
+  --playback-controls-height: 60px; /* Adjustable height for PlaybackControls */
+  --tracklist-height: calc(100vh - (var(--app-vertical-margin) * 2) - var(--playback-controls-height));
+
+  /* Container takes full viewport minus vertical margins */
+  height: calc(100vh - (var(--app-vertical-margin) * 2));
+  margin-top: var(--app-vertical-margin);
+  margin-bottom: var(--app-vertical-margin);
   display: flex;
   flex-direction: column;
   max-width: 1200px;
@@ -64,7 +72,9 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
   padding: 20px;
   padding-bottom: 0;
   position: relative;
-  overflow: hidden;
+  /* Keep shadows visible and allow backdrop to show through */
+  overflow: visible;
+  z-index: 1; /* Ensure content sits above Aurora background */
 }
 
 .app-header {
@@ -186,7 +196,8 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
   .main-container {
     padding: 15px;
     padding-bottom: 0;
-    height: 92vh;
+    /* Keep same parametrized behavior on mobile */
+    height: calc(100vh - (var(--app-vertical-margin) * 2));
   }
   
   .header-content {
@@ -275,4 +286,4 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
     background: var(--accent-primary);
   }
 }
-</style>
+</style>

components/PlaybackControls.client.vue

@@ -65,6 +65,8 @@ const cycleRepeat = () => {
 
 <style scoped>
 .playback-controls {
+  /* Allow parent to control overall height budget */
+  height: var(--playback-controls-height, auto);
   display: flex;
   gap: 10px;
   align-items: center;
@@ -101,4 +103,4 @@ const cycleRepeat = () => {
     gap: 8px;
   }
 }
-</style>
+</style>

components/TrackList.client.vue

@@ -78,6 +78,8 @@ const handleTrackClick = (track, index) => {
 
 <style scoped>
 .track-list {
+  /* Cap height so sum with PlaybackControls fits 100vh; flex handles actual sizing */
+  max-height: var(--tracklist-height, none);
   padding: 20px;
   margin-bottom: 0;
   background: rgba(255, 255, 255, 0.05);
@@ -277,4 +279,4 @@ const handleTrackClick = (track, index) => {
     gap: 6px;
   }
 }
-</style>
+</style>

docker-compose.yml

@@ -4,7 +4,7 @@ services:
     container_name: repodructor
     restart: unless-stopped
     volumes:
-      # Mount manually mounted NAS directory
+      # Mount music directory from server
       - /srv/repodructor/musica:/app/public/music:ro
     environment:
       - NODE_ENV=production

nuxt.config.ts

@@ -15,8 +15,8 @@ export default defineNuxtConfig({
   
   // Server configuration for proxy compatibility
   devServer: {
-    host: '0.0.0.0',
+    host: process.env.NUXT_HOST || '0.0.0.0',
-    port: 3000,
+    port: process.env.NUXT_PORT ? Number(process.env.NUXT_PORT) : 3000,
     https: false
   },
   
@@ -26,13 +26,12 @@ export default defineNuxtConfig({
   // Vite configuration for HMR through proxy  
   vite: {
     server: {
-      hmr: {
+      // Configure HMR via env when developing behind HTTPS proxy
-        // Use proxy host instead of direct connection
+      hmr: process.env.NODE_ENV !== 'production' ? {
-        host: 'musica.nucleoriofrio.com',
+        host: process.env.HMR_HOST || undefined,
-        // Use default HTTPS port (443) through proxy
+        clientPort: process.env.HMR_CLIENT_PORT ? Number(process.env.HMR_CLIENT_PORT) : undefined,
-        clientPort: 443,
+        protocol: process.env.HMR_PROTOCOL || undefined
-        protocol: 'wss'
+      } : undefined
-      }
     }
   },
   
@@ -139,7 +138,7 @@ export default defineNuxtConfig({
   // Runtime configuration
   runtimeConfig: {
     public: {
-      musicPath: '/music'
+      musicPath: process.env.NUXT_PUBLIC_MUSIC_PATH || '/music'
     }
   },
-})
+})

server/api/music/[filename].get.ts

@@ -16,18 +16,23 @@ export default defineEventHandler(async (event) => {
   const headers = getHeaders(event)
   const realIP = headers['x-real-ip'] || headers['x-forwarded-for'] || 'unknown'
   console.log(`[MUSIC API] Request from ${realIP} for file: ${filename}`)
+  console.log('Original filename bytes:', [...filename].map(c => c.charCodeAt(0)))
   
   // Decode the filename
   try {
     filename = decodeURIComponent(filename)
     console.log('Decoded filename:', filename)
+    console.log('Decoded filename bytes:', [...filename].map(c => c.charCodeAt(0)))
   } catch (error) {
     console.error('Error decoding filename:', error)
     // If decoding fails, use original filename
   }
   
   try {
-    const musicDir = join(process.cwd(), 'public', 'music')
+    const config = useRuntimeConfig()
+    const defaultPublicPath = config.public?.musicPath || '/music'
+    const publicRel = defaultPublicPath.replace(/^\//, '')
+    const musicDir = process.env.MUSIC_DIR || join(process.cwd(), 'public', publicRel)
     const filePath = join(musicDir, filename)
     
     // Security check: ensure the file is within the music directory
@@ -41,7 +46,16 @@ export default defineEventHandler(async (event) => {
     // Check if file exists
     try {
       await fs.access(filePath)
-    } catch {
+      console.log('File found successfully:', filePath)
+    } catch (error) {
+      console.log('File NOT found:', filePath)
+      console.log('Directory contents:')
+      try {
+        const files = await fs.readdir(musicDir)
+        files.forEach(file => console.log('  -', file))
+      } catch (e) {
+        console.log('Cannot read directory:', e)
+      }
       throw createError({
         statusCode: 404,
         statusMessage: 'File not found'
@@ -100,4 +114,4 @@ export default defineEventHandler(async (event) => {
       statusMessage: 'Failed to serve music file'
     })
   }
-})
+})

server/api/music/index.get.ts

@@ -8,7 +8,10 @@ export default defineEventHandler(async (event) => {
     const realIP = headers['x-real-ip'] || headers['x-forwarded-for'] || 'unknown'
     console.log(`[MUSIC API] Music list request from ${realIP}`)
     
-    const musicDir = join(process.cwd(), 'public', 'music')
+    const config = useRuntimeConfig()
+    const defaultPublicPath = config.public?.musicPath || '/music'
+    const publicRel = defaultPublicPath.replace(/^\//, '')
+    const musicDir = process.env.MUSIC_DIR || join(process.cwd(), 'public', publicRel)
     
     // Check if music directory exists
     try {
@@ -54,4 +57,4 @@ export default defineEventHandler(async (event) => {
       statusMessage: 'Failed to load music files'
     })
   }
-})
+})