diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static')
4 files changed, 41 insertions, 33 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/copy-link.js b/packages/meshbay-hub/src/meshbay_hub/static/copy-link.js index ad6c3be..4cc3f30 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/copy-link.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/copy-link.js @@ -1,6 +1,7 @@ import { t } from './i18n.js'; import * as platform from './platform.js'; import { groupLinkRoute } from './group-link.js'; +import { say } from './note.js'; /** * "Copy link": the `#/name@owner/path` address of a file or folder @@ -41,27 +42,9 @@ async function _write(text) { return ok; } -let _note = null; -let _noteTimer = null; - -// Said once and gone, in the playlists' note (style.css `.playlist-note`). -// Appended to the body rather than rendered by a view, because the views that -// copy include modals and a context menu that has already closed. -function _say(text) { - if (!_note) { - _note = document.createElement('div'); - _note.className = 'playlist-note copy-link-note'; - _note.setAttribute('role', 'status'); - } - _note.textContent = text; - document.body.appendChild(_note); - clearTimeout(_noteTimer); - _noteTimer = setTimeout(() => { if (_note) _note.remove(); }, 2500); -} - /** Copy `url`, and say whether it worked. The link itself is shown if not. */ export async function copyLink(url) { if (!url) return; const ok = await _write(url); - _say(ok ? t('link.copied') : t('link.copy_failed', { url })); + say(ok ? t('link.copied') : t('link.copy_failed', { url })); } diff --git a/packages/meshbay-hub/src/meshbay_hub/static/note.js b/packages/meshbay-hub/src/meshbay_hub/static/note.js new file mode 100644 index 0000000..f55c307 --- /dev/null +++ b/packages/meshbay-hub/src/meshbay_hub/static/note.js @@ -0,0 +1,24 @@ +/** + * A line said once and gone, in the playlists' note (style.css + * `.playlist-note`): "Link copied", "2 groups unreachable". Not a dialog — + * nothing here is anyone's to dismiss. + * + * Appended to the body rather than rendered by a view, because the views that + * speak include modals and a context menu that has already closed. One note + * at a time: a second replaces the first and restarts the clock. + */ + +let _note = null; +let _timer = null; + +export function say(text, ms = 2500) { + if (!_note) { + _note = document.createElement('div'); + _note.className = 'playlist-note page-note'; + _note.setAttribute('role', 'status'); + } + _note.textContent = text; + document.body.appendChild(_note); + clearTimeout(_timer); + _timer = setTimeout(() => { if (_note) _note.remove(); }, ms); +} diff --git a/packages/meshbay-hub/src/meshbay_hub/static/search-page.js b/packages/meshbay-hub/src/meshbay_hub/static/search-page.js index 1ede1f6..ae8eac7 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/search-page.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/search-page.js @@ -14,6 +14,7 @@ import { PhotosApp, groupPhotoAlbums } from './photos-app.js'; import { VideoPlayer } from './video-player.js'; import { transfers } from './transfers.js'; import { copyLink, entryPath, groupItemLink } from './copy-link.js'; +import { say } from './note.js'; import { mergeUnitEntries } from './source-merge.js'; import { useStickyBand } from './sticky.js'; import { ConnectionPool, MAX_IN_FLIGHT, MAX_POOL_SIZE } from './connection-pool.js'; @@ -22,6 +23,8 @@ const DEBOUNCE_MS = 200; const SEARCH_VIDEO_ROOT = '__search__'; const SEARCH_AUDIO_ROOT = '__search__'; const SEARCH_PHOTO_ROOTS = ['__search_photos__']; +// How long "N groups unreachable" stays up once a search pass is over. +const UNREACHABLE_NOTE_MS = 5000; // -- Index fetching ----------------------------------------------------------- @@ -313,13 +316,20 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs }) setProgress({ done: 0, total: groups.length, unreachable: [] }); if (!poolRef.current) return; - await fetchAllIndexes( + const { unreachable } = await fetchAllIndexes( poolRef.current, groups, token, username, userId, (p) => { if (!cancelled) setProgress(p); }, (results) => { if (!cancelled) setIndexedGroups(new Map(results)); }, ); - if (!cancelled) setFetching(false); + if (cancelled) return; + setFetching(false); + // Said once the pass is over, for a few seconds, rather than left above + // the results: by then nothing more can be done about it here, and a + // line that stays is one more thing between the reader and the results. + if (unreachable.length) { + say(t('search.unreachable', { n: unreachable.length }), UNREACHABLE_NOTE_MS); + } })(); return () => { cancelled = true; }; @@ -715,11 +725,6 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs }) </div> `} - ${progress.unreachable.length > 0 && html` - <p class="search-unreachable"> - ${t('search.unreachable', { n: progress.unreachable.length })} - </p> - `} ${viewMode === 'files' && hasResults && html` <${FilesPanel} diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index bde1c61..21d92df 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -156,10 +156,6 @@ a:hover { text-decoration: underline; } height: 100%; background: var(--accent); transition: width 0.3s; } -.search-unreachable { - font-size: 0.8em; color: var(--text-dim); margin-bottom: 8px; -} - .view-toggle { display: flex; gap: 0; flex-shrink: 0; margin-left: auto; } @@ -5613,9 +5609,9 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } overflow: hidden; text-overflow: ellipsis; } -/* The same note for "Copy link" (copy-link.js). When the clipboard refused, it - carries the link itself, which must be readable whole rather than cut. */ -.copy-link-note.playlist-note { +/* The same note, said from anywhere (note.js). It can carry a link the + clipboard refused, which must be readable whole rather than cut. */ +.page-note.playlist-note { white-space: normal; overflow-wrap: anywhere; border-radius: 12px; |