From da1c16d5d2518581098a75cf28d31e404c07d66d Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Tue, 11 Aug 2026 17:03:21 +0200
Subject: fix(ui): remove duplicate connecting messages and buggy stream
 progress bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. "Connecting..." was shown in 3 places simultaneously (status badge,
   cached files area, and general status). Now only the badge shows it
   when cached files are visible — the redundant messages are removed.

2. The floating stream progress bar caused constant re-renders during
   video streaming (every 256KB segment triggered setState). The fMP4
   remux size also differs from the original file size, making the
   progress inaccurate. Removed the overlay bar entirely — the video
   element's native buffered range indicator is sufficient.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/meshbay-hub/src/meshbay_hub/static/app.js | 32 +++-------------------
 1 file changed, 4 insertions(+), 28 deletions(-)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static/app.js')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index cb3e05b..5a50010 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -997,18 +997,13 @@ function GroupPage({ groupId, group, token, username }) {
           <${MembersPanel} groupId=${groupId} group=${group} token=${token} />
         `}
       `}
-      ${cached && entries.length > 0 && status !== 'connected' && tab === 'files' && html`
-        <p class="page-message" style="margin-top:8px">
-          <span class="spinner"></span>${' '}${t('status.connecting')}
-        </p>
-      `}
       ${status === 'offline' && html`
         <p class="page-message">
           ${t('group.offline_title')}
           ${' '}${t('group.offline_hint')}
         </p>
       `}
-      ${(status === 'discovering' || status === 'connecting' || status === 'fetching') && html`
+      ${!cached && (status === 'discovering' || status === 'connecting' || status === 'fetching') && html`
         <p class="page-message">${statusLabel}</p>
       `}
       ${previewEntry && html`
@@ -1478,9 +1473,7 @@ function _mseSupported(codec) {
 
 function VideoPlayer({ entry, transportRef, gekRef, onClose }) {
   const [phase, setPhase] = useState('loading');
-  const [progress, setProgress] = useState(0);
   const [error, setError] = useState('');
-  const [buffered, setBuffered] = useState(0);
   const videoRef = useRef(null);
   const msRef = useRef(null);
   const sbRef = useRef(null);
@@ -1524,7 +1517,6 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose }) {
       }
 
       let streamCodec = null;
-      let totalBytes = 0;
 
       transport.onStreamInit = (msg) => {
         if (cancelled) return;
@@ -1548,10 +1540,6 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose }) {
           sbRef.current = sb;
           sb.addEventListener('updateend', () => {
             appendingRef.current = false;
-            if (videoRef.current) {
-              setBuffered(videoRef.current.buffered.length > 0
-                ? videoRef.current.buffered.end(0) : 0);
-            }
             flushQueue();
           });
           setPhase('streaming');
@@ -1568,8 +1556,6 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose }) {
         try {
           const plaintext = await window.MeshBayCrypto.decryptChunkBin(
             gekRef.current, entry.id, msg.segment_index, msg.nonce, msg.ct);
-          totalBytes += plaintext.byteLength;
-          setProgress(entry.size > 0 ? totalBytes / entry.size : 0);
           queueRef.current.push(plaintext);
           flushQueue();
         } catch (e) {
@@ -1632,7 +1618,9 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose }) {
 
       ${phase === 'loading' && html`
         <div class="video-loading">
-          <div class="video-loading-label">${t('video.buffering')}</div>
+          <div class="video-loading-label">
+            <span class="spinner"></span>${' '}${t('video.buffering')}
+          </div>
         </div>
       `}
 
@@ -1642,18 +1630,6 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose }) {
         </div>
       `}
 
-      ${phase === 'streaming' && progress < 1 && html`
-        <div class="video-stream-bar">
-          <div class="video-progress-bar small">
-            <div class="video-progress-fill"
-              style="width:${Math.round(progress * 100)}%"></div>
-          </div>
-          <span class="video-stream-label">
-            ${formatSize(Math.round(progress * entry.size))} / ${formatSize(entry.size)}
-          </span>
-        </div>
-      `}
-
       ${phase === 'error' && html`
         <div class="video-error">${error}</div>
       `}
-- 
cgit v1.2.3