diff options
Diffstat (limited to 'packages/meshbay-hub/src')
13 files changed, 66 insertions, 5 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js index 0827104..7c9b2f0 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js @@ -16,8 +16,9 @@ import { FilePreview } from './files-app.js'; import { lazy } from './lazy.js'; // Fetched the first time a video is played / the Settings tab is opened. +const playerFrame = (content) => html`<div class="video-overlay video-player-overlay">${content}</div>`; const VideoPlayer = lazy(() => import('./video-player.js'), 'VideoPlayer', - html`<div class="video-overlay video-player-overlay"><p class="page-message"><span class="spinner"></span></p></div>`); + playerFrame(html`<p class="page-message"><span class="spinner"></span></p>`), playerFrame); const GroupSettingsPanel = lazy(() => import('./group-settings.js'), 'GroupSettingsPanel'); import { reportIndexPush } from './index-dock.js'; import { clearPending, nodePkFromLink, pendingFor } from './invite-link.js'; diff --git a/packages/meshbay-hub/src/meshbay_hub/static/lazy.js b/packages/meshbay-hub/src/meshbay_hub/static/lazy.js index 30a564c..fda73c0 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/lazy.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/lazy.js @@ -9,17 +9,45 @@ // // A failed fetch (a network drop on a phone) is not remembered: the next time // the component is shown it asks again, rather than failing for the session. +// +// A failed fetch is also *said*, never left as the placeholder's spinner. The +// commonest failure is not the network: the hub serves the module graph under +// `/a/<hash>/` for the current hash only, so a tab opened before a hub deploy +// asks for every module it has not loaded yet under a prefix that now answers +// 404. Such a tab kept Files and Chat (already loaded) and spun for ever on +// Search, Videos, Music, Photos and the player — with nothing in the console, +// because the rejection was swallowed here. Asking again cannot help that tab; +// reloading the page is the one thing that does, so that is what is offered. +// Not done automatically: a reload that fails the same way would loop, and it +// would throw away whatever the reader had in progress. import { html, useState, useEffect } from './vendor/htm-preact.js'; +import { t } from './i18n.js'; const SPINNER = html`<p class="page-message"><span class="spinner"></span></p>`; -function lazy(load, name, placeholder = SPINNER) { +function LoadFailed({ onClose }) { + return html` + <div class="page-message lazy-failed" role="alert"> + <p>${t('lazy.load_failed')}</p> + <button class="admin-btn" onClick=${() => location.reload()}>${t('lazy.reload')}</button> + ${onClose && html` + ${' '}<button class="admin-btn" onClick=${onClose}>${t('admin.btn_close')}</button> + `} + </div> + `; +} + +// `frame` wraps the failure notice, so a component that is an overlay (the +// video player) can put it where the overlay would have been rather than +// somewhere at the bottom of the page, under nothing anyone is looking at. +function lazy(load, name, placeholder = SPINNER, frame = (content) => content) { let Loaded = null; let pending = null; function Lazy(props) { const [, setReady] = useState(Loaded !== null); + const [failed, setFailed] = useState(false); useEffect(() => { if (Loaded) return undefined; let alive = true; @@ -28,11 +56,15 @@ function lazy(load, name, placeholder = SPINNER) { (m) => { Loaded = m[name]; }, (e) => { pending = null; throw e; }); } - pending.then(() => { if (alive) setReady(true); }, () => {}); + pending.then(() => { if (alive) setReady(true); }, (e) => { + console.error(`[MeshBay] could not load ${name}:`, e); + if (alive) setFailed(true); + }); return () => { alive = false; }; }, []); - if (!Loaded) return placeholder; - return html`<${Loaded} ...${props} />`; + if (Loaded) return html`<${Loaded} ...${props} />`; + if (failed) return frame(html`<${LoadFailed} onClose=${props.onClose} />`); + return placeholder; } Lazy.displayName = `Lazy(${name})`; return Lazy; diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js index 41a56be..36a9423 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js @@ -888,6 +888,8 @@ export default { // Group misc 'group.retry': 'Erneut versuchen', + 'lazy.load_failed': 'Dieser Teil der Oberfläche konnte nicht geladen werden. Der Hub wurde möglicherweise aktualisiert, seit diese Seite geöffnet wurde.', + 'lazy.reload': 'Seite neu laden', // Sidebar 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js index 7c06815..67cf5f4 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js @@ -984,6 +984,8 @@ export default { 'group.mute': 'Mute notifications', 'group.unmute': 'Unmute notifications', 'group.retry': 'Retry', + 'lazy.load_failed': 'This part of the interface could not be loaded. The hub may have been updated since this page was opened.', + 'lazy.reload': 'Reload the page', 'profile.title': 'Profile', 'usermenu.profile': 'Profile', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js index 939b96c..1e5f32f 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js @@ -882,6 +882,8 @@ export default { // Group 'group.retry': 'Reintentar', + 'lazy.load_failed': 'No se pudo cargar esta parte de la interfaz. Es posible que el hub se haya actualizado desde que se abrió esta página.', + 'lazy.reload': 'Recargar la página', // Sidebar 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js index c546d4e..f1b3da3 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js @@ -885,6 +885,8 @@ export default { // Group 'group.retry': 'Réessayer', + 'lazy.load_failed': 'Cette partie de l\'interface n\'a pas pu être chargée. Le hub a peut-être été mis à jour depuis l\'ouverture de cette page.', + 'lazy.reload': 'Recharger la page', // Sidebar 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js index 893a563..4120b1d 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js @@ -884,6 +884,8 @@ export default { // Group misc 'group.retry': 'Riprova', + 'lazy.load_failed': 'Impossibile caricare questa parte dell\'interfaccia. L\'hub potrebbe essere stato aggiornato da quando questa pagina è stata aperta.', + 'lazy.reload': 'Ricarica la pagina', // Sidebar 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js index 1a03c52..b37a027 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js @@ -872,6 +872,8 @@ export default { // Group 'group.retry': '再試行', + 'lazy.load_failed': 'インターフェースのこの部分を読み込めませんでした。このページを開いた後に hub が更新された可能性があります。', + 'lazy.reload': 'ページを再読み込み', // Sidebar 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js index 8ae0ab3..eeebaf8 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js @@ -886,6 +886,8 @@ export default { // Group 'group.retry': 'Opnieuw proberen', + 'lazy.load_failed': 'Dit deel van de interface kon niet worden geladen. De hub is mogelijk bijgewerkt sinds deze pagina werd geopend.', + 'lazy.reload': 'Pagina opnieuw laden', // Sidebar 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js index a2cc5bb..9be95db 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js @@ -904,6 +904,8 @@ export default { // Group (supplementary) 'group.retry': 'Ponów', + 'lazy.load_failed': 'Nie udało się wczytać tej części interfejsu. Hub mógł zostać zaktualizowany od czasu otwarcia tej strony.', + 'lazy.reload': 'Wczytaj stronę ponownie', // Sidebar (supplementary) 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js index 2b98298..cea304e 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js @@ -883,6 +883,8 @@ export default { // Group misc 'group.retry': 'Tentar novamente', + 'lazy.load_failed': 'Não foi possível carregar esta parte da interface. O hub pode ter sido atualizado desde que esta página foi aberta.', + 'lazy.reload': 'Recarregar a página', // Sidebar 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js index 4ac583a..92952f4 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js @@ -860,6 +860,8 @@ export default { // Group 'group.retry': '重试', + 'lazy.load_failed': '无法加载界面的这一部分。自打开此页面以来，hub 可能已更新。', + 'lazy.reload': '重新加载页面', // Sidebar 'sidebar.node': 'Node', diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 111c03d..29d4181 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -491,6 +491,14 @@ a:hover { text-decoration: underline; } margin-bottom: 24px; } +/* lazy.js: a view whose code could not be fetched says so, in place of the + spinner it would otherwise have kept for good. Inside the player's overlay + the backdrop is near-black whatever the theme, so the text colour cannot + come from the theme there. */ +.lazy-failed { text-align: center; max-width: 520px; margin: 24px auto; } +.lazy-failed p { margin-bottom: 12px; } +.video-overlay .lazy-failed { color: #e2e8f0; } + /* ── Page center (login / register) ───────────────────────────────────────── */ .page-center { |