Update BrowserNotifyModal.tsx to use Localization component (#4444)

* Initial plan * Update BrowserNotifyModal.tsx to use Localization component Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Organize BrowserNotifyModal localization keys into namespaces Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * chore: update extracted translations * Update web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update web/i18n/en/translation_old.json Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: gabek <414923+gabek@users.noreply.github.com> Co-authored-by: Owncast default web localizations <owncast@owncast.online> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-11-02 20:23:29 +08:00 · 2025-07-30 13:02:03 -07:00
parent 12974e69fe
commit 57cd0f974f
4 changed files with 211 additions and 32 deletions
--- a/web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx
+++ b/web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx
@ -4,6 +4,7 @@ import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
 import PlusSquareOutlined from '@ant-design/icons/lib/icons/PlusSquareOutlined';
 import { useRecoilValue } from 'recoil';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useTranslation } from 'next-export-i18n';
 import { accessTokenAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
 import {
  registerWebPushNotifications,
@ -11,6 +12,8 @@ import {
 } from '../../../services/notifications-service';
 import styles from './BrowserNotifyModal.module.scss';
 import { ComponentError } from '../../ui/ComponentError/ComponentError';
+import { Translation } from '../../ui/Translation/Translation';
+import { Localization } from '../../../types/localization';

 import { isMobileSafariHomeScreenApp, isMobileSafariIos } from '../../../utils/helpers';
 import { arePushNotificationSupported } from '../../../utils/browserPushNotifications';
@ -18,33 +21,94 @@ import { arePushNotificationSupported } from '../../../utils/browserPushNotifica
 const { Title } = Typography;

 const NotificationsNotSupported = () => (
-  <div>Browser notifications are not supported in your browser.</div>
+  <div>
+    <Translation
+      translationKey={Localization.Frontend.BrowserNotifyModal.unsupported}
+      defaultText="Browser notifications are not supported in your browser."
+    />
+  </div>
 );

 const NotificationsNotSupportedLocal = () => (
-  <div>Browser notifications are not supported for local servers.</div>
+  <div>
+    <Translation
+      translationKey={Localization.Frontend.BrowserNotifyModal.unsupportedLocal}
+      defaultText="Browser notifications are not supported for local servers."
+    />
+  </div>
 );

 const MobileSafariInstructions = () => (
  <div>
-    <Title level={3}>Get notified on iOS</Title>
-    It takes a couple extra steps to make sure you get notified when your favorite streams go live.
+    <Title level={3}>
+      <Translation
+        translationKey={Localization.Frontend.BrowserNotifyModal.iosTitle}
+        defaultText="Get notified on iOS"
+      />
+    </Title>
+    <Translation
+      translationKey={Localization.Frontend.BrowserNotifyModal.iosDescription}
+      defaultText="It takes a couple extra steps to make sure you get notified when your favorite streams go live."
+    />
    <ol>
      <li>
-        Tap the <strong>share</strong> button <UploadOutlined /> in Safari.
+        Tap the{' '}
+        <strong>
+          <Translation
+            translationKey={Localization.Frontend.BrowserNotifyModal.iosShareButton}
+            defaultText="share"
+          />
+        </strong>{' '}
+        button <UploadOutlined /> in Safari.
      </li>
      <li>
-        Scroll down and tap <strong>&ldquo;Add to Home Screen&rdquo;</strong> <PlusSquareOutlined />
+        Scroll down and tap{' '}
+        <strong>
+          &ldquo;
+          <Translation
+            translationKey={Localization.Frontend.BrowserNotifyModal.iosAddToHomeScreen}
+            defaultText="Add to Home Screen"
+          />
+          &rdquo;
+        </strong>{' '}
+        <PlusSquareOutlined />.
+      </li>
+      <li>
+        Tap{' '}
+        <strong>
+          &ldquo;
+          <Translation
+            translationKey={Localization.Frontend.BrowserNotifyModal.iosAddButton}
+            defaultText="Add"
+          />
+          &rdquo;
+        </strong>
        .
      </li>
      <li>
-        Tap <strong>&ldquo;Add&rdquo;</strong>.
+        <Translation
+          translationKey={Localization.Frontend.BrowserNotifyModal.iosNameAndTap}
+          defaultText="Give this link a name and tap the new icon on your home screen"
+        />
      </li>
-      <li>Give this link a name and tap the new icon on your home screen</li>

-      <li>Come back to this screen and enable notifications.</li>
      <li>
-        Tap <strong>&ldquo;Allow&rdquo;</strong> when prompted.
+        <Translation
+          translationKey={Localization.Frontend.BrowserNotifyModal.iosComeBack}
+          defaultText="Come back to this screen and enable notifications."
+        />
+      </li>
+      <li>
+        Tap{' '}
+        <strong>
+          &ldquo;
+          <Translation
+            translationKey={Localization.Frontend.BrowserNotifyModal.iosAllowPrompt}
+            defaultText="Allow"
+          />
+          &rdquo;
+        </strong>{' '}
+        when prompted.
      </li>
    </ol>
  </div>
@ -57,7 +121,13 @@ export type PermissionPopupPreviewProps = {
 const PermissionPopupPreview: FC<PermissionPopupPreviewProps> = ({ start }) => (
  <div id="browser-push-preview-box" className={styles.pushPreview}>
    <div className={styles.inner}>
-      <div className={styles.title}>{window.location.toString()} wants to</div>
+      <div className={styles.title}>
+        <Translation
+          translationKey={Localization.Frontend.BrowserNotifyModal.permissionWantsTo}
+          defaultText="{{hostname}} wants to"
+          vars={{ hostname: window.location.hostname }}
+        />
+      </div>
      <div className={styles.permissionLine}>
        <svg
          className={styles.bell}
@ -72,7 +142,12 @@ const PermissionPopupPreview: FC<PermissionPopupPreviewProps> = ({ start }) => (
            fill="#676670"
          />
        </svg>
-        <span className={styles.showNotificationsText}>Show notifications</span>
+        <span className={styles.showNotificationsText}>
+          <Translation
+            translationKey={Localization.Frontend.BrowserNotifyModal.showNotifications}
+            defaultText="Show notifications"
+          />
+        </span>
      </div>
      <div className={styles.buttonRow}>
        <Button
@ -81,10 +156,16 @@ const PermissionPopupPreview: FC<PermissionPopupPreviewProps> = ({ start }) => (
            start();
          }}
        >
-          Allow
+          <Translation
+            translationKey={Localization.Frontend.BrowserNotifyModal.allowButton}
+            defaultText="Allow"
+          />
        </Button>
        <button type="button" className={styles.disabled}>
-          Block
+          <Translation
+            translationKey={Localization.Frontend.BrowserNotifyModal.blockButton}
+            defaultText="Block"
+          />
        </button>
      </div>
    </div>
@ -93,24 +174,38 @@ const PermissionPopupPreview: FC<PermissionPopupPreviewProps> = ({ start }) => (

 const NotificationsEnabled = () => (
  <div>
-    <Title level={2}>Notifications are enabled</Title>
-    To disable push notifications from {window.location.hostname.toString()} access your browser
-    permissions for this site and turn off notifications.
-    <a href="https://owncast.online/docs/notifications"> Learn more.</a>
+    <Title level={2}>
+      <Translation
+        translationKey={Localization.Frontend.BrowserNotifyModal.enabledTitle}
+        defaultText="Notifications are enabled"
+      />
+    </Title>
+    <Translation
+      translationKey={Localization.Frontend.BrowserNotifyModal.enabledDescription}
+      defaultText="To disable push notifications from {{hostname}} access your browser permissions for this site and turn off notifications. <a href='https://owncast.online/docs/notifications'>Learn more.</a>"
+      vars={{ hostname: window.location.hostname.toString() }}
+    />
  </div>
 );

 const NotificationsDenied = () => (
  <div>
-    <Title level={2}>Notifications are blocked on your device</Title>
-    To enable push notifications from {window.location.hostname.toString()} access your browser
-    permissions for this site and turn on notifications. Then reload this page to apply your updated
-    settings on this site.
-    <a href="https://owncast.online/docs/notifications"> Learn more.</a>
+    <Title level={2}>
+      <Translation
+        translationKey={Localization.Frontend.BrowserNotifyModal.deniedTitle}
+        defaultText="Notifications are blocked on your device"
+      />
+    </Title>
+    <Translation
+      translationKey={Localization.Frontend.BrowserNotifyModal.deniedDescription}
+      defaultText="To enable push notifications from {{hostname}} access your browser permissions for this site and turn on notifications. Then reload this page to apply your updated settings on this site. <a href='https://owncast.online/docs/notifications'>Learn more.</a>"
+      vars={{ hostname: window.location.hostname.toString() }}
+    />
  </div>
 );

 export const BrowserNotifyModal = () => {
+  const { t } = useTranslation();
  const [error, setError] = useState<string>(null);
  const accessToken = useRecoilValue(accessTokenAtom);
  const config = useRecoilValue(clientConfigStateAtom);
@ -154,7 +249,9 @@ export const BrowserNotifyModal = () => {
      setError(null);
    } catch (e) {
      setError(
-        `Error registering for live notifications: ${e.message}. Make sure you're not inside a private browser environment or have previously disabled notifications for this stream.`,
+        t(Localization.Frontend.BrowserNotifyModal.errorMessage, {
+          message: e.message,
+        }),
      );
    }
    setBrowserPushPermissionsPending(false);
@ -181,10 +278,16 @@ export const BrowserNotifyModal = () => {
    >
      <Spin spinning={browserPushPermissionsPending}>
        <Row className={styles.description}>
-          Get notified right in the browser each time this stream goes live.
+          <Translation
+            translationKey={Localization.Frontend.BrowserNotifyModal.mainDescription}
+            defaultText="Get notified right in the browser each time this stream goes live."
+          />
          <span>
            <a href="https://owncast.online/docs/notifications/#browser-notifications">
-              Learn more
+              <Translation
+                translationKey={Localization.Frontend.BrowserNotifyModal.learnMore}
+                defaultText="Learn more"
+              />
            </a>
            &nbsp; about Owncast browser notifications.
          </span>
@ -192,7 +295,12 @@ export const BrowserNotifyModal = () => {
        <Row>
          {error && (
            <Alert
-              message="Browser Notification Error"
+              message={
+                <Translation
+                  translationKey={Localization.Frontend.BrowserNotifyModal.errorTitle}
+                  defaultText="Browser Notification Error"
+                />
+              }
              description={error}
              type="error"
              closable
--- a/web/i18n/en/translation.json
+++ b/web/i18n/en/translation.json
@ -37,6 +37,29 @@
  "Find an audience on the Owncast Directory": "Find an audience on the Owncast Directory",
  "Fix your problems": "Fix your problems",
  "Frontend": {
+    "BrowserNotifyModal": {
+      "allowButton": "Allow",
+      "blockButton": "Block",
+      "deniedDescription": "To enable push notifications from {{hostname}} access your browser permissions for this site and turn on notifications. Then reload this page to apply your updated settings on this site. <a href='https://owncast.online/docs/notifications'>Learn more.</a>",
+      "deniedTitle": "Notifications are blocked on your device",
+      "enabledDescription": "To disable push notifications from {{hostname}} access your browser permissions for this site and turn off notifications. <a href='https://owncast.online/docs/notifications'>Learn more.</a>",
+      "enabledTitle": "Notifications are enabled",
+      "errorTitle": "Browser Notification Error",
+      "iosAddButton": "Add",
+      "iosAddToHomeScreen": "Add to Home Screen",
+      "iosAllowPrompt": "Allow",
+      "iosComeBack": "Come back to this screen and enable notifications.",
+      "iosDescription": "It takes a couple extra steps to make sure you get notified when your favorite streams go live.",
+      "iosNameAndTap": "Give this link a name and tap the new icon on your home screen",
+      "iosShareButton": "share",
+      "iosTitle": "Get notified on iOS",
+      "learnMore": "Learn more",
+      "mainDescription": "Get notified right in the browser each time this stream goes live.",
+      "permissionWantsTo": "{{hostname}} wants to",
+      "showNotifications": "Show notifications",
+      "unsupported": "Browser notifications are not supported in your browser.",
+      "unsupportedLocal": "Browser notifications are not supported for local servers."
+    },
    "chatOffline": "<strong><em>Missing translation Frontend.chatOffline: Please report</em></strong>",
    "componentError": "Error: {{message}}",
    "helloWorld": "<strong><em>Missing translation Frontend.helloWorld: Please report</em></strong>",
--- a/web/i18n/en/translation_old.json
+++ b/web/i18n/en/translation_old.json
@ -1,9 +1,9 @@
 {
  "Testing": {
-    "simpleKey": "<strong><em>Missing translation Testing.simpleKey: Please report</em></strong>",
-    "itemCount": "<strong><em>Missing translation Testing.itemCount: Please report</em></strong>",
-    "messageCount": "<strong><em>Missing translation Testing.messageCount: Please report</em></strong>",
-    "noPluralKey": "<strong><em>Missing translation Testing.noPluralKey: Please report</em></strong>",
+    "simpleKey": "This is a simple key for testing purposes.",
+    "itemCount": "You have {{count}} items.",
+    "messageCount": "{{sender}} has sent {{count}} messages.",
+    "noPluralKey": "This key does not support pluralization.",
    "itemCount_one": "You have {{count}} item",
    "messageCount_one": "{{sender}} has sent one message"
  },
@ -15,7 +15,29 @@
    "offlineNotifyOnly": "This stream is offline. <span class='notify-link'>Be notified</span> the next time {{streamer}} goes live.",
    "offlineFediverseOnly": "This stream is offline. <span class='follow-link'>Follow</span> {{fediverseAccount}} on the Fediverse to see the next time {{streamer}} goes live.",
    "offlineBasic": "This stream is offline. Check back soon!",
-    "componentError": "Error: {{message}}"
+    "componentError": "Error: {{message}}",
+    "browser_notify_unsupported": "Browser notifications are not supported in your browser.",
+    "browser_notify_unsupported_local": "Browser notifications are not supported for local servers.",
+    "browser_notify_ios_title": "Get notified on iOS",
+    "browser_notify_ios_description": "It takes a couple extra steps to make sure you get notified when your favorite streams go live.",
+    "browser_notify_ios_share_button": "share",
+    "browser_notify_ios_add_to_home_screen": "Add to Home Screen",
+    "browser_notify_ios_add_button": "Add",
+    "browser_notify_ios_name_and_tap": "Give this link a name and tap the new icon on your home screen",
+    "browser_notify_ios_come_back": "Come back to this screen and enable notifications.",
+    "browser_notify_ios_allow_prompt": "Allow",
+    "browser_notify_permission_wants_to": "{{hostname}} wants to",
+    "browser_notify_show_notifications": "Show notifications",
+    "browser_notify_allow_button": "Allow",
+    "browser_notify_block_button": "Block",
+    "browser_notify_enabled_title": "Notifications are enabled",
+    "browser_notify_enabled_description": "To disable push notifications from {{hostname}} access your browser permissions for this site and turn off notifications. <a href=\"https://owncast.online/docs/notifications\">Learn more.</a>",
+    "browser_notify_denied_title": "Notifications are blocked on your device",
+    "browser_notify_denied_description": "To enable push notifications from {{hostname}} access your browser permissions for this site and turn on notifications. Then reload this page to apply your updated settings on this site. <a href=\"https://owncast.online/docs/notifications\">Learn more.</a>",
+    "browser_notify_main_description": "Get notified right in the browser each time this stream goes live.",
+    "browser_notify_learn_more": "Learn more",
+    "browser_notify_error_title": "Browser Notification Error",
+    "browser_notify_error_message": "Error registering for live notifications: {{message}}. Make sure you're not inside a private browser environment or have previously disabled notifications for this stream."
  },
  "Admin": {
    "emojis": "<strong><em>Missing translation Admin.emojis: Please report</em></strong>",
--- a/web/types/localization.ts
+++ b/web/types/localization.ts
@ -48,6 +48,32 @@ export const Localization = {
    // Errors
    componentError: 'component_error',

+    // Browser notifications - organized by component
+    BrowserNotifyModal: {
+      unsupported: 'browser_notify_unsupported',
+      unsupportedLocal: 'browser_notify_unsupported_local',
+      iosTitle: 'browser_notify_ios_title',
+      iosDescription: 'browser_notify_ios_description',
+      iosShareButton: 'browser_notify_ios_share_button',
+      iosAddToHomeScreen: 'browser_notify_ios_add_to_home_screen',
+      iosAddButton: 'browser_notify_ios_add_button',
+      iosNameAndTap: 'browser_notify_ios_name_and_tap',
+      iosComeBack: 'browser_notify_ios_come_back',
+      iosAllowPrompt: 'browser_notify_ios_allow_prompt',
+      permissionWantsTo: 'browser_notify_permission_wants_to',
+      showNotifications: 'browser_notify_show_notifications',
+      allowButton: 'browser_notify_allow_button',
+      blockButton: 'browser_notify_block_button',
+      enabledTitle: 'browser_notify_enabled_title',
+      enabledDescription: 'browser_notify_enabled_description',
+      deniedTitle: 'browser_notify_denied_title',
+      deniedDescription: 'browser_notify_denied_description',
+      mainDescription: 'browser_notify_main_description',
+      learnMore: 'browser_notify_learn_more',
+      errorTitle: 'browser_notify_error_title',
+      errorMessage: 'browser_notify_error_message',
+    },
+
    // Offline banner messages
    offlineBasic: 'offline_basic',
    offlineNotifyOnly: 'offline_notify_only',