Improve mini-player and add periodic sync

- Redesign mini-player: progress bar on top, centered controls
- Add vertical volume slider with popup on hover
- Add volume percentage display
- Add custom speaker SVG icons
- Add periodic sync every 10 seconds for playback synchronization
- Broadcast user_joined when connecting via WebSocket
- Disable nginx proxy buffering for streaming
- Allow extra env variables in pydantic settings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

backend/app/routers/tracks.py

@@ -203,6 +203,8 @@ async def stream_track(track_id: uuid.UUID, request: Request, db: AsyncSession =
                 "Accept-Ranges": "bytes",
                 "Content-Length": str(content_length),
                 "Content-Disposition": f"inline; filename*=UTF-8''{encoded_filename}",
+                "X-Accel-Buffering": "no",
+                "Cache-Control": "no-cache",
             }
         )
 
@@ -214,5 +216,7 @@ async def stream_track(track_id: uuid.UUID, request: Request, db: AsyncSession =
             "Accept-Ranges": "bytes",
             "Content-Length": str(file_size),
             "Content-Disposition": f"inline; filename*=UTF-8''{encoded_filename}",
+            "X-Accel-Buffering": "no",
+            "Cache-Control": "no-cache",
         }
     )

backend/app/routers/websocket.py

@@ -46,6 +46,13 @@ async def room_websocket(websocket: WebSocket, room_id: UUID):
 
     await manager.connect(websocket, room_id, user.id)
 
+    # Notify others that user joined
+    await manager.broadcast_to_room(
+        room_id,
+        {"type": "user_joined", "user": {"id": str(user.id), "username": user.username}},
+        exclude_user=user.id
+    )
+
     try:
         while True:
             data = await websocket.receive_text()