feat(ui): added content ratings for tv shows and movie ratings (#878)

.gitignore

@@ -38,6 +38,8 @@ config/settings.json
 # logs
 config/logs/*.log*
 config/logs/*.json
+config/logs/*.log.gz
+config/logs/*-audit.json
 
 # anidb mapping file
 config/anime-list.xml

overseerr-api.yml

@@ -644,6 +644,41 @@ components:
                 type: string
         releaseDate:
           type: string
+        releases:
+          type: object
+          properties:
+            results:
+              type: array
+              items:
+                type: object
+                properties:
+                  iso_3166_1:
+                    type: string
+                    example: 'US'
+                  rating:
+                    type: string
+                    nullable: true
+                  release_dates:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        certification:
+                          type: string
+                          example: 'PG-13'
+                        iso_639_1:
+                          type: string
+                          nullable: true
+                        note:
+                          type: string
+                          nullable: true
+                          example: 'Blu ray'
+                        release_date:
+                          type: string
+                          example: '2017-07-12T00:00:00.000Z'
+                        type:
+                          type: number
+                          example: 1
         revenue:
           type: number
           nullable: true
@@ -752,6 +787,20 @@ components:
           type: string
         posterPath:
           type: string
+        contentRatings:
+          type: object
+          properties:
+            results:
+              type: array
+              items:
+                type: object
+                properties:
+                  iso_3166_1:
+                    type: string
+                    example: 'US'
+                  rating:
+                    type: string
+                    example: 'TV-14'
         createdBy:
           type: array
           items:

server/api/themoviedb/index.ts

@@ -145,7 +145,7 @@ class TheMovieDb extends ExternalAPI {
         {
           params: {
             language,
-            append_to_response: 'credits,external_ids,videos',
+            append_to_response: 'credits,external_ids,videos,release_dates',
           },
         },
         43200
@@ -171,7 +171,7 @@ class TheMovieDb extends ExternalAPI {
           params: {
             language,
             append_to_response:
-              'aggregate_credits,credits,external_ids,keywords,videos',
+              'aggregate_credits,credits,external_ids,keywords,videos,content_ratings',
           },
         },
         43200

server/api/themoviedb/interfaces.ts

@@ -136,6 +136,7 @@ export interface TmdbMovieDetails {
     name: string;
   }[];
   release_date: string;
+  release_dates: TmdbMovieReleaseResult;
   revenue: number;
   runtime?: number;
   spoken_languages: {
@@ -205,6 +206,7 @@ export interface TmdbTvSeasonResult {
 export interface TmdbTvDetails {
   id: number;
   backdrop_path?: string;
+  content_ratings: TmdbTvRatingResult;
   created_by: {
     id: number;
     credit_id: string;
@@ -272,6 +274,29 @@ export interface TmdbVideoResult {
   results: TmdbVideo[];
 }
 
+export interface TmdbTvRatingResult {
+  results: TmdbRating[];
+}
+
+export interface TmdbRating {
+  iso_3166_1: string;
+  rating: string;
+}
+
+export interface TmdbMovieReleaseResult {
+  results: TmdbRelease[];
+}
+
+export interface TmdbRelease extends TmdbRating {
+  release_dates: {
+    certification: string;
+    iso_639_1?: string;
+    note?: string;
+    release_date: string;
+    type: number;
+  }[];
+}
+
 export interface TmdbKeyword {
   id: number;
   name: string;
@@ -316,6 +341,7 @@ export interface TmdbPersonCredit {
   adult: boolean;
   release_date: string;
 }
+
 export interface TmdbPersonCreditCast extends TmdbPersonCredit {
   character: string;
 }

server/models/Movie.ts

@@ -1,4 +1,7 @@
-import type { TmdbMovieDetails } from '../api/themoviedb/interfaces';
+import type {
+  TmdbMovieDetails,
+  TmdbMovieReleaseResult,
+} from '../api/themoviedb/interfaces';
 import {
   ProductionCompany,
   Genre,
@@ -48,6 +51,7 @@ export interface MovieDetails {
     name: string;
   }[];
   releaseDate: string;
+  releases: TmdbMovieReleaseResult;
   revenue: number;
   runtime?: number;
   spokenLanguages: {
@@ -95,6 +99,7 @@ export const mapMovieDetails = (
   })),
   productionCountries: movie.production_countries,
   releaseDate: movie.release_date,
+  releases: movie.release_dates,
   revenue: movie.revenue,
   spokenLanguages: movie.spoken_languages,
   status: movie.status,

server/models/Tv.ts

@@ -15,6 +15,7 @@ import type {
   TmdbTvSeasonResult,
   TmdbTvDetails,
   TmdbSeasonWithEpisodes,
+  TmdbTvRatingResult,
 } from '../api/themoviedb/interfaces';
 import type Media from '../entity/Media';
 import { Video } from './Movie';
@@ -58,6 +59,7 @@ export interface TvDetails {
   id: number;
   backdropPath?: string;
   posterPath?: string;
+  contentRatings: TmdbTvRatingResult;
   createdBy: {
     id: number;
     name: string;
@@ -174,6 +176,7 @@ export const mapTvDetails = (
     originCountry: company.origin_country,
     logoPath: company.logo_path,
   })),
+  contentRatings: show.content_ratings,
   spokenLanguages: show.spoken_languages.map((language) => ({
     englishName: language.english_name,
     iso_639_1: language.iso_639_1,

src/components/MovieDetails/index.tsx

@@ -129,7 +129,22 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     revalidate();
   };
 
-  const movieAttributes = [];
+  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[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')
+          ?.release_dates[0].certification ||
+          data.releases.results[0].release_dates[0].certification}
+      </span>
+    );
+  }
 
   if (data.runtime) {
     movieAttributes.push(
@@ -369,7 +384,13 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             )}
           </h1>
           <span className="mt-1 text-xs lg:text-base lg:mt-0">
-            {movieAttributes.join(' | ')}
+            {movieAttributes
+              .map((t, k) => <span key={k}>{t}</span>)
+              .reduce((prev, curr) => (
+                <>
+                  {prev} | {curr}
+                </>
+              ))}
           </span>
         </div>
         <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">

src/components/TvDetails/index.tsx

@@ -133,6 +133,26 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     revalidate();
   };
 
+  const seriesAttributes: React.ReactNode[] = [];
+
+  if (
+    data.contentRatings.results.length &&
+    data.contentRatings.results.find(
+      (r) => r.iso_3166_1 === 'US' || 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')
+          ?.rating || data.contentRatings.results[0].rating}
+      </span>
+    );
+  }
+
+  if (data.genres.length) {
+    seriesAttributes.push(data.genres.map((g) => g.name).join(', '));
+  }
+
   const isComplete =
     data.seasons.filter((season) => season.seasonNumber !== 0).length <=
     (
@@ -392,7 +412,13 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             )}
           </h1>
           <span className="mt-1 text-xs lg:text-base lg:mt-0">
-            {data.genres.map((g) => g.name).join(', ')}
+            {seriesAttributes
+              .map((t, k) => <span key={k}>{t}</span>)
+              .reduce((prev, curr) => (
+                <>
+                  {prev} | {curr}
+                </>
+              ))}
           </span>
         </div>
         <div className="flex flex-wrap justify-center flex-shrink-0 mt-4 sm:flex-nowrap sm:justify-end lg:mt-0">