Update script.js, settings.json; remove MOBILE_IMPROVEMENTS.md
This commit is contained in:
parent
eb3e66ba61
commit
d2e6e2a7d7
|
|
@ -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
|
||||
44
script.js
44
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}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue