feat: throw 404 when movie/tv show doesnt exist

also adds site webmanifest for mobile icons and title changes for tv/movie pages

overseerr-api.yml

@@ -33,6 +33,10 @@ components:
           type: string
           example: '2020-09-02T05:02:23.000Z'
           readOnly: true
+        requestCount:
+          type: number
+          example: 5
+          readOnly: true
         requests:
           type: array
           readOnly: true
@@ -1656,9 +1660,14 @@ paths:
           content:
             application/json:
               schema:
-                type: array
-                items:
-                  $ref: '#/components/schemas/MediaRequest'
+                type: object
+                properties:
+                  pageInfo:
+                    $ref: '#/components/schemas/PageInfo'
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/MediaRequest'
     post:
       summary: Create a new request
       description: |

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

server/entity/User.ts

@@ -5,6 +5,7 @@ import {
   CreateDateColumn,
   UpdateDateColumn,
   OneToMany,
+  RelationCount,
 } from 'typeorm';
 import { Permission, hasPermission } from '../lib/permissions';
 import { MediaRequest } from './MediaRequest';
@@ -38,6 +39,9 @@ export class User {
   @Column()
   public avatar: string;
 
+  @RelationCount((user: User) => user.requests)
+  public requestCount: number;
+
   @OneToMany(() => MediaRequest, (request) => request.requestedBy)
   public requests: MediaRequest[];
 

server/interfaces/api/common.ts

@@ -0,0 +1,10 @@
+interface PageInfo {
+  pages: number;
+  page: number;
+  results: number;
+  pageSize: number;
+}
+
+export interface PaginatedResponse {
+  pageInfo: PageInfo;
+}

server/interfaces/api/mediaInterfaces.ts

@@ -1,11 +1,6 @@
 import type Media from '../../entity/Media';
+import { PaginatedResponse } from './common';
 
-export interface MediaResultsResponse {
-  pageInfo: {
-    pages: number;
-    page: number;
-    results: number;
-    pageSize: number;
-  };
+export interface MediaResultsResponse extends PaginatedResponse {
   results: Media[];
 }

server/interfaces/api/requestInterfaces.ts

@@ -0,0 +1,6 @@
+import type { PaginatedResponse } from './common';
+import type { MediaRequest } from '../../entity/MediaRequest';
+
+export interface RequestResultsResponse extends PaginatedResponse {
+  results: MediaRequest[];
+}

server/routes/movie.ts

@@ -8,17 +8,21 @@ import RottenTomatoes from '../api/rottentomatoes';
 
 const movieRoutes = Router();
 
-movieRoutes.get('/:id', async (req, res) => {
+movieRoutes.get('/:id', async (req, res, next) => {
   const tmdb = new TheMovieDb();
 
-  const movie = await tmdb.getMovie({
-    movieId: Number(req.params.id),
-    language: req.query.language as string,
-  });
+  try {
+    const movie = await tmdb.getMovie({
+      movieId: Number(req.params.id),
+      language: req.query.language as string,
+    });
 
-  const media = await Media.getMedia(movie.id);
+    const media = await Media.getMedia(movie.id);
 
-  return res.status(200).json(mapMovieDetails(movie, media));
+    return res.status(200).json(mapMovieDetails(movie, media));
+  } catch (e) {
+    return next({ status: 404, message: 'Movie does not exist' });
+  }
 });
 
 movieRoutes.get('/:id/recommendations', async (req, res) => {
@@ -74,27 +78,27 @@ movieRoutes.get('/:id/similar', async (req, res) => {
 });
 
 movieRoutes.get('/:id/ratings', async (req, res, next) => {
-  const tmdb = new TheMovieDb();
-  const rtapi = new RottenTomatoes();
+  try {
+    const tmdb = new TheMovieDb();
+    const rtapi = new RottenTomatoes();
 
-  const movie = await tmdb.getMovie({
-    movieId: Number(req.params.id),
-  });
+    const movie = await tmdb.getMovie({
+      movieId: Number(req.params.id),
+    });
 
-  if (!movie) {
-    return next({ status: 404, message: 'Movie does not exist' });
-  }
+    const rtratings = await rtapi.getMovieRatings(
+      movie.title,
+      Number(movie.release_date.slice(0, 4))
+    );
 
-  const rtratings = await rtapi.getMovieRatings(
-    movie.title,
-    Number(movie.release_date.slice(0, 4))
-  );
+    if (!rtratings) {
+      return next({ status: 404, message: 'Unable to retrieve ratings' });
+    }
 
-  if (!rtratings) {
-    return next({ status: 404, message: 'Unable to retrieve ratings' });
+    return res.status(200).json(rtratings);
+  } catch (e) {
+    return next({ status: 404, message: 'Movie does not exist' });
   }
-
-  return res.status(200).json(rtratings);
 });
 
 export default movieRoutes;

server/routes/request.ts

@@ -8,12 +8,16 @@ import Media from '../entity/Media';
 import { MediaStatus, MediaRequestStatus, MediaType } from '../constants/media';
 import SeasonRequest from '../entity/SeasonRequest';
 import logger from '../logger';
+import { RequestResultsResponse } from '../interfaces/api/requestInterfaces';
 
 const requestRoutes = Router();
 
 requestRoutes.get('/', async (req, res, next) => {
   const requestRepository = getRepository(MediaRequest);
   try {
+    const pageSize = Number(req.query.take) ?? 20;
+    const skip = Number(req.query.skip) ?? 0;
+
     let statusFilter:
       | MediaRequestStatus
       | FindOperator<MediaRequestStatus>
@@ -51,23 +55,33 @@ requestRoutes.get('/', async (req, res, next) => {
         break;
     }
 
-    const requests = req.user?.hasPermission(Permission.MANAGE_REQUESTS)
-      ? await requestRepository.find({
+    const [requests, requestCount] = req.user?.hasPermission(
+      Permission.MANAGE_REQUESTS
+    )
+      ? await requestRepository.findAndCount({
           order: sortFilter,
           relations: ['media', 'modifiedBy'],
           where: { status: statusFilter },
           take: Number(req.query.take) ?? 20,
-          skip: Number(req.query.skip) ?? 0,
+          skip,
         })
-      : await requestRepository.find({
+      : await requestRepository.findAndCount({
           where: { requestedBy: { id: req.user?.id }, status: statusFilter },
           relations: ['media', 'modifiedBy'],
           order: sortFilter,
           take: Number(req.query.limit) ?? 20,
-          skip: Number(req.query.skip) ?? 0,
+          skip,
         });
 
-    return res.status(200).json(requests);
+    return res.status(200).json({
+      pageInfo: {
+        pages: Math.ceil(requestCount / pageSize),
+        pageSize,
+        results: requestCount,
+        page: Math.ceil(skip / pageSize) + 1,
+      },
+      results: requests,
+    } as RequestResultsResponse);
   } catch (e) {
     next({ status: 500, message: e.message });
   }

server/routes/tv.ts

@@ -8,17 +8,20 @@ import RottenTomatoes from '../api/rottentomatoes';
 
 const tvRoutes = Router();
 
-tvRoutes.get('/:id', async (req, res) => {
+tvRoutes.get('/:id', async (req, res, next) => {
   const tmdb = new TheMovieDb();
+  try {
+    const tv = await tmdb.getTvShow({
+      tvId: Number(req.params.id),
+      language: req.query.language as string,
+    });
 
-  const tv = await tmdb.getTvShow({
-    tvId: Number(req.params.id),
-    language: req.query.language as string,
-  });
+    const media = await Media.getMedia(tv.id);
 
-  const media = await Media.getMedia(tv.id);
-
-  return res.status(200).json(mapTvDetails(tv, media));
+    return res.status(200).json(mapTvDetails(tv, media));
+  } catch (e) {
+    return next({ status: 404, message: 'TV Show does not exist' });
+  }
 });
 
 tvRoutes.get('/:id/season/:seasonNumber', async (req, res) => {

server/routes/user.ts

@@ -8,7 +8,7 @@ const router = Router();
 router.get('/', async (req, res) => {
   const userRepository = getRepository(User);
 
-  const users = await userRepository.find({ relations: ['requests'] });
+  const users = await userRepository.find();
 
   return res.status(200).json(User.filterMany(users));
 });

src/components/Discover/index.tsx

@@ -15,6 +15,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { LanguageContext } from '../../context/LanguageContext';
 import type Media from '../../../server/entity/Media';
 import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';
+import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
 import RequestCard from '../RequestCard';
 
 const messages = defineMessages({
@@ -70,9 +71,9 @@ const Discover: React.FC = () => {
     '/api/v1/media?filter=available&take=20&sort=modified'
   );
 
-  const { data: requests, error: requestError } = useSWR<MediaRequest[]>(
-    '/api/v1/request?filter=unavailable&take=20&sort=modified&skip=0'
-  );
+  const { data: requests, error: requestError } = useSWR<
+    RequestResultsResponse
+  >('/api/v1/request?filter=unavailable&take=20&sort=modified&skip=0');
 
   return (
     <>
@@ -125,8 +126,8 @@ const Discover: React.FC = () => {
       <Slider
         sliderKey="requests"
         isLoading={!requests && !requestError}
-        isEmpty={!!requests && !requestError && requests.length === 0}
-        items={requests?.map((request) => (
+        isEmpty={!!requests && !requestError && requests.results.length === 0}
+        items={(requests?.results ?? []).map((request) => (
           <RequestCard
             key={`request-slider-item-${request.id}`}
             request={request}

src/components/MovieDetails/index.tsx

@@ -35,6 +35,7 @@ import RTAudFresh from '../../assets/rt_aud_fresh.svg';
 import RTAudRotten from '../../assets/rt_aud_rotten.svg';
 import type { RTRating } from '../../../server/api/rottentomatoes';
 import Error from '../../pages/_error';
+import Head from 'next/head';
 
 const messages = defineMessages({
   releasedate: 'Release Date',
@@ -128,6 +129,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
       }}
     >
+      <Head>
+        <title>{data.title} - Overseerr</title>
+      </Head>
       <RequestModal
         tmdbId={data.id}
         show={showRequestModal}

src/components/TvDetails/index.tsx

@@ -26,6 +26,7 @@ import RTRotten from '../../assets/rt_rotten.svg';
 import RTAudFresh from '../../assets/rt_aud_fresh.svg';
 import RTAudRotten from '../../assets/rt_aud_rotten.svg';
 import type { RTRating } from '../../../server/api/rottentomatoes';
+import Head from 'next/head';
 
 const messages = defineMessages({
   userrating: 'User Rating',
@@ -131,6 +132,9 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
       }}
     >
+      <Head>
+        <title>{data.name} - Overseerr</title>
+      </Head>
       <RequestModal
         tmdbId={data.id}
         show={showRequestModal}

src/components/UserList/index.tsx

@@ -73,7 +73,7 @@ const UserList: React.FC = () => {
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap">
                         <div className="text-sm leading-5 text-white">
-                          {user.requests.length}
+                          {user.requestCount}
                         </div>
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap">

src/pages/_document.tsx

@@ -22,6 +22,24 @@ class MyDocument extends Document {
       <Html>
         <Head>
           <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/site.webmanifest"></link>
         </Head>
         <body>
           <Main />