3185 lines
112 KiB
JavaScript
3185 lines
112 KiB
JavaScript
// ==========================================
|
||
// TechDJ Pro - Core DJ Logic
|
||
// ==========================================
|
||
|
||
|
||
let audioCtx;
|
||
const decks = {
|
||
A: {
|
||
type: 'local',
|
||
playing: false,
|
||
pausedAt: 0,
|
||
duration: 0,
|
||
localBuffer: null,
|
||
localSource: null,
|
||
gainNode: null,
|
||
volumeGain: null,
|
||
crossfaderGain: null,
|
||
filters: {},
|
||
cues: {},
|
||
loopStart: null,
|
||
loopEnd: null,
|
||
loopActive: false,
|
||
activeAutoLoop: null,
|
||
waveformData: null,
|
||
lastAnchorTime: 0,
|
||
lastAnchorPosition: 0,
|
||
loading: false,
|
||
currentFile: null,
|
||
lastSeekTime: 0
|
||
},
|
||
B: {
|
||
type: 'local',
|
||
playing: false,
|
||
pausedAt: 0,
|
||
duration: 0,
|
||
localBuffer: null,
|
||
localSource: null,
|
||
gainNode: null,
|
||
volumeGain: null,
|
||
crossfaderGain: null,
|
||
filters: {},
|
||
cues: {},
|
||
loopStart: null,
|
||
loopEnd: null,
|
||
loopActive: false,
|
||
activeAutoLoop: null,
|
||
waveformData: null,
|
||
lastAnchorTime: 0,
|
||
lastAnchorPosition: 0,
|
||
loading: false,
|
||
currentFile: null,
|
||
lastSeekTime: 0
|
||
}
|
||
};
|
||
|
||
let allSongs = [];
|
||
const settings = {
|
||
repeatA: false,
|
||
repeatB: false,
|
||
autoMix: false,
|
||
shuffleMode: false,
|
||
quantize: false,
|
||
autoPlay: true,
|
||
glowA: false,
|
||
glowB: false,
|
||
glowIntensity: 30
|
||
};
|
||
|
||
// Queue system for both decks
|
||
const queues = {
|
||
A: [],
|
||
B: []
|
||
};
|
||
|
||
// Toast Notification System
|
||
function showToast(message, type) {
|
||
type = type || 'info';
|
||
const container = document.getElementById('toast-container');
|
||
if (!container) return;
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast toast-' + type;
|
||
toast.textContent = message;
|
||
container.appendChild(toast);
|
||
setTimeout(function() {
|
||
if (toast.parentNode) toast.parentNode.removeChild(toast);
|
||
}, 4000);
|
||
}
|
||
|
||
// Settings Persistence
|
||
function saveSettings() {
|
||
try {
|
||
localStorage.setItem('techdj_settings', JSON.stringify(settings));
|
||
} catch (e) { /* quota exceeded or private browsing */ }
|
||
}
|
||
|
||
function loadSettings() {
|
||
try {
|
||
var saved = localStorage.getItem('techdj_settings');
|
||
if (saved) {
|
||
var parsed = JSON.parse(saved);
|
||
Object.keys(parsed).forEach(function(key) {
|
||
if (settings.hasOwnProperty(key)) settings[key] = parsed[key];
|
||
});
|
||
}
|
||
} catch (e) { /* corrupt data, ignore */ }
|
||
}
|
||
|
||
// Restore saved settings on load
|
||
loadSettings();
|
||
|
||
// System Initialization
|
||
function initSystem() {
|
||
if (audioCtx) return;
|
||
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||
document.getElementById('start-overlay').style.display = 'none';
|
||
|
||
// Track dragging state per deck
|
||
const draggingState = { A: false, B: false };
|
||
|
||
// Setup audio path for both decks
|
||
['A', 'B'].forEach(id => {
|
||
// Create separate volume and crossfader gain nodes
|
||
const volumeGain = audioCtx.createGain();
|
||
const crossfaderGain = audioCtx.createGain();
|
||
const analyser = audioCtx.createAnalyser();
|
||
analyser.fftSize = 256;
|
||
|
||
const low = audioCtx.createBiquadFilter();
|
||
const mid = audioCtx.createBiquadFilter();
|
||
const high = audioCtx.createBiquadFilter();
|
||
const lp = audioCtx.createBiquadFilter();
|
||
const hp = audioCtx.createBiquadFilter();
|
||
|
||
low.type = 'lowshelf'; low.frequency.value = 320;
|
||
mid.type = 'peaking'; mid.frequency.value = 1000; mid.Q.value = 1;
|
||
high.type = 'highshelf'; high.frequency.value = 3200;
|
||
lp.type = 'lowpass'; lp.frequency.value = 22050; // default fully open
|
||
hp.type = 'highpass'; hp.frequency.value = 0; // default fully open
|
||
|
||
// Connect: Filters -> Volume -> Analyser -> Crossfader -> Destination
|
||
low.connect(mid);
|
||
mid.connect(high);
|
||
high.connect(lp);
|
||
lp.connect(hp);
|
||
hp.connect(volumeGain);
|
||
volumeGain.connect(analyser);
|
||
analyser.connect(crossfaderGain);
|
||
crossfaderGain.connect(audioCtx.destination);
|
||
|
||
// Set default values
|
||
volumeGain.gain.value = 0.8; // 80% volume
|
||
// Crossfader: A=1.0 at left (val=0), B=1.0 at right (val=100), both 0.5 at center (val=50)
|
||
crossfaderGain.gain.value = id === 'A' ? 0.5 : 0.5; // Center position initially
|
||
|
||
decks[id].volumeGain = volumeGain;
|
||
decks[id].crossfaderGain = crossfaderGain;
|
||
decks[id].gainNode = volumeGain; // Keep for compatibility
|
||
decks[id].analyser = analyser;
|
||
decks[id].filters = { low, mid, high, lp, hp };
|
||
|
||
// Set canvas dimensions properly with DPI scaling
|
||
const canvas = document.getElementById('waveform-' + id);
|
||
const dpr = window.devicePixelRatio || 1;
|
||
canvas.width = canvas.offsetWidth * dpr;
|
||
canvas.height = 80 * dpr;
|
||
|
||
// Scale context to match DPI (reset transform first to prevent stacking)
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset to identity matrix
|
||
ctx.scale(dpr, dpr);
|
||
|
||
// Waveform Scrubbing (Dragging to Seek)
|
||
const handleScrub = (e) => {
|
||
if (!decks[id].duration) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left;
|
||
const percent = Math.max(0, Math.min(1, x / rect.width));
|
||
seekTo(id, percent * decks[id].duration);
|
||
};
|
||
|
||
canvas.addEventListener('mousedown', (e) => {
|
||
draggingState[id] = true;
|
||
handleScrub(e);
|
||
});
|
||
|
||
canvas.addEventListener('mousemove', (e) => {
|
||
if (draggingState[id]) handleScrub(e);
|
||
});
|
||
|
||
canvas.addEventListener('mouseup', () => {
|
||
draggingState[id] = false;
|
||
});
|
||
|
||
canvas.addEventListener('mouseleave', () => {
|
||
draggingState[id] = false;
|
||
});
|
||
|
||
// Mobile Touch Support
|
||
canvas.addEventListener('touchstart', (e) => {
|
||
draggingState[id] = true;
|
||
handleScrub(e);
|
||
e.preventDefault();
|
||
}, { passive: false });
|
||
|
||
canvas.addEventListener('touchmove', (e) => {
|
||
if (draggingState[id]) {
|
||
handleScrub(e);
|
||
e.preventDefault();
|
||
}
|
||
}, { passive: false });
|
||
|
||
canvas.addEventListener('touchend', () => {
|
||
draggingState[id] = false;
|
||
});
|
||
|
||
// Disk Scrubbing (Dragging on the Disk)
|
||
const disk = document.querySelector(`#deck-${id} .dj-disk`);
|
||
let isDiskDragging = false;
|
||
|
||
disk.addEventListener('mousedown', (e) => {
|
||
isDiskDragging = true;
|
||
e.stopPropagation(); // Don't trigger the click/toggleDeck if we're dragging
|
||
});
|
||
|
||
disk.addEventListener('mousemove', (e) => {
|
||
if (isDiskDragging && decks[id].playing) {
|
||
// Scrub based on vertical movement
|
||
const movement = e.movementY || 0;
|
||
const currentPos = getCurrentPosition(id);
|
||
const newPos = Math.max(0, Math.min(decks[id].duration, currentPos + movement * 0.1));
|
||
seekTo(id, newPos);
|
||
}
|
||
});
|
||
|
||
disk.addEventListener('mouseup', () => {
|
||
isDiskDragging = false;
|
||
});
|
||
|
||
disk.addEventListener('mouseleave', () => {
|
||
isDiskDragging = false;
|
||
});
|
||
|
||
disk.addEventListener('touchstart', (e) => {
|
||
isDiskDragging = true;
|
||
e.stopPropagation();
|
||
}, { passive: false });
|
||
|
||
disk.addEventListener('touchmove', (e) => {
|
||
if (isDiskDragging && decks[id].playing && e.touches[0]) {
|
||
const movement = e.touches[0].clientY - (disk._lastTouchY || e.touches[0].clientY);
|
||
disk._lastTouchY = e.touches[0].clientY;
|
||
const currentPos = getCurrentPosition(id);
|
||
const newPos = Math.max(0, Math.min(decks[id].duration, currentPos + movement * 0.1));
|
||
seekTo(id, newPos);
|
||
}
|
||
}, { passive: false });
|
||
|
||
disk.addEventListener('touchend', () => {
|
||
isDiskDragging = false;
|
||
delete disk._lastTouchY;
|
||
});
|
||
|
||
// Handle click for toggle (only if not scrubbing)
|
||
disk.addEventListener('click', (e) => {
|
||
if (!isDiskDragging) {
|
||
toggleDeck(id);
|
||
}
|
||
});
|
||
});
|
||
|
||
fetchLibrary();
|
||
updateTimeDisplays();
|
||
animateVUMeters(); // Start VU meter animation
|
||
|
||
// Handle resize for DPI scaling
|
||
window.addEventListener('resize', () => {
|
||
['A', 'B'].forEach(id => {
|
||
const canvas = document.getElementById('waveform-' + id);
|
||
if (!canvas) return;
|
||
const dpr = window.devicePixelRatio || 1;
|
||
canvas.width = canvas.offsetWidth * dpr;
|
||
canvas.height = 80 * dpr;
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||
ctx.scale(dpr, dpr);
|
||
drawWaveform(id);
|
||
});
|
||
});
|
||
|
||
// Initialise mobile view
|
||
if (window.innerWidth <= 1024) {
|
||
switchTab('library');
|
||
}
|
||
|
||
initDropZones();
|
||
}
|
||
|
||
function initDropZones() {
|
||
['A', 'B'].forEach(id => {
|
||
const deckEl = document.getElementById(`deck-${id}`);
|
||
const queueEl = document.getElementById(`deck-queue-list-${id}`);
|
||
|
||
// Deck Drop Zone (Load Track)
|
||
if (deckEl) {
|
||
deckEl.ondragover = (e) => {
|
||
e.preventDefault();
|
||
deckEl.classList.add('drag-over');
|
||
};
|
||
deckEl.ondragleave = () => {
|
||
deckEl.classList.remove('drag-over');
|
||
};
|
||
deckEl.ondrop = (e) => {
|
||
e.preventDefault();
|
||
deckEl.classList.remove('drag-over');
|
||
const file = e.dataTransfer.getData('trackFile');
|
||
const title = e.dataTransfer.getData('trackTitle');
|
||
if (file && title) {
|
||
console.log(`Dropped track onto Deck ${id}: ${title}`);
|
||
loadFromServer(id, file, title);
|
||
}
|
||
};
|
||
}
|
||
|
||
// Queue Drop Zone (Add to Queue)
|
||
if (queueEl) {
|
||
queueEl.ondragover = (e) => {
|
||
e.preventDefault();
|
||
queueEl.classList.add('drag-over');
|
||
};
|
||
queueEl.ondragleave = () => {
|
||
queueEl.classList.remove('drag-over');
|
||
};
|
||
queueEl.ondrop = (e) => {
|
||
e.preventDefault();
|
||
queueEl.classList.remove('drag-over');
|
||
const file = e.dataTransfer.getData('trackFile');
|
||
const title = e.dataTransfer.getData('trackTitle');
|
||
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);
|
||
}
|
||
};
|
||
}
|
||
});
|
||
}
|
||
|
||
// VU Meter Animation with smoothing
|
||
const vuMeterState = {
|
||
A: { smoothedValues: [], peakValues: [] },
|
||
B: { smoothedValues: [], peakValues: [] }
|
||
};
|
||
|
||
function animateVUMeters() {
|
||
requestAnimationFrame(animateVUMeters);
|
||
|
||
const anyPlaying = decks.A.playing || decks.B.playing;
|
||
const isListener = window.location.port === '5001' || window.location.search.includes('listen=true');
|
||
|
||
// When nothing is playing, clear canvases to transparent so they don't show as dark blocks
|
||
if (!anyPlaying && !isListener) {
|
||
['A', 'B'].forEach(id => {
|
||
const canvas = document.getElementById('viz-' + id);
|
||
if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
|
||
});
|
||
return;
|
||
}
|
||
|
||
['A', 'B'].forEach(id => {
|
||
const canvas = document.getElementById('viz-' + id);
|
||
if (!canvas || !decks[id].analyser) return;
|
||
|
||
const ctx = canvas.getContext('2d');
|
||
const analyser = decks[id].analyser;
|
||
const bufferLength = analyser.frequencyBinCount;
|
||
const dataArray = new Uint8Array(bufferLength);
|
||
|
||
analyser.getByteFrequencyData(dataArray);
|
||
|
||
const width = canvas.width;
|
||
const height = canvas.height;
|
||
const barCount = 32;
|
||
const barWidth = width / barCount;
|
||
|
||
// Initialise smoothed values if needed
|
||
if (!vuMeterState[id].smoothedValues.length) {
|
||
vuMeterState[id].smoothedValues = new Array(barCount).fill(0);
|
||
vuMeterState[id].peakValues = new Array(barCount).fill(0);
|
||
}
|
||
|
||
ctx.fillStyle = '#0a0a12';
|
||
ctx.fillRect(0, 0, width, height);
|
||
|
||
for (let i = 0; i < barCount; i++) {
|
||
// Use logarithmic frequency distribution for better bass/mid/treble representation
|
||
const freqIndex = Math.floor(Math.pow(i / barCount, 1.5) * bufferLength);
|
||
const rawValue = dataArray[freqIndex] / 255;
|
||
|
||
// Smooth the values for less jittery animation
|
||
const smoothingFactor = 0.7; // Higher = smoother but less responsive
|
||
const targetValue = rawValue;
|
||
vuMeterState[id].smoothedValues[i] =
|
||
(vuMeterState[id].smoothedValues[i] * smoothingFactor) +
|
||
(targetValue * (1 - smoothingFactor));
|
||
|
||
const value = vuMeterState[id].smoothedValues[i];
|
||
const barHeight = value * height;
|
||
|
||
// Peak hold with decay
|
||
if (value > vuMeterState[id].peakValues[i]) {
|
||
vuMeterState[id].peakValues[i] = value;
|
||
} else {
|
||
vuMeterState[id].peakValues[i] *= 0.95; // Decay rate
|
||
}
|
||
|
||
// Draw main bar with gradient
|
||
const hue = id === 'A' ? 180 : 280; // Cyan for A, Magenta for B
|
||
const saturation = 100;
|
||
const lightness = 30 + (value * 50);
|
||
|
||
// Create gradient for each bar
|
||
const gradient = ctx.createLinearGradient(0, height, 0, height - barHeight);
|
||
gradient.addColorStop(0, `hsl(${hue}, ${saturation}%, ${lightness}%)`);
|
||
gradient.addColorStop(1, `hsl(${hue}, ${saturation}%, ${Math.min(lightness + 20, 80)}%)`);
|
||
|
||
ctx.fillStyle = gradient;
|
||
ctx.fillRect(i * barWidth, height - barHeight, barWidth - 2, barHeight);
|
||
|
||
// Draw peak indicator
|
||
const peakY = height - (vuMeterState[id].peakValues[i] * height);
|
||
ctx.fillStyle = `hsl(${hue}, 100%, 70%)`;
|
||
ctx.fillRect(i * barWidth, peakY - 2, barWidth - 2, 2);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Play/Pause Toggle for Disk
|
||
function toggleDeck(id) {
|
||
if (decks[id].playing) {
|
||
pauseDeck(id);
|
||
} else {
|
||
playDeck(id);
|
||
}
|
||
}
|
||
|
||
// Mobile Tab Switching
|
||
let currentQueueTab = 'A'; // Track which queue is shown
|
||
|
||
function switchTab(tabId) {
|
||
const container = document.querySelector('.app-container');
|
||
const buttons = document.querySelectorAll('.tab-btn');
|
||
const sections = document.querySelectorAll('.library-section, .deck, .queue-section');
|
||
|
||
// Remove all tab and active classes
|
||
container.classList.remove('show-library', 'show-deck-A', 'show-deck-B', 'show-queue-A', 'show-queue-B');
|
||
buttons.forEach(btn => btn.classList.remove('active'));
|
||
sections.forEach(sec => sec.classList.remove('active'));
|
||
|
||
// Add active class and button state
|
||
container.classList.add('show-' + tabId);
|
||
|
||
// Activate target section
|
||
const targetSection = document.getElementById(tabId) || document.querySelector('.' + tabId + '-section');
|
||
if (targetSection) targetSection.classList.add('active');
|
||
|
||
// Find the button and activate it
|
||
buttons.forEach(btn => {
|
||
const onClickAttr = btn.getAttribute('onclick');
|
||
if (onClickAttr && (onClickAttr.includes(tabId) || (tabId.startsWith('queue') && onClickAttr.includes('switchQueueTab')))) {
|
||
btn.classList.add('active');
|
||
}
|
||
});
|
||
|
||
// Update queue tab label to reflect which queue is showing
|
||
if (tabId.startsWith('queue')) {
|
||
currentQueueTab = tabId.includes('A') ? 'A' : 'B';
|
||
const label = document.getElementById('queue-tab-label');
|
||
if (label) label.textContent = 'QUEUE ' + currentQueueTab;
|
||
}
|
||
|
||
// Redraw waveforms if switching to a deck
|
||
if (tabId.startsWith('deck')) {
|
||
const id = tabId.includes('-') ? tabId.split('-')[1] : (tabId.includes('A') ? 'A' : 'B');
|
||
setTimeout(() => drawWaveform(id), 100);
|
||
}
|
||
|
||
// Haptic feedback
|
||
vibrate(10);
|
||
}
|
||
|
||
// Queue tab cycles between Queue A and Queue B
|
||
function switchQueueTab() {
|
||
const container = document.querySelector('.app-container');
|
||
const isQueueActive = container.classList.contains('show-queue-A') || container.classList.contains('show-queue-B');
|
||
|
||
if (!isQueueActive) {
|
||
// First tap: show current queue
|
||
switchTab('queue-' + currentQueueTab);
|
||
} else {
|
||
// Already on a queue tab: toggle between A and B
|
||
const nextQueue = currentQueueTab === 'A' ? 'B' : 'A';
|
||
switchTab('queue-' + nextQueue);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// Mobile Haptic Helper
|
||
function vibrate(ms) {
|
||
if (navigator.vibrate) {
|
||
navigator.vibrate(ms);
|
||
}
|
||
}
|
||
|
||
// Mobile FAB Menu Toggle
|
||
function toggleFabMenu(e) {
|
||
if (e) e.stopPropagation();
|
||
const menu = document.getElementById('fab-menu');
|
||
const fab = document.querySelector('.fab-main');
|
||
if (menu) menu.classList.toggle('active');
|
||
if (fab) fab.classList.toggle('active');
|
||
vibrate(10);
|
||
}
|
||
|
||
// Close menu when clicking outside
|
||
document.addEventListener('click', () => {
|
||
const menu = document.getElementById('fab-menu');
|
||
const fab = document.querySelector('.fab-main');
|
||
if (menu && menu.classList.contains('active')) {
|
||
menu.classList.remove('active');
|
||
fab.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// Update Clock
|
||
setInterval(() => {
|
||
const clock = document.getElementById('clock-display');
|
||
if (clock) {
|
||
const now = new Date();
|
||
clock.textContent = now.getHours().toString().padStart(2, '0') + ':' +
|
||
now.getMinutes().toString().padStart(2, '0');
|
||
}
|
||
}, 1000);
|
||
|
||
// Fullscreen Toggle
|
||
function toggleFullScreen() {
|
||
if (!document.fullscreenElement) {
|
||
document.documentElement.requestFullscreen().catch(err => {
|
||
console.error(`Error attempting to enable full-screen mode: ${err.message}`);
|
||
});
|
||
document.getElementById('fullscreen-toggle').classList.add('active');
|
||
} else {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
}
|
||
document.getElementById('fullscreen-toggle').classList.remove('active');
|
||
}
|
||
vibrate(20);
|
||
}
|
||
|
||
// Touch Swiping Logic
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
document.addEventListener('touchstart', e => {
|
||
touchStartX = e.changedTouches[0].screenX;
|
||
}, false);
|
||
|
||
document.addEventListener('touchend', e => {
|
||
touchEndX = e.changedTouches[0].screenX;
|
||
handleSwipe();
|
||
}, false);
|
||
|
||
function handleSwipe() {
|
||
const threshold = 100;
|
||
const swipeDistance = touchEndX - touchStartX;
|
||
|
||
// Get current tab
|
||
const activeBtn = document.querySelector('.tab-btn.active');
|
||
if (!activeBtn) return;
|
||
|
||
const tabs = ['library', 'deck-A', 'deck-B', 'queue-A', 'queue-B'];
|
||
let currentIndex = -1;
|
||
|
||
const onClickAttr = activeBtn.getAttribute('onclick') || '';
|
||
if (onClickAttr.includes('library')) currentIndex = 0;
|
||
else if (onClickAttr.includes('deck-A')) currentIndex = 1;
|
||
else if (onClickAttr.includes('deck-B')) currentIndex = 2;
|
||
else if (onClickAttr.includes('switchQueueTab')) {
|
||
// Determine which queue is active
|
||
const container = document.querySelector('.app-container');
|
||
currentIndex = container.classList.contains('show-queue-B') ? 4 : 3;
|
||
}
|
||
|
||
if (currentIndex === -1) return;
|
||
|
||
if (swipeDistance > threshold) {
|
||
// Swipe Right (Go Left)
|
||
if (currentIndex > 0) switchTab(tabs[currentIndex - 1]);
|
||
} else if (swipeDistance < -threshold) {
|
||
// Swipe Left (Go Right)
|
||
if (currentIndex < tabs.length - 1) switchTab(tabs[currentIndex + 1]);
|
||
}
|
||
}
|
||
|
||
// Waveform Generation (Optimised for Speed)
|
||
function generateWaveformData(buffer) {
|
||
const rawData = buffer.getChannelData(0);
|
||
const samples = 1000;
|
||
const blockSize = Math.floor(rawData.length / samples);
|
||
// Only process a subset of samples for huge speed gain
|
||
const step = Math.max(1, Math.floor(blockSize / 20));
|
||
const filteredData = [];
|
||
|
||
for (let i = 0; i < samples; i++) {
|
||
let blockStart = blockSize * i;
|
||
let sum = 0;
|
||
let count = 0;
|
||
for (let j = 0; j < blockSize; j += step) {
|
||
const index = blockStart + j;
|
||
// Bounds check to prevent NaN values
|
||
if (index < rawData.length) {
|
||
sum += Math.abs(rawData[index]);
|
||
count++;
|
||
}
|
||
}
|
||
filteredData.push(sum / (count || 1));
|
||
}
|
||
return filteredData;
|
||
}
|
||
|
||
// Debounce guard: prevents redundant redraws within the same frame
|
||
const _waveformPending = { A: false, B: false };
|
||
|
||
function drawWaveform(id) {
|
||
if (_waveformPending[id]) return;
|
||
_waveformPending[id] = true;
|
||
requestAnimationFrame(() => {
|
||
_waveformPending[id] = false;
|
||
_drawWaveformImmediate(id);
|
||
});
|
||
}
|
||
|
||
function _drawWaveformImmediate(id) {
|
||
const canvas = document.getElementById('waveform-' + id);
|
||
if (!canvas) return;
|
||
const ctx = canvas.getContext('2d');
|
||
const data = decks[id].waveformData;
|
||
if (!data) return;
|
||
|
||
// Use logical (CSS) dimensions — the canvas context has ctx.scale(dpr)
|
||
// applied in initSystem, so coordinates must be in logical pixels.
|
||
const dpr = window.devicePixelRatio || 1;
|
||
const width = canvas.width / dpr;
|
||
const height = canvas.height / dpr;
|
||
|
||
ctx.clearRect(0, 0, width, height);
|
||
const barWidth = width / data.length;
|
||
|
||
data.forEach((val, i) => {
|
||
const h = val * height * 5;
|
||
ctx.fillStyle = id === 'A' ? '#00f3ff' : '#bc13fe';
|
||
ctx.fillRect(i * barWidth, (height - h) / 2, barWidth, h);
|
||
});
|
||
|
||
// Draw Cues
|
||
if (decks[id].duration > 0) {
|
||
Object.values(decks[id].cues).forEach(time => {
|
||
const x = (time / decks[id].duration) * width;
|
||
ctx.strokeStyle = '#fff';
|
||
ctx.lineWidth = 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, 0);
|
||
ctx.lineTo(x, height);
|
||
ctx.stroke();
|
||
});
|
||
}
|
||
|
||
// Draw Loop Markers
|
||
if (decks[id].loopStart !== null && decks[id].duration > 0) {
|
||
const xIn = (decks[id].loopStart / decks[id].duration) * width;
|
||
ctx.strokeStyle = '#ffbb00';
|
||
ctx.lineWidth = 2;
|
||
ctx.setLineDash([5, 3]);
|
||
ctx.beginPath();
|
||
ctx.moveTo(xIn, 0);
|
||
ctx.lineTo(xIn, height);
|
||
ctx.stroke();
|
||
|
||
if (decks[id].loopActive && decks[id].loopEnd !== null) {
|
||
const xOut = (decks[id].loopEnd / decks[id].duration) * width;
|
||
ctx.strokeStyle = '#ffaa33';
|
||
ctx.beginPath();
|
||
ctx.moveTo(xOut, 0);
|
||
ctx.lineTo(xOut, height);
|
||
ctx.stroke();
|
||
|
||
// Shade loop area
|
||
ctx.fillStyle = 'rgba(255, 187, 0, 0.15)';
|
||
ctx.fillRect(xIn, 0, xOut - xIn, height);
|
||
}
|
||
ctx.setLineDash([]);
|
||
}
|
||
|
||
// Apply manual glow if enabled
|
||
if (settings[`glow${id}`] && !decks[id].playing) {
|
||
applyGlow(id, settings.glowIntensity);
|
||
} else {
|
||
removeGlow(id);
|
||
}
|
||
}
|
||
|
||
function applyGlow(id, intensity) {
|
||
const deckEl = document.getElementById('deck-' + id);
|
||
if (!deckEl) return;
|
||
const color = id === 'A' ? 'var(--primary-cyan)' : 'var(--secondary-magenta)';
|
||
const blur = Math.max(10, intensity);
|
||
const spread = Math.max(2, intensity / 5);
|
||
deckEl.style.boxShadow = `inset 0 0 ${blur}px ${spread}px ${color}`;
|
||
}
|
||
|
||
function removeGlow(id) {
|
||
const deckEl = document.getElementById('deck-' + id);
|
||
if (deckEl) deckEl.style.boxShadow = '';
|
||
}
|
||
|
||
// BPM Detection (Optimised: Only check middle 60 seconds for speed)
|
||
function detectBPM(buffer) {
|
||
const sampleRate = buffer.sampleRate;
|
||
const duration = buffer.duration;
|
||
|
||
// Pick a 60s window in the middle
|
||
const startOffset = Math.max(0, Math.floor((duration / 2 - 30) * sampleRate));
|
||
const endOffset = Math.min(buffer.length, Math.floor((duration / 2 + 30) * sampleRate));
|
||
const data = buffer.getChannelData(0).slice(startOffset, endOffset);
|
||
|
||
const bpmRange = [60, 180];
|
||
const windowSize = Math.floor(sampleRate * 60 / bpmRange[1]);
|
||
|
||
let peaks = 0;
|
||
let threshold = 0;
|
||
for (let i = 0; i < data.length; i += windowSize) {
|
||
const slice = data.slice(i, i + windowSize);
|
||
const avg = slice.reduce((a, b) => a + Math.abs(b), 0) / slice.length;
|
||
if (avg > threshold) {
|
||
peaks++;
|
||
threshold = avg * 0.8;
|
||
}
|
||
}
|
||
|
||
const windowDuration = data.length / sampleRate;
|
||
const bpm = Math.round((peaks / windowDuration) * 60);
|
||
return bpm > bpmRange[0] && bpm < bpmRange[1] ? bpm : 0;
|
||
}
|
||
|
||
// Time Display Updates
|
||
function updateTimeDisplays() {
|
||
requestAnimationFrame(updateTimeDisplays);
|
||
|
||
// Only update if at least one deck is playing
|
||
const anyPlaying = decks.A.playing || decks.B.playing;
|
||
if (!anyPlaying) return;
|
||
|
||
['A', 'B'].forEach(id => {
|
||
if (decks[id].playing && decks[id].localBuffer) {
|
||
const playbackRate = decks[id].localSource ? decks[id].localSource.playbackRate.value : 1.0;
|
||
const realElapsed = audioCtx.currentTime - decks[id].lastAnchorTime;
|
||
let current = decks[id].lastAnchorPosition + (realElapsed * playbackRate);
|
||
|
||
// Handle Looping wrapping for UI
|
||
if (decks[id].loopActive && decks[id].loopStart !== null && decks[id].loopEnd !== null) {
|
||
const loopLen = decks[id].loopEnd - decks[id].loopStart;
|
||
if (current >= decks[id].loopEnd && loopLen > 0) {
|
||
current = ((current - decks[id].loopStart) % loopLen) + decks[id].loopStart;
|
||
}
|
||
} else if (settings[`repeat${id}`]) {
|
||
// Full song repeat wrapping for UI
|
||
current = current % decks[id].duration;
|
||
} else {
|
||
current = Math.min(current, decks[id].duration);
|
||
}
|
||
|
||
document.getElementById('time-current-' + id).textContent = formatTime(current);
|
||
|
||
// Update playhead
|
||
const progress = (current / decks[id].duration) * 100;
|
||
const playhead = document.getElementById('playhead-' + id);
|
||
if (playhead) playhead.style.left = progress + '%';
|
||
}
|
||
});
|
||
}
|
||
|
||
function getCurrentPosition(id) {
|
||
if (!decks[id].playing) return decks[id].pausedAt;
|
||
if (!audioCtx) return decks[id].pausedAt;
|
||
|
||
const playbackRate = decks[id].localSource ? decks[id].localSource.playbackRate.value : 1.0;
|
||
const realElapsed = audioCtx.currentTime - decks[id].lastAnchorTime;
|
||
let pos = decks[id].lastAnchorPosition + (realElapsed * playbackRate);
|
||
|
||
// Handle wrapping for correct position return
|
||
if (decks[id].loopActive && decks[id].loopStart !== null && decks[id].loopEnd !== null) {
|
||
const loopLen = decks[id].loopEnd - decks[id].loopStart;
|
||
if (pos >= decks[id].loopEnd && loopLen > 0) {
|
||
pos = ((pos - decks[id].loopStart) % loopLen) + decks[id].loopStart;
|
||
}
|
||
} else if (settings[`repeat${id}`] && decks[id].duration > 0) {
|
||
pos = pos % decks[id].duration;
|
||
} else {
|
||
pos = Math.min(decks[id].duration, pos);
|
||
}
|
||
|
||
return pos;
|
||
}
|
||
|
||
function formatTime(seconds) {
|
||
const mins = Math.floor(seconds / 60);
|
||
const secs = Math.floor(seconds % 60);
|
||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||
}
|
||
|
||
// Playback Logic
|
||
function _notifyListenerDeckGlow() {
|
||
// Emit the current playing state of both decks to the listener page
|
||
if (!socket) return;
|
||
socket.emit('deck_glow', { A: !!decks.A.playing, B: !!decks.B.playing });
|
||
}
|
||
|
||
function playDeck(id) {
|
||
vibrate(15);
|
||
if (decks[id].type === 'local' && decks[id].localBuffer) {
|
||
if (decks[id].playing) return;
|
||
|
||
try {
|
||
console.log(`[Deck ${id}] Starting playback from ${decks[id].pausedAt}s`);
|
||
decks[id].playing = true;
|
||
seekTo(id, decks[id].pausedAt);
|
||
|
||
const deckEl = document.getElementById('deck-' + id);
|
||
if (deckEl) deckEl.classList.add('playing');
|
||
document.body.classList.add('playing-' + id);
|
||
_notifyListenerDeckGlow();
|
||
|
||
if (audioCtx.state === 'suspended') {
|
||
console.log(`[Deck ${id}] Resuming suspended AudioContext`);
|
||
audioCtx.resume();
|
||
}
|
||
|
||
// Auto-start broadcast if enabled and not already broadcasting
|
||
if (autoStartStream && !isBroadcasting && audioCtx) {
|
||
setTimeout(() => {
|
||
if (!socket) initSocket();
|
||
setTimeout(() => startBroadcast(), 500);
|
||
}, 100);
|
||
}
|
||
} catch (error) {
|
||
console.error(`[Deck ${id}] Playback error:`, error);
|
||
decks[id].playing = false;
|
||
const deckEl = document.getElementById('deck-' + id);
|
||
if (deckEl) deckEl.classList.remove('playing');
|
||
document.body.classList.remove('playing-' + id);
|
||
alert(`Playback error: ${error.message}`);
|
||
}
|
||
} else {
|
||
console.warn(`[Deck ${id}] Cannot play - no buffer loaded`);
|
||
}
|
||
}
|
||
|
||
function pauseDeck(id) {
|
||
vibrate(15);
|
||
if (decks[id].type === 'local' && decks[id].localSource && decks[id].playing) {
|
||
if (!audioCtx) {
|
||
console.warn(`[Deck ${id}] Cannot calculate pause position - audioCtx not initialised`);
|
||
decks[id].playing = false;
|
||
} else {
|
||
const playbackRate = decks[id].localSource.playbackRate.value;
|
||
const realElapsed = audioCtx.currentTime - decks[id].lastAnchorTime;
|
||
decks[id].pausedAt = decks[id].lastAnchorPosition + (realElapsed * playbackRate);
|
||
|
||
try {
|
||
decks[id].localSource.stop();
|
||
decks[id].localSource.onended = null;
|
||
} catch (e) { }
|
||
|
||
decks[id].localSource = null;
|
||
decks[id].playing = false;
|
||
}
|
||
}
|
||
const deckEl = document.getElementById('deck-' + id);
|
||
if (deckEl) deckEl.classList.remove('playing');
|
||
document.body.classList.remove('playing-' + id);
|
||
_notifyListenerDeckGlow();
|
||
}
|
||
|
||
|
||
function seekTo(id, time) {
|
||
// Update local state and timestamp for seek protection
|
||
decks[id].lastSeekTime = Date.now();
|
||
|
||
if (!decks[id].localBuffer) {
|
||
console.warn(`[Deck ${id}] Cannot seek - no buffer loaded`);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
if (decks[id].playing) {
|
||
if (decks[id].localSource) {
|
||
try {
|
||
// Capture playback rate before stopping for the new source
|
||
decks[id]._lastPlaybackRate = decks[id].localSource.playbackRate.value;
|
||
decks[id].localSource.stop();
|
||
decks[id].localSource.onended = null;
|
||
} catch (e) { }
|
||
}
|
||
|
||
const src = audioCtx.createBufferSource();
|
||
src.buffer = decks[id].localBuffer;
|
||
|
||
if (decks[id].loopActive) {
|
||
src.loop = true;
|
||
src.loopStart = decks[id].loopStart || 0;
|
||
src.loopEnd = decks[id].loopEnd || decks[id].duration;
|
||
}
|
||
|
||
src.connect(decks[id].filters.low);
|
||
// Read current speed from old source before it was stopped, fall back to DOM slider
|
||
let speed = 1.0;
|
||
if (decks[id]._lastPlaybackRate != null) {
|
||
speed = decks[id]._lastPlaybackRate;
|
||
} else {
|
||
const speedSlider = document.querySelector(`#deck-${id} .speed-slider`);
|
||
if (speedSlider) speed = parseFloat(speedSlider.value);
|
||
}
|
||
src.playbackRate.value = speed;
|
||
|
||
decks[id].localSource = src;
|
||
decks[id].lastAnchorTime = audioCtx.currentTime;
|
||
decks[id].lastAnchorPosition = time;
|
||
|
||
// Wire onended so natural playback completion always triggers auto-play
|
||
src.onended = () => {
|
||
// Guard: only act if we didn't stop it intentionally
|
||
if (decks[id].playing && !decks[id].loading) {
|
||
console.log(`[Deck ${id}] Playback ended naturally (onended)`);
|
||
handleTrackEnd(id);
|
||
}
|
||
};
|
||
|
||
src.start(0, time);
|
||
console.log(`[Deck ${id}] Playback started at ${time}s with speed ${speed}x`);
|
||
} else {
|
||
decks[id].pausedAt = time;
|
||
decks[id].lastAnchorPosition = time;
|
||
if (audioCtx && audioCtx.state === 'suspended') audioCtx.resume();
|
||
|
||
// Update UI immediately (Manual Position)
|
||
const timer = document.getElementById('time-current-' + id);
|
||
if (timer) timer.textContent = formatTime(time);
|
||
const progress = (time / decks[id].duration) * 100;
|
||
const playhead = document.getElementById('playhead-' + id);
|
||
if (playhead) playhead.style.left = progress + '%';
|
||
}
|
||
} catch (error) {
|
||
console.error(`[Deck ${id}] SeekTo error:`, error);
|
||
// Reset playing state on error
|
||
decks[id].playing = false;
|
||
const deckEl = document.getElementById('deck-' + id);
|
||
if (deckEl) deckEl.classList.remove('playing');
|
||
document.body.classList.remove('playing-' + id);
|
||
}
|
||
}
|
||
|
||
function changeSpeed(id, val) {
|
||
if (!audioCtx || !decks[id].localSource) return;
|
||
|
||
const realElapsed = audioCtx.currentTime - decks[id].lastAnchorTime;
|
||
decks[id].lastAnchorPosition += realElapsed * decks[id].localSource.playbackRate.value;
|
||
decks[id].lastAnchorTime = audioCtx.currentTime;
|
||
|
||
decks[id].localSource.playbackRate.value = parseFloat(val);
|
||
}
|
||
|
||
function changeVolume(id, val) {
|
||
if (decks[id].volumeGain) {
|
||
decks[id].volumeGain.gain.value = val / 100;
|
||
}
|
||
}
|
||
|
||
function changeEQ(id, band, val) {
|
||
if (decks[id].filters[band]) decks[id].filters[band].gain.value = parseFloat(val);
|
||
}
|
||
|
||
function changeFilter(id, type, val) {
|
||
if (!audioCtx || !decks[id].filters) return;
|
||
const filter = type === 'lowpass' ? decks[id].filters.lp : decks[id].filters.hp;
|
||
if (!filter) return;
|
||
|
||
// Use exponential scaling for filter frequency (more musical)
|
||
if (type === 'lowpass') {
|
||
// Low-pass: 0 = low freq (muffled), 100 = high freq (open)
|
||
const freq = 20 * Math.pow(22050 / 20, val / 100);
|
||
filter.frequency.setTargetAtTime(freq, audioCtx.currentTime, 0.05);
|
||
} else {
|
||
// High-pass: 0 = low freq (open), 100 = high freq (thin)
|
||
const freq = 20 * Math.pow(22050 / 20, val / 100);
|
||
filter.frequency.setTargetAtTime(freq, audioCtx.currentTime, 0.05);
|
||
}
|
||
}
|
||
|
||
// Hot Cue Functionality
|
||
function handleCue(id, cueNum) {
|
||
vibrate(15);
|
||
if (!decks[id].localBuffer) {
|
||
console.warn(`[Deck ${id}] No track loaded - cannot set cue`);
|
||
return;
|
||
}
|
||
|
||
// If cue exists, jump to it and start playing
|
||
if (decks[id].cues[cueNum] !== undefined) {
|
||
const cueTime = decks[id].cues[cueNum];
|
||
console.log(`[Deck ${id}] Jumping to cue ${cueNum} at ${cueTime.toFixed(2)}s`);
|
||
|
||
// Always seek to cue point
|
||
seekTo(id, cueTime);
|
||
|
||
// Auto-play when triggering cue (like real DJ equipment)
|
||
if (!decks[id].playing) {
|
||
playDeck(id);
|
||
}
|
||
|
||
// Visual feedback
|
||
const cueBtn = document.querySelectorAll(`#deck-${id} .cue-btn`)[cueNum - 1];
|
||
if (cueBtn) {
|
||
cueBtn.classList.add('cue-triggered');
|
||
setTimeout(() => cueBtn.classList.remove('cue-triggered'), 200);
|
||
}
|
||
} else {
|
||
// Set new cue at current position
|
||
const currentTime = getCurrentPosition(id);
|
||
decks[id].cues[cueNum] = currentTime;
|
||
|
||
console.log(`[Deck ${id}] Set cue ${cueNum} at ${currentTime.toFixed(2)}s`);
|
||
|
||
const cueBtn = document.querySelectorAll(`#deck-${id} .cue-btn`)[cueNum - 1];
|
||
if (cueBtn) {
|
||
cueBtn.classList.add('cue-set');
|
||
// Flash to show it was set
|
||
cueBtn.style.animation = 'none';
|
||
setTimeout(() => {
|
||
cueBtn.style.animation = 'flash 0.3s ease';
|
||
}, 10);
|
||
}
|
||
|
||
drawWaveform(id);
|
||
}
|
||
}
|
||
|
||
function clearCue(id, cueNum) {
|
||
delete decks[id].cues[cueNum];
|
||
const cueBtn = document.querySelectorAll(`#deck-${id} .cue-btn`)[cueNum - 1];
|
||
if (cueBtn) cueBtn.classList.remove('cue-set');
|
||
drawWaveform(id);
|
||
}
|
||
|
||
function setLoop(id, action) {
|
||
vibrate(15);
|
||
if (!decks[id].localBuffer) {
|
||
console.warn(`[Deck ${id}] No track loaded - cannot set loop`);
|
||
return;
|
||
}
|
||
|
||
const currentTime = getCurrentPosition(id);
|
||
|
||
if (action === 'in') {
|
||
// Set loop start point
|
||
decks[id].loopStart = currentTime;
|
||
decks[id].loopEnd = null; // Clear loop end
|
||
decks[id].loopActive = false; // Not active until OUT is set
|
||
|
||
console.log(`[Deck ${id}] Loop IN set at ${currentTime.toFixed(2)}s`);
|
||
|
||
// Visual feedback
|
||
const loopInBtn = document.querySelector(`#deck-${id} .loop-controls button:nth-child(1)`);
|
||
if (loopInBtn) {
|
||
loopInBtn.style.background = 'rgba(255, 187, 0, 0.3)';
|
||
loopInBtn.style.borderColor = '#ffbb00';
|
||
}
|
||
|
||
} else if (action === 'out') {
|
||
// Set loop end point and activate
|
||
if (decks[id].loopStart === null) {
|
||
// If no loop start, set it to beginning
|
||
decks[id].loopStart = 0;
|
||
console.log(`[Deck ${id}] Auto-set loop IN at 0s`);
|
||
}
|
||
|
||
if (currentTime > decks[id].loopStart) {
|
||
decks[id].loopEnd = currentTime;
|
||
decks[id].loopActive = true;
|
||
|
||
const loopLength = decks[id].loopEnd - decks[id].loopStart;
|
||
console.log(`[Deck ${id}] Loop OUT set at ${currentTime.toFixed(2)}s (${loopLength.toFixed(2)}s loop)`);
|
||
|
||
// Visual feedback
|
||
const loopOutBtn = document.querySelector(`#deck-${id} .loop-controls button:nth-child(2)`);
|
||
if (loopOutBtn) {
|
||
loopOutBtn.style.background = 'rgba(255, 187, 0, 0.3)';
|
||
loopOutBtn.style.borderColor = '#ffbb00';
|
||
}
|
||
|
||
// Restart playback to apply loop immediately
|
||
if (decks[id].playing) {
|
||
const currentPos = getCurrentPosition(id);
|
||
seekTo(id, currentPos);
|
||
}
|
||
} else {
|
||
console.warn(`[Deck ${id}] Loop OUT must be after Loop IN`);
|
||
alert('Loop OUT must be after Loop IN!');
|
||
}
|
||
|
||
} else if (action === 'exit') {
|
||
// Get current position BEFORE clearing loop state
|
||
const currentPos = getCurrentPosition(id);
|
||
|
||
// Exit/clear loop
|
||
decks[id].loopActive = false;
|
||
decks[id].loopStart = null;
|
||
decks[id].loopEnd = null;
|
||
|
||
console.log(`[Deck ${id}] Loop cleared at position ${currentPos.toFixed(2)}s`);
|
||
|
||
// Clear visual feedback
|
||
const loopBtns = document.querySelectorAll(`#deck-${id} .loop-controls button`);
|
||
loopBtns.forEach(btn => {
|
||
btn.style.background = '';
|
||
btn.style.borderColor = '';
|
||
});
|
||
|
||
// Restart playback from current loop position to continue smoothly
|
||
if (decks[id].playing) {
|
||
seekTo(id, currentPos);
|
||
} else {
|
||
// If paused, just update the paused position
|
||
decks[id].pausedAt = currentPos;
|
||
}
|
||
}
|
||
|
||
drawWaveform(id);
|
||
}
|
||
|
||
// Auto-Loop with Beat Lengths (you.dj style)
|
||
function setAutoLoop(id, beats) {
|
||
if (!decks[id].localBuffer) {
|
||
console.warn(`[Deck ${id}] No track loaded - cannot set auto-loop`);
|
||
return;
|
||
}
|
||
|
||
// Check if clicking the same active loop - if so, disable it
|
||
if (decks[id].activeAutoLoop === beats && decks[id].loopActive) {
|
||
// Get current position WITHIN the loop before disabling
|
||
const currentPos = getCurrentPosition(id);
|
||
|
||
// Disable loop
|
||
decks[id].loopActive = false;
|
||
decks[id].loopStart = null;
|
||
decks[id].loopEnd = null;
|
||
decks[id].activeAutoLoop = null;
|
||
|
||
console.log(`[Deck ${id}] Auto-loop ${beats} beats disabled at position ${currentPos.toFixed(2)}s`);
|
||
|
||
// Update UI
|
||
updateAutoLoopButtons(id);
|
||
drawWaveform(id);
|
||
|
||
// Restart playback from current loop position to continue smoothly
|
||
if (decks[id].playing) {
|
||
seekTo(id, currentPos);
|
||
} else {
|
||
// If paused, just update the paused position
|
||
decks[id].pausedAt = currentPos;
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Check if BPM is detected
|
||
if (!decks[id].bpm || decks[id].bpm === 0) {
|
||
alert(`Cannot set auto-loop: BPM not detected for Deck ${id}.\nPlease use manual loop controls (LOOP IN/OUT).`);
|
||
console.warn(`[Deck ${id}] BPM not detected - cannot calculate auto-loop`);
|
||
return;
|
||
}
|
||
|
||
const currentTime = getCurrentPosition(id);
|
||
const bpm = decks[id].bpm;
|
||
|
||
// Calculate loop length in seconds: (beats / BPM) * 60
|
||
const loopLength = (beats / bpm) * 60;
|
||
|
||
// Set loop points
|
||
decks[id].loopStart = currentTime;
|
||
decks[id].loopEnd = currentTime + loopLength;
|
||
decks[id].loopActive = true;
|
||
decks[id].activeAutoLoop = beats;
|
||
|
||
console.log(`[Deck ${id}] Auto-loop set: ${beats} beats = ${loopLength.toFixed(3)}s at ${bpm} BPM`);
|
||
|
||
// Update UI
|
||
updateAutoLoopButtons(id);
|
||
drawWaveform(id);
|
||
|
||
// Restart playback to apply loop immediately
|
||
if (decks[id].playing) {
|
||
seekTo(id, currentTime);
|
||
}
|
||
}
|
||
|
||
// Update auto-loop button visual states
|
||
function updateAutoLoopButtons(id) {
|
||
const buttons = document.querySelectorAll(`#deck-${id} .auto-loop-btn`);
|
||
buttons.forEach(btn => {
|
||
const btnBeats = parseFloat(btn.dataset.beats);
|
||
if (decks[id].activeAutoLoop === btnBeats && decks[id].loopActive) {
|
||
btn.classList.add('active');
|
||
} else {
|
||
btn.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
function pitchBend(id, amount) {
|
||
if (!audioCtx || !decks[id].localSource) return;
|
||
|
||
const slider = document.querySelector(`#deck-${id} .speed-slider`);
|
||
const baseSpeed = parseFloat(slider.value);
|
||
|
||
// Re-anchor
|
||
const realElapsed = audioCtx.currentTime - decks[id].lastAnchorTime;
|
||
decks[id].lastAnchorPosition += realElapsed * decks[id].localSource.playbackRate.value;
|
||
decks[id].lastAnchorTime = audioCtx.currentTime;
|
||
|
||
if (amount !== 0) {
|
||
decks[id].localSource.playbackRate.value = baseSpeed + amount;
|
||
} else {
|
||
decks[id].localSource.playbackRate.value = baseSpeed;
|
||
}
|
||
}
|
||
|
||
function syncDecks(id) {
|
||
const otherDeck = id === 'A' ? 'B' : 'A';
|
||
if (!decks[id].bpm || !decks[otherDeck].bpm) return;
|
||
|
||
// Calculate ratio to make other deck match this deck
|
||
const ratio = decks[id].bpm / decks[otherDeck].bpm;
|
||
const slider = document.querySelector(`#deck-${otherDeck} .speed-slider`);
|
||
if (slider) slider.value = ratio;
|
||
changeSpeed(otherDeck, ratio);
|
||
}
|
||
|
||
function updateCrossfader(val) {
|
||
const volA = (100 - val) / 100;
|
||
const volB = val / 100;
|
||
if (decks.A.crossfaderGain) decks.A.crossfaderGain.gain.value = volA;
|
||
if (decks.B.crossfaderGain) decks.B.crossfaderGain.gain.value = volB;
|
||
}
|
||
|
||
// Library Functions
|
||
// ---------------------------------------------------------------------------
|
||
// Tauri v2 asset-protocol helper
|
||
// When running inside Tauri (window.__TAURI__ is injected via withGlobalTauri)
|
||
// and the server has provided an absolutePath for the track, we convert it to
|
||
// an asset:// URL so the WebView reads the file directly from disk — no Flask
|
||
// round-trip, works with any folder under $HOME.
|
||
// Falls back to the ordinary server URL when not in Tauri or no absolutePath.
|
||
// ---------------------------------------------------------------------------
|
||
function tauriResolve(track) {
|
||
const cvt = window.__TAURI__?.core?.convertFileSrc;
|
||
if (cvt && track.absolutePath) {
|
||
return cvt(track.absolutePath);
|
||
}
|
||
return track.file;
|
||
}
|
||
|
||
async function fetchLibrary() {
|
||
try {
|
||
// In Tauri: scan disk directly via native Rust commands — no Flask needed.
|
||
if (window.__TAURI__?.core?.invoke) {
|
||
const musicDir = await window.__TAURI__.core.invoke('get_music_folder');
|
||
allSongs = await window.__TAURI__.core.invoke('scan_library', { musicDir });
|
||
renderLibrary(allSongs);
|
||
return;
|
||
}
|
||
// Browser / Flask fallback
|
||
const res = await fetch('library.json?t=' + new Date().getTime());
|
||
allSongs = await res.json();
|
||
renderLibrary(allSongs);
|
||
} catch (e) {
|
||
console.error("Library fetch failed", e);
|
||
}
|
||
}
|
||
|
||
function renderLibrary(songs) {
|
||
if (!songs) songs = allSongs;
|
||
const list = document.getElementById('library-list');
|
||
list.innerHTML = '';
|
||
|
||
const filteredSongs = songs;
|
||
|
||
if (filteredSongs.length === 0) {
|
||
list.innerHTML = `<div style="padding:20px; text-align:center; opacity:0.5;">No tracks found.</div>`;
|
||
return;
|
||
}
|
||
|
||
filteredSongs.forEach(t => {
|
||
const item = document.createElement('div');
|
||
item.className = 'track-row';
|
||
item.draggable = true;
|
||
|
||
// Drag data
|
||
item.ondragstart = (e) => {
|
||
e.dataTransfer.setData('trackFile', tauriResolve(t));
|
||
e.dataTransfer.setData('trackTitle', t.title);
|
||
e.dataTransfer.setData('source', 'library');
|
||
item.classList.add('dragging');
|
||
};
|
||
|
||
item.ondragend = () => {
|
||
item.classList.remove('dragging');
|
||
};
|
||
|
||
const trackName = document.createElement('span');
|
||
trackName.className = 'track-name';
|
||
trackName.textContent = t.title; // Safe text assignment
|
||
|
||
const loadActions = document.createElement('div');
|
||
loadActions.className = 'load-actions';
|
||
|
||
// LOAD buttons
|
||
const btnA = document.createElement('button');
|
||
btnA.className = 'load-btn btn-a';
|
||
btnA.textContent = 'LOAD A';
|
||
btnA.addEventListener('click', () => loadFromServer('A', tauriResolve(t), t.title));
|
||
|
||
const btnB = document.createElement('button');
|
||
btnB.className = 'load-btn btn-b';
|
||
btnB.textContent = 'LOAD B';
|
||
btnB.addEventListener('click', () => loadFromServer('B', tauriResolve(t), t.title));
|
||
|
||
// QUEUE buttons
|
||
const queueA = document.createElement('button');
|
||
queueA.className = 'load-btn queue-btn-a';
|
||
queueA.textContent = 'Q-A';
|
||
queueA.title = 'Add to Queue A';
|
||
queueA.addEventListener('click', () => addToQueue('A', tauriResolve(t), t.title));
|
||
|
||
const queueB = document.createElement('button');
|
||
queueB.className = 'load-btn queue-btn-b';
|
||
queueB.textContent = 'Q-B';
|
||
queueB.title = 'Add to Queue B';
|
||
queueB.addEventListener('click', () => addToQueue('B', tauriResolve(t), t.title));
|
||
|
||
loadActions.appendChild(btnA);
|
||
loadActions.appendChild(queueA);
|
||
loadActions.appendChild(btnB);
|
||
loadActions.appendChild(queueB);
|
||
item.appendChild(trackName);
|
||
item.appendChild(loadActions);
|
||
|
||
// Add data attribute for highlighting — store the resolved URL so
|
||
// updateLibraryHighlighting() matches decks.X.currentFile correctly.
|
||
item.dataset.file = tauriResolve(t);
|
||
|
||
list.appendChild(item);
|
||
});
|
||
|
||
// Update highlighting after rendering
|
||
updateLibraryHighlighting();
|
||
}
|
||
|
||
// Update library highlighting to show which tracks are loaded
|
||
function updateLibraryHighlighting() {
|
||
const trackRows = document.querySelectorAll('.track-row');
|
||
|
||
trackRows.forEach(row => {
|
||
const file = row.dataset.file;
|
||
|
||
// Remove all deck classes
|
||
row.classList.remove('loaded-deck-a', 'loaded-deck-b', 'loaded-both');
|
||
|
||
const onDeckA = decks.A.currentFile && decks.A.currentFile.includes(file);
|
||
const onDeckB = decks.B.currentFile && decks.B.currentFile.includes(file);
|
||
|
||
if (onDeckA && onDeckB) {
|
||
row.classList.add('loaded-both');
|
||
} else if (onDeckA) {
|
||
row.classList.add('loaded-deck-a');
|
||
} else if (onDeckB) {
|
||
row.classList.add('loaded-deck-b');
|
||
}
|
||
});
|
||
}
|
||
|
||
function filterLibrary() {
|
||
const query = document.getElementById('lib-search').value.toLowerCase();
|
||
const filtered = allSongs.filter(s => s.title.toLowerCase().includes(query));
|
||
renderLibrary(filtered);
|
||
}
|
||
|
||
function refreshLibrary() {
|
||
fetchLibrary();
|
||
}
|
||
|
||
async function loadFromServer(id, url, title) {
|
||
const d = document.getElementById('display-' + id);
|
||
d.innerText = '[WAIT] LOADING...';
|
||
d.classList.add('blink');
|
||
|
||
console.log(`[Deck ${id}] Loading: ${title} from ${url}`);
|
||
|
||
const wasPlaying = decks[id].playing;
|
||
const wasBroadcasting = isBroadcasting;
|
||
|
||
if (wasPlaying && !wasBroadcasting) {
|
||
pauseDeck(id);
|
||
console.log(`[Deck ${id}] Paused for song load`);
|
||
} else if (wasPlaying && wasBroadcasting) {
|
||
console.log(`[Deck ${id}] [LIVE] BROADCAST MODE: Keeping deck playing during load to maintain stream`);
|
||
}
|
||
|
||
decks[id].waveformData = null;
|
||
decks[id].bpm = null;
|
||
decks[id].cues = {};
|
||
decks[id].pausedAt = 0;
|
||
decks[id].currentFile = url;
|
||
|
||
// Clear UI state
|
||
const bpmEl = document.getElementById('bpm-' + id);
|
||
if (bpmEl) bpmEl.textContent = '';
|
||
const cueBtns = document.querySelectorAll(`#deck-${id} .cue-btn`);
|
||
cueBtns.forEach(btn => btn.classList.remove('cue-set'));
|
||
|
||
try {
|
||
// Fetch the audio file
|
||
const res = await fetch(url);
|
||
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
|
||
|
||
console.log(`[Deck ${id}] Fetch successful, decoding audio...`);
|
||
const arrayBuffer = await res.arrayBuffer();
|
||
|
||
// Decode audio data
|
||
let buffer;
|
||
try {
|
||
buffer = await audioCtx.decodeAudioData(arrayBuffer);
|
||
} catch (decodeError) {
|
||
console.error(`[Deck ${id}] Audio decode failed:`, decodeError);
|
||
throw new Error(`Cannot decode audio file`);
|
||
}
|
||
|
||
console.log(`[Deck ${id}] Successfully decoded! Duration: ${buffer.duration}s`);
|
||
|
||
// Track is now ready!
|
||
decks[id].localBuffer = buffer;
|
||
decks[id].duration = buffer.duration;
|
||
decks[id].lastAnchorPosition = 0;
|
||
|
||
// Update UI - track is ready!
|
||
d.innerText = title.toUpperCase();
|
||
d.classList.remove('blink');
|
||
document.getElementById('time-total-' + id).textContent = formatTime(buffer.duration);
|
||
document.getElementById('time-current-' + id).textContent = '0:00';
|
||
|
||
console.log(`[Deck ${id}] Ready to play!`);
|
||
|
||
// AUTO-RESUME for broadcast continuity
|
||
if (wasPlaying && wasBroadcasting) {
|
||
console.log(`[Deck ${id}] Auto-resuming playback to maintain broadcast stream`);
|
||
// Small delay to ensure buffer is fully ready
|
||
setTimeout(() => {
|
||
playDeck(id);
|
||
}, 50);
|
||
}
|
||
|
||
// Update library highlight
|
||
updateLibraryHighlighting();
|
||
|
||
// Process waveform and BPM in background
|
||
const processInBackground = () => {
|
||
try {
|
||
console.log(`[Deck ${id}] Starting background processing...`);
|
||
|
||
// Generate waveform
|
||
const startWave = performance.now();
|
||
decks[id].waveformData = generateWaveformData(buffer);
|
||
console.log(`[Deck ${id}] Waveform generated in ${(performance.now() - startWave).toFixed(0)}ms`);
|
||
drawWaveform(id);
|
||
|
||
// Detect BPM
|
||
const startBPM = performance.now();
|
||
decks[id].bpm = detectBPM(buffer);
|
||
console.log(`[Deck ${id}] BPM detected in ${(performance.now() - startBPM).toFixed(0)}ms`);
|
||
if (decks[id].bpm) {
|
||
const bpmEl = document.getElementById('bpm-' + id);
|
||
if (bpmEl) bpmEl.textContent = `${decks[id].bpm} BPM`;
|
||
}
|
||
} catch (bgError) {
|
||
console.warn(`[Deck ${id}] Background processing error:`, bgError);
|
||
}
|
||
};
|
||
|
||
if (window.requestIdleCallback) {
|
||
requestIdleCallback(processInBackground, { timeout: 2000 });
|
||
} else {
|
||
setTimeout(processInBackground, 50);
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error(`[Deck ${id}] Load error:`, error);
|
||
d.innerText = 'LOAD ERROR';
|
||
d.classList.remove('blink');
|
||
showToast(`Deck ${id}: Failed to load track — ${error.message}`, 'error');
|
||
setTimeout(() => { d.innerText = 'NO TRACK'; }, 3000);
|
||
}
|
||
}
|
||
|
||
|
||
// Settings
|
||
function toggleSettings() {
|
||
const p = document.getElementById('settings-panel');
|
||
p.classList.toggle('active');
|
||
}
|
||
|
||
// File Upload
|
||
// File Upload with Progress and Parallelism
|
||
async function handleFileUpload(event) {
|
||
const files = Array.from(event.target.files);
|
||
if (!files || files.length === 0) return;
|
||
|
||
// In Tauri: files are already local — no server upload needed.
|
||
// Create session blob URLs and add directly to the in-memory library.
|
||
if (window.__TAURI__?.core?.invoke) {
|
||
const allowed = ['.mp3', '.m4a', '.wav', '.flac', '.ogg'];
|
||
let added = 0;
|
||
files.forEach(file => {
|
||
const ext = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
|
||
if (!allowed.includes(ext)) return;
|
||
const blobUrl = URL.createObjectURL(file);
|
||
const title = file.name.replace(/\.[^.]+$/, '');
|
||
// absolutePath is null — tauriResolve will fall back to the blob URL.
|
||
allSongs.push({ title, file: blobUrl, absolutePath: null });
|
||
added++;
|
||
});
|
||
if (added > 0) {
|
||
renderLibrary(allSongs);
|
||
showToast(`${added} track(s) loaded into library`, 'success');
|
||
}
|
||
return;
|
||
}
|
||
|
||
console.log(`Uploading ${files.length} file(s)...`);
|
||
|
||
// Create/Show progress container
|
||
let progressContainer = document.getElementById('upload-progress-container');
|
||
if (!progressContainer) {
|
||
progressContainer = document.createElement('div');
|
||
progressContainer.id = 'upload-progress-container';
|
||
progressContainer.className = 'upload-progress-container';
|
||
document.body.appendChild(progressContainer);
|
||
}
|
||
progressContainer.innerHTML = '<h3>UPLOADING TRACKS...</h3>';
|
||
progressContainer.classList.add('active');
|
||
|
||
const existingFilenames = allSongs.map(s => s.file.split('/').pop().toLowerCase());
|
||
|
||
const uploadPromises = files.map(async (file) => {
|
||
const allowedExts = ['.mp3', '.m4a', '.wav', '.flac', '.ogg'];
|
||
const ext = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
|
||
|
||
if (!allowedExts.includes(ext)) {
|
||
console.warn(`${file.name} is not a supported audio file`);
|
||
return;
|
||
}
|
||
|
||
// Check for duplicates
|
||
if (existingFilenames.includes(file.name.toLowerCase())) {
|
||
console.log(`[UPLOAD] Skipping duplicate: ${file.name}`);
|
||
showToast(`Skipped duplicate: ${file.name}`, 'info');
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
const progressRow = document.createElement('div');
|
||
progressRow.className = 'upload-progress-row';
|
||
const nameSpan = document.createElement('span');
|
||
nameSpan.textContent = file.name.substring(0, 20) + (file.name.length > 20 ? '...' : '');
|
||
const barWrap = document.createElement('div');
|
||
barWrap.className = 'progress-bar-wrap';
|
||
const barInner = document.createElement('div');
|
||
barInner.className = 'progress-bar-inner';
|
||
barInner.style.width = '0%';
|
||
barWrap.appendChild(barInner);
|
||
progressRow.appendChild(nameSpan);
|
||
progressRow.appendChild(barWrap);
|
||
progressContainer.appendChild(progressRow);
|
||
|
||
return new Promise((resolve) => {
|
||
const xhr = new XMLHttpRequest();
|
||
xhr.open('POST', '/upload', true);
|
||
|
||
xhr.upload.onprogress = (e) => {
|
||
if (e.lengthComputable) {
|
||
const percent = (e.loaded / e.total) * 100;
|
||
barInner.style.width = percent + '%';
|
||
}
|
||
};
|
||
|
||
xhr.onload = () => {
|
||
if (xhr.status === 200) {
|
||
try {
|
||
const result = JSON.parse(xhr.responseText);
|
||
if (result.success) {
|
||
barInner.style.background = '#00ff88';
|
||
} else {
|
||
barInner.style.background = '#ff4444';
|
||
nameSpan.title = result.error || 'Upload failed';
|
||
console.error(`[UPLOAD] ${file.name}: ${result.error}`);
|
||
}
|
||
} catch (e) {
|
||
barInner.style.background = '#ff4444';
|
||
console.error(`[UPLOAD] Bad response for ${file.name}`);
|
||
}
|
||
} else {
|
||
barInner.style.background = '#ff4444';
|
||
nameSpan.title = `HTTP ${xhr.status}`;
|
||
console.error(`[UPLOAD] ${file.name}: HTTP ${xhr.status}${xhr.status === 413 ? ' — file too large (nginx limit)' : ''}`);
|
||
}
|
||
resolve(); // Always resolve so other uploads continue
|
||
};
|
||
|
||
xhr.onerror = () => {
|
||
barInner.style.background = '#ff4444';
|
||
console.error(`[UPLOAD] ${file.name}: Network error`);
|
||
resolve();
|
||
};
|
||
|
||
xhr.send(formData);
|
||
});
|
||
});
|
||
|
||
// Run uploads in parallel (limited to 3 at a time for stability if needed, but let's try all)
|
||
try {
|
||
await Promise.all(uploadPromises);
|
||
console.log('All uploads finished.');
|
||
} catch (e) {
|
||
console.error('Some uploads failed', e);
|
||
}
|
||
|
||
// Refresh library
|
||
setTimeout(() => {
|
||
fetchLibrary();
|
||
setTimeout(() => {
|
||
progressContainer.classList.remove('active');
|
||
vibrate(30);
|
||
}, 2000);
|
||
}, 500);
|
||
|
||
// Clear the input
|
||
event.target.value = '';
|
||
}
|
||
|
||
// Folder Selection Logic
|
||
async function openFolderPicker() {
|
||
let picker = document.getElementById('folder-picker-modal');
|
||
if (!picker) {
|
||
picker = document.createElement('div');
|
||
picker.id = 'folder-picker-modal';
|
||
picker.className = 'modal-overlay';
|
||
picker.innerHTML = `
|
||
<div class="modal-card folder-picker-card">
|
||
<div class="modal-header">
|
||
<span>SELECT MUSIC FOLDER</span>
|
||
<button onclick="closeFolderPicker()">X</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="path-nav">
|
||
<button onclick="browseToPath('..')">UP</button>
|
||
<input type="text" id="current-folder-path" readonly>
|
||
</div>
|
||
<div id="dir-list" class="dir-list"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn-primary" onclick="confirmFolderSelection()">USE THIS FOLDER</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(picker);
|
||
}
|
||
picker.classList.add('active');
|
||
|
||
// Initial browse to home or current
|
||
browseToPath('');
|
||
}
|
||
|
||
function closeFolderPicker() {
|
||
document.getElementById('folder-picker-modal').classList.remove('active');
|
||
}
|
||
|
||
async function browseToPath(targetPath) {
|
||
const currentInput = document.getElementById('current-folder-path');
|
||
let path = currentInput.value;
|
||
|
||
if (targetPath === '..') {
|
||
// Handled by server if we send '..' but let's be explicit
|
||
const parts = path.split('/');
|
||
parts.pop();
|
||
path = parts.join('/') || '/';
|
||
} else if (targetPath) {
|
||
path = targetPath;
|
||
}
|
||
|
||
try {
|
||
let data;
|
||
if (window.__TAURI__?.core?.invoke) {
|
||
data = await window.__TAURI__.core.invoke('list_dirs', { path });
|
||
} else {
|
||
const res = await fetch(`/browse_directories?path=${encodeURIComponent(path)}`);
|
||
data = await res.json();
|
||
}
|
||
if (data.success) {
|
||
currentInput.value = data.path;
|
||
const list = document.getElementById('dir-list');
|
||
list.innerHTML = '';
|
||
|
||
data.entries.forEach(entry => {
|
||
const div = document.createElement('div');
|
||
div.className = 'dir-entry';
|
||
div.innerHTML = `<span class="dir-icon">[DIR]</span> ${entry.name}`;
|
||
div.onclick = () => browseToPath(entry.path);
|
||
list.appendChild(div);
|
||
});
|
||
}
|
||
} catch (e) {
|
||
console.error("Browse failed", e);
|
||
}
|
||
}
|
||
|
||
async function confirmFolderSelection() {
|
||
const path = document.getElementById('current-folder-path').value;
|
||
try {
|
||
let result;
|
||
if (window.__TAURI__?.core?.invoke) {
|
||
result = await window.__TAURI__.core.invoke('save_music_folder', { path });
|
||
} else {
|
||
const res = await fetch('/update_settings', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ library: { music_folder: path } })
|
||
});
|
||
result = await res.json();
|
||
}
|
||
if (result.success) {
|
||
alert('Music folder updated! Refreshing library...');
|
||
closeFolderPicker();
|
||
fetchLibrary();
|
||
} else {
|
||
alert('Error: ' + (result.error || 'Unknown error'));
|
||
}
|
||
} catch (e) {
|
||
alert('Failed to update settings');
|
||
}
|
||
}
|
||
|
||
function toggleRepeat(id, val) {
|
||
if (val === undefined) {
|
||
settings[`repeat${id}`] = !settings[`repeat${id}`];
|
||
} else {
|
||
settings[`repeat${id}`] = val;
|
||
}
|
||
|
||
// Update UI
|
||
const btn = document.getElementById(`repeat-btn-${id}`);
|
||
const checkbox = document.getElementById(`repeat-${id}`);
|
||
if (btn) {
|
||
btn.classList.toggle('active', settings[`repeat${id}`]);
|
||
btn.textContent = settings[`repeat${id}`] ? 'LOOP ON' : 'LOOP';
|
||
}
|
||
if (checkbox) checkbox.checked = settings[`repeat${id}`];
|
||
|
||
console.log(`Deck ${id} Repeat: ${settings[`repeat${id}`]}`);
|
||
vibrate(10);
|
||
saveSettings();
|
||
}
|
||
function toggleAutoMix(val) { settings.autoMix = val; saveSettings(); }
|
||
function toggleShuffle(val) { settings.shuffleMode = val; saveSettings(); }
|
||
function toggleQuantize(val) { settings.quantize = val; saveSettings(); }
|
||
function toggleAutoPlay(val) { settings.autoPlay = val; saveSettings(); }
|
||
|
||
function updateManualGlow(id, val) {
|
||
settings[`glow${id}`] = val;
|
||
if (val) {
|
||
document.body.classList.add(`playing-${id}`);
|
||
} else {
|
||
document.body.classList.remove(`playing-${id}`);
|
||
}
|
||
saveSettings();
|
||
}
|
||
|
||
function updateGlowIntensity(val) {
|
||
settings.glowIntensity = parseInt(val);
|
||
const opacity = settings.glowIntensity / 100;
|
||
const spread = (settings.glowIntensity / 100) * 80;
|
||
|
||
document.documentElement.style.setProperty('--glow-opacity', opacity);
|
||
document.documentElement.style.setProperty('--glow-spread', `${spread}px`);
|
||
saveSettings();
|
||
}
|
||
|
||
function updateListenerGlow(val) {
|
||
settings.listenerGlowIntensity = parseInt(val);
|
||
if (!socket) initSocket();
|
||
socket.emit('listener_glow', { intensity: settings.listenerGlowIntensity });
|
||
saveSettings();
|
||
}
|
||
|
||
// Dismiss landscape prompt
|
||
function dismissLandscapePrompt() {
|
||
const prompt = document.getElementById('landscape-prompt');
|
||
if (prompt) {
|
||
prompt.classList.add('dismissed');
|
||
// Store preference in localStorage
|
||
localStorage.setItem('landscapePromptDismissed', 'true');
|
||
}
|
||
}
|
||
|
||
// Check if prompt was previously dismissed
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
const wasDismissed = localStorage.getItem('landscapePromptDismissed');
|
||
if (wasDismissed === 'true') {
|
||
const prompt = document.getElementById('landscape-prompt');
|
||
if (prompt) prompt.classList.add('dismissed');
|
||
}
|
||
|
||
// Sync all restored settings to UI controls
|
||
const syncCheckbox = (elId, val) => { const el = document.getElementById(elId); if (el) el.checked = !!val; };
|
||
const syncRange = (elId, val) => { const el = document.getElementById(elId); if (el && val != null) el.value = val; };
|
||
|
||
syncCheckbox('repeat-A', settings.repeatA);
|
||
syncCheckbox('repeat-B', settings.repeatB);
|
||
syncCheckbox('auto-mix', settings.autoMix);
|
||
syncCheckbox('shuffle-mode', settings.shuffleMode);
|
||
syncCheckbox('quantize', settings.quantize);
|
||
syncCheckbox('auto-play', settings.autoPlay);
|
||
syncCheckbox('glow-A', settings.glowA);
|
||
syncCheckbox('glow-B', settings.glowB);
|
||
syncRange('glow-intensity', settings.glowIntensity);
|
||
syncRange('listener-glow-intensity', settings.listenerGlowIntensity);
|
||
|
||
// Initialise glow intensity CSS variables
|
||
updateGlowIntensity(settings.glowIntensity);
|
||
|
||
// Apply initial glow state
|
||
updateManualGlow('A', settings.glowA);
|
||
updateManualGlow('B', settings.glowB);
|
||
|
||
// Set stream URL in the streaming panel
|
||
const streamInput = document.getElementById('stream-url');
|
||
if (streamInput) {
|
||
const _autoDetectListenerUrl = () => {
|
||
const host = window.location.hostname;
|
||
if (host.startsWith('dj.')) {
|
||
return `${window.location.protocol}//${host.slice(3)}`;
|
||
}
|
||
return `${window.location.protocol}//${host}:5001`;
|
||
};
|
||
fetch('/client_config')
|
||
.then(r => r.json())
|
||
.then(cfg => {
|
||
streamInput.value = cfg.listener_url || _autoDetectListenerUrl();
|
||
})
|
||
.catch(() => {
|
||
streamInput.value = _autoDetectListenerUrl();
|
||
});
|
||
}
|
||
});
|
||
|
||
// ========== LIVE STREAMING FUNCTIONALITY ==========
|
||
|
||
let socket = null;
|
||
let streamDestination = null;
|
||
let streamProcessor = null;
|
||
let mediaRecorder = null;
|
||
let isBroadcasting = false;
|
||
let autoStartStream = false;
|
||
let currentStreamMimeType = null;
|
||
|
||
// Initialise SocketIO connection
|
||
function initSocket() {
|
||
if (socket) return socket;
|
||
|
||
// Socket.IO is loaded from a CDN; in Tauri (offline) it may not be available.
|
||
if (typeof io === 'undefined') {
|
||
console.warn('[SOCKET] Socket.IO not loaded — live streaming is unavailable');
|
||
return null;
|
||
}
|
||
|
||
const serverUrl = window.location.origin;
|
||
console.log(`[SOCKET] Connecting to ${serverUrl}`);
|
||
|
||
socket = io(serverUrl, {
|
||
transports: ['websocket', 'polling'],
|
||
reconnection: true,
|
||
reconnectionAttempts: Infinity,
|
||
reconnectionDelay: 1000,
|
||
reconnectionDelayMax: 10000
|
||
});
|
||
|
||
socket.on('connect', () => {
|
||
console.log('[OK] Connected to streaming server');
|
||
socket.emit('get_listener_count');
|
||
});
|
||
|
||
socket.on('connect_error', (error) => {
|
||
console.error('[ERROR] Connection error:', error.message);
|
||
});
|
||
|
||
socket.on('disconnect', (reason) => {
|
||
console.warn(`[WARN] Disconnected: ${reason}`);
|
||
});
|
||
|
||
socket.on('listener_count', (data) => {
|
||
const el = document.getElementById('listener-count');
|
||
if (el) el.textContent = data.count;
|
||
});
|
||
|
||
socket.on('broadcast_started', () => {
|
||
console.log('[EVENT] broadcast_started');
|
||
// Update relay UI if it's a relay
|
||
const relayStatus = document.getElementById('relay-status');
|
||
if (relayStatus && relayStatus.textContent.includes('Connecting')) {
|
||
relayStatus.textContent = 'Relay active - streaming to listeners';
|
||
relayStatus.style.color = '#00ff00';
|
||
}
|
||
});
|
||
|
||
socket.on('broadcast_stopped', () => {
|
||
console.log('[EVENT] broadcast_stopped');
|
||
// Reset relay UI if it was active
|
||
const startRelayBtn = document.getElementById('start-relay-btn');
|
||
const stopRelayBtn = document.getElementById('stop-relay-btn');
|
||
const relayStatus = document.getElementById('relay-status');
|
||
if (startRelayBtn) startRelayBtn.style.display = 'inline-block';
|
||
if (stopRelayBtn) stopRelayBtn.style.display = 'none';
|
||
if (relayStatus) relayStatus.textContent = '';
|
||
});
|
||
|
||
socket.on('mixer_status', (data) => {
|
||
updateUIFromMixerStatus(data);
|
||
});
|
||
|
||
socket.on('deck_status', (data) => {
|
||
console.log(`Server: Deck ${data.deck_id} status update:`, data);
|
||
// This is handled by a single status update too, but helpful for immediate feedback
|
||
});
|
||
|
||
socket.on('error', (data) => {
|
||
console.error('Server error:', data.message);
|
||
alert(`SERVER ERROR: ${data.message}`);
|
||
// Reset relay UI on error
|
||
const startRelayBtn = document.getElementById('start-relay-btn');
|
||
const stopRelayBtn = document.getElementById('stop-relay-btn');
|
||
const relayStatus = document.getElementById('relay-status');
|
||
if (startRelayBtn) startRelayBtn.style.display = 'inline-block';
|
||
if (stopRelayBtn) stopRelayBtn.style.display = 'none';
|
||
if (relayStatus) relayStatus.textContent = '';
|
||
});
|
||
|
||
return socket;
|
||
}
|
||
|
||
// Update DJ UI from server status
|
||
function updateUIFromMixerStatus(status) {
|
||
if (!status) return;
|
||
|
||
['A', 'B'].forEach(id => {
|
||
const deckStatus = id === 'A' ? status.deck_a : status.deck_b;
|
||
if (!deckStatus) return;
|
||
|
||
// Update position (only if not currently dragging the waveform)
|
||
const timeSinceSeek = Date.now() - (decks[id].lastSeekTime || 0);
|
||
if (timeSinceSeek < 1500) {
|
||
// Seek Protection: Ignore server updates for 1.5s after manual seek
|
||
return;
|
||
}
|
||
|
||
// Update playing state
|
||
decks[id].playing = deckStatus.playing;
|
||
|
||
// Update loaded track if changed
|
||
if (deckStatus.filename && (!decks[id].currentFile || decks[id].currentFile !== deckStatus.filename)) {
|
||
console.log(`Server synced: Deck ${id} is playing ${deckStatus.filename}`);
|
||
decks[id].currentFile = deckStatus.filename;
|
||
decks[id].duration = deckStatus.duration;
|
||
|
||
// Update UI elements for track title
|
||
const titleEl = document.getElementById(`display-${id}`);
|
||
if (titleEl) {
|
||
const name = deckStatus.filename.split('/').pop().replace(/\.[^/.]+$/, "");
|
||
titleEl.textContent = name;
|
||
}
|
||
}
|
||
|
||
// Sync playback rate for interpolation
|
||
const speedSlider = document.querySelector(`#deck-${id} .speed-slider`);
|
||
if (speedSlider) speedSlider.value = deckStatus.pitch;
|
||
|
||
// Update anchor for local interpolation
|
||
decks[id].lastAnchorPosition = deckStatus.position;
|
||
decks[id].lastAnchorTime = audioCtx ? audioCtx.currentTime : 0;
|
||
|
||
if (!decks[id].playing) {
|
||
decks[id].pausedAt = deckStatus.position;
|
||
}
|
||
|
||
// Forced UI update to snap to server reality
|
||
const currentPos = getCurrentPosition(id);
|
||
const progress = (currentPos / decks[id].duration) * 100;
|
||
const playhead = document.getElementById('playhead-' + id);
|
||
if (playhead) playhead.style.left = progress + '%';
|
||
const timer = document.getElementById('time-current-' + id);
|
||
if (timer) timer.textContent = formatTime(currentPos);
|
||
});
|
||
|
||
// Update crossfader if changed significantly
|
||
if (status.crossfader !== undefined) {
|
||
const cf = document.getElementById('crossfader');
|
||
if (cf && Math.abs(parseInt(cf.value) - status.crossfader) > 1) {
|
||
cf.value = status.crossfader;
|
||
updateCrossfader(status.crossfader);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Toggle streaming panel
|
||
function toggleStreamingPanel() {
|
||
const panel = document.getElementById('streaming-panel');
|
||
panel.classList.toggle('active');
|
||
|
||
// Initialise socket when panel is opened
|
||
if (panel.classList.contains('active') && !socket) {
|
||
initSocket();
|
||
}
|
||
}
|
||
|
||
// Toggle broadcast
|
||
function toggleBroadcast() {
|
||
if (!audioCtx) {
|
||
alert('Please initialise the system first (click INITIALIZE SYSTEM)');
|
||
return;
|
||
}
|
||
|
||
if (!socket) initSocket();
|
||
|
||
if (isBroadcasting) {
|
||
stopBroadcast();
|
||
} else {
|
||
startBroadcast();
|
||
}
|
||
}
|
||
|
||
// Start broadcasting
|
||
function startBroadcast() {
|
||
try {
|
||
console.log('Starting broadcast...');
|
||
|
||
if (!audioCtx) {
|
||
alert('Please initialise the system first!');
|
||
return;
|
||
}
|
||
|
||
// Browser-side audio mode
|
||
// Check if any audio is playing
|
||
const anyPlaying = decks.A.playing || decks.B.playing;
|
||
if (!anyPlaying) {
|
||
console.warn('WARNING: No decks are currently playing! Start playing a track for audio to stream.');
|
||
}
|
||
|
||
// Create MediaStreamDestination to capture audio output
|
||
streamDestination = audioCtx.createMediaStreamDestination();
|
||
|
||
// IMPORTANT: Properly manage audio graph connections
|
||
// Disconnect from speakers first, then connect to stream AND speakers
|
||
// This prevents dual-connection instability
|
||
if (decks.A.crossfaderGain) {
|
||
try {
|
||
decks.A.crossfaderGain.disconnect();
|
||
} catch (e) {
|
||
console.warn('Deck A crossfader already disconnected');
|
||
}
|
||
decks.A.crossfaderGain.connect(streamDestination);
|
||
decks.A.crossfaderGain.connect(audioCtx.destination); // Re-add for local monitoring
|
||
console.log('[OK] Deck A connected to stream + speakers');
|
||
}
|
||
if (decks.B.crossfaderGain) {
|
||
try {
|
||
decks.B.crossfaderGain.disconnect();
|
||
} catch (e) {
|
||
console.warn('Deck B crossfader already disconnected');
|
||
}
|
||
decks.B.crossfaderGain.connect(streamDestination);
|
||
decks.B.crossfaderGain.connect(audioCtx.destination); // Re-add for local monitoring
|
||
console.log('[OK] Deck B connected to stream + speakers');
|
||
}
|
||
|
||
// Verify stream has audio tracks
|
||
const stream = streamDestination.stream;
|
||
console.log(`[DATA] Stream tracks: ${stream.getAudioTracks().length} audio tracks`);
|
||
|
||
if (stream.getAudioTracks().length === 0) {
|
||
throw new Error('No audio tracks in stream! Audio routing failed.');
|
||
}
|
||
|
||
// Get selected quality from dropdown
|
||
const qualitySelect = document.getElementById('stream-quality');
|
||
const selectedBitrate = parseInt(qualitySelect.value) * 1000; // Convert kbps to bps
|
||
console.log(`Starting broadcast at ${qualitySelect.value}kbps`);
|
||
|
||
const preferredTypes = [
|
||
// Prefer MP4/AAC when available (broad device support)
|
||
'audio/mp4;codecs=mp4a.40.2',
|
||
'audio/mp4',
|
||
// Fallbacks
|
||
'audio/webm',
|
||
'audio/ogg',
|
||
];
|
||
const chosenType = preferredTypes.find((t) => {
|
||
try {
|
||
return MediaRecorder.isTypeSupported(t);
|
||
} catch {
|
||
return false;
|
||
}
|
||
});
|
||
|
||
if (!chosenType) {
|
||
throw new Error('No supported MediaRecorder mimeType found on this browser');
|
||
}
|
||
|
||
currentStreamMimeType = chosenType;
|
||
console.log(`Using broadcast mimeType: ${currentStreamMimeType}`);
|
||
|
||
mediaRecorder = new MediaRecorder(stream, {
|
||
mimeType: currentStreamMimeType,
|
||
audioBitsPerSecond: selectedBitrate
|
||
});
|
||
|
||
let chunkCount = 0;
|
||
let lastLogTime = Date.now();
|
||
let silenceWarningShown = false;
|
||
|
||
// Send audio chunks via SocketIO
|
||
mediaRecorder.ondataavailable = async (event) => {
|
||
if (event.data.size > 0 && isBroadcasting && socket) {
|
||
chunkCount++;
|
||
|
||
// Warn if chunks are too small (likely silence)
|
||
if (event.data.size < 100 && !silenceWarningShown) {
|
||
console.warn('Audio chunks are very small - might be silence. Make sure audio is playing!');
|
||
silenceWarningShown = true;
|
||
}
|
||
|
||
// Convert blob to array buffer for transmission
|
||
const buffer = await event.data.arrayBuffer();
|
||
socket.emit('audio_chunk', buffer); // Send raw ArrayBuffer directly
|
||
|
||
// Log every second
|
||
const now = Date.now();
|
||
if (now - lastLogTime > 1000) {
|
||
console.log(`Broadcasting: ${chunkCount} chunks sent (${(event.data.size / 1024).toFixed(1)} KB/chunk)`);
|
||
lastLogTime = now;
|
||
|
||
// Reset silence warning
|
||
if (event.data.size > 100) {
|
||
silenceWarningShown = false;
|
||
}
|
||
}
|
||
} else {
|
||
// Debug why chunks aren't being sent
|
||
if (event.data.size === 0) {
|
||
console.warn('Received empty audio chunk');
|
||
}
|
||
if (!isBroadcasting) {
|
||
console.warn('Broadcasting flag is false');
|
||
}
|
||
if (!socket) {
|
||
console.warn('Socket not connected');
|
||
}
|
||
}
|
||
};
|
||
|
||
mediaRecorder.onerror = (error) => {
|
||
console.error('[ERROR] MediaRecorder error:', error);
|
||
// Try to recover from error
|
||
if (isBroadcasting) {
|
||
console.log('Attempting to recover from MediaRecorder error...');
|
||
setTimeout(() => {
|
||
if (isBroadcasting) {
|
||
restartBroadcast();
|
||
}
|
||
}, 2000);
|
||
}
|
||
};
|
||
|
||
mediaRecorder.onstart = () => {
|
||
console.log('[OK] MediaRecorder started');
|
||
};
|
||
|
||
mediaRecorder.onstop = (event) => {
|
||
console.warn('MediaRecorder stopped!');
|
||
console.log(` State: ${mediaRecorder.state}`);
|
||
console.log(` isBroadcasting flag: ${isBroadcasting}`);
|
||
|
||
// If we're supposed to be broadcasting but MediaRecorder stopped, restart it
|
||
if (isBroadcasting) {
|
||
console.error('[ERROR] MediaRecorder stopped unexpectedly while broadcasting!');
|
||
console.log('Auto-recovery: Attempting to restart broadcast in 2 seconds...');
|
||
|
||
setTimeout(() => {
|
||
if (isBroadcasting) {
|
||
console.log('Executing auto-recovery...');
|
||
restartBroadcast();
|
||
}
|
||
}, 2000);
|
||
}
|
||
};
|
||
|
||
mediaRecorder.onpause = (event) => {
|
||
console.warn('MediaRecorder paused unexpectedly!');
|
||
|
||
// If we're broadcasting and MediaRecorder paused, resume it
|
||
if (isBroadcasting && mediaRecorder.state === 'paused') {
|
||
console.log('Auto-resuming MediaRecorder...');
|
||
try {
|
||
mediaRecorder.resume();
|
||
console.log('[OK] MediaRecorder resumed');
|
||
} catch (e) {
|
||
console.error('[ERROR] Failed to resume MediaRecorder:', e);
|
||
// If resume fails, try full restart
|
||
setTimeout(() => {
|
||
if (isBroadcasting) {
|
||
restartBroadcast();
|
||
}
|
||
}, 1000);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 250ms chunks: More frequent smaller chunks reduces stall gaps on weak connections.
|
||
// A 1-second chunk creates a 1-second starvation gap if the network hiccups;
|
||
// 250ms chunks keep the server fed 4x more often.
|
||
|
||
// Notify server FIRST so broadcast_state is active on the server before
|
||
// the first audio_chunk arrives — prevents the first ~250 ms of audio
|
||
// being silently dropped by the server's isinstance() guard.
|
||
if (!socket) initSocket();
|
||
const bitrateValue = document.getElementById('stream-quality').value + 'k';
|
||
socket.emit('start_broadcast', { bitrate: bitrateValue });
|
||
socket.emit('get_listener_count');
|
||
|
||
// Validate state before starting
|
||
if (mediaRecorder.state === 'inactive') {
|
||
mediaRecorder.start(250);
|
||
streamProcessor = mediaRecorder;
|
||
console.log('[OK] MediaRecorder started in state:', mediaRecorder.state);
|
||
} else {
|
||
console.error('[ERROR] Cannot start MediaRecorder - already in state:', mediaRecorder.state);
|
||
throw new Error(`MediaRecorder is already ${mediaRecorder.state}`);
|
||
}
|
||
|
||
// Update UI
|
||
isBroadcasting = true;
|
||
document.getElementById('broadcast-btn').classList.add('active');
|
||
document.getElementById('broadcast-text').textContent = 'STOP BROADCAST';
|
||
document.getElementById('broadcast-status').textContent = 'LIVE';
|
||
document.getElementById('broadcast-status').classList.add('live');
|
||
|
||
console.log('[OK] Broadcasting started successfully!');
|
||
console.log('TIP TIP: Play a track on Deck A or B to stream audio');
|
||
|
||
// Monitor audio levels
|
||
setTimeout(() => {
|
||
if (chunkCount === 0) {
|
||
console.error('[ERROR] NO AUDIO CHUNKS after 2 seconds! Check:');
|
||
console.error(' 1. Is audio playing on either deck?');
|
||
console.error(' 2. Is volume turned up?');
|
||
console.error(' 3. Is crossfader in the middle?');
|
||
}
|
||
}, 2000);
|
||
|
||
} catch (error) {
|
||
console.error('[ERROR] Failed to start broadcast:', error);
|
||
alert('Failed to start broadcast: ' + error.message);
|
||
isBroadcasting = false;
|
||
}
|
||
}
|
||
|
||
// Stop broadcasting
|
||
function stopBroadcast() {
|
||
console.log('[BROADCAST] Stopping...');
|
||
|
||
if (streamProcessor) {
|
||
streamProcessor.stop();
|
||
streamProcessor = null;
|
||
}
|
||
|
||
if (streamDestination) {
|
||
// Only disconnect the specific stream connection — do NOT call .disconnect()
|
||
// with no args as that also removes the audioCtx.destination connection and
|
||
// causes an audible pop / silence gap for locally-monitored decks.
|
||
if (decks.A.crossfaderGain) {
|
||
try { decks.A.crossfaderGain.disconnect(streamDestination); }
|
||
catch (e) { console.warn('Error disconnecting Deck A from stream:', e); }
|
||
}
|
||
if (decks.B.crossfaderGain) {
|
||
try { decks.B.crossfaderGain.disconnect(streamDestination); }
|
||
catch (e) { console.warn('Error disconnecting Deck B from stream:', e); }
|
||
}
|
||
streamDestination = null;
|
||
}
|
||
isBroadcasting = false;
|
||
|
||
if (socket) {
|
||
socket.emit('stop_broadcast');
|
||
}
|
||
|
||
// Update UI
|
||
document.getElementById('broadcast-btn').classList.remove('active');
|
||
document.getElementById('broadcast-text').textContent = 'START BROADCAST';
|
||
document.getElementById('broadcast-status').textContent = 'Offline';
|
||
document.getElementById('broadcast-status').classList.remove('live');
|
||
|
||
console.log('[OK] Broadcast stopped');
|
||
}
|
||
|
||
// Restart broadcasting (for auto-recovery)
|
||
function restartBroadcast() {
|
||
console.log('Restarting broadcast...');
|
||
|
||
// Clean up old MediaRecorder without changing UI state
|
||
if (streamProcessor) {
|
||
try {
|
||
streamProcessor.stop();
|
||
} catch (e) {
|
||
console.warn('Could not stop old MediaRecorder:', e);
|
||
}
|
||
streamProcessor = null;
|
||
}
|
||
|
||
// Clean up old stream destination — only disconnect the stream leg,
|
||
// not the audioCtx.destination leg, to avoid an audible glitch.
|
||
if (streamDestination) {
|
||
if (decks.A.crossfaderGain) {
|
||
try { decks.A.crossfaderGain.disconnect(streamDestination); }
|
||
catch (e) { console.warn('Error cleaning up Deck A:', e); }
|
||
}
|
||
if (decks.B.crossfaderGain) {
|
||
try { decks.B.crossfaderGain.disconnect(streamDestination); }
|
||
catch (e) { console.warn('Error cleaning up Deck B:', e); }
|
||
}
|
||
streamDestination = null;
|
||
}
|
||
|
||
// Preserve broadcasting state
|
||
const wasBroadcasting = isBroadcasting;
|
||
isBroadcasting = false; // Temporarily set to false so startBroadcast works
|
||
|
||
// Small delay to ensure cleanup completes
|
||
setTimeout(() => {
|
||
if (wasBroadcasting) {
|
||
startBroadcast();
|
||
console.log('[OK] Broadcast restarted successfully');
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
// Copy stream URL to clipboard
|
||
function copyStreamUrl(evt) {
|
||
const urlInput = document.getElementById('stream-url');
|
||
const text = urlInput.value;
|
||
const btn = evt?.target;
|
||
|
||
const showFeedback = (success) => {
|
||
if (!btn) return;
|
||
const originalText = btn.textContent;
|
||
btn.textContent = success ? 'OK' : 'FAIL';
|
||
setTimeout(() => { btn.textContent = originalText; }, 2000);
|
||
};
|
||
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(text)
|
||
.then(() => showFeedback(true))
|
||
.catch(() => showFeedback(false));
|
||
} else {
|
||
// Fallback for older browsers
|
||
urlInput.select();
|
||
urlInput.setSelectionRange(0, 99999);
|
||
try {
|
||
document.execCommand('copy');
|
||
showFeedback(true);
|
||
} catch (err) {
|
||
console.error('Failed to copy:', err);
|
||
showFeedback(false);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Toggle auto-start stream
|
||
function toggleAutoStream(enabled) {
|
||
autoStartStream = enabled;
|
||
localStorage.setItem('autoStartStream', enabled);
|
||
}
|
||
|
||
// Load auto-start preference
|
||
window.addEventListener('load', () => {
|
||
const autoStart = localStorage.getItem('autoStartStream');
|
||
if (autoStart === 'true') {
|
||
document.getElementById('auto-start-stream').checked = true;
|
||
autoStartStream = true;
|
||
}
|
||
});
|
||
|
||
// Auto-crossfade: smoothly transitions from the ending deck to the other deck.
|
||
let _autoMixTimer = null;
|
||
|
||
function startAutoMixFade(endingDeckId) {
|
||
const otherDeck = endingDeckId === 'A' ? 'B' : 'A';
|
||
|
||
// The other deck must have a track loaded and be playing (or about to play)
|
||
if (!decks[otherDeck].localBuffer) {
|
||
console.log(`[AutoMix] Other deck ${otherDeck} has no track loaded, skipping crossfade`);
|
||
return false;
|
||
}
|
||
|
||
// If the other deck isn't playing, start it
|
||
if (!decks[otherDeck].playing) {
|
||
playDeck(otherDeck);
|
||
}
|
||
|
||
// Cancel any existing auto-mix animation
|
||
if (_autoMixTimer) {
|
||
clearInterval(_autoMixTimer);
|
||
_autoMixTimer = null;
|
||
}
|
||
|
||
const slider = document.getElementById('crossfader');
|
||
if (!slider) return false;
|
||
|
||
const target = endingDeckId === 'A' ? 100 : 0; // Fade toward the OTHER deck
|
||
const duration = 5000; // 5 seconds
|
||
const steps = 50;
|
||
const interval = duration / steps;
|
||
const start = parseInt(slider.value);
|
||
const delta = (target - start) / steps;
|
||
let step = 0;
|
||
|
||
console.log(`[AutoMix] Crossfading from Deck ${endingDeckId} → Deck ${otherDeck} over ${duration / 1000}s`);
|
||
showToast(`Auto-crossfading to Deck ${otherDeck}`, 'info');
|
||
|
||
_autoMixTimer = setInterval(() => {
|
||
step++;
|
||
const val = Math.round(start + delta * step);
|
||
slider.value = val;
|
||
updateCrossfader(val);
|
||
|
||
if (step >= steps) {
|
||
clearInterval(_autoMixTimer);
|
||
_autoMixTimer = null;
|
||
console.log(`[AutoMix] Crossfade complete. Now on Deck ${otherDeck}`);
|
||
|
||
// Load next track on the ending deck so it's ready for the next crossfade
|
||
if (queues[endingDeckId] && queues[endingDeckId].length > 0) {
|
||
const next = queues[endingDeckId].shift();
|
||
renderQueue(endingDeckId);
|
||
loadFromServer(endingDeckId, next.file, next.title);
|
||
}
|
||
}
|
||
}, interval);
|
||
|
||
return true;
|
||
}
|
||
|
||
// Shared handler called both by onended and the monitor poll.
|
||
// Handles repeat, auto-crossfade, auto-play-from-queue, or stop.
|
||
function handleTrackEnd(id) {
|
||
// Already being handled or loop is active — skip
|
||
if (decks[id].loading || decks[id].loopActive) return;
|
||
|
||
if (isBroadcasting) {
|
||
console.log(`Track ending during broadcast on Deck ${id}`);
|
||
if (settings[`repeat${id}`]) {
|
||
console.log(`Repeating track on Deck ${id} (broadcast)`);
|
||
seekTo(id, 0);
|
||
return;
|
||
}
|
||
if (settings.autoPlay && queues[id] && queues[id].length > 0) {
|
||
decks[id].loading = true;
|
||
const next = queues[id].shift();
|
||
renderQueue(id);
|
||
loadFromServer(id, next.file, next.title)
|
||
.then(() => { decks[id].loading = false; playDeck(id); })
|
||
.catch(() => { decks[id].loading = false; });
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (settings[`repeat${id}`]) {
|
||
console.log(`Repeating track on Deck ${id}`);
|
||
seekTo(id, 0);
|
||
} else if (settings.autoMix) {
|
||
// Auto-crossfade takes priority over simple auto-play
|
||
decks[id].loading = true;
|
||
if (!startAutoMixFade(id)) {
|
||
// Crossfade not possible (other deck empty) — fall through to normal auto-play
|
||
decks[id].loading = false;
|
||
handleAutoPlay(id);
|
||
} else {
|
||
decks[id].loading = false;
|
||
}
|
||
} else if (settings.autoPlay) {
|
||
handleAutoPlay(id);
|
||
} else {
|
||
pauseDeck(id);
|
||
decks[id].pausedAt = 0;
|
||
}
|
||
}
|
||
|
||
function handleAutoPlay(id) {
|
||
decks[id].loading = true;
|
||
pauseDeck(id);
|
||
|
||
if (queues[id] && queues[id].length > 0) {
|
||
console.log(`Auto-play: loading next from Queue ${id}`);
|
||
const next = queues[id].shift();
|
||
renderQueue(id);
|
||
loadFromServer(id, next.file, next.title)
|
||
.then(() => { decks[id].loading = false; playDeck(id); })
|
||
.catch(() => { decks[id].loading = false; });
|
||
} else {
|
||
console.log(`Auto-play: queue empty on Deck ${id}, stopping`);
|
||
decks[id].loading = false;
|
||
decks[id].pausedAt = 0;
|
||
}
|
||
}
|
||
|
||
// Monitoring — safety net for cases where onended doesn't fire
|
||
// (e.g. AudioContext suspended, very short buffer, scrub to near-end).
|
||
function monitorTrackEnd() {
|
||
setInterval(() => {
|
||
if (!audioCtx) return;
|
||
|
||
|
||
|
||
['A', 'B'].forEach(id => {
|
||
if (!decks[id].playing || !decks[id].localBuffer || decks[id].loading) return;
|
||
if (decks[id].loopActive) return;
|
||
|
||
const rate = decks[id].localSource ? decks[id].localSource.playbackRate.value : 1.0;
|
||
const elapsed = audioCtx.currentTime - decks[id].lastAnchorTime;
|
||
const current = decks[id].lastAnchorPosition + (elapsed * rate);
|
||
const remaining = decks[id].duration - current;
|
||
|
||
// Threshold scales with playback rate so we don't miss fast playback.
|
||
// Use 1.5× the poll interval (0.75s) as a safe window.
|
||
const threshold = Math.max(0.75, 0.75 * rate);
|
||
if (remaining <= threshold) {
|
||
console.log(`[Monitor] Deck ${id} near end (${remaining.toFixed(2)}s left) — triggering handleTrackEnd`);
|
||
handleTrackEnd(id);
|
||
}
|
||
});
|
||
}, 500);
|
||
}
|
||
monitorTrackEnd();
|
||
|
||
// Reset Deck to Default Settings
|
||
function resetDeck(id) {
|
||
vibrate(20);
|
||
console.log(`Resetting Deck ${id} to defaults...`);
|
||
|
||
if (!audioCtx) {
|
||
console.warn('AudioContext not initialised');
|
||
return;
|
||
}
|
||
|
||
// Reset EQ to neutral (0dB gain)
|
||
if (decks[id].filters) {
|
||
if (decks[id].filters.low) decks[id].filters.low.gain.value = 0;
|
||
if (decks[id].filters.mid) decks[id].filters.mid.gain.value = 0;
|
||
if (decks[id].filters.high) decks[id].filters.high.gain.value = 0;
|
||
|
||
// Reset UI sliders
|
||
const eqSliders = document.querySelectorAll(`#deck-${id} .eq-band input`);
|
||
eqSliders.forEach(slider => slider.value = 0); // 0 = neutral for -20/20 range
|
||
}
|
||
|
||
// Reset filters to fully open
|
||
if (decks[id].filters.lp) decks[id].filters.lp.frequency.value = 22050;
|
||
if (decks[id].filters.hp) decks[id].filters.hp.frequency.value = 0;
|
||
|
||
// Reset UI filter sliders
|
||
const lpSlider = document.querySelector(`#deck-${id} .filter-lp`);
|
||
const hpSlider = document.querySelector(`#deck-${id} .filter-hp`);
|
||
if (lpSlider) lpSlider.value = 100;
|
||
if (hpSlider) hpSlider.value = 0;
|
||
|
||
// Reset volume to 80%
|
||
if (decks[id].volumeGain) {
|
||
decks[id].volumeGain.gain.value = 0.8;
|
||
}
|
||
const volumeSlider = document.querySelector(`#deck-${id} .volume-fader`);
|
||
if (volumeSlider) volumeSlider.value = 80;
|
||
|
||
// Reset pitch/speed to 1.0 (100%)
|
||
const speedSlider = document.querySelector(`#deck-${id} .speed-slider`);
|
||
if (speedSlider) {
|
||
speedSlider.value = 1.0;
|
||
// Use changeSpeed function to properly update playback rate
|
||
changeSpeed(id, 1.0);
|
||
}
|
||
|
||
// Clear all hot cues
|
||
decks[id].cues = {};
|
||
const cueBtns = document.querySelectorAll(`#deck-${id} .cue-btn`);
|
||
cueBtns.forEach(btn => {
|
||
btn.classList.remove('cue-set');
|
||
btn.style.animation = '';
|
||
});
|
||
|
||
// Clear loops
|
||
decks[id].loopStart = null;
|
||
decks[id].loopEnd = null;
|
||
decks[id].loopActive = false;
|
||
|
||
const loopBtns = document.querySelectorAll(`#deck-${id} .loop-controls button`);
|
||
loopBtns.forEach(btn => {
|
||
btn.style.background = '';
|
||
btn.style.borderColor = '';
|
||
});
|
||
|
||
// Redraw waveform to clear cue/loop markers
|
||
drawWaveform(id);
|
||
|
||
// Clear neon glow
|
||
document.body.classList.remove('playing-' + id);
|
||
|
||
console.log(`[OK] Deck ${id} reset complete!`);
|
||
|
||
// Visual feedback
|
||
const resetBtn = document.querySelector(`#deck-${id} .reset-btn`);
|
||
if (resetBtn) {
|
||
resetBtn.style.transform = 'rotate(360deg)';
|
||
resetBtn.style.transition = 'transform 0.5s ease';
|
||
setTimeout(() => {
|
||
resetBtn.style.transform = '';
|
||
}, 500);
|
||
}
|
||
}
|
||
// ==========================================
|
||
// QUEUE SYSTEM
|
||
// ==========================================
|
||
|
||
// Add track to queue
|
||
function addToQueue(deckId, file, title) {
|
||
queues[deckId].push({ file, title });
|
||
renderQueue(deckId);
|
||
console.log(`Added "${title}" to Queue ${deckId} (${queues[deckId].length} tracks)`);
|
||
}
|
||
|
||
// Remove track from queue
|
||
function removeFromQueue(deckId, index) {
|
||
const removed = queues[deckId].splice(index, 1)[0];
|
||
renderQueue(deckId);
|
||
console.log(`Removed "${removed.title}" from Queue ${deckId}`);
|
||
}
|
||
|
||
// Clear entire queue
|
||
function clearQueue(deckId) {
|
||
const count = queues[deckId].length;
|
||
queues[deckId] = [];
|
||
renderQueue(deckId);
|
||
console.log(`Cleared Queue ${deckId} (${count} tracks removed)`);
|
||
}
|
||
|
||
// Load next track from queue
|
||
function loadNextFromQueue(deckId) {
|
||
if (queues[deckId].length === 0) {
|
||
console.log(`Queue ${deckId} is empty`);
|
||
return false;
|
||
}
|
||
|
||
const next = queues[deckId].shift();
|
||
console.log(`Loading next from Queue ${deckId}: "${next.title}"`);
|
||
loadFromServer(deckId, next.file, next.title);
|
||
renderQueue(deckId);
|
||
|
||
return true;
|
||
}
|
||
|
||
// Render queue UI
|
||
function renderQueue(deckId) {
|
||
const mainQueue = document.getElementById(`queue-list-${deckId}`);
|
||
const deckQueue = document.getElementById(`deck-queue-list-${deckId}`);
|
||
|
||
const targets = [mainQueue, deckQueue].filter(t => t !== null);
|
||
if (targets.length === 0) return;
|
||
|
||
const generateHTML = (isEmpty) => {
|
||
if (isEmpty) {
|
||
return '<div class="queue-empty">Queue is empty</div>';
|
||
}
|
||
return '';
|
||
};
|
||
|
||
targets.forEach(container => {
|
||
if (queues[deckId].length === 0) {
|
||
container.innerHTML = generateHTML(true);
|
||
} else {
|
||
container.innerHTML = '';
|
||
queues[deckId].forEach((track, index) => {
|
||
const item = document.createElement('div');
|
||
item.className = 'queue-item';
|
||
item.draggable = true;
|
||
|
||
const number = document.createElement('span');
|
||
number.className = 'queue-number';
|
||
number.textContent = (index + 1) + '.';
|
||
|
||
const title = document.createElement('span');
|
||
title.className = 'queue-track-title';
|
||
title.textContent = track.title;
|
||
|
||
const actions = document.createElement('div');
|
||
actions.className = 'queue-actions';
|
||
|
||
const loadBtn = document.createElement('button');
|
||
loadBtn.className = 'queue-load-btn';
|
||
loadBtn.textContent = 'PLAY';
|
||
loadBtn.title = 'Load now';
|
||
loadBtn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
loadFromServer(deckId, track.file, track.title);
|
||
removeFromQueue(deckId, index);
|
||
};
|
||
|
||
const removeBtn = document.createElement('button');
|
||
removeBtn.className = 'queue-remove-btn';
|
||
removeBtn.textContent = 'X';
|
||
removeBtn.title = 'Remove from queue';
|
||
removeBtn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
removeFromQueue(deckId, index);
|
||
};
|
||
|
||
actions.appendChild(loadBtn);
|
||
actions.appendChild(removeBtn);
|
||
|
||
item.appendChild(number);
|
||
item.appendChild(title);
|
||
item.appendChild(actions);
|
||
|
||
// Click to load also
|
||
item.onclick = () => {
|
||
loadFromServer(deckId, track.file, track.title);
|
||
removeFromQueue(deckId, index);
|
||
};
|
||
|
||
// 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');
|
||
};
|
||
|
||
item.ondragend = () => {
|
||
item.classList.remove('dragging');
|
||
};
|
||
|
||
item.ondragover = (e) => {
|
||
e.preventDefault();
|
||
e.dataTransfer.dropEffect = 'move';
|
||
};
|
||
|
||
item.ondrop = (e) => {
|
||
e.preventDefault();
|
||
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 !== "" && 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}`);
|
||
}
|
||
};
|
||
|
||
container.appendChild(item);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
// ==========================================
|
||
// KEYBOARD SHORTCUTS SYSTEM
|
||
// ==========================================
|
||
|
||
// Default keyboard mappings (can be customized)
|
||
const DEFAULT_KEYBOARD_MAPPINGS = {
|
||
// Deck A Controls
|
||
'q': { action: 'playDeckA', label: 'Play Deck A' },
|
||
'a': { action: 'pauseDeckA', label: 'Pause Deck A' },
|
||
'1': { action: 'cueA1', label: 'Deck A Cue 1' },
|
||
'2': { action: 'cueA2', label: 'Deck A Cue 2' },
|
||
'3': { action: 'cueA3', label: 'Deck A Cue 3' },
|
||
'4': { action: 'cueA4', label: 'Deck A Cue 4' },
|
||
'z': { action: 'loopInA', label: 'Loop IN Deck A' },
|
||
'x': { action: 'loopOutA', label: 'Loop OUT Deck A' },
|
||
'c': { action: 'loopExitA', label: 'Loop EXIT Deck A' },
|
||
'r': { action: 'resetDeckA', label: 'Reset Deck A' },
|
||
|
||
// Deck B Controls
|
||
'w': { action: 'playDeckB', label: 'Play Deck B' },
|
||
's': { action: 'pauseDeckB', label: 'Pause Deck B' },
|
||
'7': { action: 'cueB1', label: 'Deck B Cue 1' },
|
||
'8': { action: 'cueB2', label: 'Deck B Cue 2' },
|
||
'9': { action: 'cueB3', label: 'Deck B Cue 3' },
|
||
'0': { action: 'cueB4', label: 'Deck B Cue 4' },
|
||
'n': { action: 'loopInB', label: 'Loop IN Deck B' },
|
||
'm': { action: 'loopOutB', label: 'Loop OUT Deck B' },
|
||
',': { action: 'loopExitB', label: 'Loop EXIT Deck B' },
|
||
't': { action: 'resetDeckB', label: 'Reset Deck B' },
|
||
|
||
// Crossfader & Mixer
|
||
'ArrowLeft': { action: 'crossfaderLeft', label: 'Crossfader Left' },
|
||
'ArrowRight': { action: 'crossfaderRight', label: 'Crossfader Right' },
|
||
'ArrowDown': { action: 'crossfaderCenter', label: 'Crossfader Center' },
|
||
|
||
// Pitch Bend
|
||
'e': { action: 'pitchBendAUp', label: 'Pitch Bend A +' },
|
||
'd': { action: 'pitchBendADown', label: 'Pitch Bend A -' },
|
||
'i': { action: 'pitchBendBUp', label: 'Pitch Bend B +' },
|
||
'k': { action: 'pitchBendBDown', label: 'Pitch Bend B -' },
|
||
|
||
// Utility
|
||
'f': { action: 'toggleLibrary', label: 'Toggle Library' },
|
||
'b': { action: 'toggleBroadcast', label: 'Toggle Broadcast' },
|
||
'h': { action: 'showKeyboardHelp', label: 'Show Keyboard Help' },
|
||
'Escape': { action: 'closeAllPanels', label: 'Close All Panels' }
|
||
};
|
||
|
||
let keyboardMappings = { ...DEFAULT_KEYBOARD_MAPPINGS };
|
||
|
||
// Load custom mappings from server
|
||
async function loadKeyboardMappings() {
|
||
try {
|
||
const response = await fetch('/load_keymaps');
|
||
const data = await response.json();
|
||
if (data.success && data.keymaps) {
|
||
keyboardMappings = data.keymaps;
|
||
console.log('[OK] Loaded custom keyboard mappings from server');
|
||
} else {
|
||
console.log('Using default keyboard mappings');
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to load keyboard mappings from server:', e);
|
||
}
|
||
}
|
||
|
||
// Save custom mappings to server
|
||
async function saveKeyboardMappings() {
|
||
try {
|
||
await fetch('/save_keymaps', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(keyboardMappings)
|
||
});
|
||
console.log('[SAVED] Saved keyboard mappings to server');
|
||
} catch (e) {
|
||
console.error('Failed to save keyboard mappings to server:', e);
|
||
}
|
||
}
|
||
|
||
// Execute action based on key
|
||
function executeKeyboardAction(action) {
|
||
const actions = {
|
||
// Deck A
|
||
'playDeckA': () => playDeck('A'),
|
||
'pauseDeckA': () => pauseDeck('A'),
|
||
'cueA1': () => handleCue('A', 1),
|
||
'cueA2': () => handleCue('A', 2),
|
||
'cueA3': () => handleCue('A', 3),
|
||
'cueA4': () => handleCue('A', 4),
|
||
'loopInA': () => setLoop('A', 'in'),
|
||
'loopOutA': () => setLoop('A', 'out'),
|
||
'loopExitA': () => setLoop('A', 'exit'),
|
||
'resetDeckA': () => resetDeck('A'),
|
||
|
||
// Deck B
|
||
'playDeckB': () => playDeck('B'),
|
||
'pauseDeckB': () => pauseDeck('B'),
|
||
'cueB1': () => handleCue('B', 1),
|
||
'cueB2': () => handleCue('B', 2),
|
||
'cueB3': () => handleCue('B', 3),
|
||
'cueB4': () => handleCue('B', 4),
|
||
'loopInB': () => setLoop('B', 'in'),
|
||
'loopOutB': () => setLoop('B', 'out'),
|
||
'loopExitB': () => setLoop('B', 'exit'),
|
||
'resetDeckB': () => resetDeck('B'),
|
||
|
||
// Crossfader
|
||
'crossfaderLeft': () => {
|
||
const cf = document.getElementById('crossfader');
|
||
cf.value = Math.max(0, parseInt(cf.value) - 10);
|
||
updateCrossfader(cf.value);
|
||
},
|
||
'crossfaderRight': () => {
|
||
const cf = document.getElementById('crossfader');
|
||
cf.value = Math.min(100, parseInt(cf.value) + 10);
|
||
updateCrossfader(cf.value);
|
||
},
|
||
'crossfaderCenter': () => {
|
||
const cf = document.getElementById('crossfader');
|
||
cf.value = 50;
|
||
updateCrossfader(50);
|
||
},
|
||
|
||
// Pitch Bend
|
||
'pitchBendAUp': () => pitchBend('A', 0.05),
|
||
'pitchBendADown': () => pitchBend('A', -0.05),
|
||
'pitchBendBUp': () => pitchBend('B', 0.05),
|
||
'pitchBendBDown': () => pitchBend('B', -0.05),
|
||
|
||
// Utility
|
||
'toggleLibrary': () => switchTab('library'),
|
||
'toggleBroadcast': () => toggleBroadcast(),
|
||
'showKeyboardHelp': () => openKeyboardSettings(),
|
||
'closeAllPanels': () => {
|
||
document.getElementById('settings-panel').classList.remove('active');
|
||
document.getElementById('streaming-panel').classList.remove('active');
|
||
}
|
||
};
|
||
|
||
if (actions[action]) {
|
||
actions[action]();
|
||
} else {
|
||
console.warn('Unknown action:', action);
|
||
}
|
||
}
|
||
|
||
// Global keyboard event listener
|
||
document.addEventListener('keydown', (e) => {
|
||
// Ignore if typing in input field
|
||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
|
||
return;
|
||
}
|
||
|
||
const key = e.key;
|
||
const mapping = keyboardMappings[key];
|
||
|
||
if (mapping) {
|
||
e.preventDefault();
|
||
console.log(`Keyboard: ${key} RIGHT ${mapping.label}`);
|
||
executeKeyboardAction(mapping.action);
|
||
}
|
||
});
|
||
|
||
// Handle pitch bend release
|
||
document.addEventListener('keyup', (e) => {
|
||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
||
|
||
const key = e.key;
|
||
const mapping = keyboardMappings[key];
|
||
|
||
// Release pitch bend on key up
|
||
if (mapping && mapping.action.includes('pitchBend')) {
|
||
const deck = mapping.action.includes('A') ? 'A' : 'B';
|
||
pitchBend(deck, 0);
|
||
}
|
||
});
|
||
|
||
// Open keyboard settings panel
|
||
function openKeyboardSettings() {
|
||
const panel = document.getElementById('keyboard-settings-panel');
|
||
if (panel) {
|
||
panel.classList.toggle('active');
|
||
} else {
|
||
createKeyboardSettingsPanel();
|
||
}
|
||
}
|
||
|
||
// Create keyboard settings UI
|
||
function createKeyboardSettingsPanel() {
|
||
const panel = document.createElement('div');
|
||
panel.id = 'keyboard-settings-panel';
|
||
panel.className = 'settings-panel active';
|
||
panel.innerHTML = `
|
||
<div class="panel-header">
|
||
<h2>Keyboard Shortcuts</h2>
|
||
<button onclick="closeKeyboardSettings()">X</button>
|
||
</div>
|
||
<div class="panel-content">
|
||
<p style="margin-bottom: 15px; color: #888;">Click on a key to reassign it. Press ESC to cancel.</p>
|
||
<div id="keyboard-mappings-list"></div>
|
||
<div style="margin-top: 20px; display: flex; gap: 10px;">
|
||
<button onclick="resetKeyboardMappings()" class="btn-secondary">Reset to Defaults</button>
|
||
<button onclick="exportKeyboardMappings()" class="btn-secondary">Export</button>
|
||
<button onclick="importKeyboardMappings()" class="btn-secondary">Import</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(panel);
|
||
renderKeyboardMappings();
|
||
}
|
||
|
||
function closeKeyboardSettings() {
|
||
const panel = document.getElementById('keyboard-settings-panel');
|
||
if (panel) panel.classList.remove('active');
|
||
}
|
||
|
||
// Render keyboard mappings list
|
||
function renderKeyboardMappings() {
|
||
const list = document.getElementById('keyboard-mappings-list');
|
||
if (!list) return;
|
||
|
||
list.innerHTML = '';
|
||
|
||
Object.entries(keyboardMappings).forEach(([key, mapping]) => {
|
||
const item = document.createElement('div');
|
||
item.className = 'keyboard-mapping-item';
|
||
item.innerHTML = `
|
||
<span class="key-display">${formatKeyName(key)}</span>
|
||
<span class="key-arrow">RIGHT</span>
|
||
<span class="action-label">${mapping.label}</span>
|
||
`;
|
||
const changeBtn = document.createElement('button');
|
||
changeBtn.className = 'key-reassign-btn';
|
||
changeBtn.textContent = 'Change';
|
||
changeBtn.addEventListener('click', (e) => reassignKey(key, e));
|
||
item.appendChild(changeBtn);
|
||
list.appendChild(item);
|
||
});
|
||
}
|
||
|
||
// Format key name for display
|
||
function formatKeyName(key) {
|
||
const names = {
|
||
'ArrowLeft': 'LEFT Left',
|
||
'ArrowRight': 'RIGHT Right',
|
||
'ArrowUp': 'UP Up',
|
||
'ArrowDown': 'DOWN Down',
|
||
'Escape': 'ESC',
|
||
' ': 'Space'
|
||
};
|
||
return names[key] || key.toUpperCase();
|
||
}
|
||
|
||
// Reassign a key
|
||
function reassignKey(oldKey, evt) {
|
||
const item = evt.target.closest('.keyboard-mapping-item');
|
||
item.classList.add('listening');
|
||
item.querySelector('.key-reassign-btn').textContent = 'Press new key...';
|
||
|
||
const listener = (e) => {
|
||
e.preventDefault();
|
||
|
||
if (e.key === 'Escape') {
|
||
item.classList.remove('listening');
|
||
item.querySelector('.key-reassign-btn').textContent = 'Change';
|
||
document.removeEventListener('keydown', listener);
|
||
return;
|
||
}
|
||
|
||
const newKey = e.key;
|
||
|
||
// Check if key already assigned
|
||
if (keyboardMappings[newKey] && newKey !== oldKey) {
|
||
if (!confirm(`Key "${formatKeyName(newKey)}" is already assigned to "${keyboardMappings[newKey].label}". Overwrite?`)) {
|
||
item.classList.remove('listening');
|
||
item.querySelector('.key-reassign-btn').textContent = 'Change';
|
||
document.removeEventListener('keydown', listener);
|
||
return;
|
||
}
|
||
delete keyboardMappings[newKey];
|
||
}
|
||
|
||
// Move mapping to new key
|
||
keyboardMappings[newKey] = keyboardMappings[oldKey];
|
||
delete keyboardMappings[oldKey];
|
||
|
||
saveKeyboardMappings();
|
||
renderKeyboardMappings();
|
||
document.removeEventListener('keydown', listener);
|
||
|
||
console.log(`[OK] Remapped: ${formatKeyName(oldKey)} RIGHT ${formatKeyName(newKey)}`);
|
||
};
|
||
|
||
document.addEventListener('keydown', listener);
|
||
}
|
||
|
||
// Reset to default mappings
|
||
async function resetKeyboardMappings() {
|
||
if (confirm('Reset all keyboard shortcuts to defaults?')) {
|
||
keyboardMappings = { ...DEFAULT_KEYBOARD_MAPPINGS };
|
||
await saveKeyboardMappings();
|
||
renderKeyboardMappings();
|
||
}
|
||
}
|
||
|
||
// Export mappings
|
||
function exportKeyboardMappings() {
|
||
const json = JSON.stringify(keyboardMappings, null, 2);
|
||
const blob = new Blob([json], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'techdj-keyboard-mappings.json';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
|
||
// Import mappings
|
||
function importKeyboardMappings() {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'application/json';
|
||
input.onchange = (e) => {
|
||
const file = e.target.files[0];
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
try {
|
||
const imported = JSON.parse(event.target.result);
|
||
keyboardMappings = imported;
|
||
saveKeyboardMappings();
|
||
renderKeyboardMappings();
|
||
alert('[OK] Keyboard mappings imported successfully!');
|
||
} catch (err) {
|
||
alert('[ERROR] Failed to import: Invalid file format');
|
||
}
|
||
};
|
||
reader.readAsText(file);
|
||
};
|
||
input.click();
|
||
}
|
||
|
||
// Initialise on load
|
||
loadKeyboardMappings();
|
||
console.log('Keyboard shortcuts enabled. Press H for help.');
|