fix(frontend): use region settings instead of hardcoded 'US' value for movie/TV ratings (#1006)

server/interfaces/api/settingsInterfaces.ts

@@ -12,6 +12,7 @@ export interface PublicSettingsResponse {
   localLogin: boolean;
   movie4kEnabled: boolean;
   series4kEnabled: boolean;
+  region: string;
 }
 
 export interface CacheItem {

server/lib/settings.ts

@@ -84,6 +84,7 @@ interface FullPublicSettings extends PublicSettings {
   localLogin: boolean;
   movie4kEnabled: boolean;
   series4kEnabled: boolean;
+  region: string;
 }
 
 export interface NotificationAgentConfig {
@@ -335,6 +336,7 @@ class Settings {
       series4kEnabled: this.data.sonarr.some(
         (sonarr) => sonarr.is4k && sonarr.isDefault
       ),
+      region: this.data.main.region,
     };
   }
 

src/components/MovieDetails/index.tsx

@@ -82,17 +82,19 @@ interface MovieDetailsProps {
 
 const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   const settings = useSettings();
-  const { hasPermission } = useUser();
+  const { user, hasPermission } = useUser();
   const router = useRouter();
   const intl = useIntl();
   const { locale } = useContext(LanguageContext);
   const [showManager, setShowManager] = useState(false);
+
   const { data, error, revalidate } = useSWR<MovieDetailsType>(
     `/api/v1/movie/${router.query.movieId}?language=${locale}`,
     {
       initialData: movie,
     }
   );
+
   const { data: ratingData } = useSWR<RTRating>(
     `/api/v1/movie/${router.query.movieId}/ratings`
   );
@@ -156,17 +158,22 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     revalidate();
   };
 
+  const region = user?.settings?.region
+    ? user.settings.region
+    : settings.currentSettings.region
+    ? settings.currentSettings.region
+    : 'US';
   const movieAttributes: React.ReactNode[] = [];
 
   if (
     data.releases.results.length &&
-    (data.releases.results.find((r) => r.iso_3166_1 === 'US')?.release_dates[0]
-      .certification ||
+    (data.releases.results.find((r) => r.iso_3166_1 === region)
+      ?.release_dates[0].certification ||
       data.releases.results[0].release_dates[0].certification)
   ) {
     movieAttributes.push(
       <span className="p-0.5 py-0 border rounded-md">
-        {data.releases.results.find((r) => r.iso_3166_1 === 'US')
+        {data.releases.results.find((r) => r.iso_3166_1 === region)
           ?.release_dates[0].certification ||
           data.releases.results[0].release_dates[0].certification}
       </span>

src/components/TvDetails/index.tsx

@@ -80,12 +80,13 @@ interface TvDetailsProps {
 
 const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
   const settings = useSettings();
-  const { hasPermission } = useUser();
+  const { user, hasPermission } = useUser();
   const router = useRouter();
   const intl = useIntl();
   const { locale } = useContext(LanguageContext);
   const [showRequestModal, setShowRequestModal] = useState(false);
   const [showManager, setShowManager] = useState(false);
+
   const { data, error, revalidate } = useSWR<TvDetailsType>(
     `/api/v1/tv/${router.query.tvId}?language=${locale}`,
     {
@@ -156,17 +157,22 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     revalidate();
   };
 
+  const region = user?.settings?.region
+    ? user.settings.region
+    : settings.currentSettings.region
+    ? settings.currentSettings.region
+    : 'US';
   const seriesAttributes: React.ReactNode[] = [];
 
   if (
     data.contentRatings.results.length &&
     data.contentRatings.results.find(
-      (r) => r.iso_3166_1 === 'US' || data.contentRatings.results[0].rating
+      (r) => r.iso_3166_1 === region || data.contentRatings.results[0].rating
     )
   ) {
     seriesAttributes.push(
       <span className="p-0.5 py-0 border rounded-md">
-        {data.contentRatings.results.find((r) => r.iso_3166_1 === 'US')
+        {data.contentRatings.results.find((r) => r.iso_3166_1 === region)
           ?.rating || data.contentRatings.results[0].rating}
       </span>
     );

src/context/SettingsContext.tsx

@@ -13,6 +13,7 @@ const defaultSettings = {
   localLogin: false,
   movie4kEnabled: false,
   series4kEnabled: false,
+  region: '',
 };
 
 export const SettingsContext = React.createContext<SettingsContextProps>({

src/hooks/useUser.ts

@@ -21,6 +21,14 @@ export interface User {
   createdAt: Date;
   updatedAt: Date;
   requestCount: number;
+  settings?: UserSettings;
+}
+
+export interface UserSettings {
+  enableNotifications: boolean;
+  discordId?: string;
+  region?: string;
+  originalLanguage?: string;
 }
 
 interface UserHookResponse {

src/pages/_app.tsx

@@ -144,6 +144,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     movie4kEnabled: false,
     series4kEnabled: false,
     localLogin: true,
+    region: '',
   };
 
   let locale = 'en';