instbyte 1.9.4 → 1.11.0

package/client/js/app.js

@@ -6,6 +6,27 @@ let retention = 24 * 60 * 60 * 1000; // default 24h, overwritten on init
 const newItemIds = new Set();
 const seenEmitted = new Set(); // item IDs this session has already emitted seen for
 
+// BROADCAST STATE
+let isBroadcasting = false;
+let broadcastStream = null;
+let broadcastChannel = 'general';
+let audioCtx = null;
+
+// WebRTC — broadcaster maintains one peer connection per viewer
+// key: viewerId (socket id), value: RTCPeerConnection
+const peerConnections = new Map();
+
+// WebRTC — viewer holds a single peer connection to broadcaster
+let viewerPeerConnection = null;
+let broadcasterId = null;
+
+const STUN_SERVERS = {
+    iceServers: [
+        { urls: 'stun:stun.l.google.com:19302' },
+        { urls: 'stun:stun1.l.google.com:19302' }
+    ]
+};
+
 const seenObserver = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
         if (!entry.isIntersecting) return;
@@ -161,7 +182,7 @@ function escapeHtml(str) {
 
 function playChime() {
     try {
-        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        const ctx = audioCtx || new (window.AudioContext || window.webkitAudioContext)();
 
         const gain = ctx.createGain();
         gain.connect(ctx.destination);
@@ -1271,7 +1292,7 @@ document.addEventListener("paste", async e => {
     });
 });
 
-async function uploadFiles(files) {
+async function uploadFiles(files, overrideChannel) {
     if (!files || !files.length) return;
 
     const status = document.getElementById("uploadStatus");
@@ -1279,7 +1300,7 @@ async function uploadFiles(files) {
     const text = document.getElementById("uploadText");
 
     const total = files.length;
-    const targetChannel = channel; // capture at start, won't change if user switches
+    const targetChannel = overrideChannel || channel; // capture at start, won't change if user switches
 
     for (let i = 0; i < total; i++) {
         const file = files[i];
@@ -1679,6 +1700,473 @@ function closeAllBottomSheets() {
     }
 }
 
+// ============================================================
+// BROADCAST
+// ============================================================
+
+async function startBroadcast() {
+    if (!window.isSecureContext) {
+        showBroadcastSecureWarning();
+        return;
+    }
+
+    const statusRes = await fetch('/broadcast/status');
+    const status = await statusRes.json();
+    if (status.live) {
+        alert(`${status.uploader} is already broadcasting. Only one broadcast at a time.`);
+        return;
+    }
+
+    const channelNames = channels.map(c => c.name);
+    broadcastChannel = channelNames.includes('general') ? 'general' : channelNames[0];
+
+    let stream;
+    try {
+        stream = await navigator.mediaDevices.getDisplayMedia({
+            video: { frameRate: { ideal: 30 }, width: { ideal: 1920 }, height: { ideal: 1080 } },
+            audio: true
+        });
+
+        // Mix in microphone if available — failure is silent, broadcast continues without mic
+        try {
+            const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            micStream.getAudioTracks().forEach(track => stream.addTrack(track));
+        } catch (e) {
+            // Mic denied or unavailable — continue without it
+        }
+    } catch (e) {
+        return;
+    }
+
+    const startRes = await fetch('/broadcast/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ uploader, channel: broadcastChannel, socketId: socket.id })
+    });
+
+    if (!startRes.ok) {
+        const err = await startRes.json();
+        alert(err.error || 'Could not start broadcast');
+        stream.getTracks().forEach(t => t.stop());
+        return;
+    }
+
+    broadcastStream = stream;
+    isBroadcasting = true;
+
+    try {
+        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        await audioCtx.resume();
+    } catch (e) { }
+
+    const startBtn = document.getElementById('startBroadcastBtn');
+    if (startBtn) {
+        startBtn.textContent = '⏹ Stop';
+        startBtn.classList.add('is-live');
+        startBtn.onclick = stopBroadcast;
+    }
+
+    stream.getVideoTracks()[0].addEventListener('ended', () => {
+        stopBroadcast();
+    });
+}
+
+async function stopBroadcast() {
+    if (!isBroadcasting) return;
+
+    isBroadcasting = false;
+
+    // Reset UI immediately — before any async calls that might fail
+    const startBtn = document.getElementById('startBroadcastBtn');
+    if (startBtn) {
+        startBtn.textContent = '📡 Broadcast';
+        startBtn.classList.remove('is-live');
+        startBtn.onclick = startBroadcast;
+    }
+
+    // Close all peer connections to viewers
+    peerConnections.forEach(pc => pc.close());
+    peerConnections.clear();
+
+    if (broadcastStream) {
+        broadcastStream.getTracks().forEach(t => t.stop());
+        broadcastStream = null;
+    }
+
+    // Best effort — server may already be down
+    try { await fetch('/broadcast/end', { method: 'POST' }); } catch (e) { }
+}
+
+// Called when broadcaster gets notified a new viewer joined
+async function handleViewerJoined(viewerId) {
+    if (!broadcastStream) return;
+
+    const pc = new RTCPeerConnection(STUN_SERVERS);
+    peerConnections.set(viewerId, pc);
+
+    // Add all tracks from the screen share stream
+    broadcastStream.getTracks().forEach(track => {
+        pc.addTrack(track, broadcastStream);
+    });
+
+    // Send ICE candidates to this viewer as they're discovered
+    pc.onicecandidate = ({ candidate }) => {
+        if (candidate) {
+            socket.emit('webrtc-ice', { candidate, targetId: viewerId });
+        }
+    };
+
+    pc.onconnectionstatechange = () => {
+        if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
+            pc.close();
+            peerConnections.delete(viewerId);
+        }
+    };
+
+    // Create and send offer to viewer
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    socket.emit('webrtc-offer', { offer, viewerId });
+}
+
+function showBroadcastBar(data) {
+    const bar = document.getElementById('broadcastBar');
+    const label = document.getElementById('broadcastLabel');
+    const endBtn = document.getElementById('broadcastEndBtn');
+    const joinBtn = document.getElementById('broadcastJoinBtn');
+
+    if (!bar) return;
+
+    label.textContent = `${data.uploader} is broadcasting`;
+    bar.style.display = 'block';
+
+    // Show end button only to the broadcaster
+    if (data.uploader === uploader) {
+        endBtn.style.display = 'inline-block';
+        joinBtn.style.display = 'none';
+    } else {
+        endBtn.style.display = 'none';
+        joinBtn.style.display = 'inline-block';
+    }
+}
+
+function hideBroadcastBar() {
+    const bar = document.getElementById('broadcastBar');
+    if (!bar) return;
+
+    // Show ended toast for 5 seconds then hide bar
+    const label = document.getElementById('broadcastLabel');
+    label.textContent = 'Broadcast ended';
+
+    setTimeout(() => {
+        bar.style.display = 'none';
+    }, 5000);
+}
+
+function joinBroadcast() {
+    const panel = document.getElementById('viewerPanel');
+    const label = document.getElementById('viewerLabel');
+    if (!panel) return;
+
+    label.textContent = `${document.getElementById('broadcastLabel').textContent}`;
+    panel.style.display = 'flex';
+
+    // Hide join button while viewing
+    const joinBtn = document.getElementById('broadcastJoinBtn');
+    if (joinBtn) joinBtn.style.display = 'none';
+
+    // Reset position to default top-right on each join
+    panel.style.left = '';
+    panel.style.top = '';
+    panel.style.right = '20px';
+
+    makeDraggable(panel);
+    socket.emit('broadcast-join');
+}
+
+function leaveBroadcast() {
+    const panel = document.getElementById('viewerPanel');
+    if (panel) panel.style.display = 'none';
+
+    // Restore join button
+    const joinBtn = document.getElementById('broadcastJoinBtn');
+    if (joinBtn) joinBtn.style.display = 'inline-block';
+
+    // Reset audio button to muted state
+    const audioBtn = document.getElementById('audioToggleBtn');
+    if (audioBtn) {
+        audioBtn.textContent = '🔇';
+        audioBtn.title = 'Unmute audio';
+    }
+
+    // Clean up viewer peer connection
+    if (viewerPeerConnection) {
+        viewerPeerConnection.close();
+        viewerPeerConnection = null;
+    }
+    broadcasterId = null;
+
+    // Stop video stream and reset audio on viewer element
+    const video = document.getElementById('viewerFrame');
+    if (video) {
+        video.srcObject = null;
+        video.muted = true;
+    }
+}
+
+async function captureToChannel() {
+    const video = document.getElementById('viewerFrame');
+    if (!video || !video.srcObject) return;
+
+    // Draw current video frame to canvas and convert to blob
+    const canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth || 1280;
+    canvas.height = video.videoHeight || 720;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    canvas.toBlob((blob) => {
+        if (!blob) return;
+        const file = new File([blob], `broadcast-${Date.now()}.jpg`, { type: 'image/jpeg' });
+        uploadFiles([file], broadcastChannel);
+    }, 'image/jpeg', 0.9);
+}
+
+function raiseHand() {
+    socket.emit('broadcast-reaction', { from: uploader });
+
+    // Visual feedback for the person raising hand
+    const toast = document.createElement('div');
+    toast.className = 'raise-hand-toast';
+    toast.textContent = '✋ Raised hand';
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 2000);
+}
+
+function showBroadcastSecureWarning() {
+    const bar = document.getElementById('broadcastBar');
+    const label = document.getElementById('broadcastLabel');
+    if (!bar || !label) return;
+
+    bar.style.display = 'block';
+    label.innerHTML = `Broadcasting requires HTTPS or localhost. 
+        <a href="https://github.com/mohitgauniyal/instbyte#reverse-proxy" 
+           target="_blank" 
+           style="color:#60a5fa;text-decoration:underline">
+           Learn more
+        </a>`;
+
+    // Hide after 6 seconds
+    setTimeout(() => {
+        bar.style.display = 'none';
+        label.textContent = 'Someone is broadcasting';
+    }, 6000);
+}
+
+function toggleMinimize() {
+    const panel = document.getElementById('viewerPanel');
+    if (!panel) return;
+    panel.classList.toggle('minimized');
+}
+
+function toggleAudio() {
+    const video = document.getElementById('viewerFrame');
+    const btn = document.getElementById('audioToggleBtn');
+    if (!video || !btn) return;
+
+    video.muted = !video.muted;
+    btn.textContent = video.muted ? '🔇' : '🔊';
+    btn.title = video.muted ? 'Unmute audio' : 'Mute audio';
+}
+
+function makeDraggable(panel) {
+    const header = panel.querySelector('.viewer-panel-header');
+    if (!header) return;
+
+    let isDragging = false;
+    let startX, startY, startLeft, startTop;
+
+    header.addEventListener('mousedown', (e) => {
+        // Don't drag if clicking a button
+        if (e.target.tagName === 'BUTTON') return;
+
+        isDragging = true;
+        startX = e.clientX;
+        startY = e.clientY;
+
+        const rect = panel.getBoundingClientRect();
+        startLeft = rect.left;
+        startTop = rect.top;
+
+        // Switch from right-anchored to left-anchored positioning
+        panel.style.right = 'auto';
+        panel.style.left = startLeft + 'px';
+        panel.style.top = startTop + 'px';
+
+        e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        let newLeft = startLeft + dx;
+        let newTop = startTop + dy;
+
+        // Keep within viewport
+        newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - panel.offsetWidth));
+        newTop = Math.max(0, Math.min(newTop, window.innerHeight - panel.offsetHeight));
+
+        panel.style.left = newLeft + 'px';
+        panel.style.top = newTop + 'px';
+    });
+
+    document.addEventListener('mouseup', () => {
+        isDragging = false;
+    });
+}
+
+// ─── SOCKET LISTENERS ────────────────────────────────────────
+
+socket.on('broadcast-started', (data) => {
+    showBroadcastBar(data);
+});
+
+socket.on('broadcast-ended', () => {
+    hideBroadcastBar();
+    leaveBroadcast();
+
+    if (isBroadcasting) {
+        isBroadcasting = false;
+        const startBtn = document.getElementById('startBroadcastBtn');
+        if (startBtn) {
+            startBtn.textContent = '📡 Broadcast';
+            startBtn.classList.remove('is-live');
+            startBtn.onclick = startBroadcast;
+        }
+    }
+});
+
+// ─── WEBRTC — BROADCASTER SIDE ───────────────────────────────
+
+// A new viewer joined — broadcaster initiates peer connection
+socket.on('webrtc-viewer-joined', ({ viewerId }) => {
+    if (!isBroadcasting) return;
+    handleViewerJoined(viewerId);
+});
+
+// Broadcaster receives answer from a viewer
+socket.on('webrtc-answer', async ({ answer, viewerId }) => {
+    const pc = peerConnections.get(viewerId);
+    if (!pc) return;
+    try {
+        await pc.setRemoteDescription(new RTCSessionDescription(answer));
+    } catch (e) {
+        console.error('Error setting remote description on broadcaster:', e);
+    }
+});
+
+// ─── WEBRTC — VIEWER SIDE ────────────────────────────────────
+
+// Viewer receives offer from broadcaster
+socket.on('webrtc-offer', async ({ offer, broadcasterId: bid }) => {
+    broadcasterId = bid;
+
+    // Clean up any existing peer connection
+    if (viewerPeerConnection) {
+        viewerPeerConnection.close();
+        viewerPeerConnection = null;
+    }
+
+    const pc = new RTCPeerConnection(STUN_SERVERS);
+    viewerPeerConnection = pc;
+
+    // When stream arrives, attach to video element
+    pc.ontrack = ({ streams }) => {
+        const video = document.getElementById('viewerFrame');
+        if (video && streams[0]) {
+            video.srcObject = streams[0];
+        }
+    };
+
+    // Send ICE candidates back to broadcaster
+    pc.onicecandidate = ({ candidate }) => {
+        if (candidate) {
+            socket.emit('webrtc-ice', { candidate, targetId: broadcasterId });
+        }
+    };
+
+    pc.onconnectionstatechange = () => {
+        if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
+            pc.close();
+            viewerPeerConnection = null;
+        }
+    };
+
+    await pc.setRemoteDescription(new RTCSessionDescription(offer));
+    const answer = await pc.createAnswer();
+    await pc.setLocalDescription(answer);
+    socket.emit('webrtc-answer', { answer, broadcasterId });
+});
+
+// ICE candidates — both broadcaster and viewer use same handler
+socket.on('webrtc-ice', async ({ candidate, fromId }) => {
+    // Broadcaster receives from viewer
+    if (isBroadcasting) {
+        const pc = peerConnections.get(fromId);
+        if (pc) {
+            try { await pc.addIceCandidate(new RTCIceCandidate(candidate)); } catch (e) { }
+        }
+        return;
+    }
+
+    // Viewer receives from broadcaster
+    if (viewerPeerConnection) {
+        try { await viewerPeerConnection.addIceCandidate(new RTCIceCandidate(candidate)); } catch (e) { }
+    }
+});
+
+socket.on('disconnect', () => {
+    // Trigger the same cleanup flow as a normal broadcast-ended event
+    if (isBroadcasting || viewerPeerConnection) {
+        isBroadcasting = false;
+
+        peerConnections.forEach(pc => pc.close());
+        peerConnections.clear();
+
+        if (broadcastStream) {
+            broadcastStream.getTracks().forEach(t => t.stop());
+            broadcastStream = null;
+        }
+
+        const startBtn = document.getElementById('startBroadcastBtn');
+        if (startBtn) {
+            startBtn.textContent = '📡 Broadcast';
+            startBtn.classList.remove('is-live');
+            startBtn.onclick = startBroadcast;
+        }
+
+        hideBroadcastBar();
+        leaveBroadcast();
+    }
+});
+
+// ─── RAISE HAND ──────────────────────────────────────────────
+
+socket.on('broadcast-reaction-received', ({ from }) => {
+    if (!isBroadcasting) return;
+
+    playChime();
+
+    const toast = document.createElement('div');
+    toast.className = 'raise-hand-toast';
+    toast.textContent = `✋ ${from} raised their hand`;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 8000);
+});
+
 (async function init() {
     await applyBranding();
     await initName();
@@ -1690,4 +2178,11 @@ function closeAllBottomSheets() {
     retention = info.retention; // null if "never", ms value otherwise
     await loadChannels();
     load();
+
+    // Check if a broadcast is already live when page loads
+    const broadcastRes = await fetch('/broadcast/status');
+    const broadcastStatus = await broadcastRes.json();
+    if (broadcastStatus.live) {
+        showBroadcastBar(broadcastStatus);
+    }
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instbyte",
-  "version": "1.9.4",
+  "version": "1.11.0",
   "description": "A self-hosted LAN sharing utility for fast, frictionless file, link, and snippet exchange across devices — no cloud required.",
   "main": "bin/instbyte.js",
   "bin": {
@@ -43,6 +43,7 @@
     "express-rate-limit": "^7.1.5",
     "helmet": "^8.1.0",
     "multer": "^2.0.2",
+    "multicast-dns": "^7.2.5",
     "sharp": "^0.33.2",
     "socket.io": "^4.6.1",
     "sqlite3": "^5.1.6"

package/server/config.js

@@ -43,12 +43,21 @@ function loadConfig() {
     let userConfig = {};
 
     if (fs.existsSync(configPath)) {
-        try {
-            const raw = fs.readFileSync(configPath, "utf-8");
-            userConfig = JSON.parse(raw);
-            console.log("Config loaded from instbyte.config.json");
-        } catch (e) {
-            console.warn("Warning: instbyte.config.json is invalid JSON, using defaults.");
+        if (fs.statSync(configPath).isDirectory()) {
+            console.error(
+                "Error: instbyte.config.json is a directory, not a file.\n" +
+                "This usually happens in Docker when the config file doesn't exist on the host before the container starts.\n" +
+                "Fix: stop the container, run `rm -rf instbyte.config.json && touch instbyte.config.json`, then start again.\n" +
+                "Using defaults for now."
+            );
+        } else {
+            try {
+                const raw = fs.readFileSync(configPath, "utf-8");
+                userConfig = JSON.parse(raw);
+                console.log("Config loaded from instbyte.config.json");
+            } catch (e) {
+                console.warn("Warning: instbyte.config.json is invalid JSON, using defaults.");
+            }
         }
     }