Update script.js, settings.json; remove MOBILE_IMPROVEMENTS.md

MOBILE_IMPROVEMENTS.md

@@ -1,126 +0,0 @@
-# TechDJ Mobile Improvements Summary
-
-## Overview
-Comprehensive mobile optimization to make the TechDJ interface more compact, efficient, and user-friendly on mobile devices.
-
-## Key Improvements
-
-### 1. **Redesigned Mobile Tab Navigation**
-- **Full-width bottom bar**: Changed from floating pill design to full-width bottom bar
-- **More compact**: Reduced height from ~90px to 65px
-- **Better visual feedback**: Active tabs now have enhanced glow and slight elevation
-- **Improved spacing**: Tighter padding (6px 4px) for more tab buttons in same space
-- **Better touch targets**: Minimum 50px width per tab
-
-### 2. **Optimized Deck Layout**
-- **Reduced padding**: Deck padding reduced from 15px to 10px
-- **Compact disk**: Vinyl disk reduced from 180px to 140px (saves vertical space)
-- **Smaller disk label**: 50px instead of 60px
-- **Compact waveform**: Height reduced from 100px to 70px
-- **Better scrolling**: Decks now properly scroll within viewport
-
-### 3. **Improved Controls**
-- **Compact buttons**: All buttons optimized to 40px min-height (still touchable)
-- **Better spacing**: Reduced gaps from 8px to 6px throughout
-- **Optimized sliders**: Height reduced to 36px for better space usage
-- **Compact EQ/Volume faders**: Reduced from 220px to 120px height
-- **Better filter controls**: Full-width sliders with 8px height
-- **Compact pitch controls**: Smaller bend buttons (36px min-height)
-
-### 4. **Enhanced Library**
-- **Compact track rows**: Reduced padding from 12px to 10px
-- **Better text sizing**: Track names at 0.85rem (readable but compact)
-- **Optimized buttons**: Load buttons at 0.65rem with 36px min-height
-- **Horizontal header**: Search and refresh button side-by-side
-- **Better scrolling**: Custom thin scrollbars (6px width)
-
-### 5. **Improved Queue Sections**
-- **Compact layout**: Reduced padding from 20px to 12px
-- **Full height**: Queue sections now use calc(100vh - 65px)
-- **Smaller title**: 1.3rem instead of 1.5rem
-- **Compact items**: Queue items at 10px padding with 50px min-height
-- **Better buttons**: Queue action buttons at 36px min-height
-
-### 6. **Optimized Floating Buttons**
-- **Smaller size**: Reduced from 50px to 45px
-- **Better positioning**: Moved to 75px from bottom (above tabs)
-- **Tighter spacing**: Buttons closer together for easier reach
-- **Compact icons**: Font size reduced to 0.8rem
-
-### 7. **Better Visual Polish**
-- **Smooth scrolling**: Added webkit smooth scrolling for touch devices
-- **Custom scrollbars**: Thin (6px) cyan-themed scrollbars
-- **Better transitions**: Smoother tab switching with 0.2s transitions
-- **Enhanced active states**: Better visual feedback on active tabs
-
-### 8. **Space Savings**
-- **Reduced VU meters**: From 80px to 50px height on mobile
-- **Compact text**: Reduced font sizes across the board (0.6-0.95rem)
-- **Tighter margins**: Reduced margins from 8-10px to 4-6px
-- **Better use of space**: Overall ~30% more compact while maintaining usability
-
-## Mobile-Specific Features
-
-### Portrait Mode
-- Full-screen sections with bottom tab navigation
-- Optimized for one-handed use
-- Floating buttons positioned for thumb reach
-- Crossfader integrated with deck views
-
-### Landscape Mode
-- Side-by-side deck layout (unchanged, already optimized)
-- Full crossfader at bottom
-- Compact controls for maximum deck visibility
-
-## Technical Improvements
-
-### Performance
-- Reduced repaints with better CSS organization
-- Optimized transitions (0.2s instead of 0.3s)
-- Better scroll performance with webkit-overflow-scrolling
-
-### Touch Optimization
-- Minimum 40px touch targets (WCAG AA compliant)
-- Better tap feedback with transform animations
-- Optimized slider thumb sizes (28px)
-
-### Visual Consistency
-- Consistent spacing (6px, 10px, 12px scale)
-- Unified font sizing (0.6rem to 0.95rem range)
-- Better color contrast for readability
-
-## Before vs After Metrics
-
-| Metric | Before | After | Improvement |
-|--------|--------|-------|-------------|
-| Tab bar height | ~90px | 65px | 28% smaller |
-| Deck padding | 15px | 10px | 33% reduction |
-| Disk size | 180px | 140px | 22% smaller |
-| Waveform height | 100px | 70px | 30% smaller |
-| Button min-height | 44px | 40px | 9% smaller |
-| Control gaps | 8px | 6px | 25% tighter |
-| Overall vertical space | ~100% | ~70% | 30% more compact |
-
-## User Experience Benefits
-
-1. **More content visible**: ~30% more content fits on screen
-2. **Less scrolling needed**: Compact layout reduces need to scroll
-3. **Faster navigation**: Tighter spacing means less finger movement
-4. **Better one-handed use**: Optimized button positions
-5. **Cleaner interface**: Less wasted space, more focused design
-6. **Maintained usability**: Still meets accessibility guidelines
-
-## Browser Compatibility
-
-- ✅ iOS Safari (webkit optimizations)
-- ✅ Android Chrome (webkit optimizations)
-- ✅ Mobile Firefox (fallback scrollbars)
-- ✅ All modern mobile browsers
-
-## Notes
-
-- All changes maintain minimum 40px touch targets for accessibility
-- Font sizes remain readable (minimum 0.6rem = ~9.6px on most devices)
-- Scrollbars are thin but still visible and usable
-- Active states provide clear visual feedback
-- Smooth animations enhance perceived performance

script.js

@@ -335,7 +335,19 @@ function initDropZones() {
                 queueEl.classList.remove('drag-over');
                 const file = e.dataTransfer.getData('trackFile');
                 const title = e.dataTransfer.getData('trackTitle');
-                if (file && title) {
+                const fromDeck = e.dataTransfer.getData('queueDeck');
+                const fromIndex = e.dataTransfer.getData('queueIndex');
+
+                if (fromDeck && fromDeck !== id && fromIndex !== "") {
+                    // Move from another queue
+                    const idx = parseInt(fromIndex);
+                    const [movedItem] = queues[fromDeck].splice(idx, 1);
+                    queues[id].push(movedItem);
+                    renderQueue(fromDeck);
+                    renderQueue(id);
+                    console.log(`Moved track from Queue ${fromDeck} to end of Queue ${id}: ${movedItem.title}`);
+                } else if (file && title) {
+                    // Add from library (or re-append from same queue - which is essentially a no-op move to end)
                     console.log(`Dropped track into Queue ${id}: ${title}`);
                     addToQueue(id, file, title);
                 }
@@ -2722,11 +2734,14 @@ function renderQueue(deckId) {
                     removeFromQueue(deckId, index);
                 };
 
-                // Drag and drop reordering
+                // Drag and drop reordering / moving
                 item.ondragstart = (e) => {
                     e.dataTransfer.effectAllowed = 'move';
                     e.dataTransfer.setData('queueIndex', index);
                     e.dataTransfer.setData('queueDeck', deckId);
+                    // Also set track data so it can be dropped as a generic track
+                    e.dataTransfer.setData('trackFile', track.file);
+                    e.dataTransfer.setData('trackTitle', track.title);
                     item.classList.add('dragging');
                 };
 
@@ -2741,13 +2756,30 @@ function renderQueue(deckId) {
 
                 item.ondrop = (e) => {
                     e.preventDefault();
-                    const fromIndex = parseInt(e.dataTransfer.getData('queueIndex'));
+                    const fromIndex = e.dataTransfer.getData('queueIndex');
                     const fromDeck = e.dataTransfer.getData('queueDeck');
+                    const trackFile = e.dataTransfer.getData('trackFile');
+                    const trackTitle = e.dataTransfer.getData('trackTitle');
 
-                    if (fromDeck === deckId && fromIndex !== index) {
+                    if (fromDeck !== "" && fromIndex !== "") {
-                        const [movedItem] = queues[deckId].splice(fromIndex, 1);
+                        // Move from a queue (same or different)
-                        queues[deckId].splice(index, 0, movedItem);
+                        const srcIdx = parseInt(fromIndex);
+                        const [movedItem] = queues[fromDeck].splice(srcIdx, 1);
+                        
+                        // If same deck and after removal index changes, adjust target index if needed?
+                        // Actually splice(index, 0, item) works fine if we handle same deck carefully.
+                        let targetIdx = index;
+                        
+                        queues[deckId].splice(targetIdx, 0, movedItem);
+                        
                         renderQueue(deckId);
+                        if (fromDeck !== deckId) renderQueue(fromDeck);
+                        console.log(`Moved track from Queue ${fromDeck} to Queue ${deckId} at index ${targetIdx}`);
+                    } else if (trackFile && trackTitle) {
+                        // Drop from library into middle of queue
+                        queues[deckId].splice(index, 0, { file: trackFile, title: trackTitle });
+                        renderQueue(deckId);
+                        console.log(`Inserted library track into Queue ${deckId} at index ${index}: ${trackTitle}`);
                     }
                 };
 

settings.json

@@ -10,7 +10,7 @@
     "audio": {
         "recording_sample_rate": 48000,
         "recording_format": "wav",
-        "stream_server_url": "http://54.37.246.24:5000"
+        "stream_server_url": "http://54.37.246.24:5001/"
     },
     "ui": {
         "neon_mode": 2