diff --git a/src/index.ts b/src/index.ts index 06cd02e..345c9ce 100644 --- a/src/index.ts +++ b/src/index.ts @@ -38,6 +38,7 @@ import { getPref, StreamTouchController } from "./utils/settings-storages/global import { compressCss } from "@macros/build" with {type: "macro"}; import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog"; import { StreamUiHandler } from "./modules/stream/stream-ui"; +import { UserAgent } from "./utils/user-agent"; // Handle login page @@ -70,26 +71,65 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') { .bx-reload-overlay { position: fixed; top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; background: #000000cc; z-index: 9999; - width: 100%; - line-height: 100vh; color: #fff; text-align: center; font-weight: 400; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 1.3rem; } + +.bx-reload-overlay *:focus { + outline: none !important; +} + +.bx-reload-overlay > div { + margin: 0 auto; +} + +.bx-reload-overlay a { + text-decoration: none; + display: inline-block; + background: #107c10; + color: white; + border-radius: 4px; + padding: 6px; +} `); + + const isSafari = UserAgent.isSafari(); + let $secondaryAction: HTMLElement; + if (isSafari) { + $secondaryAction = CE('p', {}, t('settings-reloading')); + } else { + $secondaryAction = CE('a', { + href: 'https://better-xcloud.github.io/troubleshooting', + target: '_blank', + }, '🤓 ' + t('how-to-fix')); + } + const $fragment = document.createDocumentFragment(); $fragment.appendChild(CE('style', {}, css)); - $fragment.appendChild(CE('div', {'class': 'bx-reload-overlay'}, t('safari-failed-message'))); + $fragment.appendChild(CE('div',{ + class: 'bx-reload-overlay', + }, + CE('div', {}, + CE('p', {}, t('load-failed-message')), + $secondaryAction, + ), + )); document.documentElement.appendChild($fragment); - // Reload the page + // Reload the page if using Safari // @ts-ignore - window.location.reload(true); + isSafari && window.location.reload(true); // Stop processing the script throw new Error('[Better xCloud] Executing workaround for Safari'); diff --git a/src/modules/ui/dialog/settings-dialog.ts b/src/modules/ui/dialog/settings-dialog.ts index 6dbcc32..d525d20 100644 --- a/src/modules/ui/dialog/settings-dialog.ts +++ b/src/modules/ui/dialog/settings-dialog.ts @@ -913,7 +913,7 @@ export class SettingsNavigationDialog extends NavigationDialog { href: 'https://better-xcloud.github.io/guide/android-webview-tweaks/', target: '_blank', tabindex: 0, - }, t('how-to-improve-app-performance')), + }, '🤓 ' + t('how-to-improve-app-performance')), BX_FLAGS.DeviceInfo.deviceType.includes('android') && !hasRecommendedSettings && CE('a', { class: 'bx-suggest-link bx-focusable',