instbyte 1.9.3 → 1.10.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;
@@ -116,6 +137,9 @@ async function applyBranding() {
         root.style.setProperty("--color-secondary-light", p.secondaryLight);
         root.style.setProperty("--color-on-secondary", p.onSecondary);
 
+        const themeMeta = document.getElementById('themeColorMeta');
+        if (themeMeta) themeMeta.setAttribute('content', p.primary);
+
     } catch (e) {
         // Branding failed — default styles remain, no crash
     }
@@ -158,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);
@@ -210,18 +234,30 @@ function renderText(text) {
     if (!text) return "";
     if (looksLikeMarkdown(text)) {
         const html = marked.parse(text);
-        // highlight code blocks after parse
         const wrap = document.createElement("div");
         wrap.innerHTML = html;
         wrap.querySelectorAll("pre code").forEach(el => hljs.highlightElement(el));
         return `<div class="markdown-body">${wrap.innerHTML}</div>`;
     }
-    // plain text — just escape and preserve newlines
-    return text
+    // plain text — escape and preserve newlines
+    const escaped = text
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/\n/g, "<br>");
+
+    // collapse long plain text (more than 8 newlines)
+    const lineCount = (text.match(/\n/g) || []).length;
+    if (lineCount > 8) {
+        const id = 'expand-' + Math.random().toString(36).slice(2, 8);
+        return `<div class="item-text-collapsed" id="${id}">${escaped}</div>
+<button class="item-text-expand-btn" onclick="
+    document.getElementById('${id}').classList.remove('item-text-collapsed');
+    this.remove();
+">Show more</button>`;
+    }
+
+    return escaped;
 }
 
 const TEXT_EXTENSIONS = [
@@ -452,6 +488,7 @@ function toggleMoveDropdown(e, id, currentChannel) {
 
     dropdown.classList.add("open");
     openDropdown = dropdown;
+    if (window.innerWidth <= 640) openBottomSheet(dropdown);
 }
 
 function toggleMoreMenu(e, id, currentChannel) {
@@ -1255,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");
@@ -1263,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];
@@ -1315,6 +1352,7 @@ async function uploadFiles(files) {
                     setTimeout(resolve, 1200);
                     return;
                 }
+                if (navigator.vibrate) navigator.vibrate([50]);
                 resolve();
             };
 
@@ -1476,21 +1514,27 @@ function showChannelMenu(e, ch) {
     </button>
   `;
 
-    menu.style.top = e.clientY + "px";
-    menu.style.left = e.clientX + "px";
-    menu.classList.add("open");
-
-    requestAnimationFrame(() => {
-        const rect = menu.getBoundingClientRect();
-        if (rect.right > window.innerWidth - 8)
-            menu.style.left = (e.clientX - rect.width) + "px";
-        if (rect.bottom > window.innerHeight - 8)
-            menu.style.top = (e.clientY - rect.height) + "px";
-    });
+    if (window.innerWidth <= 640) {
+        // mobile — bottom sheet, no positioning needed
+        menu.classList.add("open");
+        openBottomSheet(menu);
+    } else {
+        // desktop — position by click coordinates
+        menu.style.top = e.clientY + "px";
+        menu.style.left = e.clientX + "px";
+        menu.classList.add("open");
+        requestAnimationFrame(() => {
+            const rect = menu.getBoundingClientRect();
+            if (rect.right > window.innerWidth - 8)
+                menu.style.left = (e.clientX - rect.width) + "px";
+            if (rect.bottom > window.innerHeight - 8)
+                menu.style.top = (e.clientY - rect.height) + "px";
+        });
+    }
 }
 
 document.addEventListener("click", () => {
-    document.getElementById("channelMenu").classList.remove("open");
+    closeAllBottomSheets();
 });
 
 document.addEventListener("contextmenu", (e) => {
@@ -1635,6 +1679,494 @@ document.addEventListener("keydown", e => {
 
 });
 
+// Create shared backdrop for bottom sheets
+const bottomSheetBackdrop = document.createElement('div');
+bottomSheetBackdrop.className = 'bottom-sheet-backdrop';
+document.body.appendChild(bottomSheetBackdrop);
+
+function openBottomSheet(el) {
+    bottomSheetBackdrop.classList.add('open');
+    bottomSheetBackdrop.onclick = () => closeAllBottomSheets();
+}
+
+function closeAllBottomSheets() {
+    bottomSheetBackdrop.classList.remove('open');
+    // close context menu
+    document.getElementById('channelMenu').classList.remove('open');
+    // close any open move dropdown
+    if (openDropdown) {
+        openDropdown.classList.remove('open');
+        openDropdown = null;
+    }
+}
+
+// ============================================================
+// 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();
@@ -1646,4 +2178,11 @@ document.addEventListener("keydown", e => {
     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/client/sw.js

@@ -0,0 +1,10 @@
+// sw.js — Instbyte service worker
+// Minimal install-only service worker.
+// We do not cache anything — Instbyte is a real-time LAN tool and must
+// always fetch live data. This file exists solely to satisfy the PWA
+// installability requirement.
+
+self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
+
+// No fetch handler — all requests go straight to the network as normal.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instbyte",
-  "version": "1.9.3",
+  "version": "1.10.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": {