feat(lang): add support for Chinese (Traditional) language

4 years ago · 686c4f71bf
parent 801e76524d
commit 686c4f71bf
3 changed files with 19 additions and 8 deletions
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@ -23,7 +23,7 @@ const availableLanguages: AvailableLanguageObject = {
  },
  ja: {
    code: 'ja',
-    display: '日本語',
+    display: 'Japanese',
  },
  fr: {
    code: 'fr',
@ -65,6 +65,10 @@ const availableLanguages: AvailableLanguageObject = {
    code: 'sv',
    display: 'Swedish',
  },
+  'zh-Hant': {
+    code: 'zh-Hant',
+    display: 'Chinese (Traditional)',
+  },
 };

 const LanguagePicker: React.FC = () => {
@ -105,20 +109,20 @@ const LanguagePicker: React.FC = () => {
        leaveTo="transform opacity-0 scale-95"
      >
        <div
-          className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"
+          className="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg"
          ref={dropdownRef}
        >
-          <div className="py-2 px-2 rounded-md bg-gray-700 ring-1 ring-black ring-opacity-5">
+          <div className="px-2 py-2 bg-gray-700 rounded-md ring-1 ring-black ring-opacity-5">
            <div>
              <label
                htmlFor="language"
-                className="block text-sm leading-5 font-medium text-gray-300 pb-2"
+                className="block pb-2 text-sm font-medium leading-5 text-gray-300"
              >
                <FormattedMessage {...messages.changelanguage} />
              </label>
              <select
                id="language"
-                className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 text-white bg-gray-700 border-gray-600 focus:outline-none focus:ring-indigo focus:border-blue-800 sm:text-sm sm:leading-5"
+                className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white bg-gray-700 border-gray-600 form-select focus:outline-none focus:ring-indigo focus:border-blue-800 sm:text-sm sm:leading-5"
                onChange={(e) =>
                  setLocale && setLocale(e.target.value as AvailableLocales)
                }
--- a/src/context/LanguageContext.tsx
+++ b/src/context/LanguageContext.tsx
@ -12,7 +12,8 @@ export type AvailableLocales =
  | 'it'
  | 'pt-BR'
  | 'sr'
-  | 'sv';
+  | 'sv'
+  | 'zh-Hant';

 interface LanguageContextProps {
  locale: AvailableLocales;
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -18,7 +18,7 @@ import { PublicSettingsResponse } from '../../server/interfaces/api/settingsInte
 import { SettingsProvider } from '../context/SettingsContext';

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const loadLocaleData = (locale: string): Promise<any> => {
+const loadLocaleData = (locale: AvailableLocales): Promise<any> => {
  switch (locale) {
    case 'ja':
      return import('../i18n/locale/ja.json');
@ -42,6 +42,8 @@ const loadLocaleData = (locale: string): Promise<any> => {
      return import('../i18n/locale/sr.json');
    case 'sv':
      return import('../i18n/locale/sv.json');
+    case 'zh-Hant':
+      return import('../i18n/locale/zh_Hant.json');
    default:
      return import('../i18n/locale/en.json');
  }
@ -112,6 +114,10 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
              <ToastProvider components={{ Toast }}>
                <Head>
                  <title>Overseerr</title>
+                  <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1"
+                  />
                </Head>
                <StatusChecker />
                <UserContext initialUser={user}>{component}</UserContext>
@ -192,7 +198,7 @@ CoreApp.getInitialProps = async (initialProps) => {
    initialProps
  );

-  const messages = await loadLocaleData(locale);
+  const messages = await loadLocaleData(locale as AvailableLocales);

  return { ...appInitialProps, user, messages, locale, currentSettings };
 };