Update localization files + references (#4556)

* Initial plan

* Add localization support to NameChangeModal component

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Add NameChangeModal translations to English language file

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* fix(i18n): fix localization keys

* chore(test): add i18n test

* chore(i18n): update translation script

* chore(i18n): reorgnize translation keys and update components

* chore: fix linting warnings

* chore(i18n): update all the language files

* feat(i18n): add last live ago i18n key

---------

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: Gabe Kangas <gabek@real-ity.com>

web/components/ui/Footer/Footer.tsx

@@ -22,13 +22,13 @@ export const Footer: FC = () => {
       </span>
       <span className={styles.links}>
         <a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
-          {t('Documentation')}
+          {t(Localization.Frontend.Footer.documentation)}
         </a>
         <a href="https://owncast.online/help" target="_blank" rel="noreferrer">
-          {t('Contribute')}
+          {t(Localization.Frontend.Footer.contribute)}
         </a>
         <a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
-          {t('Source')}
+          {t(Localization.Frontend.Footer.source)}
         </a>
       </span>
     </footer>

web/components/ui/Header/Header.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { useTranslation } from 'next-export-i18n';
+import { Localization } from '../../../types/localization';
 import styles from './Header.module.scss';
 
 // Lazy loaded components
@@ -34,18 +35,18 @@ export const Header: FC<HeaderComponentProps> = ({ name, chatAvailable, chatDisa
     <header className={cn([`${styles.header}`], 'global-header')}>
       {online ? (
         <Link href="#player" className={styles.skipLink}>
-          {t('Skip to player')}
+          {t(Localization.Frontend.Header.skipToPlayer)}
         </Link>
       ) : (
         <Link href="#offline-message" className={styles.skipLink}>
-          {t('Skip to offline message')}
+          {t(Localization.Frontend.Header.skipToOfflineMessage)}
         </Link>
       )}
       <Link href="#skip-to-content" className={styles.skipLink}>
-        {t('Skip to page content')}
+        {t(Localization.Frontend.Header.skipToContent)}
       </Link>
       <Link href="#footer" className={styles.skipLink}>
-        {t('Skip to footer')}
+        {t(Localization.Frontend.Header.skipToFooter)}
       </Link>
       <div className={styles.logo}>
         <div id="header-logo" className={styles.logoImage}>
@@ -61,11 +62,11 @@ export const Header: FC<HeaderComponentProps> = ({ name, chatAvailable, chatDisa
       {!chatAvailable && !chatDisabled && (
         <Tooltip
           overlayClassName={styles.toolTip}
-          title={t('Chat will be available when the stream is live.')}
+          title={t(Localization.Frontend.Header.chatWillBeAvailable)}
           placement="left"
         >
           <span className={styles.chatOfflineText} id="owncast-chat-offline-text">
-            {t('Chat is offline')}
+            {t(Localization.Frontend.Header.chatOffline)}
           </span>
         </Tooltip>
       )}

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -112,7 +112,7 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({
           <div className={styles.lastLiveDate}>
             <ClockCircleOutlined className={styles.clockIcon} />
             <span id="owncast-offline-last-live-text">
-              {`${t('Last live ago', { timeAgo: formatDistanceToNow(new Date(lastLive)) })}`}
+              {`${t(Localization.Frontend.lastLiveAgo, { timeAgo: formatDistanceToNow(new Date(lastLive)) })}`}
             </span>
           </div>
         )}