feat: add server default locale setting (#1536)

* feat: add server default locale setting

* fix: do not modify defaultLocale property of IntlProvider

src/components/Settings/SettingsMain.tsx

@@ -6,7 +6,13 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
 import * as Yup from 'yup';
+import { UserSettingsGeneralResponse } from '../../../server/interfaces/api/userSettingsInterfaces';
 import type { MainSettings } from '../../../server/lib/settings';
+import {
+  availableLanguages,
+  AvailableLocales,
+} from '../../context/LanguageContext';
+import useLocale from '../../hooks/useLocale';
 import { Permission, useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';
 import Badge from '../Common/Badge';
@@ -50,15 +56,20 @@ const messages = defineMessages({
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
   partialRequestsEnabled: 'Allow Partial Series Requests',
+  locale: 'Display Language',
 });
 
 const SettingsMain: React.FC = () => {
   const { addToast } = useToasts();
-  const { hasPermission: userHasPermission } = useUser();
+  const { user: currentUser, hasPermission: userHasPermission } = useUser();
   const intl = useIntl();
+  const { setLocale } = useLocale();
   const { data, error, revalidate } = useSWR<MainSettings>(
     '/api/v1/settings/main'
   );
+  const { data: userData } = useSWR<UserSettingsGeneralResponse>(
+    currentUser ? `/api/v1/user/${currentUser.id}/settings/main` : null
+  );
 
   const MainSettingsSchema = Yup.object().shape({
     applicationTitle: Yup.string().required(
@@ -122,6 +133,7 @@ const SettingsMain: React.FC = () => {
             applicationUrl: data?.applicationUrl,
             csrfProtection: data?.csrfProtection,
             hideAvailable: data?.hideAvailable,
+            locale: data?.locale ?? 'en',
             region: data?.region,
             originalLanguage: data?.originalLanguage,
             partialRequestsEnabled: data?.partialRequestsEnabled,
@@ -136,6 +148,7 @@ const SettingsMain: React.FC = () => {
                 applicationUrl: values.applicationUrl,
                 csrfProtection: values.csrfProtection,
                 hideAvailable: values.hideAvailable,
+                locale: values.locale,
                 region: values.region,
                 originalLanguage: values.originalLanguage,
                 partialRequestsEnabled: values.partialRequestsEnabled,
@@ -143,6 +156,14 @@ const SettingsMain: React.FC = () => {
               });
               mutate('/api/v1/settings/public');
 
+              if (setLocale) {
+                setLocale(
+                  (userData?.locale
+                    ? userData.locale
+                    : values.locale) as AvailableLocales
+                );
+              }
+
               addToast(intl.formatMessage(messages.toastSettingsSuccess), {
                 autoDismiss: true,
                 appearance: 'success',
@@ -271,6 +292,28 @@ const SettingsMain: React.FC = () => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="locale" className="text-label">
+                    {intl.formatMessage(messages.locale)}
+                  </label>
+                  <div className="form-input">
+                    <div className="form-input-field">
+                      <Field as="select" id="locale" name="locale">
+                        {(Object.keys(
+                          availableLanguages
+                        ) as (keyof typeof availableLanguages)[]).map((key) => (
+                          <option
+                            key={key}
+                            value={availableLanguages[key].code}
+                            lang={availableLanguages[key].code}
+                          >
+                            {availableLanguages[key].display}
+                          </option>
+                        ))}
+                      </Field>
+                    </div>
+                  </div>
+                </div>
                 <div className="form-row">
                   <label htmlFor="region" className="text-label">
                     <span>{intl.formatMessage(messages.region)}</span>

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -44,12 +44,13 @@ const messages = defineMessages({
   seriesrequestlimit: 'Series Request Limit',
   enableOverride: 'Enable Override',
   applanguage: 'Display Language',
+  languageDefault: 'Default ({language})',
 });
 
 const UserGeneralSettings: React.FC = () => {
   const intl = useIntl();
   const { addToast } = useToasts();
-  const { setLocale } = useLocale();
+  const { locale, setLocale } = useLocale();
   const [movieQuotaEnabled, setMovieQuotaEnabled] = useState(false);
   const [tvQuotaEnabled, setTvQuotaEnabled] = useState(false);
   const router = useRouter();
@@ -120,7 +121,11 @@ const UserGeneralSettings: React.FC = () => {
             });
 
             if (currentUser?.id === user?.id && setLocale) {
-              setLocale(values.locale as AvailableLocales);
+              setLocale(
+                (values.locale
+                  ? values.locale
+                  : currentSettings.locale) as AvailableLocales
+              );
             }
 
             addToast(intl.formatMessage(messages.toastSettingsSuccess), {
@@ -198,10 +203,20 @@ const UserGeneralSettings: React.FC = () => {
                 <div className="form-input">
                   <div className="form-input-field">
                     <Field as="select" id="locale" name="locale">
+                      <option value="" lang={locale}>
+                        {intl.formatMessage(messages.languageDefault, {
+                          language:
+                            availableLanguages[currentSettings.locale].display,
+                        })}
+                      </option>
                       {(Object.keys(
                         availableLanguages
                       ) as (keyof typeof availableLanguages)[]).map((key) => (
-                        <option key={key} value={availableLanguages[key].code}>
+                        <option
+                          key={key}
+                          value={availableLanguages[key].code}
+                          lang={availableLanguages[key].code}
+                        >
                           {availableLanguages[key].display}
                         </option>
                       ))}

src/context/SettingsContext.tsx

@@ -19,6 +19,7 @@ const defaultSettings = {
   cacheImages: false,
   vapidPublic: '',
   enablePushRegistration: false,
+  locale: 'en',
 };
 
 export const SettingsContext = React.createContext<SettingsContextProps>({

src/i18n/locale/en.json

@@ -566,6 +566,7 @@
   "components.Settings.hostname": "Hostname or IP Address",
   "components.Settings.is4k": "4K",
   "components.Settings.librariesRemaining": "Libraries Remaining: {count}",
+  "components.Settings.locale": "Display Language",
   "components.Settings.manualscan": "Manual Library Scan",
   "components.Settings.manualscanDescription": "Normally, this will only be run once every 24 hours. Overseerr will check your Plex server's recently added more aggressively. If this is your first time configuring Plex, a one-time full manual library scan is recommended!",
   "components.Settings.mediaTypeMovie": "movie",
@@ -735,6 +736,7 @@
   "components.UserProfile.UserSettings.UserGeneralSettings.enableOverride": "Enable Override",
   "components.UserProfile.UserSettings.UserGeneralSettings.general": "General",
   "components.UserProfile.UserSettings.UserGeneralSettings.generalsettings": "General Settings",
+  "components.UserProfile.UserSettings.UserGeneralSettings.languageDefault": "Default ({language})",
   "components.UserProfile.UserSettings.UserGeneralSettings.localuser": "Local User",
   "components.UserProfile.UserSettings.UserGeneralSettings.movierequestlimit": "Movie Request Limit",
   "components.UserProfile.UserSettings.UserGeneralSettings.originallanguage": "Discover Language",

src/pages/_app.tsx

@@ -119,7 +119,7 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
             <InteractionProvider>
               <ToastProvider components={{ Toast, ToastContainer }}>
                 <Head>
-                  <title>Overseerr</title>
+                  <title>{currentSettings.applicationTitle}</title>
                   <meta
                     name="viewport"
                     content="initial-scale=1, viewport-fit=cover, width=device-width"
@@ -156,6 +156,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     cacheImages: false,
     vapidPublic: '',
     enablePushRegistration: false,
+    locale: 'en',
   };
 
   if (ctx.res) {
@@ -209,7 +210,9 @@ CoreApp.getInitialProps = async (initialProps) => {
     initialProps
   );
 
-  const locale = user?.settings?.locale ?? 'en';
+  const locale = user?.settings?.locale
+    ? user.settings.locale
+    : currentSettings.locale;
 
   const messages = await loadLocaleData(locale as AvailableLocales);
 

src/pages/collection/[collectionId]/index.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { GetServerSideProps, NextPage } from 'next';
-import type { Collection } from '../../../../server/models/Collection';
 import axios from 'axios';
-import { parseCookies } from 'nookies';
+import { GetServerSideProps, NextPage } from 'next';
+import React from 'react';
+import type { Collection } from '../../../../server/models/Collection';
 import CollectionDetails from '../../../components/CollectionDetails';
 
 interface CollectionPageProps {
@@ -16,11 +15,10 @@ const CollectionPage: NextPage<CollectionPageProps> = ({ collection }) => {
 export const getServerSideProps: GetServerSideProps<CollectionPageProps> = async (
   ctx
 ) => {
-  const cookies = parseCookies(ctx);
   const response = await axios.get<Collection>(
     `http://localhost:${process.env.PORT || 5055}/api/v1/collection/${
       ctx.query.collectionId
-    }${cookies.locale ? `?language=${cookies.locale}` : ''}`,
+    }`,
     {
       headers: ctx.req?.headers?.cookie
         ? { cookie: ctx.req.headers.cookie }

src/pages/movie/[movieId]/index.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
+import axios from 'axios';
 import { NextPage } from 'next';
+import React from 'react';
 import type { MovieDetails as MovieDetailsType } from '../../../../server/models/Movie';
 import MovieDetails from '../../../components/MovieDetails';
-import axios from 'axios';
-import { parseCookies } from 'nookies';
 
 interface MoviePageProps {
   movie?: MovieDetailsType;
@@ -15,11 +14,10 @@ const MoviePage: NextPage<MoviePageProps> = ({ movie }) => {
 
 MoviePage.getInitialProps = async (ctx) => {
   if (ctx.req) {
-    const cookies = parseCookies(ctx);
     const response = await axios.get<MovieDetailsType>(
       `http://localhost:${process.env.PORT || 5055}/api/v1/movie/${
         ctx.query.movieId
-      }${cookies.locale ? `?language=${cookies.locale}` : ''}`,
+      }`,
       {
         headers: ctx.req?.headers?.cookie
           ? { cookie: ctx.req.headers.cookie }

src/pages/tv/[tvId]/index.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { NextPage } from 'next';
 import axios from 'axios';
-import { parseCookies } from 'nookies';
-import TvDetails from '../../../components/TvDetails';
+import { NextPage } from 'next';
+import React from 'react';
 import type { TvDetails as TvDetailsType } from '../../../../server/models/Tv';
+import TvDetails from '../../../components/TvDetails';
 
 interface TvPageProps {
   tv?: TvDetailsType;
@@ -15,11 +14,10 @@ const TvPage: NextPage<TvPageProps> = ({ tv }) => {
 
 TvPage.getInitialProps = async (ctx) => {
   if (ctx.req) {
-    const cookies = parseCookies(ctx);
     const response = await axios.get<TvDetailsType>(
       `http://localhost:${process.env.PORT || 5055}/api/v1/tv/${
         ctx.query.tvId
-      }${cookies.locale ? `?language=${cookies.locale}` : ''}`,
+      }`,
       {
         headers: ctx.req?.headers?.cookie
           ? { cookie: ctx.req.headers.cookie }