aboutsummaryrefslogtreecommitdiffstats
path: root/packages/meshbay-hub/src/meshbay_hub/static/app.js
diff options
context:
space:
mode:
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/app.js')
-rw-r--r--packages/meshbay-hub/src/meshbay_hub/static/app.js105
1 files changed, 93 insertions, 12 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index 92bf8f4..34c2517 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -527,6 +527,9 @@ function CreateGroupPage({ token, onCreated }) {
return html`
<div class="page-center">
<h2>${t('create_group.title')}</h2>
+ <p class="page-message" style="max-width:380px;text-align:center;margin-bottom:12px">
+ ${t('create_group.hint')}
+ </p>
${error && html`<p class="error-msg">${error}</p>`}
<form class="login-form" onSubmit=${onSubmit}>
<input type="text" placeholder="${t('create_group.name')}"
@@ -574,6 +577,7 @@ function formatDate(ts) {
// ── Group Page ──────────────────────────────────────────────────────────────
const CHUNK_SIZE = 1024 * 1024;
+const UPLOAD_CHUNK_SIZE = 64 * 1024;
const PIPELINE_WINDOW = 8;
async function pipelinedDownload(transport, gekKey, fileId, totalChunks, onChunk, writable) {
@@ -754,9 +758,9 @@ function GroupPage({ groupId, group, token, username }) {
setUploading(true);
setError('');
try {
- const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+ const totalChunks = Math.ceil(file.size / UPLOAD_CHUNK_SIZE);
for (let i = 0; i < totalChunks; i++) {
- const slice = file.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE);
+ const slice = file.slice(i * UPLOAD_CHUNK_SIZE, (i + 1) * UPLOAD_CHUNK_SIZE);
const buf = new Uint8Array(await slice.arrayBuffer());
await transport.uploadChunk(file.name, i, totalChunks, buf);
}
@@ -769,6 +773,27 @@ function GroupPage({ groupId, group, token, username }) {
}
}, []);
+ const deleteFile = useCallback(async (entry) => {
+ const transport = transportRef.current;
+ if (!transport || !transport.connected) return;
+ try {
+ await transport.deleteFile(entry.id);
+ const indexMsg = await transport.fetchIndex();
+ setEntries(indexMsg.entries || []);
+ } catch (err) {
+ setError(err.message);
+ }
+ }, []);
+
+ const refreshIndex = useCallback(async () => {
+ const transport = transportRef.current;
+ if (!transport || !transport.connected) return;
+ try {
+ const indexMsg = await transport.fetchIndex();
+ setEntries(indexMsg.entries || []);
+ } catch {}
+ }, []);
+
const toggleSort = useCallback((key) => {
setSortAsc(prev => sortKey === key ? !prev : true);
setSortKey(key);
@@ -838,7 +863,7 @@ function GroupPage({ groupId, group, token, username }) {
<span class="dl-pct">${formatSize(dlState.progress)} / ${formatSize(dlState.total)}</span>
</div>
`}
- ${status === 'connected' && html`
+ ${(status === 'connected' || (cached && entries.length > 0)) && html`
<div class="group-tabs">
<button class="group-tab ${tab === 'files' ? 'active' : ''}"
onClick=${() => setTab('files')}>${t('group.tab_files')}</button>
@@ -939,6 +964,12 @@ function GroupPage({ groupId, group, token, username }) {
${t('group.play')}
</button>
`}
+ ${group && group.is_admin && status === 'connected' && html`
+ <button class="danger" onClick=${() => {
+ setMenuOpen(null);
+ if (confirm(t('group.delete_confirm', { name: e.name }))) deleteFile(e);
+ }}>${t('group.delete')}</button>
+ `}
</div>
`}
</td>
@@ -954,15 +985,23 @@ function GroupPage({ groupId, group, token, username }) {
</table>
`}
- ${tab === 'chat' && html`
+ ${tab === 'chat' && status === 'connected' && html`
<${ChatPanel} transportRef=${transportRef} username=${username}
- entries=${entries} />
+ entries=${entries} gekRef=${gekRef} onRefreshIndex=${refreshIndex} />
+ `}
+ ${tab === 'chat' && status !== 'connected' && html`
+ <p class="page-message"><span class="spinner"></span>${' '}${t('status.connecting')}</p>
`}
${tab === 'members' && html`
<${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')}
@@ -1184,7 +1223,7 @@ function MembersPanel({ groupId, group, token }) {
<td>${m.username}</td>
<td>
${m.user_id === adminId
- ? html`<span class="badge" style="background:var(--accent);color:var(--accent-text)">${t('members.group_admin')}</span>`
+ ? html`<span class="badge" style="background:var(--accent);color:var(--accent-text)">${t('members.owner')}</span>`
: html`<span class="badge">${t('members.member')}</span>`
}
</td>
@@ -1226,7 +1265,47 @@ function _parsePayload(raw) {
return null;
}
-function ChatPanel({ transportRef, username, entries }) {
+function ChatImage({ filename, entries, transportRef, gekRef }) {
+ const [blobUrl, setBlobUrl] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ let cancelled = false;
+ const load = async () => {
+ const transport = transportRef.current;
+ if (!transport || !transport.connected) { setLoading(false); return; }
+ const entry = entries.find(e => e.name === filename);
+ if (!entry) { setLoading(false); return; }
+ try {
+ if (!gekRef.current && window.MeshBayCrypto) {
+ const gekB64 = await transport.fetchGEK();
+ gekRef.current = await window.MeshBayCrypto.importGEK(gekB64);
+ }
+ const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
+ const chunks = await pipelinedDownload(transport, gekRef.current, entry.id, totalChunks);
+ if (cancelled) return;
+ const ext = filename.split('.').pop().toLowerCase();
+ const mime = ext === 'png' ? 'image/png' : ext === 'gif' ? 'image/gif'
+ : ext === 'webp' ? 'image/webp' : ext === 'svg' ? 'image/svg+xml' : 'image/jpeg';
+ const blob = new Blob(chunks, { type: mime });
+ setBlobUrl(URL.createObjectURL(blob));
+ } catch { /* ignore */ }
+ if (!cancelled) setLoading(false);
+ };
+ load();
+ return () => { cancelled = true; };
+ }, [filename]);
+
+ useEffect(() => {
+ return () => { if (blobUrl) URL.revokeObjectURL(blobUrl); };
+ }, [blobUrl]);
+
+ if (loading) return html`<div class="chat-att-thumb"><span class="spinner"></span></div>`;
+ if (!blobUrl) return html`<div class="chat-att-img">${'\u{1F5BC}'} ${filename}</div>`;
+ return html`<img class="chat-att-thumb" src=${blobUrl} alt=${filename} />`;
+}
+
+function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex }) {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const [sending, setSending] = useState(false);
@@ -1297,12 +1376,13 @@ function ChatPanel({ transportRef, username, entries }) {
if (!transport || !transport.connected) return;
setAttaching(true);
try {
- const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+ const totalChunks = Math.ceil(file.size / UPLOAD_CHUNK_SIZE);
for (let i = 0; i < totalChunks; i++) {
- const slice = file.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE);
+ const slice = file.slice(i * UPLOAD_CHUNK_SIZE, (i + 1) * UPLOAD_CHUNK_SIZE);
const buf = new Uint8Array(await slice.arrayBuffer());
await transport.uploadChunk(file.name, i, totalChunks, buf);
}
+ if (onRefreshIndex) await onRefreshIndex();
const ext = file.name.split('.').pop().toLowerCase();
const ftype = ['jpg','jpeg','png','gif','webp','svg'].includes(ext) ? 'image'
: ['mp4','webm','mkv','mov','avi'].includes(ext) ? 'video' : 'file';
@@ -1319,7 +1399,7 @@ function ChatPanel({ transportRef, username, entries }) {
} finally {
setAttaching(false);
}
- }, [username]);
+ }, [username, onRefreshIndex]);
const onKeyDown = useCallback((e) => {
if (e.key === 'Enter' && !e.shiftKey) {
@@ -1336,7 +1416,7 @@ function ChatPanel({ transportRef, username, entries }) {
`}
${messages.map((m, i) => {
const isOwn = m.sender_name === username || m.sender_id === username;
- const displayName = m.sender_name || m.sender_id?.slice(0, 8) || '?';
+ const displayName = m.sender_name || '?';
const showSender = !isOwn && (i === 0 ||
(messages[i - 1].sender_name || messages[i - 1].sender_id) !== (m.sender_name || m.sender_id));
const parsed = _parsePayload(m.payload);
@@ -1350,7 +1430,8 @@ function ChatPanel({ transportRef, username, entries }) {
${att ? html`
<div class="chat-attachment">
${att.type === 'image'
- ? html`<div class="chat-att-img">${'\u{1F5BC}'} ${att.filename}</div>`
+ ? html`<${ChatImage} filename=${att.filename} entries=${entries}
+ transportRef=${transportRef} gekRef=${gekRef} />`
: att.type === 'video'
? html`<div class="chat-att-file">${'\u{1F3AC}'} ${att.filename}</div>`
: html`<div class="chat-att-file">${'\u{1F4CE}'} ${att.filename}</div>`
generated by cgit v1.2.3 (git 2.51.0) at 2026-09-25 18:09:09 +0000