diff --git a/MOBILE_IMPROVEMENTS.md b/MOBILE_IMPROVEMENTS.md deleted file mode 100644 index 734c665..0000000 --- a/MOBILE_IMPROVEMENTS.md +++ /dev/null @@ -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 diff --git a/script.js b/script.js index 117832b..2d3d3c5 100644 --- a/script.js +++ b/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) { - const [movedItem] = queues[deckId].splice(fromIndex, 1); - queues[deckId].splice(index, 0, movedItem); + if (fromDeck !== "" && fromIndex !== "") { + // Move from a queue (same or different) + 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}`); } }; diff --git a/settings.json b/settings.json index b797fd8..1ce10d5 100644 --- a/settings.json +++ b/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