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>

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>
+    <Title level={3}>
-    It takes a couple extra steps to make sure you get notified when your favorite streams go live.
+      <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>
+    <Title level={2}>
-    To disable push notifications from {window.location.hostname.toString()} access your browser
+      <Translation
-    permissions for this site and turn off notifications.
+        translationKey={Localization.Frontend.BrowserNotifyModal.enabledTitle}
-    <a href="https://owncast.online/docs/notifications"> Learn more.</a>
+        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>
+    <Title level={2}>
-    To enable push notifications from {window.location.hostname.toString()} access your browser
+      <Translation
-    permissions for this site and turn on notifications. Then reload this page to apply your updated
+        translationKey={Localization.Frontend.BrowserNotifyModal.deniedTitle}
-    settings on this site.
+        defaultText="Notifications are blocked on your device"
-    <a href="https://owncast.online/docs/notifications"> Learn more.</a>
+      />
+    </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

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>",

web/i18n/en/translation_old.json

@@ -1,9 +1,9 @@
 {
   "Testing": {
-    "simpleKey": "<strong><em>Missing translation Testing.simpleKey: Please report</em></strong>",
+    "simpleKey": "This is a simple key for testing purposes.",
-    "itemCount": "<strong><em>Missing translation Testing.itemCount: Please report</em></strong>",
+    "itemCount": "You have {{count}} items.",
-    "messageCount": "<strong><em>Missing translation Testing.messageCount: Please report</em></strong>",
+    "messageCount": "{{sender}} has sent {{count}} messages.",
-    "noPluralKey": "<strong><em>Missing translation Testing.noPluralKey: Please report</em></strong>",
+    "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>",

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',