No results. The line above shows what was searched.
' + notes;
- res.querySelectorAll('button[data-f]').forEach(b => b.onclick = () => { const [r, p, n, dd] = JSON.parse(b.dataset.f); openFile(r, p, n, dd); });
- res.querySelectorAll('button[data-t]').forEach(b => b.onclick = () => playQueue([JSON.parse(b.dataset.t)], 0));
- res.querySelectorAll('button[data-tl]').forEach(b => b.onclick = () => { store.set('task_list', b.dataset.tl); location.hash = '#/tasks'; });
- }
-}
-
-// ---- Calendar: agenda built from private ICS links (managed here; fetched and parsed by the server)
-const ymd = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-async function loadRange(start, days) {
- const end = new Date(start); end.setDate(end.getDate() + days);
- const last = new Date(end.getTime() - 1);
- const q = new URLSearchParams({ from: start.getTime(), to: end.getTime() - 1, fd: ymd(start), td: ymd(last) });
- const { events, errors } = await jfetch('/api/cal/events?' + q);
- const byDay = new Map();
- const put = (k, e) => { if (!byDay.has(k)) byDay.set(k, []); byDay.get(k).push(e); };
- for (const e of events) {
- if (e.allDay) { // spans start..end-1 (end exclusive)
- for (let d = new Date(e.start + 'T00:00:00'); ymd(d) < e.end; d.setDate(d.getDate() + 1)) { const k = ymd(d); if (k >= ymd(start) && k <= ymd(last)) put(k, e); }
- } else put(ymd(new Date(e.start)), e);
- }
- for (const list of byDay.values()) list.sort((a, b) => (b.allDay - a.allDay) || ((a.allDay ? 0 : a.start) - (b.allDay ? 0 : b.start)));
- return { byDay, errors, start };
-}
-const loadAgenda = days => { const start = new Date(); start.setHours(0, 0, 0, 0); return loadRange(start, days); };
-const fmtTime = ms => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
-const evStore = []; // events currently on screen, so a tap can open the right one
-const evRow = e => { const i = evStore.push(e) - 1;
- return `No calendars yet. Add a private calendar link to see your events here.
This calendar is read-only here (it is a subscribed link). Change it in the app it comes from.
Times are in ${esc(f.tz)}.
` : ''}`;
- const s = el.querySelector('#fs'), en = el.querySelector('#fe2');
- s.onchange = () => { // moving the start keeps the length
- const len = Date.parse(f.allDay ? f.end.slice(0, 10) + 'T00:00' : f.end) - Date.parse(f.allDay ? f.start.slice(0, 10) + 'T00:00' : f.start);
- f.start = s.value; if (s.value) { const ns = Date.parse(f.allDay ? s.value + 'T00:00' : s.value); if (!isNaN(ns) && len >= 0) { const d = new Date(ns + len); f.end = f.allDay ? ymd(d) : localStr(d); en.value = f.allDay ? ymd(d) : localStr(d); } }
- };
- en.onchange = () => { f.end = en.value; };
- };
- draw();
- el.querySelector('#fa').onchange = ev => {
- f.start = el.querySelector('#fs').value || f.start; f.end = el.querySelector('#fe2').value || f.end;
- f.allDay = ev.target.checked;
- if (f.allDay) { f.start = f.start.slice(0, 10); f.end = f.end.slice(0, 10); }
- else { f.start = f.start.slice(0, 10) + 'T09:00'; f.end = f.end.slice(0, 10) + 'T10:00'; }
- draw();
- };
- el.querySelector('#sx').onclick = closeSheet;
- el.querySelector('#ef').onsubmit = async ev => {
- ev.preventDefault(); const btn = el.querySelector('form .btn:not(.ghost):not(.danger)'); btn.disabled = true; el.querySelector('#fe').textContent = '';
- const fields = { title: el.querySelector('#ft').value.trim(), location: el.querySelector('#fl').value.trim(), notes: el.querySelector('#fn').value.trim(), allDay: f.allDay,
- start: el.querySelector('#fs').value, end: el.querySelector('#fe2').value, tz: f.tz, repeat: el.querySelector('#fr').value };
- const cal = editing ? o.calId : el.querySelector('#fc').value;
- try {
- await jfetch('/api/cal/event', { method: 'POST', body: JSON.stringify({ cal, uid: o.uid, href: o.href, fields }) });
- if (!editing) store.set('cal_default', cal);
- closeSheet(); toast(editing ? 'Event saved' : 'Event added'); viewCalendar();
- } catch (err) { btn.disabled = false; el.querySelector('#fe').textContent = err.message; }
- };
- const del = el.querySelector('#fd');
- if (del) del.onclick = () => confirmSheet('Delete event?', o.series ? f.title + ' and every repeat of it' : f.title, 'Delete', async () => {
- try { await jfetch('/api/cal/event/delete', { method: 'POST', body: JSON.stringify({ cal: o.calId, uid: o.uid, href: o.href, etag: o.etag }) }); toast('Event deleted'); viewCalendar(); }
- catch (err) { toast(err.message); }
- });
-}
-
-function addCalendar() {
- const el = openSheet('Add a calendar link', '', `Signed in as ${esc(ic.appleId)}. Events you add or change here are saved to iCloud.
Read and add events in your iCloud calendars. Use an app-specific password (appleid.apple.com → Sign-In and Security → App-Specific Passwords), not your normal Apple password.
- Subscribe to this private link from Outlook, Google or Apple Calendar. They show your NE Hub events (read-only there).
- ${open.map(t => row(t) + (byParent[t.id] || []).sort(byDue).map(k => row(k, true)).join('')).join('')}
` : 'Nothing to do. Add a task above.
')
- + (done.length ? `${done.map(t => row(t) + (byParent[t.id] || []).sort(byDue).map(k => row(k, true)).join('')).join('')}
` : ''}` : '');
- const sd = $('#sd'); if (sd) sd.onclick = e => { e.preventDefault(); store.set('task_show_done', !showDone); loadTaskList(cur, list); };
- box.querySelectorAll('button[data-t]').forEach(b => b.onclick = async () => {
- const t = taskStore[+b.dataset.t]; b.disabled = true;
- try { const r = await jfetch('/api/tasks/toggle', { method: 'POST', body: JSON.stringify({ list: cur, id: t.id, href: t.href, done: !t.done }) }); if (r && r.rolled) toast('Repeats: next due ' + r.rolled); loadTaskList(cur, list); }
- catch (err) { b.disabled = false; toast(err.message); }
- });
- box.querySelectorAll('button[data-e]').forEach(b => b.onclick = () => taskSheet(taskStore[+b.dataset.e], cur, list));
- } catch (e) { box.innerHTML = `${docs.map((f, i) => {
- const color = { docx: '#3d6bf0', doc: '#3d6bf0', odt: '#3d6bf0', rtf: '#3d6bf0', xlsx: '#2f9e6e', xls: '#2f9e6e', ods: '#2f9e6e', csv: '#2f9e6e' }[ext(f.name)] || '#e0742b';
- return `${icon('file')} ${esc(f.name)} ${esc(f.parent_dir || '/')} · ${fmtDate(f.mtime)}
`
- : 'No documents here yet. Create one above.
';
- $('#odocs').querySelectorAll('button[data-i]').forEach(b => b.onclick = () => {
- const f = docs[b.dataset.i], path = (f.parent_dir || '/').replace(/\/?$/, '/') + f.name;
- addRecent(loc.repo, path, f.name);
- if (cfg.editor) location.hash = officeHash(loc.repo, path); else window.open(`${cfg.seafile}/lib/${encodeURIComponent(loc.repo)}/file${encP(path)}`, '_blank', 'noopener');
- });
- } catch (e) { const el = $('#olib'); if (el) el.innerHTML = ` element that lives outside the views, so music keeps playing as you move around.
-const shuffled = a => { const b = [...a]; for (let i = b.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [b[i], b[j]] = [b[j], b[i]]; } return b; };
-const pl = { q: [], i: -1, a: new Audio(), shuffle: false, repeat: 'off', orig: null, alt: new Set() };
-const cur = () => pl.q[pl.i];
-function playQueue(q, i = 0, shuffleOn = false) { pl.q = q; pl.i = i; pl.shuffle = shuffleOn; pl.orig = shuffleOn ? [...q] : null; loadCur(0); }
-// Shuffle mixes only what is still to come, and turning it off puts the queue back in its original order.
-function setShuffle(on) {
- if (on === pl.shuffle || !pl.q.length) return;
- const t = cur();
- if (on) { pl.orig = [...pl.q]; pl.q = [...pl.q.slice(0, pl.i + 1), ...shuffled(pl.q.slice(pl.i + 1))]; }
- else if (pl.orig) { const have = new Set(pl.q.map(x => x.key)), keep = pl.orig.filter(x => have.has(x.key)), known = new Set(keep.map(x => x.key));
- pl.q = [...keep, ...pl.q.filter(x => !known.has(x.key))]; pl.i = Math.max(0, pl.q.findIndex(x => x.key === t.key)); pl.orig = null; }
- pl.shuffle = on; store.set('plex_mode', { shuffle: pl.shuffle, repeat: pl.repeat }); saveState(); tcKick(); updateNow(); modeUI();
-}
-function npQueueCount() { const q = $('#cnq'); if (q) q.textContent = 'Queue · ' + Math.max(0, pl.q.length - pl.i - 1) + ' up next'; }
-function setRepeat(r) { pl.repeat = r; store.set('plex_mode', { shuffle: pl.shuffle, repeat: pl.repeat }); updateNow(); modeUI(); }
-const srcOf = t => (pl.alt.has(t.key) ? altSrc(t) : t.src);
-// Some files a browser cannot decode directly; Plex can convert those to MP3 on the fly.
-const altSrc = t => '/plex/music/:/transcode/universal/start.mp3?' + new URLSearchParams({ path: '/library/metadata/' + t.key, mediaIndex: 0, partIndex: 0, protocol: 'http', directPlay: 0, directStream: 0, audioCodec: 'mp3', maxAudioBitrate: 320 });
-// Track cache: the current track and the next two are downloaded whole (one at a time, after the current one has buffered),
-// so changing songs is instant and a slow or lost connection does not stop the music.
-const sleep = ms => new Promise(ok => setTimeout(ok, ms));
-const tc = { m: new Map(), ctl: null, busy: false };
-const tcWant = () => pl.q.slice(Math.max(pl.i, 0), pl.i + 3).filter(t => !pl.alt.has(t.key)).map(t => t.src);
-function tcTrim() {
- const keep = new Set(pl.q.slice(Math.max(pl.i - 1, 0), pl.i + 3).map(t => t.src));
- for (const [src, v] of tc.m) if (!keep.has(src)) { URL.revokeObjectURL(v.url); tc.m.delete(src); }
-}
-async function tcFetch(src, signal) {
- for (let n = 0; n < 4 && !signal.aborted; n++) {
- try {
- const r = await fetch(src, { signal }); if (!r.ok) throw new Error('http ' + r.status);
- const b = await r.blob(); // throws if the connection drops part way
- if (!signal.aborted) tc.m.set(src, { url: URL.createObjectURL(b) });
- return;
- } catch { if (signal.aborted) return; await sleep(2000 * (n + 1)); }
- }
-}
-async function tcPump() {
- if (tc.busy) return; tc.busy = true;
- try {
- for (;;) {
- tcTrim();
- const src = tcWant().find(x => !tc.m.has(x)); if (!src) break;
- tc.ctl = new AbortController(); tc.cur = src;
- await tcFetch(src, tc.ctl.signal);
- if (!tc.ctl.signal.aborted && !tc.m.has(src)) break; // gave up on this one; try again on the next trigger
- }
- } finally { tc.busy = false; tc.ctl = null; }
-}
-function tcKick() { if (tc.ctl && !tcWant().includes(tc.cur)) tc.ctl.abort(); tcPump(); }
-addEventListener('online', () => { pl.retries = 0; tcKick(); recover(true); });
-
-let loadTok = 0, loadTimer = null, stallTimer = null;
-pl.retries = 0; pl.buf = false;
-// Show the new track at once, but wait a moment before fetching it so quickly tapping Next several times only loads the last one.
-function loadCur(delay = 220) {
- const t = cur(); if (!t) return;
- clearTimeout(loadTimer); clearTimeout(stallTimer); pl.retries = 0; pl.scrobbled = false;
- const tok = ++loadTok; pl.buf = true;
- if (delay) pl.a.pause();
- setMeta(t); renderMini(); updateNow(); renderNpCard(); syncUI(); markPlaying(); saveState();
- if (lyr.open) { lyrShell(); lyrReload(); }
- const go = () => {
- if (tok !== loadTok) return;
- const hit = tc.m.get(t.src);
- pl.a.src = hit && !pl.alt.has(t.key) ? hit.url : srcOf(t);
- pl.a.play().catch(e => { if (e && e.name === 'NotAllowedError') { pl.buf = false; syncUI(); toast('Tap play to start'); } });
- tcKick();
- const n = pl.q[pl.i + 1]; if (n) new Image().src = px.art(n.thumb, 600);
- };
- if (delay) loadTimer = setTimeout(go, delay); else go();
-}
-function setMeta(t) {
- if (!('mediaSession' in navigator)) return;
- navigator.mediaSession.metadata = new MediaMetadata({ title: t.title, artist: t.artist, album: t.album, artwork: [{ src: px.art(t.thumb, 512), sizes: '512x512' }] });
-}
-// If the music stalls, switch to the fully downloaded copy (if there is one) or reload the stream from where it stopped.
-function recover(now) {
- clearTimeout(stallTimer); const t = cur(), a = pl.a;
- if (!t || a.paused) return;
- stallTimer = setTimeout(() => {
- if (a.paused || (a.readyState >= 3 && !a.error)) return;
- const hit = tc.m.get(t.src), pos = a.currentTime;
- const bad = a.error && (a.error.code === 3 || a.error.code === 4); // cannot decode this file (not a network problem)
- if (bad && !hit) {
- if (!pl.alt.has(t.key)) { pl.alt.add(t.key); pl.retries = 0; }
- else { toast('Cannot play "' + t.title + '". Skipping.'); return advance(true); }
- }
- const want = hit && !pl.alt.has(t.key) ? hit.url : srcOf(t);
- if (!hit && !navigator.onLine) return; // 'online' will call us again
- if (!hit && !bad && pl.retries >= 5) { pl.buf = false; syncUI(); toast('Lost the connection. It will carry on when it is back.'); return; }
- if (!hit || a.src !== hit.url) pl.retries++;
- a.src = want;
- a.addEventListener('loadedmetadata', () => { try { a.currentTime = pos; } catch {} a.play().catch(() => {}); }, { once: true });
- recover();
- }, now ? 300 : 4000);
-}
-function saveState() { store.set('plex_state', { q: pl.q, i: pl.i, pos: pl.a.currentTime || 0 }); }
-const playNextTrack = t => { if (!pl.q.length) return playQueue([t], 0); pl.q.splice(pl.i + 1, 0, t); saveState(); npQueueCount(); toast('Playing next'); };
-const queueTrack = t => { if (!pl.q.length) return playQueue([t], 0); pl.q.push(t); saveState(); npQueueCount(); toast('Added to queue'); };
-function trackSheet(t, extra) {
- actionSheet(t.title, t.artist, [
- { label: 'Play next', icon: 'next', run: () => playNextTrack(t) },
- { label: 'Add to queue', icon: 'files', run: () => queueTrack(t) },
- { label: 'Play now', icon: 'play', run: () => playQueue([t], 0) },
- { label: 'Add to playlist…', icon: 'plus', run: () => addToPlaylist([t]) },
- ...(extra || []),
- ]);
-}
-// Restore the last queue and position on launch (paused, so nothing starts by itself).
-function restorePlayer() {
- const st = store.get('plex_state'); if (!st || !st.q || !st.q[st.i]) return;
- const m = store.get('plex_mode', {}); pl.shuffle = !!m.shuffle; pl.repeat = m.repeat || 'off';
- pl.q = st.q; pl.i = st.i; pl.a.src = pl.q[pl.i].src;
- pl.a.addEventListener('loadedmetadata', () => { if (st.pos) pl.a.currentTime = st.pos; }, { once: true });
- renderMini(); syncUI();
-}
-function openQueue() {
- const upcoming = pl.q.map((t, i) => ({ t, i }));
- const el = openSheet('Up next', pl.q.length + ' tracks', `${upcoming.map(({ t, i }) => `
-
${i === pl.i ? '▶' : i + 1} ${esc(t.title)} ${esc(t.artist)} ${icon('trash')} `}
`).join('')}
Clear up next Save as playlist
- ${esc(sleepLabel())} timer Close
`);
- el.querySelector('.sheet').classList.add('wide'); el.querySelector('#sx').onclick = closeSheet;
- el.querySelector('#qsp').onclick = () => { const q = pl.q.slice(); closeSheet(); addToPlaylist(q, 'Queue ' + new Date().toLocaleDateString([], { month: 'short', day: 'numeric' })); };
- el.querySelector('#qsl').onclick = () => { closeSheet(); sleepSheet(); };
- el.querySelector('#qc').onclick = () => { pl.q.length = pl.i + 1; if (pl.orig) pl.orig = null, pl.shuffle = false; saveState(); tcKick(); updateNow(); openQueue(); };
- el.querySelectorAll('[data-j]').forEach(b => b.onclick = () => { pl.i = +b.dataset.j; loadCur(0); closeSheet(); });
- el.querySelectorAll('[data-x]').forEach(b => b.onclick = () => { const k = +b.dataset.x; pl.q.splice(k, 1); if (k < pl.i) pl.i--; saveState(); openQueue(); });
-}
-function advance(auto) {
- if (auto && sleepT.eot) { sleepClear(); pl.a.pause(); syncUI(); toast('Sleep timer: music stopped'); return; }
- if (auto && pl.repeat === 'one') { pl.a.currentTime = 0; pl.a.play().catch(() => {}); return; }
- if (pl.i < pl.q.length - 1) pl.i++; else if (pl.repeat === 'all') pl.i = 0; else { pl.a.pause(); syncUI(); return; }
- loadCur(auto ? 0 : 220);
-}
-const next = () => advance(false);
-const prev = () => { if (pl.a.currentTime > 3 || pl.i === 0) pl.a.currentTime = 0; else if (pl.i > 0) { pl.i--; loadCur(); } };
-const toggle = () => { if (pl.a.paused && pl.a.getAttribute('src') == null && cur()) return loadCur(0); return pl.a.paused ? pl.a.play() : pl.a.pause(); };
-pl.a.preload = 'auto';
-// Tell Plex what is playing, so it shows under Now Playing / Activity in the Plex dashboard (as "NE Hub", under the signed-in Plex account).
-let tlKey = null, tlAt = 0, tlPos = 0, tlDur = 0;
-const tlSend = (state, key, pos, dur) => fetch('/plex/:/timeline?' + new URLSearchParams({ ratingKey: key, key: '/library/metadata/' + key, identifier: 'com.plexapp.plugins.library', state, time: Math.round(pos), duration: Math.round(dur), hasMDE: 1 })).catch(() => {});
-function tlReport(state) {
- const t = cur(); if (!t) return;
- if (tlKey && tlKey !== t.key) tlSend('stopped', tlKey, tlPos, tlDur); // the previous song is over
- tlKey = t.key; tlAt = Date.now(); tlPos = (pl.a.currentTime || 0) * 1000; tlDur = isFinite(pl.a.duration) ? pl.a.duration * 1000 : 0;
- tlSend(state, tlKey, tlPos, tlDur);
-}
-function tlStop() { if (tlKey) tlSend('stopped', tlKey, tlPos, tlDur); tlKey = null; }
-pl.a.addEventListener('ended', () => advance(true));
-let lastSave = 0, lastPos = 0;
-pl.a.addEventListener('timeupdate', () => {
- if (Date.now() - lastSave > 5000) { lastSave = Date.now(); saveState(); }
- if (tlKey) { tlPos = pl.a.currentTime * 1000; if (!pl.a.paused && Date.now() - tlAt > 10000) tlReport('playing'); }
- const t = cur(), d = pl.a.duration;
- if (t && !pl.scrobbled && d && pl.a.currentTime > Math.min(d * 0.5, 240)) { pl.scrobbled = true; fetch('/plex/:/scrobble?identifier=com.plexapp.plugins.library&key=' + encodeURIComponent(t.key)).catch(() => {}); } // counts as played in Plex
- if (Date.now() - lastPos > 1000 && 'mediaSession' in navigator && pl.a.duration) { lastPos = Date.now(); try { navigator.mediaSession.setPositionState({ duration: pl.a.duration, position: pl.a.currentTime, playbackRate: pl.a.playbackRate }); } catch {} }
-});
-addEventListener('pagehide', saveState);
-['play', 'pause', 'timeupdate', 'loadedmetadata', 'durationchange'].forEach(e => pl.a.addEventListener(e, () => syncUI()));
-pl.a.addEventListener('playing', () => { tlReport('playing'); pl.buf = false; pl.retries = 0; clearTimeout(stallTimer); syncUI(); if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'playing'; });
-pl.a.addEventListener('pause', () => { if (!pl.buf) tlReport('paused'); pl.buf = false; clearTimeout(stallTimer); syncUI(); if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'paused'; });
-pl.a.addEventListener('canplaythrough', () => tcKick());
-['waiting', 'stalled'].forEach(e => pl.a.addEventListener(e, () => { if (pl.a.paused) return; pl.buf = true; syncUI(); recover(); }));
-pl.a.addEventListener('error', () => { if (!cur() || !pl.a.getAttribute('src')) return; pl.buf = true; syncUI(); recover(); });
-if ('mediaSession' in navigator) {
- const ms = navigator.mediaSession;
- ms.setActionHandler('play', () => pl.a.play()); ms.setActionHandler('pause', () => pl.a.pause());
- ms.setActionHandler('previoustrack', prev); ms.setActionHandler('nexttrack', next);
- try { ms.setActionHandler('seekto', d => { pl.a.currentTime = d.seekTime; }); } catch {}
- try { ms.setActionHandler('seekbackward', d => { pl.a.currentTime = Math.max(0, pl.a.currentTime - (d.seekOffset || 10)); }); ms.setActionHandler('seekforward', d => { pl.a.currentTime += d.seekOffset || 10; }); } catch {}
-}
-function markPlaying() {
- const t = cur(); document.querySelectorAll('#view .row[data-i]').forEach(r => r.classList.toggle('playing', !!t && pl.q[+r.dataset.i]?.key === t.key));
-}
-function renderMini() {
- const t = cur(), el = $('#player'); if (!t) return (el.hidden = true);
- el.hidden = false;
- el.innerHTML = `
-
${esc(t.title)} ${esc(t.artist)}
-
${icon('lyrics')} ${icon('shuffle')} ${icon('repeat')}
-
${icon('prev')} ${icon('next')}
-
${icon('x')} NOW PLAYING ${esc(t.title)} ${esc(t.artist)}${t.album ? ' · ' + esc(t.album) : ''}
- 0:00 0:00
- ${icon('shuffle')} ${icon('prev')}
- ${icon('next')} ${icon('repeat')}
- Lyrics Queue · ${Math.max(0, pl.q.length - pl.i - 1)} up next ${esc(sleepLabel())}
`;
- const sk = el.querySelector('#cnk');
- sk.oninput = () => { sk.dataset.drag = 1; el.querySelector('#cnc').textContent = fmtDur(sk.value * 1000); };
- sk.onchange = () => { pl.a.currentTime = +sk.value; delete sk.dataset.drag; };
- el.querySelector('#cnart').onclick = openNow; el.querySelector('#cnq').onclick = openQueue; el.querySelector('#cnz').onclick = sleepSheet; el.querySelector('#cnl').onclick = lyrOpen;
- el.querySelector('#cnp').onclick = prev; el.querySelector('#cnn').onclick = next; el.querySelector('#cnt').onclick = toggle;
- el.querySelector('#cns').onclick = () => setShuffle(!pl.shuffle); el.querySelector('#cnr').onclick = () => setRepeat(pl.repeat === 'off' ? 'all' : pl.repeat === 'all' ? 'one' : 'off');
- modeUI(); syncUI();
-}
-// The Now Playing sheet stays open while tracks change, so refresh what it shows.
-function updateNow() {
- const t = cur(), sk = $('#npk'); if (!t || !sk) return;
- $('#npti').textContent = t.title; $('#npart').src = px.art(t.thumb, 600);
- const q = $('#npq'); if (q) q.textContent = 'Queue · ' + (pl.q.length - pl.i - 1) + ' up next';
- delete sk.dataset.drag; sk.value = 0; sk.max = (t.dur || 0) / 1000;
- modeUI();
-}
-function openNow() {
- const t = cur(); if (!t) return;
- const el = openSheet('', '', `${esc(t.title)}
-
${esc(t.artist)}${t.album ? ' · ' + esc(t.album) : ''}
-
0:00 0:00
-
${icon('prev')} ${icon('next')}
-
${icon('shuffle')} Lyrics Queue · ${pl.q.length - pl.i - 1} up next ${icon('repeat')}
- ${esc(t.title)} ${esc(t.artist)}
-
Karaoke
-
A− A+
-
${icon('x')} Looking for the lyrics…
';
- const res = await lyrLoad(t, force); if (!lyr.el || lyr.key !== t.key) return;
- lyr.data = res; lyrDraw();
-}
-function lyrDraw() {
- const t = cur(), d = lyr.data, body = lyr.el && lyr.el.querySelector('#lyrbody'); if (!body || !t) return;
- const src = lyr.el.querySelector('#lyrsrc'), nudge = lyr.el.querySelector('#lyrnudge');
- nudge.hidden = !(d && d.found && d.sync !== 'none'); lyr.el.querySelector('#lyroff').textContent = (lyrOffset(t.key) / 1000).toFixed(1) + ' s';
- if (!d || !d.found) { src.textContent = ''; body.innerHTML = `${d && d.error ? esc(d.error) : 'No lyrics found for this song.'}
`; return; }
- if (d.instrumental) { src.textContent = ''; body.innerHTML = 'This one is instrumental.
'; return; }
- src.textContent = (d.source ? d.source + ' · ' : '') + (d.sync === 'word' ? 'word-synced' : d.sync === 'line' ? 'line-synced' : 'not time-synced');
- body.innerHTML = d.lines.map((l, i) => l.text || l.words ? `${l.words ? l.words.map((w, j) => `${esc(w.text)} `).join('') : esc(l.text)}
` : '
').join('');
- body.onclick = e => { const ln = e.target.closest('.ll'); if (!ln || d.sync === 'none') return; const l = d.lines[+ln.dataset.i]; pl.a.currentTime = Math.max(0, (l.t - lyrOffset(t.key)) / 1000); };
- body.scrollTop = 0; lyr.idx = -2;
-}
-function lyrSearchAgain() {
- const t = cur(); if (!t) return; const q = lyrQuery(t);
- const el = openSheet('Search for the lyrics', '', ``);
- el.querySelector('#lyrc').onclick = closeSheet;
- el.querySelector('#lyrf').onsubmit = e => { e.preventDefault(); try { localStorage.setItem('lyr_q:' + t.key, JSON.stringify({ artist: el.querySelector('#lyra').value.trim(), title: el.querySelector('#lyrti').value.trim() })); } catch {} closeSheet(); lyr.cache.delete(t.key); lyrReload(true); };
-}
-function lyrTick() { // follows the song: which line is current, and how far into it we are
- lyr.raf = requestAnimationFrame(lyrTick);
- const d = lyr.data, t = cur(); if (!lyr.el || !d || !d.found || d.sync === 'none' || !t) return;
- const pos = pl.a.currentTime * 1000 + lyrOffset(t.key), L = d.lines;
- let lo = 0, hi = L.length - 1, idx = -1; while (lo <= hi) { const m = (lo + hi) >> 1; if (L[m].t <= pos) { idx = m; lo = m + 1; } else hi = m - 1; }
- const body = lyr.el.querySelector('#lyrbody'), nodes = body.querySelectorAll('.ll');
- if (idx !== lyr.idx) {
- lyr.idx = idx; let n = -1;
- nodes.forEach(x => { const i = +x.dataset.i; x.classList.toggle('on', i === idx); x.classList.toggle('past', i < idx); x.classList.toggle('near', Math.abs(i - idx) === 1); x.classList.toggle('upnext', i === idx + 1); if (i === idx) n = i; });
- const cur1 = body.querySelector('.ll.on'); if (cur1) cur1.scrollIntoView({ block: 'center', behavior: 'smooth' });
- }
- const on = body.querySelector('.ll.on'); if (!on) return; const l = L[idx];
- if (l.words) on.querySelectorAll('.w').forEach((w, j) => { const x = l.words[j]; if (!x) return; const p = pos >= x.e ? 1 : pos <= x.t ? 0 : (pos - x.t) / Math.max(1, x.e - x.t); w.classList.toggle('sung', p >= 1); w.style.setProperty('--p', p); });
- else { const e = l.e && l.e > l.t ? l.e : l.t + 4000, p = Math.max(0, Math.min(1, (pos - l.t) / Math.max(400, Math.min(e - l.t, 7000)))); on.style.setProperty('--p', p); } // (no word timing: the colour sweeps across the line)
-}
-
-// ---- People (admin): who can sign in, which tabs each may use, one-time invite codes
-let peopleTabs = [];
-async function loadPeople() {
- const box = $('#people'); if (!box) return;
- try {
- const r = await jfetch('/api/users'); peopleTabs = r.tabs;
- if (!$('#people')) return;
- $('#people').innerHTML = r.users.map(u => `${esc(u.name.slice(0, 1).toUpperCase())}
- ${esc(u.name)}${u.id === ME.id ? ' (you)' : ''}${u.role === 'admin' ? ' · Admin' : ''}${u.disabled ? ' · Off' : ''}
- ${u.passkeys ? u.passkeys + ' passkey' + (u.passkeys === 1 ? '' : 's') : 'No passkey yet (waiting for the invite code)'} · ${u.role === 'admin' ? 'Everything' : u.tabsChosen.map(t => (peopleTabs.find(x => x.id === t) || {}).label || t).join(', ') || 'Home and Settings only'} ${esc(e.message)}
`; }
-}
-
-const tabBoxes = (chosen, disabled) => `${peopleTabs.map(t => `${esc(t.label)}
`;
-const pickedTabs = el => [...el.querySelectorAll('input[data-tab]:checked')].map(i => i.dataset.tab);
-
-function codeSheet(name, code, minutes) {
- const el = openSheet('Invite code for ' + name, '', `On ${esc(name)}'s device, open ${esc(location.origin)} , tap New device? Use an invite code on the sign-in page, and enter:
- ${esc(code)}
- It works once and expires in ${minutes} minutes. They will then create their own passkey.
- ${icon('copy')}Copy code Done
`);
- el.querySelector('#sx').onclick = () => { closeSheet(); loadPeople(); };
- el.querySelector('#cc').onclick = async () => { try { await navigator.clipboard.writeText(code); toast('Code copied'); } catch { toast('Could not copy'); } };
-}
-
-async function addPersonSheet() {
- if (!peopleTabs.length) { try { peopleTabs = (await jfetch('/api/users')).tabs; } catch (e) { return toast(e.message); } }
- const el = openSheet('Add a person', '', ``);
- el.querySelector('.sheet').classList.add('wide'); el.querySelector('#sx').onclick = closeSheet;
- el.querySelector('#pf').onsubmit = async e => {
- e.preventDefault(); const btn = el.querySelector('form .btn:not(.ghost)'); btn.disabled = true;
- try { const r = await jfetch('/api/users', { method: 'POST', body: JSON.stringify({ name: el.querySelector('#pn').value, tabs: pickedTabs(el) }) }); codeSheet(r.user.name, r.code, r.minutes); }
- catch (err) { btn.disabled = false; el.querySelector('#pe').textContent = err.message; }
- };
-}
-
-function personSheet(u) {
- const self = u.id === ME.id, admin = u.role === 'admin';
- const el = openSheet(u.name, admin ? 'Admin' : u.disabled ? 'Turned off' : 'User', `
-
- ${icon('copy')}Invite code for a new device Also the way back in if they lose their device
- ${icon('back')}Sign out everywhere
- ${self ? '' : `${icon('more')}${u.disabled ? 'Turn back on' : 'Turn off'} ${u.disabled ? 'Let them sign in again' : 'Signs them out and blocks sign-in; their data is kept'} `}
- ${icon('check')}${admin ? 'Remove admin' : 'Make admin'}
- ${self ? '' : `${icon('trash')}Delete person and their data `}
`);
- el.querySelector('.sheet').classList.add('wide'); el.querySelector('#sx').onclick = closeSheet;
- const act = async (fn, msg) => { try { await fn(); if (msg) toast(msg); closeSheet(); loadPeople(); } catch (err) { toast(err.message); } };
- const put = body => jfetch('/api/users/' + encodeURIComponent(u.id), { method: 'PUT', body: JSON.stringify(body) });
- el.querySelector('#uf').onsubmit = e => { e.preventDefault(); act(() => put({ name: el.querySelector('#un').value, ...(admin ? {} : { tabs: pickedTabs(el) }) }), 'Saved'); };
- el.querySelector('#u-inv').onclick = async () => { try { const r = await jfetch('/api/users/' + encodeURIComponent(u.id) + '/invite', { method: 'POST', body: '{}' }); codeSheet(u.name, r.code, r.minutes); } catch (err) { toast(err.message); } };
- el.querySelector('#u-out').onclick = () => act(() => put({ signOutEverywhere: true }), u.name + ' was signed out everywhere');
- const off = el.querySelector('#u-off'); if (off) off.onclick = () => act(() => put({ disabled: !u.disabled }), u.disabled ? 'Turned back on' : 'Turned off');
- el.querySelector('#u-role').onclick = () => act(() => put({ role: admin ? 'user' : 'admin' }), admin ? 'No longer an admin' : 'Now an admin');
- const del = el.querySelector('#u-del'); if (del) del.onclick = () => confirmSheet('Delete ' + u.name + '?', 'Their tasks, events, settings and sign-ins are permanently deleted.', 'Delete', () => act(() => jfetch('/api/users/' + encodeURIComponent(u.id), { method: 'DELETE' }), 'Deleted'));
-}
-
-function viewSettings() {
- const signed = !!sf.token();
- const isAdmin = ME && ME.role === 'admin';
- const tabNames = ME ? TABS.filter(t => ME.tabs.includes(t[0]) && !['home', 'settings'].includes(t[0])).map(t => t[1]).join(', ') : '';
- $('#view').innerHTML = `Settings
- ${ME ? `
Signed in as ${esc(ME.name)} ${isAdmin ? 'Admin · can use everything and manage people' : 'Can use: ' + esc(tabNames || 'Home and Settings only')}
` : ''}
- ${isAdmin ? `
People
-
Add a person
-
Storage
-
A .tar.gz of everything in /data (accounts, passkeys, tasks, events, settings, Signal history). Keep it private: it holds the session secret and encrypted sign-in tokens. Restore by unpacking it into the data volume.
` : ''}
-
Passkeys
-
Add a passkey Invite a device Sign out of NE Hub
-
Recovery codes Checking… One-time codes that let you add a new passkey if you lose every device. Keep them somewhere safe (a password manager or on paper). Make codes
- ${isAdmin ? `
Activity ` : ''}
-
Connections
-
Seafile ${esc(cfg.seafile)} · ${signed ? 'Checking…' : 'signed out'}
-
Plex Checking… Sign out
-
OnlyOffice ${esc(cfg.onlyoffice)}
-
- ${signed ? '
Sign out of Seafile
' : ''}
-
Mail apps Choose the mail apps you use and add your address for each, so its inbox and compose buttons open the right mailbox. Saved on your server, so every device sees them. Passwords are never saved here.
-
-
${remindersHtml()}
Install iPhone/iPad: Share → Add to Home Screen. Desktop Chrome/Edge: install icon in the address bar.
${t} ${d}
`;
- const where = !i.source ? '' : i.source.kind === 'folder' ? ' · host folder ' + esc(i.source.name) : i.source.kind === 'named' ? ' · volume "' + esc(i.source.name) + '"' : '';
- $('#stor').innerHTML =
- row(ok ? 'Data is saved on a volume' : 'Data is NOT being kept safely', anon ? 'This is a temporary Docker volume (' + esc(i.source.name) + '…), NOT your host folder. It is deleted when the container is recreated, and your folder stays empty. Check that your stack mounts the host folder at ' + esc(i.dir) + '.'
- : i.mounted === false ? 'The data folder is not a mounted volume, so passkeys, calendars and sign-ins are lost when the container is recreated. Mount a volume or a host folder at ' + esc(i.dir) + '.'
- : !i.writable ? 'The data folder is not writable by the app.' : esc(i.dir) + ' (mounted' + where + ')', !ok)
- + row('What is stored', `${i.passkeys} passkey${i.passkeys === 1 ? '' : 's'} · ${i.events} NE Hub event${i.events === 1 ? '' : 's'} · ${i.calendarLinks} calendar link${i.calendarLinks === 1 ? '' : 's'} · ${i.settings || 0} saved setting${i.settings === 1 ? '' : 's'}${i.icloud ? ' · iCloud connected' : ''}`)
- + row('Session secret', i.secretFromEnv ? 'Set in the stack (sign-ins survive restarts)' : 'Generated and kept in the data folder', false)
- + row('Running since', new Date(i.startedAt).toLocaleString(), false);
- }).catch(() => { const e = $('#stor'); if (e) e.innerHTML = 'Could not read storage status
'; });
- const loadPks = async () => {
- try {
- const pks = await (await fetch('/api/auth/passkeys')).json();
- $('#pks').innerHTML = pks.map(k => `${esc(k.name)} Added ${new Date(k.created).toLocaleDateString()}${k.lastUsed ? ' · used ' + new Date(k.lastUsed).toLocaleDateString() : ''} Remove
`).join('') || 'No passkeys
';
- $('#pks').querySelectorAll('button[data-id]').forEach(b => b.onclick = () => confirmSheet('Remove passkey?', pks.length === 1 ? 'This is your only passkey. You would need the server setup code to enrol a new one.' : 'It will no longer sign in to NE Hub.', 'Remove', async () => {
- await authPost('/api/auth/passkeys', { id: b.dataset.id }, 'DELETE'); loadPks();
- }));
- } catch (e) { $('#pks').innerHTML = `${esc(e.message)}
`; }
- };
- loadPks();
- $('#addpk').onclick = () => textSheet('Add a passkey', 'Name this device', 'Create', async name => {
- try { await passkeyRegister('', name); toast('Passkey added'); loadPks(); } catch (e) { toast(e.name === 'NotAllowedError' ? 'Cancelled' : e.message); }
- });
- jfetch('/api/auth/recovery').then(r => { $('#rcn').textContent = r.remaining ? r.remaining + ' recovery code' + (r.remaining === 1 ? '' : 's') + ' left' : 'No recovery codes yet'; }).catch(() => { $('#rcn').textContent = 'Recovery codes'; });
- $('#rcgen').onclick = () => confirmSheet('Make new recovery codes?', 'Any codes you made before stop working.', 'Make codes', async () => {
- try {
- const { codes } = await jfetch('/api/auth/recovery', { method: 'POST', body: '{}' });
- const el = openSheet('Your recovery codes', 'Each works once. They are shown only now: save them before closing.', `${codes.map(c => `
${esc(c)}
`).join('')}
Copy Done
`);
- el.querySelector('#sx').onclick = () => { closeSheet(); viewSettings(); };
- el.querySelector('#rcc').onclick = async () => { try { await navigator.clipboard.writeText(codes.join('\n')); toast('Copied'); } catch { toast('Could not copy; write them down'); } };
- } catch (e) { toast(e.message); }
- });
- if ($('#audit')) jfetch('/api/audit').then(({ events }) => {
- const el = $('#audit'); if (!el) return;
- el.innerHTML = events.length ? events.slice(0, 40).map(e => `${esc(e.event)}${e.who ? ' · ' + esc(e.who) : ''} ${esc(new Date(e.t).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }))}${e.detail ? ' · ' + esc(e.detail) : ''}${e.ip ? ' · ' + esc(e.ip) : ''}
`).join('') : 'Nothing yet
';
- }).catch(() => { const el = $('#audit'); if (el) el.innerHTML = 'Could not load
'; });
- $('#invpk').onclick = async () => {
- try {
- const { code, minutes } = await authPost('/api/auth/invite');
- const el = openSheet('Invite a device', 'On the new device, open this app, tap "New device? Use an invite code", and enter:', `${esc(code)}
- Works once, and expires in ${minutes} minutes.
Done
`);
- el.querySelector('#sx').onclick = closeSheet;
- } catch (e) { toast(e.message); }
- };
- $('#hubout').onclick = async () => { await authPost('/api/auth/logout'); location.replace('/login'); };
- const out = $('#out'); if (out) out.onclick = () => { store.del('sf_token'); toast('Signed out'); viewSettings(); };
-}
-
-// ---- In-app editor (OnlyOffice Document Server, config signed server-side with the JWT secret)
-async function viewEdit([repo, ...rawParts], opts = {}) {
- const parts = rawParts.filter(Boolean);
- const path = '/' + parts.join('/'), name = parts[parts.length - 1] || '';
- const back = opts.fromOffice ? '#/office' : '#/files/' + encodeURIComponent(repo) + parts.slice(0, -1).map(s => '/' + encodeURIComponent(s)).join('');
- document.body.classList.toggle('inedit', !!opts.fromOffice); // Office tab keeps the navigation visible around the editor
- const v = $('#view');
- v.innerHTML = `
- `;
- if (!sf.token()) return (location.hash = '#/files');
- const fail = m => { const e = $('#oomsg'); if (e) { e.className = 'err'; e.textContent = m; } };
- try {
- const r = await fetch('/api/oo/config', { method: 'POST', headers: { Authorization: 'Token ' + sf.token() },
- body: JSON.stringify({ repo, path, mobile: innerWidth < 768 }) });
- const conf = await r.json();
- if (!r.ok) return fail(conf.error || 'Could not open document');
- if (!window.DocsAPI) await new Promise((ok, no) => {
- const s = document.createElement('script'); s.src = cfg.onlyoffice + '/web-apps/apps/api/documents/api.js';
- s.onload = ok; s.onerror = () => no(new Error('Could not load the OnlyOffice editor from ' + cfg.onlyoffice)); document.head.appendChild(s);
- });
- if (!/^#\/(edit|office\/doc)\//.test(location.hash)) return;
- $('#oomsg').remove();
- conf.events = { onError: e => toast('Editor error: ' + (e.data?.errorDescription || e.data?.errorCode || '')) };
- editor = new DocsAPI.DocEditor('oo', conf);
- } catch (e) { fail(e.message); }
-}
-
-// ---- Files
-function viewFiles([repo, ...parts]) {
- if (!sf.token()) return filesLogin();
- const dir = '/' + parts.join('/');
- $('#view').innerHTML = ``;
- libsP = loadLibs(repo);
- if (repo) loadDir(repo, dir);
-}
-
-function filesLogin(msg = '', needOtp = false) {
- $('#view').innerHTML = `Files Sign in to ${esc(new URL(cfg.seafile).host)}
-
${icon('newdir')}New library
Libraries `;
- $('#nl').onclick = () => textSheet('New library', 'Library name', 'Create', async name => {
- try { const r = await sf.req('/api2/repos/', { method: 'POST', body: new URLSearchParams({ name }), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); location.hash = '#/files/' + encodeURIComponent(r.repo_id); }
- catch (e) { toast(e.message); }
- });
- if (!active) return;
- const r = repos.find(x => x.id === active);
- if (r && r.encrypted) $('#fmain').innerHTML = 'This library is encrypted. Unlock it in the Seafile web UI first.
';
- } catch (e) { $('#libs').innerHTML = `${esc(e.message)}
`; if (!sf.token()) setTimeout(route, 800); }
-}
-
-// ---- Files: browse, select, move/copy/delete, rename, upload (drag in from the computer, drag a file out to download)
-let fv = null, libsP = Promise.resolve(), libNames = {}, libPerm = {};
-const SORTS = [['name', 'Name'], ['mtime', 'Date modified'], ['size', 'Size'], ['type', 'Kind']];
-const nameCmp = (a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
-function sortItems(items, s) {
- const by = { name: nameCmp, mtime: (a, b) => a.mtime - b.mtime, size: (a, b) => (a.size || 0) - (b.size || 0), type: (a, b) => ext(a.name).localeCompare(ext(b.name)) }[s.k] || nameCmp;
- return [...items].sort((a, b) => a.type !== b.type ? (a.type === 'dir' ? -1 : 1) // folders stay on top
- : (a.type === 'dir' && s.k !== 'name' && s.k !== 'mtime') ? nameCmp(a, b) : s.d * by(a, b) || nameCmp(a, b));
-}
-const badName = (n, items, self) => !n || n === '.' || n === '..' ? 'Enter a name' : /[\/\\]/.test(n) ? 'A name cannot contain / or \\' : n.length > 255 ? 'That name is too long'
- : items.some(x => x.name.toLowerCase() === n.toLowerCase() && x.name !== self) ? 'Something with that name is already here' : '';
-const sfJson = (path, body) => sf.req(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-const hereItems = (repo, dir) => (fv && fv.repo === repo && fv.dir === dir ? fv.items : []);
-// After something changed in a folder, redraw it if it is the one on screen.
-function afterChange(repo, dir) { if (fv && document.contains(fv.root) && fv.repo === repo && fv.dir === dir) { fv.sel.clear(); fv.selecting = false; fv.reload(); } }
-
-async function removeItems(repo, dir, items) {
- const enc = encodeURIComponent;
- try { await sfJson('/api/v2.1/repos/batch-delete-item/', { repo_id: repo, parent_dir: dir, dirents: items.map(x => x.name) }); }
- catch (e) { // older servers have no batch call: one at a time
- const failed = [];
- for (const it of items) { try { await sf.req(`/api2/repos/${enc(repo)}/${it.type === 'dir' ? 'dir' : 'file'}/?p=${enc(joinP(dir, it.name))}`, { method: 'DELETE' }); } catch { failed.push(it.name); } }
- if (failed.length) throw new Error('Could not delete: ' + failed.join(', '));
- }
-}
-function deleteItems(repo, dir, items) {
- const one = items.length === 1;
- confirmSheet(one ? (items[0].type === 'dir' ? 'Delete folder?' : 'Delete file?') : `Delete ${items.length} items?`,
- one ? items[0].name + (items[0].type === 'dir' ? ' and everything in it' : '') : 'Folders are deleted with everything inside them', 'Delete', async () => {
- try { await removeItems(repo, dir, items); toast(one ? 'Deleted' : items.length + ' items deleted'); } catch (e) { toast(e.message); }
- afterChange(repo, dir);
- });
-}
-async function transferItems(mode, repo, dir, names, dst) {
- await sfJson(`/api/v2.1/repos/sync-batch-${mode}-item/`, { src_repo_id: repo, src_parent_dir: dir, dst_repo_id: dst.repo, dst_parent_dir: dst.dir, src_dirents: names });
-}
-function moveSheet(mode, repo, dir, items) {
- const names = items.map(x => x.name), folders = items.filter(x => x.type === 'dir').map(x => joinP(dir, x.name)), verb = mode === 'move' ? 'Move' : 'Copy';
- chooseFolder(verb + (items.length === 1 ? ' “' + names[0] + '”' : ' ' + items.length + ' items') + ' to…', { repo, repoName: libNames[repo] || '', dir },
- { okLabel: verb + ' here', hide: (r, d) => (r === repo && d === dir ? names : []), newFolder: true,
- blocked: (r, d) => r === repo && ((mode === 'move' && d === dir) || folders.some(f => d === f || d.startsWith(f + '/'))) }).then(async dst => {
- if (!dst) return;
- try { await transferItems(mode, repo, dir, names, dst); toast((mode === 'move' ? 'Moved' : 'Copied') + (items.length > 1 ? ' ' + items.length + ' items' : '')); }
- catch (e) { toast(e.message); }
- afterChange(repo, dir);
- });
-}
-function renameItem(repo, path, name, dir, isDir) {
- textSheet('Rename', 'New name', 'Rename', async n => {
- if (n === name) return;
- try { await sf.req(`/api2/repos/${encodeURIComponent(repo)}/${isDir ? 'dir' : 'file'}/?p=${encodeURIComponent(path)}`, { method: 'POST', headers: FORM, body: new URLSearchParams({ operation: 'rename', newname: n }) }); toast('Renamed'); }
- catch (e) { toast(e.message); }
- afterChange(repo, dir);
- }, name, n => badName(n, hereItems(repo, dir), name));
-}
-async function downloadItem(repo, path) {
- try { window.open(await sf.req(`/api2/repos/${encodeURIComponent(repo)}/file/?p=${encodeURIComponent(path)}&reuse=1`), '_blank', 'noopener'); } catch (e) { toast(e.message); }
-}
-
-// ---- Uploads: a queue that survives leaving the folder, with progress, retries and a way to cancel
-const uq = { items: [], running: 0 };
-const upActive = () => uq.items.some(x => x.state === 'wait' || x.state === 'up');
-function enqueueUploads(repo, dir, entries) {
- if (!entries.length) return;
- for (const e of entries) uq.items.push({ repo, dir, file: e.file, rel: e.rel || '', pct: 0, state: 'wait', tries: 0 });
- drawUpBar(); pumpUploads();
-}
-function pumpUploads() {
- while (uq.running < 2) {
- const it = uq.items.find(x => x.state === 'wait'); if (!it) break;
- uq.running++; it.state = 'up';
- sendUpload(it).then(() => { it.state = 'done'; }, err => { it.state = it.cancelled ? 'cancel' : 'fail'; it.err = err.message; })
- .finally(() => { uq.running--; drawUpBar(); pumpUploads(); if (!upActive()) uploadsFinished(); });
- }
-}
-async function sendUpload(it) {
- const enc = encodeURIComponent;
- for (;;) {
- it.tries++; it.pct = 0;
- try {
- const link = await sf.req(`/api2/repos/${enc(it.repo)}/upload-link/?p=${enc(it.dir)}`); // a fresh link each time, so an expired one never blocks a retry
- await new Promise((ok, no) => {
- const x = it.xhr = new XMLHttpRequest(), fd = new FormData();
- fd.append('parent_dir', it.dir); fd.append('replace', '0'); if (it.rel) fd.append('relative_path', it.rel); fd.append('file', it.file, it.file.name);
- x.open('POST', '/sf' + new URL(link, cfg.seafile).pathname + '?ret-json=1');
- x.upload.onprogress = e => { if (e.lengthComputable) { it.pct = e.loaded / e.total; drawUpBar(); } };
- x.onload = () => x.status >= 200 && x.status < 300 ? ok() : no(Object.assign(new Error(x.status === 413 ? 'Too large for the server' : x.status === 403 ? 'Not allowed (or out of space)' : 'Upload failed (' + x.status + ')'), { fatal: x.status >= 400 && x.status < 500 }));
- x.onerror = () => no(new Error('Connection lost'));
- x.onabort = () => no(Object.assign(new Error('Cancelled'), { fatal: true }));
- x.send(fd);
- });
- return;
- } catch (e) {
- if (it.cancelled) throw e;
- if (e.fatal || !sf.token() || it.tries >= 3) throw new Error(it.file.name + ': ' + e.message);
- await sleep(1500 * it.tries);
- }
- }
-}
-function uploadsFinished() {
- const done = uq.items.filter(x => x.state === 'done').length, bad = uq.items.filter(x => x.state === 'fail').length;
- if (done) toast(done + (done === 1 ? ' file' : ' files') + ' uploaded' + (bad ? ', ' + bad + ' failed' : ''));
- uq.items = uq.items.filter(x => x.state === 'fail'); drawUpBar();
- if (fv && document.contains(fv.root)) fv.reload(true);
-}
-function drawUpBar() {
- let b = $('#upbar');
- const live = uq.items.filter(x => x.state === 'wait' || x.state === 'up'), bad = uq.items.filter(x => x.state === 'fail');
- if (!live.length && !bad.length) { if (b) b.remove(); return; }
- if (!b) { b = document.createElement('div'); b.id = 'upbar'; document.body.appendChild(b); }
- if (live.length) {
- const total = uq.items.length, doneN = uq.items.filter(x => x.state === 'done').length, cur = live.find(x => x.state === 'up') || live[0];
- const pct = Math.round(((doneN + live.reduce((a, x) => a + (x.state === 'up' ? x.pct : 0), 0)) / total) * 100);
- b.innerHTML = `Uploading ${esc(live.length === 1 ? cur.file.name : live.length + ' files')} ${pct}%
Cancel `;
- $('#upx').onclick = () => { uq.items.forEach(x => { if (x.state === 'wait') x.state = 'cancel'; if (x.state === 'up') { x.cancelled = true; x.xhr && x.xhr.abort(); } }); uq.items = uq.items.filter(x => x.state === 'fail'); drawUpBar(); };
- } else {
- b.innerHTML = `${bad.length} ${bad.length === 1 ? 'upload' : 'uploads'} failed ${esc(bad[0].err || '')}
Retry Dismiss `;
- $('#upr').onclick = () => { bad.forEach(x => { x.state = 'wait'; x.tries = 0; x.cancelled = false; }); drawUpBar(); pumpUploads(); };
- $('#upd').onclick = () => { uq.items = uq.items.filter(x => x.state !== 'fail'); drawUpBar(); };
- }
-}
-addEventListener('beforeunload', e => { if (upActive()) { e.preventDefault(); e.returnValue = ''; } });
-
-// Everything dropped from the computer, including whole folders (their structure is kept).
-async function droppedFiles(dt) {
- const ents = [...(dt.items || [])].map(i => (i.webkitGetAsEntry ? i.webkitGetAsEntry() : null)).filter(Boolean), out = [];
- if (!ents.length) return [...dt.files].map(file => ({ file, rel: '' }));
- const walk = async (en, rel) => {
- if (en.isFile) await new Promise(ok => en.file(f => { out.push({ file: f, rel }); ok(); }, ok));
- else if (en.isDirectory) {
- const here = rel ? rel + '/' + en.name : en.name, rd = en.createReader(); let batch;
- do { batch = await new Promise(ok => rd.readEntries(ok, () => ok([]))); for (const c of batch) await walk(c, here); } while (batch.length);
- }
- };
- for (const en of ents) await walk(en, '');
- return out;
-}
-const dlUrls = new Map(); // direct download addresses, fetched ahead so a file can be dragged out to the desktop
-async function prefetchDl(repo, path) {
- const k = repo + path, c = dlUrls.get(k); if (c && Date.now() - c.t < 45 * 60e3) return;
- dlUrls.set(k, { t: Date.now() });
- try { const u = await sf.req(`/api2/repos/${encodeURIComponent(repo)}/file/?p=${encodeURIComponent(path)}&reuse=1`); dlUrls.set(k, { t: Date.now(), url: new URL(u, cfg.seafile).href }); } catch { dlUrls.delete(k); }
-}
-
-async function loadDir(repo, dir) {
- const main = $('#fmain'); if (!main) return;
- main.innerHTML = 'Loading…
';
- await libsP.catch(() => {});
- if (!document.contains(main)) return;
- const enc = encodeURIComponent, ro = libPerm[repo] === 'r';
- const hash = p => '#/files/' + enc(repo) + p.split('/').filter(Boolean).map(s => '/' + enc(s)).join('');
- const segs = dir.split('/').filter(Boolean);
- const crumbs = `${esc(libNames[repo] || 'Library')} ` + segs.map((s, i) => `/ ${esc(s)} `).join('');
- const v = fv = { root: main, repo, dir, items: [], sel: new Set(), selecting: false, last: null, filter: '', tok: null };
- const sortCfg = () => store.get('files_sort', { k: 'name', d: 1 });
- const byName = n => v.items.find(x => x.name === n);
- const selItems = () => v.items.filter(x => v.sel.has(x.name));
- const visible = () => { const q = v.filter.trim().toLowerCase(); return sortItems(v.items, sortCfg()).filter(x => !q || x.name.toLowerCase().includes(q)); };
-
- main.innerHTML = `
${crumbs}
-
`;
- const go = p => { location.hash = hash(p); };
-
- const drawTop = () => {
- const n = v.sel.size, one = n === 1 ? selItems()[0] : null;
- $('#ftop').innerHTML = v.selecting
- ? `${n ? n + ' selected' : 'Select items'}
- ${n && n === visible().length ? 'None' : 'All'} Done
-
${ro ? '' : `${icon('files')}Move `}
- ${icon('copy')}Copy
- ${ro ? '' : `${icon('trash')}Delete `}
- ${icon('more')}
- ${v.selecting ? `${on ? icon('check') : ''} ` : ''}
- ${icon(d ? 'files' : 'file')}
- ${esc(it.name)} ${d ? fmtDate(it.mtime) : fmtSize(it.size) + ' · ' + fmtDate(it.mtime)} ${icon('more')} `}
`; };
- box.innerHTML = list.length ? `${list.map(row).join('')}
`
- : `${v.items.length ? 'Nothing matches “' + esc(v.filter) + '”' : ro ? 'This folder is empty' : 'This folder is empty. Drop files here or tap Upload.'}
`;
- const dirs = v.items.filter(x => x.type === 'dir').length, files = v.items.length - dirs, size = v.items.reduce((a, x) => a + (x.size || 0), 0);
- $('#fsum').textContent = v.items.length ? [dirs && dirs + (dirs === 1 ? ' folder' : ' folders'), files && files + (files === 1 ? ' file' : ' files'), size && fmtSize(size)].filter(Boolean).join(' · ') : '';
- };
- const redraw = () => { drawTop(); drawItems(); };
-
- const toggle = (it, range) => {
- const vis = visible().map(x => x.name);
- if (range && v.last && vis.includes(v.last) && vis.includes(it.name)) { const a = vis.indexOf(v.last), b = vis.indexOf(it.name); vis.slice(Math.min(a, b), Math.max(a, b) + 1).forEach(n => v.sel.add(n)); }
- else { v.sel.has(it.name) ? v.sel.delete(it.name) : v.sel.add(it.name); v.last = it.name; }
- v.selecting = true; redraw();
- };
- const itemSheet = it => it.type === 'dir' ? dirSheet(repo, joinP(dir, it.name), it.name, dir) : fileSheet(repo, joinP(dir, it.name), it.name, dir);
- const openIt = it => it.type === 'dir' ? go(joinP(dir, it.name)) : openFile(repo, joinP(dir, it.name), it.name, dir);
- const oneActions = it => {
- const p = joinP(dir, it.name), d = it.type === 'dir', a = [{ label: 'Share link', icon: 'copy', run: () => shareLink(repo, p, d) }];
- if (!ro) a.push({ label: 'Rename', icon: 'edit', run: () => renameItem(repo, p, it.name, dir, d) });
- if (!d) a.push({ label: 'Download', icon: 'dl', run: () => downloadItem(repo, p) });
- if (!d) a.push({ label: 'Version history', icon: 'refresh', run: () => fileHistory(repo, p, it.name, ro) });
- return a;
- };
-
- const create = async (path, op, extra = {}, kind = 'file') => {
- try { await sf.req(`/api2/repos/${enc(repo)}/${kind}/?p=${enc(path)}`, { method: 'POST', body: new URLSearchParams({ operation: op, ...extra }), headers: FORM }); v.reload(true); }
- catch (e) { toast(e.message); }
- };
- const actions = {
- all: () => { const vis = visible(); if (v.sel.size === vis.length) v.sel.clear(); else vis.forEach(x => v.sel.add(x.name)); redraw(); },
- move: () => v.sel.size && moveSheet('move', repo, dir, selItems()),
- copy: () => v.sel.size && moveSheet('copy', repo, dir, selItems()),
- del: () => v.sel.size && deleteItems(repo, dir, selItems()),
- more: () => { const it = selItems()[0]; if (it) actionSheet(it.name, '', oneActions(it)); },
- done: () => { v.selecting = false; v.sel.clear(); redraw(); },
- sel: () => { v.selecting = true; redraw(); },
- refresh: () => v.reload(),
- sort: () => { const c = sortCfg(); actionSheet('Sort by', 'Folders stay on top', SORTS.map(([k, l]) => ({ label: l + (c.k === k ? (c.d > 0 ? ' ↑' : ' ↓') : ''), icon: 'sort',
- run: () => { store.set('files_sort', { k, d: c.k === k ? -c.d : 1 }); drawItems(); } }))); },
- up: () => actionSheet('Upload', '', [{ label: 'Files', icon: 'up', run: () => $('#upf').click() }, { label: 'A folder', icon: 'newdir', run: () => $('#upd2').click() }]),
- new: () => actionSheet('Create new', '', [
- { label: 'Folder', icon: 'newdir', run: () => textSheet('New folder', 'Folder name', 'Create', n => create(joinP(dir, n), 'mkdir', {}, 'dir'), '', n => badName(n, v.items)) },
- ...[['Document', 'docx'], ['Spreadsheet', 'xlsx'], ['Presentation', 'pptx'], ['Text file', 'txt']].map(([label, x]) => ({ label, icon: 'doc',
- run: () => textSheet('New ' + label.toLowerCase(), 'File name', 'Create', async n => {
- const want = n.toLowerCase().endsWith('.' + x) ? n : n + '.' + x;
- try { const name = await createFromTemplate(repo, dir, want, x); v.reload(true); if (x !== 'txt') openFile(repo, joinP(dir, name), name, dir); }
- catch (e) { toast(e.message); }
- }, '', n => badName(n.toLowerCase().endsWith('.' + x) ? n : n + '.' + x, v.items)) })),
- ]),
- };
- v.actions = actions; v.selItems = selItems; v.openIt = openIt; v.visible = visible; v.one = oneActions;
- $('#ftop').onclick = e => { const b = e.target.closest('[data-a]'); if (b && !b.disabled && actions[b.dataset.a]) actions[b.dataset.a](); };
- $('#ftop').onchange = e => {
- const pick = e.target.id === 'upf' || e.target.id === 'upd2' ? [...e.target.files] : null; if (!pick) return;
- enqueueUploads(repo, dir, pick.map(f => ({ file: f, rel: f.webkitRelativePath ? f.webkitRelativePath.split('/').slice(0, -1).join('/') : '' }))); e.target.value = '';
- };
- $('#ff').oninput = e => { v.filter = e.target.value; drawItems(); };
- main.querySelector('.crumbs').onclick = e => { const b = e.target.closest('[data-go]'); if (b) go(b.dataset.go); };
-
- // tap / click / ctrl-click / shift-click, right-click, and long-press on a touch screen
- const box = $('#items'); let suppress = false, lastTouch = 0, lp = null;
- box.onclick = e => {
- if (suppress) { suppress = false; return; }
- const r = e.target.closest('.fr'); if (!r) return; const it = byName(r.dataset.n); if (!it) return;
- if (e.target.closest('[data-more]')) return itemSheet(it);
- if (v.selecting || e.metaKey || e.ctrlKey || e.shiftKey) return toggle(it, e.shiftKey);
- openIt(it);
- };
- box.oncontextmenu = e => {
- const r = e.target.closest('.fr'); if (!r) return; e.preventDefault(); if (Date.now() - lastTouch < 1200) return;
- const it = byName(r.dataset.n); if (!it) return;
- if (v.selecting && v.sel.size > 1 && v.sel.has(it.name)) return actionSheet(v.sel.size + ' selected', '', [ ...(ro ? [] : [{ label: 'Move', icon: 'files', run: actions.move }]), { label: 'Copy', icon: 'copy', run: actions.copy }, ...(ro ? [] : [{ label: 'Delete', icon: 'trash', danger: true, run: actions.del }]) ]);
- itemSheet(it);
- };
- box.onpointerdown = e => {
- if (e.pointerType !== 'touch') return; lastTouch = Date.now();
- const r = e.target.closest('.fr'); if (!r || v.selecting) return; const x0 = e.clientX, y0 = e.clientY;
- const stop = () => { clearTimeout(lp); box.removeEventListener('pointermove', mv); };
- const mv = m => { if (Math.abs(m.clientX - x0) + Math.abs(m.clientY - y0) > 10) stop(); };
- box.addEventListener('pointermove', mv); box.addEventListener('pointerup', stop, { once: true }); box.addEventListener('pointercancel', stop, { once: true });
- lp = setTimeout(() => { stop(); const it = byName(r.dataset.n); if (!it) return; suppress = true; v.sel.add(it.name); v.last = it.name; v.selecting = true; redraw(); try { navigator.vibrate && navigator.vibrate(12); } catch {} }, 450);
- };
- box.onmouseover = e => { const r = e.target.closest('.fr'); const it = r && byName(r.dataset.n); if (it && it.type !== 'dir' && !ro) prefetchDl(repo, joinP(dir, it.name)); };
-
- // Drag: out to the desktop (one file, Chrome/Edge), onto a folder or breadcrumb to move (Alt/Option copies), in from the computer to upload.
- box.ondragstart = e => {
- const r = e.target.closest('.fr'); const it = r && byName(r.dataset.n); if (!it) return;
- const names = v.sel.has(it.name) && v.sel.size ? [...v.sel] : [it.name];
- e.dataTransfer.setData('application/x-hub-items', JSON.stringify({ repo, dir, names })); e.dataTransfer.effectAllowed = 'copyMove';
- const c = it.type !== 'dir' && names.length === 1 && dlUrls.get(repo + joinP(dir, it.name));
- if (c && c.url) e.dataTransfer.setData('DownloadURL', `application/octet-stream:${it.name.replace(/:/g, '-')}:${c.url}`);
- else if (it.type !== 'dir') prefetchDl(repo, joinP(dir, it.name));
- };
- const target = e => { const t = e.target.closest('.fr, [data-go]'); if (!t) return null;
- if (t.dataset.go) return { el: t, path: t.dataset.go }; const it = byName(t.dataset.n); return it && it.type === 'dir' ? { el: t, path: joinP(dir, it.name) } : null; };
- const clearDrop = () => main.querySelectorAll('.dropt').forEach(x => x.classList.remove('dropt')), isFiles = e => [...(e.dataTransfer.types || [])].includes('Files');
- main.ondragover = e => {
- const mine = [...(e.dataTransfer.types || [])].includes('application/x-hub-items'); if (!mine && !isFiles(e) || ro) return;
- e.preventDefault(); clearDrop(); const t = target(e); if (t) t.el.classList.add('dropt'); else if (isFiles(e)) main.classList.add('dropt'); e.dataTransfer.dropEffect = mine && e.altKey ? 'copy' : mine ? 'move' : 'copy';
- };
- main.ondragleave = e => { if (!main.contains(e.relatedTarget)) { clearDrop(); main.classList.remove('dropt'); } };
- main.ondrop = async e => {
- if (ro) return; e.preventDefault(); clearDrop(); main.classList.remove('dropt');
- const t = target(e), mine = e.dataTransfer.getData('application/x-hub-items');
- if (mine) {
- const { names } = JSON.parse(mine); if (!t || t.path === dir || names.some(n => joinP(dir, n) === t.path)) return;
- try { await transferItems(e.altKey ? 'copy' : 'move', repo, dir, names, { repo, dir: t.path }); toast((e.altKey ? 'Copied' : 'Moved') + (names.length > 1 ? ' ' + names.length + ' items' : '')); } catch (err) { toast(err.message); }
- return afterChange(repo, dir);
- }
- if (isFiles(e)) { const files = await droppedFiles(e.dataTransfer); enqueueUploads(repo, t ? t.path : dir, files); }
- };
-
- v.reload = async quiet => {
- const tok = v.tok = Symbol(); if (!quiet) $('#items').innerHTML = 'Loading…
';
- try {
- const items = await sf.req(`/api2/repos/${enc(repo)}/dir/?p=${enc(dir)}`);
- if (v.tok !== tok || !document.contains(main)) return;
- v.items = items; for (const n of [...v.sel]) if (!byName(n)) v.sel.delete(n);
- redraw();
- } catch (e) {
- if (v.tok !== tok || !document.contains(main)) return;
- if (!sf.token()) return route();
- $('#items').innerHTML = `${esc(navigator.onLine ? e.message : 'You are offline. ' + e.message)}
Try again
`;
- $('#fretry').onclick = () => v.reload();
- }
- };
- drawTop(); v.reload();
-}
-
-const joinP = (d, n) => (d === '/' ? '' : d) + '/' + n;
-// Keep the folder fresh when you come back to the tab, and add Finder-style keys.
-document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && fv && document.contains(fv.root) && !upActive() && !document.getElementById('sheet')) fv.reload(true); });
-addEventListener('keydown', e => {
- if (!fv || !document.contains(fv.root) || document.getElementById('sheet') || /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName || '')) return;
- const mod = e.metaKey || e.ctrlKey, n = fv.sel.size, one = n === 1 ? fv.selItems()[0] : null, a = fv.actions;
- if (e.key === 'Escape' && (n || fv.selecting)) { a.done(); }
- else if (mod && e.key.toLowerCase() === 'a') { e.preventDefault(); fv.selecting = true; fv.visible().forEach(x => fv.sel.add(x.name)); a.sel(); }
- else if ((e.key === 'Delete' || e.key === 'Backspace') && n) { e.preventDefault(); a.del(); }
- else if (e.key === 'F2' && one) { e.preventDefault(); const p = joinP(fv.dir, one.name); renameItem(fv.repo, p, one.name, fv.dir, one.type === 'dir'); }
- else if (e.key === 'Enter' && one) fv.openIt(one);
-});
-
-// ---- Bottom sheet (dialog on tablet/desktop). Body content is built by the caller from trusted/escaped HTML.
-function openSheet(title, sub, bodyHtml) {
- closeSheet();
- const el = document.createElement('div');
- el.id = 'sheet';
- el.innerHTML = `
-
${esc(title)} ${sub ? `
${esc(sub)}
` : ''}${bodyHtml}
${actions.map((a, i) => `
- ${icon(a.icon)}${esc(a.label)} `).join('')}
- Cancel
`);
- el.querySelector('#sx').onclick = closeSheet;
- el.querySelectorAll('button.row').forEach(b => b.onclick = () => { closeSheet(); actions[b.dataset.i].run(); });
-}
-
-function textSheet(title, label, okLabel, onOk, initial = '', validate) {
- const el = openSheet(title, '', ``);
- el.querySelector('#sx').onclick = closeSheet;
- el.querySelector('form').onsubmit = e => {
- e.preventDefault(); const v = el.querySelector('#tv').value.trim(); if (!v) return;
- const bad = validate && validate(v); if (bad) { el.querySelector('#te').textContent = bad; return; }
- closeSheet(); onOk(v);
- };
- setTimeout(() => { const t = el.querySelector('#tv'); t.focus(); const d = initial.lastIndexOf('.'); t.setSelectionRange(0, d > 0 ? d : initial.length); }, 50);
-}
-
-function confirmSheet(title, sub, okLabel, onOk) {
- const el = openSheet(title, sub, `Cancel
- ${esc(okLabel)}
`);
- el.querySelector('#sx').onclick = closeSheet;
- el.querySelector('#so').onclick = () => { closeSheet(); onOk(); };
-}
-
-// ---- File actions
-const PREVIEW = { img: 'jpg jpeg png gif webp svg bmp heic', pdf: 'pdf', video: 'mp4 mov m4v webm', audio: 'mp3 m4a wav flac ogg aac' };
-const previewKind = n => Object.keys(PREVIEW).find(k => PREVIEW[k].split(' ').includes(ext(n)));
-const FORM = { 'Content-Type': 'application/x-www-form-urlencoded' };
-const encP = p => p.split('/').map(encodeURIComponent).join('/');
-const fileUrl = async (repo, path) => { const u = new URL(await sf.req(`/api2/repos/${encodeURIComponent(repo)}/file/?p=${encodeURIComponent(path)}&reuse=1`), cfg.seafile); return '/sf' + u.pathname; };
-
-// Recently opened files, shown on Home (kept in this browser only).
-function addRecent(repo, path, name) {
- const r = store.get('recents', []).filter(x => !(x.repo === repo && x.path === path));
- r.unshift({ repo, path, name, t: Date.now() }); store.set('recents', r.slice(0, 12));
-}
-
-// Default tap on a file: edit documents, preview media, otherwise show the actions.
-function openFile(repo, path, name, dir) {
- if (cfg.editor && EDIT_EXT.has(ext(name)) && ext(name) !== 'txt') { addRecent(repo, path, name); location.hash = '#/edit/' + encodeURIComponent(repo) + path.split('/').filter(Boolean).map(s => '/' + encodeURIComponent(s)).join(''); }
- else if (previewKind(name)) previewFile(repo, path, name);
- else fileSheet(repo, path, name, dir);
-}
-
-async function previewFile(repo, path, name) {
- addRecent(repo, path, name);
- try {
- const url = (await fileUrl(repo, path)) + '?hubinline=1', kind = previewKind(name);
- const media = kind === 'img' ? `${icon('copy')}Copy ${navigator.share ? 'Share… ' : ''}
`);
- el.querySelector('#cp1').onclick = async () => { try { await navigator.clipboard.writeText(link); toast('Link copied'); closeSheet(); } catch { el.querySelector('#sl').select(); toast('Press copy on the selected link'); } };
- const sh = el.querySelector('#sh1'); if (sh) sh.onclick = () => navigator.share({ url: link }).catch(() => {});
- } catch (e) { toast(e.message); }
-}
-
-function fileSheet(repo, path, name, dir) {
- const enc = encodeURIComponent, acts = [], ro = libPerm[repo] === 'r', it = { name, type: 'file' };
- if (previewKind(name)) acts.push({ label: 'Preview', icon: 'doc', run: () => previewFile(repo, path, name) });
- if (cfg.editor && EDIT_EXT.has(ext(name)) && !ro) acts.push({ label: 'Edit here', icon: 'edit', run: () => { addRecent(repo, path, name); location.hash = '#/edit/' + enc(repo) + path.split('/').filter(Boolean).map(s => '/' + enc(s)).join(''); } });
- if (OFFICE_EXT.has(ext(name))) acts.push({ label: 'Open in Seafile', icon: 'doc', run: () => window.open(`${cfg.seafile}/lib/${enc(repo)}/file${path.split('/').map(enc).join('/')}`, '_blank', 'noopener') });
- acts.push({ label: 'Share link', icon: 'copy', run: () => shareLink(repo, path, false) });
- acts.push({ label: 'Download', icon: 'dl', run: () => downloadItem(repo, path) });
- acts.push({ label: 'Version history', icon: 'refresh', run: () => fileHistory(repo, path, name, ro) });
- if (!ro) acts.push({ label: 'Rename', icon: 'edit', run: () => renameItem(repo, path, name, dir, false) });
- if (!ro) acts.push({ label: 'Move to…', icon: 'files', run: () => moveSheet('move', repo, dir, [it]) });
- acts.push({ label: 'Copy to…', icon: 'copy', run: () => moveSheet('copy', repo, dir, [it]) });
- if (!ro) acts.push({ label: 'Delete', icon: 'trash', danger: true, run: () => deleteItems(repo, dir, [it]) });
- actionSheet(name, '', acts);
-}
-
-function dirSheet(repo, path, name, dir) {
- const ro = libPerm[repo] === 'r', it = { name, type: 'dir' };
- actionSheet(name, 'Folder', [
- { label: 'Open', icon: 'files', run: () => { location.hash = '#/files/' + encodeURIComponent(repo) + path.split('/').filter(Boolean).map(s => '/' + encodeURIComponent(s)).join(''); } },
- { label: 'Share link', icon: 'copy', run: () => shareLink(repo, path, true) },
- ...(ro ? [] : [{ label: 'Rename', icon: 'edit', run: () => renameItem(repo, path, name, dir, true) }, { label: 'Move to…', icon: 'files', run: () => moveSheet('move', repo, dir, [it]) }]),
- { label: 'Copy to…', icon: 'copy', run: () => moveSheet('copy', repo, dir, [it]) },
- ...(ro ? [] : [{ label: 'Delete', icon: 'trash', danger: true, run: () => deleteItems(repo, dir, [it]) }]),
- ]);
-}
-
-// ---- Signal (through signal-cli-rest-api on the server; this hub is one more "linked device" of your Signal account)
-const sgq = q => (sg.root || document).querySelector(q);
-const sgApi = (p, o) => jfetch('/api/signal' + p, o);
-const sgPost = (p, body) => sgApi(p, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-const sgTime = ts => { const d = new Date(ts), n = new Date(); return d.toDateString() === n.toDateString() ? d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) : (n - d < 6 * 864e5 ? d.toLocaleDateString([], { weekday: 'short' }) : d.toLocaleDateString([], { month: 'short', day: 'numeric' })); };
-const sgInitial = n => (String(n).replace(/^\+/, '').trim()[0] || '?').toUpperCase();
-const sgColor = id => `hsl(${[...String(id)].reduce((a, c) => (a * 31 + c.charCodeAt(0)) % 360, 7)} 45% 42%)`;
-const sgOnView = () => location.hash.startsWith('#/signal');
-const sgMounted = () => !!sg.root && document.contains(sg.root);
-async function sgStart() { // keep the unread count and live updates running whatever screen is open
- if (!allowed('signal') || sg.es) return;
- try { const st = await sgApi('/status'); sg.st = st; sg.unread = st.unread || 0; renderNav(activeTab); } catch {}
- sg.es = new EventSource('/api/signal/events');
- sg.es.onmessage = e => { let ev; try { ev = JSON.parse(e.data); } catch { return; } sgEvent(ev); };
-}
-function sgStop() { if (sg.es) { sg.es.close(); sg.es = null; } }
-// ---- Getting your attention: a chime, a desktop notification when the app is in the background, the count in the tab title and on the app icon.
-const sgAlerts = () => { try { return { sound: true, notify: false, ...JSON.parse(localStorage.getItem('sg_alerts')) }; } catch { return { sound: true, notify: false }; } };
-const sgSetAlerts = p => { try { localStorage.setItem('sg_alerts', JSON.stringify({ ...sgAlerts(), ...p })); } catch {} };
-let sgAC = null;
-function sgUnlockAudio() { try { sgAC = sgAC || new (window.AudioContext || window.webkitAudioContext)(); if (sgAC.state === 'suspended') sgAC.resume(); } catch {} } // a browser only allows sound after you have used the page once
-['pointerdown', 'keydown', 'touchstart'].forEach(e => addEventListener(e, sgUnlockAudio, { passive: true }));
-function sgChime() {
- sgUnlockAudio(); if (!sgAC || sgAC.state !== 'running') return;
- const t = sgAC.currentTime;
- [[880, 0], [1318, 0.14]].forEach(([f, d]) => { const o = sgAC.createOscillator(), g = sgAC.createGain(); o.type = 'sine'; o.frequency.value = f;
- g.gain.setValueAtTime(0.0001, t + d); g.gain.exponentialRampToValueAtTime(0.22, t + d + 0.02); g.gain.exponentialRampToValueAtTime(0.0001, t + d + 0.4);
- o.connect(g); g.connect(sgAC.destination); o.start(t + d); o.stop(t + d + 0.45); });
-}
-function sgBadgeEverywhere() {
- document.title = (sg.unread ? '(' + (sg.unread > 99 ? '99+' : sg.unread) + ') ' : '') + 'NE Hub';
- try { if (navigator.setAppBadge) { sg.unread ? navigator.setAppBadge(sg.unread) : navigator.clearAppBadge(); } } catch {}
-}
-function sgAlert(ev) { // a message from someone else arrived and you are not looking at that chat
- const a = sgAlerts();
- if (a.sound) sgChime();
- if (a.notify && 'Notification' in window && Notification.permission === 'granted' && (document.hidden || !document.hasFocus())) {
- try { const n = new Notification(ev.name || 'Signal', { body: ev.preview || 'New message', tag: 'sg:' + ev.conv, icon: '/icons/icon-192.png', silent: true });
- n.onclick = () => { window.focus(); n.close(); sg.cur = ev.conv; sgSaveDock(); if (sgOnView()) location.hash = '#/signal/' + encodeURIComponent(ev.conv); else { sg.dockOpen = true; sgSaveDock(); sgDockSync(activeTab); } }; } catch { /* the browser refused */ }
- }
-}
-let sgEvT = null;
-function sgEvent(ev) {
- if (typeof ev.unread === 'number' && ev.unread !== sg.unread) { sg.unread = ev.unread; renderNav(activeTab); }
- if (ev.t === 'msg' && !ev.out) {
- const looking = sgMounted() && sg.cur === ev.conv && document.visibilityState === 'visible' && document.hasFocus();
- if (!looking) { toast('Signal · ' + (ev.name || '') + ': ' + (ev.preview || '')); sgAlert(ev); }
- }
- if (ev.t === 'gone') sgGone(ev.conv, true);
- if (!sgMounted()) return;
- clearTimeout(sgEvT); sgEvT = setTimeout(() => { if (ev.t === 'status') return sgMount(sg.root, sg.dock); sgRefresh(); }, 150);
-}
-
-// The Signal tab (full page, desktop) ...
-function viewSignal(args = []) { sg.cur = args[0] || null; sgDockHide(); return sgMount($('#view'), false); }
-// ... and the same screens in a panel that floats over every other screen.
-async function sgMount(root, dock) {
- sg.root = root; sg.dock = dock; const cls = dock ? 'sgdockin' : 'wrap sgwrap', title = dock ? '' : 'Signal ';
- root.innerHTML = ``;
- let st; try { st = await sgApi('/status'); } catch (e) { root.innerHTML = `${title}
${esc(e.message)}
${title}
The Signal service is not answering. Check that its container (signal ) is running, then reload.
${dock ? 'Chats ' : '
Signal '}${icon('edit')}New
-
${esc(st.number)}${st.connected ? '' : ' · reconnecting…'}
${st.gap ? `
The link to Signal was down at ${new Date(st.gap.from).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })} for ${Math.max(1, Math.round((st.gap.to - st.gap.from) / 1000))} s. A message that arrived then may be missing here.
` : ''}
-
Choose a conversation, or start a new one.
';
- } catch (e) { const l = sgq('#sglist'); if (l) l.innerHTML = `${esc(e.message)}
`; }
-}
-function sgOpen(id) { // in the floating panel a chat opens in place (the page behind does not change)
- sg.cur = id; sgSaveDock(); const box = sgq('.sg'); if (box) box.classList.toggle('open', !!id);
- sgq('#sgm').innerHTML = ''; sgDrawList(); if (id) sgDrawThread(true);
-}
-function sgDrawList() {
- const q = (sgq('#sgq') || {}).value ? sgq('#sgq').value.toLowerCase() : '', box = sgq('#sglist'); if (!box) return;
- const rows = sg.convs.filter(c => !q || (c.name || c.id).toLowerCase().includes(q) || (c.preview || '').toLowerCase().includes(q));
- box.innerHTML = rows.map(c => `${c.type === 'group' ? icon('chat') : esc(sgInitial(c.name || c.id))}
- ${esc(c.name || c.id)} ${esc(c.preview || '')} ${c.ts ? sgTime(c.ts) : ''} ${c.unread ? `${c.unread} ` : ''}${q ? 'Nothing matches' : 'No conversations yet. Tap New, or wait for a message.'}
`;
- if (sg.dock) box.onclick = e => { const a = e.target.closest('[data-id]'); if (a) { e.preventDefault(); sgOpen(a.dataset.id); } };
- box.oncontextmenu = e => { const a = e.target.closest('[data-id]'); if (a) { e.preventDefault(); sgChatMenu(a.dataset.id); } };
-}
-
-const sgLink = t => t.replace(/(https?:\/\/[^\s<]+[^\s<.,;:!?)\]'"])/g, u => `${u} `);
-const sgSize = n => n < 1024 ? n + ' B' : n < 1048576 ? (n / 1024).toFixed(0) + ' KB' : (n / 1048576).toFixed(1) + ' MB';
-function sgBubble(m, c, prev) {
- const nm = a => (sg.names[a] || (a === sg.st.number ? 'You' : a));
- const att = (m.att || []).map(a => { const u = '/api/signal/attachment/' + encodeURIComponent(a.id);
- return /^image\//.test(a.type || '') ? `${icon('clip')}${esc(a.name || 'file')}${a.size ? ' · ' + sgSize(a.size) : ''} `; }).join('');
- const reacts = {}; Object.values(m.react || {}).forEach(e => { reacts[e] = (reacts[e] || 0) + 1; });
- const day = !prev || new Date(prev.ts).toDateString() !== new Date(m.ts).toDateString() ? `${new Date(m.ts).toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' })}
` : '';
- const tick = m.out ? (m.status === 'read' ? '✓✓' : m.status === 'delivered' ? '✓✓' : '✓') : '';
- return `${day}${c.type === 'group' && !m.out ? `
${esc(m.name || nm(m.from))} ` : ''}
- ${m.quote ? `
${esc(nm(m.quote.author))} ${esc(m.quote.text || '')}
` : ''}${att}
- ${m.deleted ? '
This message was deleted ' : m.text ? `
${sgLink(esc(m.text)).replace(/\n/g, '
` : ''}
-
${m.edited ? 'edited · ' : ''}${new Date(m.ts).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}${tick ? ` ${tick} ` : ''}
- ${Object.keys(reacts).length ? `
${Object.entries(reacts).map(([e, n]) => e + (n > 1 ? ' ' + n : '')).join(' ')} ` : ''}
${esc(e.message)}
`; return; }
- if (sg.cur !== id || !sgq('#sgm')) return; sg.names = r.names || {};
- const c = r.conv, old = box.querySelector('.sgmsgs'), stick = !old || old.scrollHeight - old.scrollTop - old.clientHeight < 80;
- if (!box.querySelector('.sgbar')) {
- box.innerHTML = `${sg.dock ? `
${icon('back')} ` : `
${icon('back')} `}
${c.type === 'group' ? icon('chat') : esc(sgInitial(c.name || c.id))} ${icon('more')}
- `;
- sgWireComposer(); const bk = sgq('#sgbk'); if (bk) bk.onclick = () => sgOpen(null); sgq('#sgmore').onclick = () => sgChatMenu(sg.cur);
- }
- sgq('#sgtitle').textContent = c.name || c.id; sgq('#sgsub').textContent = c.type === 'group' ? 'Group' : (c.name && c.name !== c.id ? c.id : '');
- const list = r.msgs, el = sgq('#sgmsgs');
- el.innerHTML = (r.more ? 'Older messages are not shown here
' : '') + list.map((m, i) => sgBubble(m, c, list[i - 1])).join('') || 'No messages yet. Say hello.
';
- if (first || stick) el.scrollTop = el.scrollHeight;
- el.onclick = e => { const b = e.target.closest('.sgb'); if (!b || e.target.closest('a, audio, video')) return; sgMessageMenu(list.find(m => String(m.ts) === b.dataset.ts), c); };
- if (c.unread || (sg.convs.find(x => x.id === id) || {}).unread) sgPost('/read', { id }).then(() => { const x = sg.convs.find(q => q.id === id); if (x) x.unread = 0; sgDrawList(); }).catch(() => {});
-}
-function sgMessageMenu(m, c) {
- if (!m || m.deleted) return;
- const el = openSheet('', '', `${['👍', '❤️', '😂', '😮', '😢', '🙏'].map(e => `${e} `).join('')}
- ${icon('back')}Reply ${m.text ? `${icon('copy')}Copy text ` : ''}
`);
- el.querySelectorAll('[data-e]').forEach(b => b.onclick = async () => { closeSheet(); try { await sgPost('/react', { to: c.id, ts: m.ts, emoji: (m.react && m.react[sg.st.number]) === b.dataset.e ? '' : b.dataset.e }); } catch (e) { toast(e.message); } });
- el.querySelector('#sgr').onclick = () => { closeSheet(); sg.reply = m; sgDrawReply(); sgq('#sgtext').focus(); };
- const cp = el.querySelector('#sgcp'); if (cp) cp.onclick = async () => { closeSheet(); try { await navigator.clipboard.writeText(m.text); toast('Copied'); } catch { toast('Could not copy'); } };
-}
-function sgDrawReply() {
- const b = sgq('#sgrep'); if (!b) return;
- if (!sg.reply) { b.hidden = true; return; }
- b.hidden = false; b.innerHTML = `${esc(sg.reply.out ? 'You' : (sg.reply.name || sg.reply.from))} ${esc(sg.reply.text || 'Attachment')} ${icon('x')} `;
- sgq('#sgrx').onclick = () => { sg.reply = null; sgDrawReply(); };
-}
-function sgDrawTray() {
- const t = sgq('#sgtray'); if (!t) return; t.hidden = !sg.tray.length;
- t.innerHTML = sg.tray.map((f, i) => `${/^image\//.test(f.type) ? `${esc(f.name)} ${icon('x')} `).join('');
- t.querySelectorAll('[data-x]').forEach(b => b.onclick = () => { sg.tray.splice(+b.dataset.x, 1); sgDrawTray(); });
-}
-const sgB64 = f => new Promise((ok, no) => { const r = new FileReader(); r.onload = () => ok(String(r.result).split(',')[1] || ''); r.onerror = () => no(new Error('Could not read ' + f.name)); r.readAsDataURL(f); });
-function sgWireComposer() {
- const ta = sgq('#sgtext'), grow = () => { ta.style.height = 'auto'; ta.style.height = Math.min(ta.scrollHeight, 140) + 'px'; };
- ta.oninput = grow;
- ta.onkeydown = e => { if (e.key === 'Enter' && !e.shiftKey && matchMedia('(pointer: fine)').matches) { e.preventDefault(); sgq('#sgform').requestSubmit(); } };
- sgq('#sgat').onclick = () => sgq('#sgfile').click();
- sgq('#sgfile').onchange = e => { sg.tray.push(...e.target.files); e.target.value = ''; sgDrawTray(); };
- ta.addEventListener('paste', e => { const fs = [...(e.clipboardData && e.clipboardData.files || [])]; if (fs.length) { sg.tray.push(...fs); sgDrawTray(); } });
- sgq('#sgform').onsubmit = async e => {
- e.preventDefault(); const text = ta.value, files = [...sg.tray]; if (!text.trim() && !files.length) return;
- const btn = sgq('#sgsend'); btn.disabled = true;
- try {
- const attachments = []; for (const f of files) attachments.push({ name: f.name, type: f.type || 'application/octet-stream', data: await sgB64(f) });
- await sgPost('/send', { to: sg.cur, text, attachments, quote: sg.reply ? sg.reply.ts : undefined });
- ta.value = ''; grow(); sg.tray = []; sg.reply = null; sgDrawTray(); sgDrawReply(); await sgRefresh(); const el = sgq('#sgmsgs'); if (el) el.scrollTop = el.scrollHeight;
- } catch (err) { toast(err.message); }
- btn.disabled = false; ta.focus();
- };
-}
-// ---- editing contacts and removing chats
-function sgChatMenu(id) {
- const c = sg.convs.find(x => x.id === id); if (!c) return;
- const acts = [];
- if (c.type === 'direct') acts.push({ label: 'Edit contact', icon: 'edit', run: () => sgEditContact(c) });
- acts.push({ label: 'Clear messages', icon: 'trash', run: () => confirmSheet('Clear all messages?', (c.name || c.id) + ': removed from this app only. Your phone keeps them.', 'Clear', async () => { try { await sgPost('/conv/clear', { id }); await sgRefresh(); } catch (e) { toast(e.message); } }) });
- acts.push({ label: 'Remove chat', icon: 'trash', danger: true, run: () => confirmSheet('Remove this chat?', 'It is removed from this app only. Your phone keeps it, and a new message from them starts it again here.', 'Remove', async () => { try { await sgPost('/conv/delete', { id }); sgGone(id); } catch (e) { toast(e.message); } }) });
- actionSheet(c.name || c.id, c.type === 'group' ? 'Group' : c.id, acts);
-}
-function sgGone(id, fromServer) {
- sg.convs = sg.convs.filter(x => x.id !== id);
- if (sg.cur === id) { sg.cur = null; sgSaveDock(); if (sg.dock && sgMounted()) sgOpen(null); else if (sgOnView()) location.hash = '#/signal'; }
- if (!fromServer || sgMounted()) sgRefresh();
-}
-function sgEditContact(c, after) {
- const el = openSheet('Edit contact', c.id || c.number, ``);
- el.querySelector('#sgcx').onclick = closeSheet; setTimeout(() => el.querySelector('#sgcn').focus(), 60);
- el.querySelector('#sgcf').onsubmit = async e => { e.preventDefault();
- try { await sgPost('/contact', { number: c.id || c.number, name: el.querySelector('#sgcn').value }); closeSheet(); toast('Saved'); if (after) after(); await sgRefresh(); }
- catch (err) { el.querySelector('#sgce').textContent = err.message; } };
-}
-async function sgNewChat() {
- let contacts = []; try { contacts = (await sgApi('/contacts')).contacts; } catch {}
- const el = openSheet('New chat', '', `
`);
- const input = el.querySelector('#sgnn'), draw = () => { const q = input.value.toLowerCase().trim(); el.querySelector('#sgcl').innerHTML = contacts.filter(c => !q || (c.name || '').toLowerCase().includes(q) || c.number.includes(q)).slice(0, 60).map(c => `${esc(sgInitial(c.name || c.number))} ${esc(c.name || c.number)} ${esc(c.number)} ${icon('edit')}
`).join('');
- el.querySelectorAll('[data-n]').forEach(b => b.onclick = () => go(b.dataset.n));
- el.querySelectorAll('[data-e]').forEach(b => b.onclick = () => { const k = contacts.find(x => x.number === b.dataset.e); sgEditContact(k, async () => { try { contacts = (await sgApi('/contacts')).contacts; } catch {} }); }); };
- const go = async n => { try { const r = await sgPost('/new', { number: n, name: el.querySelector('#sgnm').value }); closeSheet(); if (sg.dock) { await sgRefresh(); sgOpen(r.conv.id); } else location.hash = '#/signal/' + encodeURIComponent(r.conv.id); } catch (e) { el.querySelector('#sgne').textContent = e.message; } };
- input.oninput = draw; draw(); el.querySelector('#sgnf').onsubmit = e => { e.preventDefault(); go(input.value); }; setTimeout(() => input.focus(), 60);
-}
-function sgLinkScreen(root, dock) {
- const v = root, cls = dock ? 'sgdockin' : 'wrap';
- const draw = () => { const img = sgq('#sgqr'); if (img) img.src = '/api/signal/qr?t=' + Date.now(); };
- v.innerHTML = `${dock ? '' : '
Signal '}
Link this app to your Signal account. It becomes one more linked device, like Signal Desktop.
-
On your phone open Signal → Settings → Linked devices → Link new device . Scan this code.
-
-
${icon('refresh')}New code
Waiting for you to scan…
-
Messages from before you link are not copied over, only new ones. Conversations are kept on your server.
Signal ${icon('full')} ${icon('x')}
`;
- document.body.append(dock, fab);
- fab.onclick = () => (sg.dockOpen ? sgDockClose() : sgDockOpen());
- dock.querySelector('#sgdx').onclick = sgDockClose;
- dock.querySelector('#sgdfull').onclick = () => { const id = sg.cur; sgDockClose(); location.hash = '#/signal' + (id ? '/' + encodeURIComponent(id) : ''); };
- const ro = new ResizeObserver(() => document.documentElement.style.setProperty('--ph', ($('#player') && !$('#player').hidden ? $('#player').offsetHeight : 0) + 'px')); ro.observe($('#player'));
-}
-function sgDockBadge() { const f = $('#sgfab'); if (f) f.innerHTML = icon('chat') + (sg.unread ? `${sg.unread > 99 ? '99+' : sg.unread} ` : ''); }
-function sgDockOpen() { const d = $('#sgdock'); if (!d) return; sg.dockOpen = true; d.hidden = false; sgSaveDock(); const body = $('#sgdbody'); if (sg.root !== body) sgMount(body, true); }
-function sgDockClose() { const d = $('#sgdock'); if (d) d.hidden = true; sg.dockOpen = false; if (sg.dock) sg.root = null; const b = $('#sgdbody'); if (b) b.innerHTML = ''; sgSaveDock(); }
-function sgDockHide() { const d = $('#sgdock'), f = $('#sgfab'); if (d) d.hidden = true; if (f) f.hidden = true; if (sg.dock) sg.root = null; const b = $('#sgdbody'); if (b) b.innerHTML = ''; }
-function sgDockSync(name) { // after every screen change
- if (!allowed('signal')) { sgDockHide(); return; }
- sgDockInit(); const f = $('#sgfab'), d = $('#sgdock'); if (!f) return;
- if (name === 'signal' || name === 'edit') { sgDockHide(); return; }
- f.hidden = false; sgDockBadge();
- if (sg.dockOpen) { d.hidden = false; if (sg.root !== $('#sgdbody')) sgMount($('#sgdbody'), true); } else d.hidden = true;
-}
-sgMQ.addEventListener('change', () => { // a window made narrower than a desktop (or back)
- renderNav(activeTab);
- if (!sgMQ.matches) { sgStop(); sgDockHide(); if (sgOnView()) location.hash = '#/home'; } else { sgStart(); sgDockSync(activeTab); }
-});
-
-// ---- Boot
-(async () => {
- try { cfg = { ...cfg, ...(await (await fetch('/api/config')).json()) }; } catch {}
- const loadedBuild = cfg.build;
- // When a new version is deployed, an open page keeps running the old one. Tell the person, and offer a reload.
- const checkForUpdate = async () => {
- try {
- const c = await (await fetch('/api/config', { cache: 'no-store' })).json();
- if (c.build && loadedBuild && c.build !== loadedBuild && !document.getElementById('upd')) {
- const b = document.createElement('div'); b.id = 'upd';
- b.innerHTML = 'A new version of NE Hub is available. Reload ';
- document.body.appendChild(b); document.getElementById('updgo').onclick = () => location.reload();
- }
- } catch {}
- };
- document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkForUpdate(); });
- setInterval(checkForUpdate, 10 * 60e3);
- await loadMe();
- await loadSettings();
- sgStart();
- addEventListener('hashchange', route);
- restorePlayer();
- route();
- if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
-})();
-
-// Keyboard (desktop): space play/pause, arrows seek, N/P next/previous.
-addEventListener('keydown', e => {
- const tag = e.target.tagName || '', k = e.key;
- if (e.metaKey || e.ctrlKey || e.altKey || !cur() || /^(INPUT|TEXTAREA|SELECT)$/.test(tag) || (k === ' ' && /^(BUTTON|A)$/.test(tag))) return;
- if (k === ' ') { e.preventDefault(); toggle(); }
- else if (k === 'ArrowRight') pl.a.currentTime += 10; else if (k === 'ArrowLeft') pl.a.currentTime = Math.max(0, pl.a.currentTime - 10);
- else if (k === 'n' || k === 'N') next(); else if (k === 'p' || k === 'P') prev();
-});
diff --git a/public/audiobooks.js b/public/audiobooks.js
new file mode 100644
index 0000000..fb09329
--- /dev/null
+++ b/public/audiobooks.js
@@ -0,0 +1,58 @@
+'use strict';
+// ---- Audiobooks: embedded site. Sign-in details saved in Settings (this browser only) can be copied with one tap,
+// because a page can't type into another site's login form.
+const abCreds = () => store.get('ab_creds', { u: '', p: '' });
+// Podcast Admin (Verse by Verse): the site refuses to be framed (X-Frame-Options), so this is a launcher.
+function viewVerse() {
+ const url = cfg.verse, host = new URL(url).host;
+ $('#view').innerHTML = `Podcast Admin ${esc(host + new URL(url).pathname)}
+
This site doesn't allow being shown inside another app, so it opens in its own tab.
+
Podcast ${esc(u.host)}
+
+ ${canFrame ? '
If the page below stays blank, the app does not allow being shown inside another app. Use Open in new tab.
'
+ : '
This is a plain http address, which a secure page cannot show inside itself. It opens in its own tab, and works at home or on your VPN.
'}
Audiobooks ${old ? '' : 'Opening…'}
+ ${c.u ? `
${icon('copy')} ` : ''}
+
${icon('refresh')}
+
${icon('full')}
+
${icon('ext')} Reload ';
+ document.body.appendChild(b); document.getElementById('updgo').onclick = () => location.reload();
+ }
+ } catch {}
+ };
+ document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkForUpdate(); });
+ setInterval(checkForUpdate, 10 * 60e3);
+ await loadMe();
+ await loadSettings();
+ sgStart();
+ addEventListener('hashchange', route);
+ restorePlayer();
+ route();
+ if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
+})();
+
+// Keyboard (desktop): space play/pause, arrows seek, N/P next/previous.
+addEventListener('keydown', e => {
+ const tag = e.target.tagName || '', k = e.key;
+ if (e.metaKey || e.ctrlKey || e.altKey || !cur() || /^(INPUT|TEXTAREA|SELECT)$/.test(tag) || (k === ' ' && /^(BUTTON|A)$/.test(tag))) return;
+ if (k === ' ') { e.preventDefault(); toggle(); }
+ else if (k === 'ArrowRight') pl.a.currentTime += 10; else if (k === 'ArrowLeft') pl.a.currentTime = Math.max(0, pl.a.currentTime - 10);
+ else if (k === 'n' || k === 'N') next(); else if (k === 'p' || k === 'P') prev();
+});
diff --git a/public/calendar.js b/public/calendar.js
new file mode 100644
index 0000000..85ef361
--- /dev/null
+++ b/public/calendar.js
@@ -0,0 +1,239 @@
+'use strict';
+// ---- Calendar: agenda built from private ICS links (managed here; fetched and parsed by the server)
+const ymd = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+async function loadRange(start, days) {
+ const end = new Date(start); end.setDate(end.getDate() + days);
+ const last = new Date(end.getTime() - 1);
+ const q = new URLSearchParams({ from: start.getTime(), to: end.getTime() - 1, fd: ymd(start), td: ymd(last) });
+ const { events, errors } = await jfetch('/api/cal/events?' + q);
+ const byDay = new Map();
+ const put = (k, e) => { if (!byDay.has(k)) byDay.set(k, []); byDay.get(k).push(e); };
+ for (const e of events) {
+ if (e.allDay) { // spans start..end-1 (end exclusive)
+ for (let d = new Date(e.start + 'T00:00:00'); ymd(d) < e.end; d.setDate(d.getDate() + 1)) { const k = ymd(d); if (k >= ymd(start) && k <= ymd(last)) put(k, e); }
+ } else put(ymd(new Date(e.start)), e);
+ }
+ for (const list of byDay.values()) list.sort((a, b) => (b.allDay - a.allDay) || ((a.allDay ? 0 : a.start) - (b.allDay ? 0 : b.start)));
+ return { byDay, errors, start };
+}
+const loadAgenda = days => { const start = new Date(); start.setHours(0, 0, 0, 0); return loadRange(start, days); };
+const fmtTime = ms => new Date(ms).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+const evStore = []; // events currently on screen, so a tap can open the right one
+const evRow = e => { const i = evStore.push(e) - 1;
+ return `${esc(e.title)}
+ ${e.allDay ? 'All day' : fmtTime(e.start) + ' – ' + fmtTime(e.end)}${e.location ? ' · ' + esc(e.location) : ''} · ${esc(e.cal)}${e.series ? ' · repeats' : ''} Today ${list.length ? list.slice(0, 6).map(evRow).join('') : '
Nothing on the calendar today
'}
Calendar
+
${[['month', 'Month'], ['week', 'Week'], ['day', 'Day'], ['agenda', 'Agenda']].map(([k, l]) => `
${l} `).join('')}
+
${icon('cal')}Add event
+
Manage calendars
No calendars yet. Add a private calendar link to see your events here.
Add a calendar
'; $('#ac').onclick = addCalendar; return; }
+ if (mode === 'month') await renderMonth(); else if (mode === 'week') await renderTimeGrid(7); else if (mode === 'day') await renderTimeGrid(1); else await renderAgendaList();
+ } catch (e) { const b = $('#cbody'); if (b) b.innerHTML = `${esc(e.message)}
`; }
+}
+
+async function renderAgendaList() {
+ const range = store.get('cal_range', 7);
+ const { byDay, errors } = await loadAgenda(range);
+ if (!location.hash.startsWith('#/calendar') || !$('#cbody')) return;
+ const keys = [...byDay.keys()].sort();
+ $('#cbody').innerHTML = `${[[1, 'Today'], [7, '7 days'], [30, '30 days']].map(([n, l]) => `
${l} `).join('')}
${esc(dayLabel(k))} ${byDay.get(k).map(evRow).join('')}
`).join('') || 'Nothing coming up
')
+ + errors.map(e => `${esc(e)}
`).join('');
+ $('#cbody').querySelectorAll('.seg a[data-n]').forEach(a => a.onclick = e => { e.preventDefault(); store.set('cal_range', +a.dataset.n); viewCalendar(); });
+}
+
+async function renderMonth() {
+ const { y, m } = calState;
+ const first = new Date(y, m, 1), gridStart = new Date(y, m, 1 - first.getDay()); // the Sunday on or before the 1st
+ const { byDay, errors } = await loadRange(gridStart, 42);
+ if (!location.hash.startsWith('#/calendar') || !$('#cbody')) return;
+ const today = ymd(new Date());
+ if (calState.sel < ymd(gridStart) || calState.sel > ymd(new Date(y, m, 1 - first.getDay() + 41))) calState.sel = ymd(first);
+ const cells = [];
+ for (let i = 0; i < 42; i++) {
+ const d = new Date(gridStart); d.setDate(d.getDate() + i);
+ const k = ymd(d), evs = byDay.get(k) || [], other = d.getMonth() !== m;
+ cells.push(`
+ ${d.getDate()}
+ ${evs.slice(0, 4).map(e => `
+ ${evs.slice(0, 3).map(e => `${esc(e.title)} `).join('')}${evs.length > 3 ? `+${evs.length - 3} more ` : ''} `);
+ }
+ $('#cbody').innerHTML = `${icon('back')}
+
${first.toLocaleDateString([], { month: 'long', year: 'numeric' })}
+ ${icon('back')} Today
+ ${['S', 'M', 'T', 'W', 'T', 'F', 'S'].map(d => `${d} `).join('')}
+ ${cells.join('')}
+
${errors.map(e => `${esc(e)}
`).join('')}`;
+ const showDay = () => {
+ const k = calState.sel, evs = byDay.get(k) || [];
+ $('#dayev').innerHTML = `${esc(dayLabel(k))} ${evs.length ? evs.map(evRow).join('') : '
No events
'}
When ${esc(when)}
+ ${e.location ? `
Where ${esc(e.location)}
` : ''}
This calendar is read-only here (it is a subscribed link). Change it in the app it comes from.
Close
`);
+ el.querySelector('#sx').onclick = closeSheet;
+}
+
+async function editEvent(e) {
+ try {
+ const q = new URLSearchParams({ cal: e.calId, tz: deviceTz() }); if (e.uid) q.set('uid', e.uid); if (e.href) q.set('href', e.href);
+ const r = await jfetch('/api/cal/event?' + q);
+ eventForm({ mode: 'edit', calId: e.calId, calName: e.cal, uid: e.uid, href: e.href || r.href, etag: r.etag || e.etag, fields: r.fields, series: e.series });
+ } catch (err) { toast(err.message); }
+}
+
+async function newEvent(day) {
+ try {
+ const cals = (await jfetch('/api/cal/list')).filter(c => c.local || c.icloud);
+ const d = new Date(day + 'T00:00:00'), now = new Date();
+ if (ymd(d) === ymd(now)) d.setHours(now.getHours() + 1, 0, 0, 0); else d.setHours(9, 0, 0, 0);
+ const end = new Date(d.getTime() + 36e5);
+ eventForm({ mode: 'new', cals, calId: store.get('cal_default', 'local'), fields: { title: '', location: '', notes: '', allDay: false, start: localStr(d), end: localStr(end), tz: deviceTz(), repeat: 'none' } });
+ } catch (err) { toast(err.message); }
+}
+
+function eventForm(o) {
+ const f = { ...o.fields }, editing = o.mode === 'edit';
+ const opts = [['none', 'Does not repeat'], ['daily', 'Every day'], ['weekdays', 'Every weekday'], ['weekly', 'Every week'], ['monthly', 'Every month'], ['yearly', 'Every year']];
+ if (f.repeat === 'keep') opts.push(['keep', 'Custom repeat (unchanged)']);
+ const calPick = editing ? `Calendar ${esc(o.calName)}
`
+ : `Calendar ${o.cals.map(c => `${esc(c.name)}${c.icloud ? ' (iCloud)' : ''} `).join('')} `;
+ const el = openSheet(editing ? 'Edit event' : 'New event', '', ``);
+ el.querySelector('.sheet').classList.add('wide');
+ const draw = () => { // date-only inputs for all-day, date+time otherwise
+ const t = f.allDay ? 'date' : 'datetime-local', cut = v => f.allDay ? v.slice(0, 10) : v;
+ el.querySelector('#fdt').innerHTML = `Starts Ends Times are in ${esc(f.tz)}.
` : ''}`;
+ const s = el.querySelector('#fs'), en = el.querySelector('#fe2');
+ s.onchange = () => { // moving the start keeps the length
+ const len = Date.parse(f.allDay ? f.end.slice(0, 10) + 'T00:00' : f.end) - Date.parse(f.allDay ? f.start.slice(0, 10) + 'T00:00' : f.start);
+ f.start = s.value; if (s.value) { const ns = Date.parse(f.allDay ? s.value + 'T00:00' : s.value); if (!isNaN(ns) && len >= 0) { const d = new Date(ns + len); f.end = f.allDay ? ymd(d) : localStr(d); en.value = f.allDay ? ymd(d) : localStr(d); } }
+ };
+ en.onchange = () => { f.end = en.value; };
+ };
+ draw();
+ el.querySelector('#fa').onchange = ev => {
+ f.start = el.querySelector('#fs').value || f.start; f.end = el.querySelector('#fe2').value || f.end;
+ f.allDay = ev.target.checked;
+ if (f.allDay) { f.start = f.start.slice(0, 10); f.end = f.end.slice(0, 10); }
+ else { f.start = f.start.slice(0, 10) + 'T09:00'; f.end = f.end.slice(0, 10) + 'T10:00'; }
+ draw();
+ };
+ el.querySelector('#sx').onclick = closeSheet;
+ el.querySelector('#ef').onsubmit = async ev => {
+ ev.preventDefault(); const btn = el.querySelector('form .btn:not(.ghost):not(.danger)'); btn.disabled = true; el.querySelector('#fe').textContent = '';
+ const fields = { title: el.querySelector('#ft').value.trim(), location: el.querySelector('#fl').value.trim(), notes: el.querySelector('#fn').value.trim(), allDay: f.allDay,
+ start: el.querySelector('#fs').value, end: el.querySelector('#fe2').value, tz: f.tz, repeat: el.querySelector('#fr').value };
+ const cal = editing ? o.calId : el.querySelector('#fc').value;
+ try {
+ await jfetch('/api/cal/event', { method: 'POST', body: JSON.stringify({ cal, uid: o.uid, href: o.href, fields }) });
+ if (!editing) store.set('cal_default', cal);
+ closeSheet(); toast(editing ? 'Event saved' : 'Event added'); viewCalendar();
+ } catch (err) { btn.disabled = false; el.querySelector('#fe').textContent = err.message; }
+ };
+ const del = el.querySelector('#fd');
+ if (del) del.onclick = () => confirmSheet('Delete event?', o.series ? f.title + ' and every repeat of it' : f.title, 'Delete', async () => {
+ try { await jfetch('/api/cal/event/delete', { method: 'POST', body: JSON.stringify({ cal: o.calId, uid: o.uid, href: o.href, etag: o.etag }) }); toast('Event deleted'); viewCalendar(); }
+ catch (err) { toast(err.message); }
+ });
+}
+
+function addCalendar() {
+ const el = openSheet('Add a calendar link', '', ``);
+ el.querySelector('#sx').onclick = closeSheet;
+ el.querySelector('form').onsubmit = async e => {
+ e.preventDefault(); const btn = el.querySelector('form .btn:not(.ghost)'); btn.disabled = true; el.querySelector('#ce').textContent = '';
+ try { await jfetch('/api/cal/add', { method: 'POST', body: JSON.stringify({ name: el.querySelector('#cn').value.trim() || 'Calendar', url: el.querySelector('#cu2').value.trim() }) }); closeSheet(); toast('Calendar added'); viewCalendar(); }
+ catch (err) { btn.disabled = false; el.querySelector('#ce').textContent = err.message; }
+ };
+}
+
+async function manageCalendars() {
+ const [cals, ic, feed] = await Promise.all([jfetch('/api/cal/list'), jfetch('/api/cal/icloud'), jfetch('/api/cal/feed')]);
+ const links = cals.filter(c => !c.local && !c.icloud);
+ const el = openSheet('Calendars', '', `
+
NE Hub Events you add here
+ ${links.map(c => `
${esc(c.name)} Link (read-only) Remove
`).join('')}
+
Add a calendar link
+ iCloud calendars
+ ${ic.connected ? `${ic.calendars.map(c => `${esc(c.name)}
+ Signed in as ${esc(ic.appleId)}. Events you add or change here are saved to iCloud.
Disconnect iCloud
`
+ : `Read and add events in your iCloud calendars. Use an app-specific password (appleid.apple.com → Sign-In and Security → App-Specific Passwords), not your normal Apple password.
+ `}
+ See NE Hub events in other apps
+ Subscribe to this private link from Outlook, Google or Apple Calendar. They show your NE Hub events (read-only there).
+ ${icon('copy')}Copy link Make a new link
+ Close
`);
+ el.querySelector('.sheet').classList.add('wide');
+ el.querySelector('#sx').onclick = closeSheet; el.querySelector('#al').onclick = addCalendar;
+ el.querySelectorAll('[data-rm]').forEach(b => b.onclick = async () => { await jfetch('/api/cal/remove', { method: 'POST', body: JSON.stringify({ id: b.dataset.rm }) }); closeSheet(); viewCalendar(); });
+ el.querySelectorAll('[data-ic]').forEach(c => c.onchange = async () => { try { await jfetch('/api/cal/icloud/toggle', { method: 'POST', body: JSON.stringify({ id: c.dataset.ic, enabled: c.checked }) }); } catch (e) { toast(e.message); } });
+ const icx = el.querySelector('#icx'); if (icx) icx.onclick = async () => { await jfetch('/api/cal/icloud/disconnect', { method: 'POST', body: '{}' }); toast('iCloud disconnected'); closeSheet(); viewCalendar(); };
+ const icf = el.querySelector('#icf');
+ if (icf) icf.onsubmit = async e => {
+ e.preventDefault(); const btn = icf.querySelector('.btn'); btn.disabled = true; btn.textContent = 'Connecting…'; el.querySelector('#ice').textContent = '';
+ try { await jfetch('/api/cal/icloud/connect', { method: 'POST', body: JSON.stringify({ appleId: el.querySelector('#iu').value, password: el.querySelector('#ip').value }) }); toast('iCloud connected'); closeSheet(); viewCalendar(); }
+ catch (err) { btn.disabled = false; btn.textContent = 'Connect iCloud'; el.querySelector('#ice').textContent = err.message; }
+ };
+ el.querySelector('#fc2').onclick = async () => { try { await navigator.clipboard.writeText(feed.url); toast('Link copied'); } catch { el.querySelector('#fu').select(); toast('Press copy on the selected link'); } };
+ el.querySelector('#fr2').onclick = () => confirmSheet('Make a new link?', 'The old link stops working, so anything subscribed to it has to be updated.', 'Make new link', async () => { await jfetch('/api/cal/feed', { method: 'POST', body: '{}' }); manageCalendars(); });
+}
diff --git a/public/file-actions.js b/public/file-actions.js
new file mode 100644
index 0000000..89792a6
--- /dev/null
+++ b/public/file-actions.js
@@ -0,0 +1,73 @@
+'use strict';
+// ---- File actions
+const PREVIEW = { img: 'jpg jpeg png gif webp svg bmp heic', pdf: 'pdf', video: 'mp4 mov m4v webm', audio: 'mp3 m4a wav flac ogg aac' };
+const previewKind = n => Object.keys(PREVIEW).find(k => PREVIEW[k].split(' ').includes(ext(n)));
+const FORM = { 'Content-Type': 'application/x-www-form-urlencoded' };
+const encP = p => p.split('/').map(encodeURIComponent).join('/');
+const fileUrl = async (repo, path) => { const u = new URL(await sf.req(`/api2/repos/${encodeURIComponent(repo)}/file/?p=${encodeURIComponent(path)}&reuse=1`), cfg.seafile); return '/sf' + u.pathname; };
+
+// Recently opened files, shown on Home (kept in this browser only).
+function addRecent(repo, path, name) {
+ const r = store.get('recents', []).filter(x => !(x.repo === repo && x.path === path));
+ r.unshift({ repo, path, name, t: Date.now() }); store.set('recents', r.slice(0, 12));
+}
+
+// Default tap on a file: edit documents, preview media, otherwise show the actions.
+function openFile(repo, path, name, dir) {
+ if (cfg.editor && EDIT_EXT.has(ext(name)) && ext(name) !== 'txt') { addRecent(repo, path, name); location.hash = '#/edit/' + encodeURIComponent(repo) + path.split('/').filter(Boolean).map(s => '/' + encodeURIComponent(s)).join(''); }
+ else if (previewKind(name)) previewFile(repo, path, name);
+ else fileSheet(repo, path, name, dir);
+}
+
+async function previewFile(repo, path, name) {
+ addRecent(repo, path, name);
+ try {
+ const url = (await fileUrl(repo, path)) + '?hubinline=1', kind = previewKind(name);
+ const media = kind === 'img' ? `${icon('copy')}Copy ${navigator.share ? 'Share… ' : ''}
`);
+ el.querySelector('#cp1').onclick = async () => { try { await navigator.clipboard.writeText(link); toast('Link copied'); closeSheet(); } catch { el.querySelector('#sl').select(); toast('Press copy on the selected link'); } };
+ const sh = el.querySelector('#sh1'); if (sh) sh.onclick = () => navigator.share({ url: link }).catch(() => {});
+ } catch (e) { toast(e.message); }
+}
+
+function fileSheet(repo, path, name, dir) {
+ const enc = encodeURIComponent, acts = [], ro = libPerm[repo] === 'r', it = { name, type: 'file' };
+ if (previewKind(name)) acts.push({ label: 'Preview', icon: 'doc', run: () => previewFile(repo, path, name) });
+ if (cfg.editor && EDIT_EXT.has(ext(name)) && !ro) acts.push({ label: 'Edit here', icon: 'edit', run: () => { addRecent(repo, path, name); location.hash = '#/edit/' + enc(repo) + path.split('/').filter(Boolean).map(s => '/' + enc(s)).join(''); } });
+ if (OFFICE_EXT.has(ext(name))) acts.push({ label: 'Open in Seafile', icon: 'doc', run: () => window.open(`${cfg.seafile}/lib/${enc(repo)}/file${path.split('/').map(enc).join('/')}`, '_blank', 'noopener') });
+ acts.push({ label: 'Share link', icon: 'copy', run: () => shareLink(repo, path, false) });
+ acts.push({ label: 'Download', icon: 'dl', run: () => downloadItem(repo, path) });
+ acts.push({ label: 'Version history', icon: 'refresh', run: () => fileHistory(repo, path, name, ro) });
+ if (!ro) acts.push({ label: 'Rename', icon: 'edit', run: () => renameItem(repo, path, name, dir, false) });
+ if (!ro) acts.push({ label: 'Move to…', icon: 'files', run: () => moveSheet('move', repo, dir, [it]) });
+ acts.push({ label: 'Copy to…', icon: 'copy', run: () => moveSheet('copy', repo, dir, [it]) });
+ if (!ro) acts.push({ label: 'Delete', icon: 'trash', danger: true, run: () => deleteItems(repo, dir, [it]) });
+ actionSheet(name, '', acts);
+}
+
+function dirSheet(repo, path, name, dir) {
+ const ro = libPerm[repo] === 'r', it = { name, type: 'dir' };
+ actionSheet(name, 'Folder', [
+ { label: 'Open', icon: 'files', run: () => { location.hash = '#/files/' + encodeURIComponent(repo) + path.split('/').filter(Boolean).map(s => '/' + encodeURIComponent(s)).join(''); } },
+ { label: 'Share link', icon: 'copy', run: () => shareLink(repo, path, true) },
+ ...(ro ? [] : [{ label: 'Rename', icon: 'edit', run: () => renameItem(repo, path, name, dir, true) }, { label: 'Move to…', icon: 'files', run: () => moveSheet('move', repo, dir, [it]) }]),
+ { label: 'Copy to…', icon: 'copy', run: () => moveSheet('copy', repo, dir, [it]) },
+ ...(ro ? [] : [{ label: 'Delete', icon: 'trash', danger: true, run: () => deleteItems(repo, dir, [it]) }]),
+ ]);
+}
diff --git a/public/files.js b/public/files.js
new file mode 100644
index 0000000..a1e7a2d
--- /dev/null
+++ b/public/files.js
@@ -0,0 +1,398 @@
+'use strict';
+// ---- In-app editor (OnlyOffice Document Server, config signed server-side with the JWT secret)
+async function viewEdit([repo, ...rawParts], opts = {}) {
+ const parts = rawParts.filter(Boolean);
+ const path = '/' + parts.join('/'), name = parts[parts.length - 1] || '';
+ const back = opts.fromOffice ? '#/office' : '#/files/' + encodeURIComponent(repo) + parts.slice(0, -1).map(s => '/' + encodeURIComponent(s)).join('');
+ document.body.classList.toggle('inedit', !!opts.fromOffice); // Office tab keeps the navigation visible around the editor
+ const v = $('#view');
+ v.innerHTML = `
+ `;
+ if (!sf.token()) return (location.hash = '#/files');
+ const fail = m => { const e = $('#oomsg'); if (e) { e.className = 'err'; e.textContent = m; } };
+ try {
+ const r = await fetch('/api/oo/config', { method: 'POST', headers: { Authorization: 'Token ' + sf.token() },
+ body: JSON.stringify({ repo, path, mobile: innerWidth < 768 }) });
+ const conf = await r.json();
+ if (!r.ok) return fail(conf.error || 'Could not open document');
+ if (!window.DocsAPI) await new Promise((ok, no) => {
+ const s = document.createElement('script'); s.src = cfg.onlyoffice + '/web-apps/apps/api/documents/api.js';
+ s.onload = ok; s.onerror = () => no(new Error('Could not load the OnlyOffice editor from ' + cfg.onlyoffice)); document.head.appendChild(s);
+ });
+ if (!/^#\/(edit|office\/doc)\//.test(location.hash)) return;
+ $('#oomsg').remove();
+ conf.events = { onError: e => toast('Editor error: ' + (e.data?.errorDescription || e.data?.errorCode || '')) };
+ editor = new DocsAPI.DocEditor('oo', conf);
+ } catch (e) { fail(e.message); }
+}
+
+// ---- Files
+function viewFiles([repo, ...parts]) {
+ if (!sf.token()) return filesLogin();
+ const dir = '/' + parts.join('/');
+ $('#view').innerHTML = ``;
+ libsP = loadLibs(repo);
+ if (repo) loadDir(repo, dir);
+}
+
+function filesLogin(msg = '', needOtp = false) {
+ $('#view').innerHTML = `Files Sign in to ${esc(new URL(cfg.seafile).host)}
+
${icon('newdir')}New library
Libraries `;
+ $('#nl').onclick = () => textSheet('New library', 'Library name', 'Create', async name => {
+ try { const r = await sf.req('/api2/repos/', { method: 'POST', body: new URLSearchParams({ name }), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); location.hash = '#/files/' + encodeURIComponent(r.repo_id); }
+ catch (e) { toast(e.message); }
+ });
+ if (!active) return;
+ const r = repos.find(x => x.id === active);
+ if (r && r.encrypted) $('#fmain').innerHTML = 'This library is encrypted. Unlock it in the Seafile web UI first.
';
+ } catch (e) { $('#libs').innerHTML = `${esc(e.message)}
`; if (!sf.token()) setTimeout(route, 800); }
+}
+
+// ---- Files: browse, select, move/copy/delete, rename, upload (drag in from the computer, drag a file out to download)
+let fv = null, libsP = Promise.resolve(), libNames = {}, libPerm = {};
+const SORTS = [['name', 'Name'], ['mtime', 'Date modified'], ['size', 'Size'], ['type', 'Kind']];
+const nameCmp = (a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
+function sortItems(items, s) {
+ const by = { name: nameCmp, mtime: (a, b) => a.mtime - b.mtime, size: (a, b) => (a.size || 0) - (b.size || 0), type: (a, b) => ext(a.name).localeCompare(ext(b.name)) }[s.k] || nameCmp;
+ return [...items].sort((a, b) => a.type !== b.type ? (a.type === 'dir' ? -1 : 1) // folders stay on top
+ : (a.type === 'dir' && s.k !== 'name' && s.k !== 'mtime') ? nameCmp(a, b) : s.d * by(a, b) || nameCmp(a, b));
+}
+const badName = (n, items, self) => !n || n === '.' || n === '..' ? 'Enter a name' : /[\/\\]/.test(n) ? 'A name cannot contain / or \\' : n.length > 255 ? 'That name is too long'
+ : items.some(x => x.name.toLowerCase() === n.toLowerCase() && x.name !== self) ? 'Something with that name is already here' : '';
+const sfJson = (path, body) => sf.req(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+const hereItems = (repo, dir) => (fv && fv.repo === repo && fv.dir === dir ? fv.items : []);
+// After something changed in a folder, redraw it if it is the one on screen.
+function afterChange(repo, dir) { if (fv && document.contains(fv.root) && fv.repo === repo && fv.dir === dir) { fv.sel.clear(); fv.selecting = false; fv.reload(); } }
+
+async function removeItems(repo, dir, items) {
+ const enc = encodeURIComponent;
+ try { await sfJson('/api/v2.1/repos/batch-delete-item/', { repo_id: repo, parent_dir: dir, dirents: items.map(x => x.name) }); }
+ catch (e) { // older servers have no batch call: one at a time
+ const failed = [];
+ for (const it of items) { try { await sf.req(`/api2/repos/${enc(repo)}/${it.type === 'dir' ? 'dir' : 'file'}/?p=${enc(joinP(dir, it.name))}`, { method: 'DELETE' }); } catch { failed.push(it.name); } }
+ if (failed.length) throw new Error('Could not delete: ' + failed.join(', '));
+ }
+}
+function deleteItems(repo, dir, items) {
+ const one = items.length === 1;
+ confirmSheet(one ? (items[0].type === 'dir' ? 'Delete folder?' : 'Delete file?') : `Delete ${items.length} items?`,
+ one ? items[0].name + (items[0].type === 'dir' ? ' and everything in it' : '') : 'Folders are deleted with everything inside them', 'Delete', async () => {
+ try { await removeItems(repo, dir, items); toast(one ? 'Deleted' : items.length + ' items deleted'); } catch (e) { toast(e.message); }
+ afterChange(repo, dir);
+ });
+}
+async function transferItems(mode, repo, dir, names, dst) {
+ await sfJson(`/api/v2.1/repos/sync-batch-${mode}-item/`, { src_repo_id: repo, src_parent_dir: dir, dst_repo_id: dst.repo, dst_parent_dir: dst.dir, src_dirents: names });
+}
+function moveSheet(mode, repo, dir, items) {
+ const names = items.map(x => x.name), folders = items.filter(x => x.type === 'dir').map(x => joinP(dir, x.name)), verb = mode === 'move' ? 'Move' : 'Copy';
+ chooseFolder(verb + (items.length === 1 ? ' “' + names[0] + '”' : ' ' + items.length + ' items') + ' to…', { repo, repoName: libNames[repo] || '', dir },
+ { okLabel: verb + ' here', hide: (r, d) => (r === repo && d === dir ? names : []), newFolder: true,
+ blocked: (r, d) => r === repo && ((mode === 'move' && d === dir) || folders.some(f => d === f || d.startsWith(f + '/'))) }).then(async dst => {
+ if (!dst) return;
+ try { await transferItems(mode, repo, dir, names, dst); toast((mode === 'move' ? 'Moved' : 'Copied') + (items.length > 1 ? ' ' + items.length + ' items' : '')); }
+ catch (e) { toast(e.message); }
+ afterChange(repo, dir);
+ });
+}
+function renameItem(repo, path, name, dir, isDir) {
+ textSheet('Rename', 'New name', 'Rename', async n => {
+ if (n === name) return;
+ try { await sf.req(`/api2/repos/${encodeURIComponent(repo)}/${isDir ? 'dir' : 'file'}/?p=${encodeURIComponent(path)}`, { method: 'POST', headers: FORM, body: new URLSearchParams({ operation: 'rename', newname: n }) }); toast('Renamed'); }
+ catch (e) { toast(e.message); }
+ afterChange(repo, dir);
+ }, name, n => badName(n, hereItems(repo, dir), name));
+}
+async function downloadItem(repo, path) {
+ try { window.open(await sf.req(`/api2/repos/${encodeURIComponent(repo)}/file/?p=${encodeURIComponent(path)}&reuse=1`), '_blank', 'noopener'); } catch (e) { toast(e.message); }
+}
+
+// ---- Uploads: a queue that survives leaving the folder, with progress, retries and a way to cancel
+const uq = { items: [], running: 0 };
+const upActive = () => uq.items.some(x => x.state === 'wait' || x.state === 'up');
+function enqueueUploads(repo, dir, entries) {
+ if (!entries.length) return;
+ for (const e of entries) uq.items.push({ repo, dir, file: e.file, rel: e.rel || '', pct: 0, state: 'wait', tries: 0 });
+ drawUpBar(); pumpUploads();
+}
+function pumpUploads() {
+ while (uq.running < 2) {
+ const it = uq.items.find(x => x.state === 'wait'); if (!it) break;
+ uq.running++; it.state = 'up';
+ sendUpload(it).then(() => { it.state = 'done'; }, err => { it.state = it.cancelled ? 'cancel' : 'fail'; it.err = err.message; })
+ .finally(() => { uq.running--; drawUpBar(); pumpUploads(); if (!upActive()) uploadsFinished(); });
+ }
+}
+async function sendUpload(it) {
+ const enc = encodeURIComponent;
+ for (;;) {
+ it.tries++; it.pct = 0;
+ try {
+ const link = await sf.req(`/api2/repos/${enc(it.repo)}/upload-link/?p=${enc(it.dir)}`); // a fresh link each time, so an expired one never blocks a retry
+ await new Promise((ok, no) => {
+ const x = it.xhr = new XMLHttpRequest(), fd = new FormData();
+ fd.append('parent_dir', it.dir); fd.append('replace', '0'); if (it.rel) fd.append('relative_path', it.rel); fd.append('file', it.file, it.file.name);
+ x.open('POST', '/sf' + new URL(link, cfg.seafile).pathname + '?ret-json=1');
+ x.upload.onprogress = e => { if (e.lengthComputable) { it.pct = e.loaded / e.total; drawUpBar(); } };
+ x.onload = () => x.status >= 200 && x.status < 300 ? ok() : no(Object.assign(new Error(x.status === 413 ? 'Too large for the server' : x.status === 403 ? 'Not allowed (or out of space)' : 'Upload failed (' + x.status + ')'), { fatal: x.status >= 400 && x.status < 500 }));
+ x.onerror = () => no(new Error('Connection lost'));
+ x.onabort = () => no(Object.assign(new Error('Cancelled'), { fatal: true }));
+ x.send(fd);
+ });
+ return;
+ } catch (e) {
+ if (it.cancelled) throw e;
+ if (e.fatal || !sf.token() || it.tries >= 3) throw new Error(it.file.name + ': ' + e.message);
+ await sleep(1500 * it.tries);
+ }
+ }
+}
+function uploadsFinished() {
+ const done = uq.items.filter(x => x.state === 'done').length, bad = uq.items.filter(x => x.state === 'fail').length;
+ if (done) toast(done + (done === 1 ? ' file' : ' files') + ' uploaded' + (bad ? ', ' + bad + ' failed' : ''));
+ uq.items = uq.items.filter(x => x.state === 'fail'); drawUpBar();
+ if (fv && document.contains(fv.root)) fv.reload(true);
+}
+function drawUpBar() {
+ let b = $('#upbar');
+ const live = uq.items.filter(x => x.state === 'wait' || x.state === 'up'), bad = uq.items.filter(x => x.state === 'fail');
+ if (!live.length && !bad.length) { if (b) b.remove(); return; }
+ if (!b) { b = document.createElement('div'); b.id = 'upbar'; document.body.appendChild(b); }
+ if (live.length) {
+ const total = uq.items.length, doneN = uq.items.filter(x => x.state === 'done').length, cur = live.find(x => x.state === 'up') || live[0];
+ const pct = Math.round(((doneN + live.reduce((a, x) => a + (x.state === 'up' ? x.pct : 0), 0)) / total) * 100);
+ b.innerHTML = `Uploading ${esc(live.length === 1 ? cur.file.name : live.length + ' files')} ${pct}%
Cancel `;
+ $('#upx').onclick = () => { uq.items.forEach(x => { if (x.state === 'wait') x.state = 'cancel'; if (x.state === 'up') { x.cancelled = true; x.xhr && x.xhr.abort(); } }); uq.items = uq.items.filter(x => x.state === 'fail'); drawUpBar(); };
+ } else {
+ b.innerHTML = `${bad.length} ${bad.length === 1 ? 'upload' : 'uploads'} failed ${esc(bad[0].err || '')}
Retry Dismiss `;
+ $('#upr').onclick = () => { bad.forEach(x => { x.state = 'wait'; x.tries = 0; x.cancelled = false; }); drawUpBar(); pumpUploads(); };
+ $('#upd').onclick = () => { uq.items = uq.items.filter(x => x.state !== 'fail'); drawUpBar(); };
+ }
+}
+addEventListener('beforeunload', e => { if (upActive()) { e.preventDefault(); e.returnValue = ''; } });
+
+// Everything dropped from the computer, including whole folders (their structure is kept).
+async function droppedFiles(dt) {
+ const ents = [...(dt.items || [])].map(i => (i.webkitGetAsEntry ? i.webkitGetAsEntry() : null)).filter(Boolean), out = [];
+ if (!ents.length) return [...dt.files].map(file => ({ file, rel: '' }));
+ const walk = async (en, rel) => {
+ if (en.isFile) await new Promise(ok => en.file(f => { out.push({ file: f, rel }); ok(); }, ok));
+ else if (en.isDirectory) {
+ const here = rel ? rel + '/' + en.name : en.name, rd = en.createReader(); let batch;
+ do { batch = await new Promise(ok => rd.readEntries(ok, () => ok([]))); for (const c of batch) await walk(c, here); } while (batch.length);
+ }
+ };
+ for (const en of ents) await walk(en, '');
+ return out;
+}
+const dlUrls = new Map(); // direct download addresses, fetched ahead so a file can be dragged out to the desktop
+async function prefetchDl(repo, path) {
+ const k = repo + path, c = dlUrls.get(k); if (c && Date.now() - c.t < 45 * 60e3) return;
+ dlUrls.set(k, { t: Date.now() });
+ try { const u = await sf.req(`/api2/repos/${encodeURIComponent(repo)}/file/?p=${encodeURIComponent(path)}&reuse=1`); dlUrls.set(k, { t: Date.now(), url: new URL(u, cfg.seafile).href }); } catch { dlUrls.delete(k); }
+}
+
+async function loadDir(repo, dir) {
+ const main = $('#fmain'); if (!main) return;
+ main.innerHTML = 'Loading…
';
+ await libsP.catch(() => {});
+ if (!document.contains(main)) return;
+ const enc = encodeURIComponent, ro = libPerm[repo] === 'r';
+ const hash = p => '#/files/' + enc(repo) + p.split('/').filter(Boolean).map(s => '/' + enc(s)).join('');
+ const segs = dir.split('/').filter(Boolean);
+ const crumbs = `${esc(libNames[repo] || 'Library')} ` + segs.map((s, i) => `/ ${esc(s)} `).join('');
+ const v = fv = { root: main, repo, dir, items: [], sel: new Set(), selecting: false, last: null, filter: '', tok: null };
+ const sortCfg = () => store.get('files_sort', { k: 'name', d: 1 });
+ const byName = n => v.items.find(x => x.name === n);
+ const selItems = () => v.items.filter(x => v.sel.has(x.name));
+ const visible = () => { const q = v.filter.trim().toLowerCase(); return sortItems(v.items, sortCfg()).filter(x => !q || x.name.toLowerCase().includes(q)); };
+
+ main.innerHTML = `
${crumbs}
+
`;
+ const go = p => { location.hash = hash(p); };
+
+ const drawTop = () => {
+ const n = v.sel.size, one = n === 1 ? selItems()[0] : null;
+ $('#ftop').innerHTML = v.selecting
+ ? `${n ? n + ' selected' : 'Select items'}
+ ${n && n === visible().length ? 'None' : 'All'} Done
+
${ro ? '' : `${icon('files')}Move `}
+ ${icon('copy')}Copy
+ ${ro ? '' : `${icon('trash')}Delete `}
+ ${icon('more')}
+ ${v.selecting ? `${on ? icon('check') : ''} ` : ''}
+ ${icon(d ? 'files' : 'file')}
+ ${esc(it.name)} ${d ? fmtDate(it.mtime) : fmtSize(it.size) + ' · ' + fmtDate(it.mtime)} ${icon('more')} `}
`; };
+ box.innerHTML = list.length ? `${list.map(row).join('')}
`
+ : `${v.items.length ? 'Nothing matches “' + esc(v.filter) + '”' : ro ? 'This folder is empty' : 'This folder is empty. Drop files here or tap Upload.'}
`;
+ const dirs = v.items.filter(x => x.type === 'dir').length, files = v.items.length - dirs, size = v.items.reduce((a, x) => a + (x.size || 0), 0);
+ $('#fsum').textContent = v.items.length ? [dirs && dirs + (dirs === 1 ? ' folder' : ' folders'), files && files + (files === 1 ? ' file' : ' files'), size && fmtSize(size)].filter(Boolean).join(' · ') : '';
+ };
+ const redraw = () => { drawTop(); drawItems(); };
+
+ const toggle = (it, range) => {
+ const vis = visible().map(x => x.name);
+ if (range && v.last && vis.includes(v.last) && vis.includes(it.name)) { const a = vis.indexOf(v.last), b = vis.indexOf(it.name); vis.slice(Math.min(a, b), Math.max(a, b) + 1).forEach(n => v.sel.add(n)); }
+ else { v.sel.has(it.name) ? v.sel.delete(it.name) : v.sel.add(it.name); v.last = it.name; }
+ v.selecting = true; redraw();
+ };
+ const itemSheet = it => it.type === 'dir' ? dirSheet(repo, joinP(dir, it.name), it.name, dir) : fileSheet(repo, joinP(dir, it.name), it.name, dir);
+ const openIt = it => it.type === 'dir' ? go(joinP(dir, it.name)) : openFile(repo, joinP(dir, it.name), it.name, dir);
+ const oneActions = it => {
+ const p = joinP(dir, it.name), d = it.type === 'dir', a = [{ label: 'Share link', icon: 'copy', run: () => shareLink(repo, p, d) }];
+ if (!ro) a.push({ label: 'Rename', icon: 'edit', run: () => renameItem(repo, p, it.name, dir, d) });
+ if (!d) a.push({ label: 'Download', icon: 'dl', run: () => downloadItem(repo, p) });
+ if (!d) a.push({ label: 'Version history', icon: 'refresh', run: () => fileHistory(repo, p, it.name, ro) });
+ return a;
+ };
+
+ const create = async (path, op, extra = {}, kind = 'file') => {
+ try { await sf.req(`/api2/repos/${enc(repo)}/${kind}/?p=${enc(path)}`, { method: 'POST', body: new URLSearchParams({ operation: op, ...extra }), headers: FORM }); v.reload(true); }
+ catch (e) { toast(e.message); }
+ };
+ const actions = {
+ all: () => { const vis = visible(); if (v.sel.size === vis.length) v.sel.clear(); else vis.forEach(x => v.sel.add(x.name)); redraw(); },
+ move: () => v.sel.size && moveSheet('move', repo, dir, selItems()),
+ copy: () => v.sel.size && moveSheet('copy', repo, dir, selItems()),
+ del: () => v.sel.size && deleteItems(repo, dir, selItems()),
+ more: () => { const it = selItems()[0]; if (it) actionSheet(it.name, '', oneActions(it)); },
+ done: () => { v.selecting = false; v.sel.clear(); redraw(); },
+ sel: () => { v.selecting = true; redraw(); },
+ refresh: () => v.reload(),
+ sort: () => { const c = sortCfg(); actionSheet('Sort by', 'Folders stay on top', SORTS.map(([k, l]) => ({ label: l + (c.k === k ? (c.d > 0 ? ' ↑' : ' ↓') : ''), icon: 'sort',
+ run: () => { store.set('files_sort', { k, d: c.k === k ? -c.d : 1 }); drawItems(); } }))); },
+ up: () => actionSheet('Upload', '', [{ label: 'Files', icon: 'up', run: () => $('#upf').click() }, { label: 'A folder', icon: 'newdir', run: () => $('#upd2').click() }]),
+ new: () => actionSheet('Create new', '', [
+ { label: 'Folder', icon: 'newdir', run: () => textSheet('New folder', 'Folder name', 'Create', n => create(joinP(dir, n), 'mkdir', {}, 'dir'), '', n => badName(n, v.items)) },
+ ...[['Document', 'docx'], ['Spreadsheet', 'xlsx'], ['Presentation', 'pptx'], ['Text file', 'txt']].map(([label, x]) => ({ label, icon: 'doc',
+ run: () => textSheet('New ' + label.toLowerCase(), 'File name', 'Create', async n => {
+ const want = n.toLowerCase().endsWith('.' + x) ? n : n + '.' + x;
+ try { const name = await createFromTemplate(repo, dir, want, x); v.reload(true); if (x !== 'txt') openFile(repo, joinP(dir, name), name, dir); }
+ catch (e) { toast(e.message); }
+ }, '', n => badName(n.toLowerCase().endsWith('.' + x) ? n : n + '.' + x, v.items)) })),
+ ]),
+ };
+ v.actions = actions; v.selItems = selItems; v.openIt = openIt; v.visible = visible; v.one = oneActions;
+ $('#ftop').onclick = e => { const b = e.target.closest('[data-a]'); if (b && !b.disabled && actions[b.dataset.a]) actions[b.dataset.a](); };
+ $('#ftop').onchange = e => {
+ const pick = e.target.id === 'upf' || e.target.id === 'upd2' ? [...e.target.files] : null; if (!pick) return;
+ enqueueUploads(repo, dir, pick.map(f => ({ file: f, rel: f.webkitRelativePath ? f.webkitRelativePath.split('/').slice(0, -1).join('/') : '' }))); e.target.value = '';
+ };
+ $('#ff').oninput = e => { v.filter = e.target.value; drawItems(); };
+ main.querySelector('.crumbs').onclick = e => { const b = e.target.closest('[data-go]'); if (b) go(b.dataset.go); };
+
+ // tap / click / ctrl-click / shift-click, right-click, and long-press on a touch screen
+ const box = $('#items'); let suppress = false, lastTouch = 0, lp = null;
+ box.onclick = e => {
+ if (suppress) { suppress = false; return; }
+ const r = e.target.closest('.fr'); if (!r) return; const it = byName(r.dataset.n); if (!it) return;
+ if (e.target.closest('[data-more]')) return itemSheet(it);
+ if (v.selecting || e.metaKey || e.ctrlKey || e.shiftKey) return toggle(it, e.shiftKey);
+ openIt(it);
+ };
+ box.oncontextmenu = e => {
+ const r = e.target.closest('.fr'); if (!r) return; e.preventDefault(); if (Date.now() - lastTouch < 1200) return;
+ const it = byName(r.dataset.n); if (!it) return;
+ if (v.selecting && v.sel.size > 1 && v.sel.has(it.name)) return actionSheet(v.sel.size + ' selected', '', [ ...(ro ? [] : [{ label: 'Move', icon: 'files', run: actions.move }]), { label: 'Copy', icon: 'copy', run: actions.copy }, ...(ro ? [] : [{ label: 'Delete', icon: 'trash', danger: true, run: actions.del }]) ]);
+ itemSheet(it);
+ };
+ box.onpointerdown = e => {
+ if (e.pointerType !== 'touch') return; lastTouch = Date.now();
+ const r = e.target.closest('.fr'); if (!r || v.selecting) return; const x0 = e.clientX, y0 = e.clientY;
+ const stop = () => { clearTimeout(lp); box.removeEventListener('pointermove', mv); };
+ const mv = m => { if (Math.abs(m.clientX - x0) + Math.abs(m.clientY - y0) > 10) stop(); };
+ box.addEventListener('pointermove', mv); box.addEventListener('pointerup', stop, { once: true }); box.addEventListener('pointercancel', stop, { once: true });
+ lp = setTimeout(() => { stop(); const it = byName(r.dataset.n); if (!it) return; suppress = true; v.sel.add(it.name); v.last = it.name; v.selecting = true; redraw(); try { navigator.vibrate && navigator.vibrate(12); } catch {} }, 450);
+ };
+ box.onmouseover = e => { const r = e.target.closest('.fr'); const it = r && byName(r.dataset.n); if (it && it.type !== 'dir' && !ro) prefetchDl(repo, joinP(dir, it.name)); };
+
+ // Drag: out to the desktop (one file, Chrome/Edge), onto a folder or breadcrumb to move (Alt/Option copies), in from the computer to upload.
+ box.ondragstart = e => {
+ const r = e.target.closest('.fr'); const it = r && byName(r.dataset.n); if (!it) return;
+ const names = v.sel.has(it.name) && v.sel.size ? [...v.sel] : [it.name];
+ e.dataTransfer.setData('application/x-hub-items', JSON.stringify({ repo, dir, names })); e.dataTransfer.effectAllowed = 'copyMove';
+ const c = it.type !== 'dir' && names.length === 1 && dlUrls.get(repo + joinP(dir, it.name));
+ if (c && c.url) e.dataTransfer.setData('DownloadURL', `application/octet-stream:${it.name.replace(/:/g, '-')}:${c.url}`);
+ else if (it.type !== 'dir') prefetchDl(repo, joinP(dir, it.name));
+ };
+ const target = e => { const t = e.target.closest('.fr, [data-go]'); if (!t) return null;
+ if (t.dataset.go) return { el: t, path: t.dataset.go }; const it = byName(t.dataset.n); return it && it.type === 'dir' ? { el: t, path: joinP(dir, it.name) } : null; };
+ const clearDrop = () => main.querySelectorAll('.dropt').forEach(x => x.classList.remove('dropt')), isFiles = e => [...(e.dataTransfer.types || [])].includes('Files');
+ main.ondragover = e => {
+ const mine = [...(e.dataTransfer.types || [])].includes('application/x-hub-items'); if (!mine && !isFiles(e) || ro) return;
+ e.preventDefault(); clearDrop(); const t = target(e); if (t) t.el.classList.add('dropt'); else if (isFiles(e)) main.classList.add('dropt'); e.dataTransfer.dropEffect = mine && e.altKey ? 'copy' : mine ? 'move' : 'copy';
+ };
+ main.ondragleave = e => { if (!main.contains(e.relatedTarget)) { clearDrop(); main.classList.remove('dropt'); } };
+ main.ondrop = async e => {
+ if (ro) return; e.preventDefault(); clearDrop(); main.classList.remove('dropt');
+ const t = target(e), mine = e.dataTransfer.getData('application/x-hub-items');
+ if (mine) {
+ const { names } = JSON.parse(mine); if (!t || t.path === dir || names.some(n => joinP(dir, n) === t.path)) return;
+ try { await transferItems(e.altKey ? 'copy' : 'move', repo, dir, names, { repo, dir: t.path }); toast((e.altKey ? 'Copied' : 'Moved') + (names.length > 1 ? ' ' + names.length + ' items' : '')); } catch (err) { toast(err.message); }
+ return afterChange(repo, dir);
+ }
+ if (isFiles(e)) { const files = await droppedFiles(e.dataTransfer); enqueueUploads(repo, t ? t.path : dir, files); }
+ };
+
+ v.reload = async quiet => {
+ const tok = v.tok = Symbol(); if (!quiet) $('#items').innerHTML = 'Loading…
';
+ try {
+ const items = await sf.req(`/api2/repos/${enc(repo)}/dir/?p=${enc(dir)}`);
+ if (v.tok !== tok || !document.contains(main)) return;
+ v.items = items; for (const n of [...v.sel]) if (!byName(n)) v.sel.delete(n);
+ redraw();
+ } catch (e) {
+ if (v.tok !== tok || !document.contains(main)) return;
+ if (!sf.token()) return route();
+ $('#items').innerHTML = `${esc(navigator.onLine ? e.message : 'You are offline. ' + e.message)}
Try again
`;
+ $('#fretry').onclick = () => v.reload();
+ }
+ };
+ drawTop(); v.reload();
+}
+
+const joinP = (d, n) => (d === '/' ? '' : d) + '/' + n;
+// Keep the folder fresh when you come back to the tab, and add Finder-style keys.
+document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && fv && document.contains(fv.root) && !upActive() && !document.getElementById('sheet')) fv.reload(true); });
+addEventListener('keydown', e => {
+ if (!fv || !document.contains(fv.root) || document.getElementById('sheet') || /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName || '')) return;
+ const mod = e.metaKey || e.ctrlKey, n = fv.sel.size, one = n === 1 ? fv.selItems()[0] : null, a = fv.actions;
+ if (e.key === 'Escape' && (n || fv.selecting)) { a.done(); }
+ else if (mod && e.key.toLowerCase() === 'a') { e.preventDefault(); fv.selecting = true; fv.visible().forEach(x => fv.sel.add(x.name)); a.sel(); }
+ else if ((e.key === 'Delete' || e.key === 'Backspace') && n) { e.preventDefault(); a.del(); }
+ else if (e.key === 'F2' && one) { e.preventDefault(); const p = joinP(fv.dir, one.name); renameItem(fv.repo, p, one.name, fv.dir, one.type === 'dir'); }
+ else if (e.key === 'Enter' && one) fv.openIt(one);
+});
diff --git a/public/index.html b/public/index.html
index a9d50a4..b5dd841 100644
--- a/public/index.html
+++ b/public/index.html
@@ -60,6 +60,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+