feat(frontend/api): tv request modal (no status. only request)

server/entity/MediaRequest.ts

@@ -5,17 +5,21 @@ import {
   Column,
   CreateDateColumn,
   UpdateDateColumn,
-  TableInheritance,
   AfterUpdate,
   AfterInsert,
   getRepository,
+  OneToMany,
 } from 'typeorm';
 import { User } from './User';
 import Media from './Media';
 import { MediaStatus, MediaRequestStatus, MediaType } from '../constants/media';
+import { getSettings } from '../lib/settings';
+import TheMovieDb from '../api/themoviedb';
+import RadarrAPI from '../api/radarr';
+import logger from '../logger';
+import SeasonRequest from './SeasonRequest';
 
 @Entity()
-@TableInheritance({ column: { type: 'varchar', name: 'type' } })
 export class MediaRequest {
   @PrimaryGeneratedColumn()
   public id: number;
@@ -38,9 +42,15 @@ export class MediaRequest {
   @UpdateDateColumn()
   public updatedAt: Date;
 
-  @Column()
+  @Column({ type: 'varchar' })
   public type: MediaType;
 
+  @OneToMany(() => SeasonRequest, (season) => season.request, {
+    eager: true,
+    cascade: true,
+  })
+  public seasons: SeasonRequest[];
+
   constructor(init?: Partial<MediaRequest>) {
     Object.assign(this, init);
   }
@@ -54,4 +64,50 @@ export class MediaRequest {
       mediaRepository.save(this.media);
     }
   }
+
+  @AfterUpdate()
+  @AfterInsert()
+  private async sendToRadarr() {
+    if (
+      this.status === MediaRequestStatus.APPROVED &&
+      this.type === MediaType.MOVIE
+    ) {
+      try {
+        const settings = getSettings();
+        if (settings.radarr.length === 0 && !settings.radarr[0]) {
+          logger.info(
+            'Skipped radarr request as there is no radarr configured',
+            { label: 'Media Request' }
+          );
+          return;
+        }
+
+        const tmdb = new TheMovieDb();
+        const radarrSettings = settings.radarr[0];
+        const radarr = new RadarrAPI({
+          apiKey: radarrSettings.apiKey,
+          url: `${radarrSettings.useSsl ? 'https' : 'http'}://${
+            radarrSettings.hostname
+          }:${radarrSettings.port}/api`,
+        });
+        const movie = await tmdb.getMovie({ movieId: this.media.tmdbId });
+
+        await radarr.addMovie({
+          profileId: radarrSettings.activeProfileId,
+          qualityProfileId: radarrSettings.activeProfileId,
+          rootFolderPath: radarrSettings.activeDirectory,
+          title: movie.title,
+          tmdbId: movie.id,
+          year: Number(movie.release_date.slice(0, 4)),
+          monitored: true,
+          searchNow: true,
+        });
+        logger.info('Sent request to Radarr', { label: 'Media Request' });
+      } catch (e) {
+        throw new Error(
+          `[MediaRequest] Request failed to send to radarr: ${e.message}`
+        );
+      }
+    }
+  }
 }

server/entity/MovieRequest.ts

@@ -1,59 +0,0 @@
-import { MediaRequest } from './MediaRequest';
-import { ChildEntity, AfterUpdate, AfterInsert } from 'typeorm';
-import TheMovieDb from '../api/themoviedb';
-import RadarrAPI from '../api/radarr';
-import { getSettings } from '../lib/settings';
-import { MediaType, MediaRequestStatus } from '../constants/media';
-import logger from '../logger';
-
-@ChildEntity(MediaType.MOVIE)
-class MovieRequest extends MediaRequest {
-  constructor(init?: Partial<MovieRequest>) {
-    super(init);
-  }
-
-  @AfterUpdate()
-  @AfterInsert()
-  private async sendToRadarr() {
-    if (this.status === MediaRequestStatus.APPROVED) {
-      try {
-        const settings = getSettings();
-        if (settings.radarr.length === 0 && !settings.radarr[0]) {
-          logger.info(
-            'Skipped radarr request as there is no radarr configured',
-            { label: 'Media Request' }
-          );
-          return;
-        }
-
-        const tmdb = new TheMovieDb();
-        const radarrSettings = settings.radarr[0];
-        const radarr = new RadarrAPI({
-          apiKey: radarrSettings.apiKey,
-          url: `${radarrSettings.useSsl ? 'https' : 'http'}://${
-            radarrSettings.hostname
-          }:${radarrSettings.port}/api`,
-        });
-        const movie = await tmdb.getMovie({ movieId: this.media.tmdbId });
-
-        await radarr.addMovie({
-          profileId: radarrSettings.activeProfileId,
-          qualityProfileId: radarrSettings.activeProfileId,
-          rootFolderPath: radarrSettings.activeDirectory,
-          title: movie.title,
-          tmdbId: movie.id,
-          year: Number(movie.release_date.slice(0, 4)),
-          monitored: true,
-          searchNow: true,
-        });
-        logger.info('Sent request to Radarr', { label: 'Media Request' });
-      } catch (e) {
-        throw new Error(
-          `[MediaRequest] Request failed to send to radarr: ${e.message}`
-        );
-      }
-    }
-  }
-}
-
-export default MovieRequest;

server/entity/SeasonRequest.ts

@@ -6,8 +6,8 @@ import {
   UpdateDateColumn,
   ManyToOne,
 } from 'typeorm';
-import TvRequest from './TvRequest';
 import { MediaRequestStatus } from '../constants/media';
+import { MediaRequest } from './MediaRequest';
 
 @Entity()
 class SeasonRequest {
@@ -20,8 +20,8 @@ class SeasonRequest {
   @Column({ type: 'int', default: MediaRequestStatus.PENDING })
   public status: MediaRequestStatus;
 
-  @ManyToOne(() => TvRequest, (request) => request.seasons)
-  public request: TvRequest;
+  @ManyToOne(() => MediaRequest, (request) => request.seasons)
+  public request: MediaRequest;
 
   @CreateDateColumn()
   public createdAt: Date;

server/entity/TvRequest.ts

@@ -1,16 +0,0 @@
-import { MediaRequest } from './MediaRequest';
-import { ChildEntity, OneToMany } from 'typeorm';
-import SeasonRequest from './SeasonRequest';
-import { MediaType } from '../constants/media';
-
-@ChildEntity(MediaType.TV)
-class TvRequest extends MediaRequest {
-  @OneToMany(() => SeasonRequest, (season) => season.request)
-  public seasons: SeasonRequest[];
-
-  constructor(init?: Partial<TvRequest>) {
-    super(init);
-  }
-}
-
-export default TvRequest;

server/models/Tv.ts

@@ -40,7 +40,7 @@ interface Season {
   seasonNumber: number;
 }
 
-interface SeasonWithEpisodes extends Season {
+export interface SeasonWithEpisodes extends Season {
   episodes: Episode[];
   externalIds: ExternalIds;
 }

server/routes/request.ts

@@ -5,9 +5,8 @@ import { getRepository } from 'typeorm';
 import { MediaRequest } from '../entity/MediaRequest';
 import TheMovieDb from '../api/themoviedb';
 import Media from '../entity/Media';
-import MovieRequest from '../entity/MovieRequest';
 import { MediaStatus, MediaRequestStatus, MediaType } from '../constants/media';
-import TvRequest from '../entity/TvRequest';
+import SeasonRequest from '../entity/SeasonRequest';
 
 const requestRoutes = Router();
 
@@ -43,6 +42,7 @@ requestRoutes.post(
   async (req, res, next) => {
     const tmdb = new TheMovieDb();
     const mediaRepository = getRepository(Media);
+    const requestRepository = getRepository(MediaRequest);
 
     try {
       const tmdbMedia =
@@ -52,6 +52,7 @@ requestRoutes.post(
 
       let media = await mediaRepository.findOne({
         where: { tmdbId: req.body.mediaId },
+        relations: ['requests'],
       });
 
       if (!media) {
@@ -65,9 +66,8 @@ requestRoutes.post(
       }
 
       if (req.body.mediaType === 'movie') {
-        const requestRepository = getRepository(MovieRequest);
-
-        const request = new MovieRequest({
+        const request = new MediaRequest({
+          type: MediaType.MOVIE,
           media,
           requestedBy: req.user,
           // If the user is an admin or has the "auto approve" permission, automatically approve the request
@@ -79,15 +79,50 @@ requestRoutes.post(
         await requestRepository.save(request);
         return res.status(201).json(request);
       } else if (req.body.mediaType === 'tv') {
-        const requestRepository = getRepository(TvRequest);
+        const requestedSeasons = req.body.seasons as number[];
+        let existingSeasons: number[] = [];
 
-        const request = new TvRequest({
+        // We need to check existing requests on this title to make sure we don't double up on seasons that were
+        // already requested. In the case they were, we just throw out any duplicates but still approve the request.
+        // (Unless there are no seasons, in which case we abort)
+        if (media.requests) {
+          existingSeasons = media.requests.reduce((seasons, request) => {
+            const combinedSeasons = request.seasons.map(
+              (season) => season.seasonNumber
+            );
+
+            return [...seasons, ...combinedSeasons];
+          }, [] as number[]);
+        }
+
+        const finalSeasons = requestedSeasons.filter(
+          (rs) => !existingSeasons.includes(rs)
+        );
+
+        if (finalSeasons.length === 0) {
+          return next({
+            status: 500,
+            message: 'No seasons available to request',
+          });
+        }
+
+        const request = new MediaRequest({
+          type: MediaType.TV,
           media,
           requestedBy: req.user,
           // If the user is an admin or has the "auto approve" permission, automatically approve the request
           status: req.user?.hasPermission(Permission.AUTO_APPROVE)
             ? MediaRequestStatus.APPROVED
             : MediaRequestStatus.PENDING,
+          seasons: finalSeasons.map(
+            (sn) =>
+              new SeasonRequest({
+                seasonNumber: sn,
+                status: req.user?.hasPermission(Permission.AUTO_APPROVE)
+                  ? MediaRequestStatus.APPROVED
+                  : MediaRequestStatus.PENDING,
+              })
+          ),
         });
 
         await requestRepository.save(request);

src/components/Common/Button/index.tsx

@@ -25,7 +25,7 @@ const Button: React.FC<ButtonProps> = ({
   switch (buttonType) {
     case 'primary':
       buttonStyle.push(
-        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700'
+        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 disabled:opacity-50'
       );
       break;
     case 'danger':

src/components/Common/Modal/index.tsx

@@ -1,16 +1,18 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Button, { ButtonType } from '../Button';
 import { useTransition, animated } from 'react-spring';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import LoadingSpinner from '../LoadingSpinner';
+import useClickOutside from '../../../hooks/useClickOutside';
 
 interface ModalProps {
   title?: string;
-  onCancel?: (e: MouseEvent<HTMLElement>) => void;
+  onCancel?: (e?: MouseEvent<HTMLElement>) => void;
   onOk?: (e: MouseEvent<HTMLButtonElement>) => void;
   cancelText?: string;
   okText?: string;
+  okDisabled?: boolean;
   cancelButtonType?: ButtonType;
   okButtonType?: ButtonType;
   visible?: boolean;
@@ -26,6 +28,7 @@ const Modal: React.FC<ModalProps> = ({
   onOk,
   cancelText,
   okText,
+  okDisabled = false,
   cancelButtonType,
   okButtonType,
   children,
@@ -35,11 +38,17 @@ const Modal: React.FC<ModalProps> = ({
   iconSvg,
   loading = false,
 }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  useClickOutside(modalRef, () => {
+    typeof onCancel === 'function' && backgroundClickable
+      ? onCancel()
+      : undefined;
+  });
   useLockBodyScroll(!!visible, disableScrollLock);
   const transitions = useTransition(visible, null, {
-    from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { opacity: 0 },
+    from: { opacity: 0, backdropFilter: 'blur(0px)' },
+    enter: { opacity: 1, backdropFilter: 'blur(3px)' },
+    leave: { opacity: 0, backdropFilter: 'blur(0px)' },
     config: { tension: 500, velocity: 40, friction: 60 },
   });
   const containerTransitions = useTransition(visible && !loading, null, {
@@ -68,15 +77,10 @@ const Modal: React.FC<ModalProps> = ({
               className="fixed top-0 left-0 right-0 bottom-0 bg-cool-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
               style={props}
               key={key}
-              onClick={
-                typeof onCancel === 'function' && backgroundClickable
-                  ? onCancel
-                  : undefined
-              }
               onKeyDown={(e) => {
                 if (e.key === 'Escape') {
                   typeof onCancel === 'function' && backgroundClickable
-                    ? onCancel
+                    ? onCancel()
                     : undefined;
                 }
               }}
@@ -84,7 +88,10 @@ const Modal: React.FC<ModalProps> = ({
               {loadingTransitions.map(
                 ({ props, item, key }) =>
                   item && (
-                    <animated.div style={props} key={key}>
+                    <animated.div
+                      style={{ ...props, position: 'absolute' }}
+                      key={key}
+                    >
                       <LoadingSpinner />
                     </animated.div>
                   )
@@ -94,13 +101,14 @@ const Modal: React.FC<ModalProps> = ({
                   item && (
                     <animated.div
                       style={props}
-                      className="inline-block align-bottom bg-cool-gray-700 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"
+                      className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6"
                       role="dialog"
                       aria-modal="true"
                       aria-labelledby="modal-headline"
                       key={key}
+                      ref={modalRef}
                     >
-                      <div className="sm:flex sm:items-start">
+                      <div className="sm:flex sm:items-center">
                         {iconSvg && (
                           <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-cool-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
                             {iconSvg}
@@ -115,22 +123,23 @@ const Modal: React.FC<ModalProps> = ({
                               {title}
                             </h3>
                           )}
+                        </div>
+                      </div>
                       {children && (
-                            <div className="mt-2">
+                        <div className="mt-4">
                           <p className="text-sm leading-5 text-cool-gray-300">
                             {children}
                           </p>
                         </div>
                       )}
-                        </div>
-                      </div>
                       {(onCancel || onOk) && (
-                        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                        <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
                           {typeof onOk === 'function' && (
                             <Button
                               buttonType={okType}
                               onClick={onOk}
                               className="ml-3"
+                              disabled={okDisabled}
                             >
                               {okText ? okText : 'Ok'}
                             </Button>
@@ -139,7 +148,7 @@ const Modal: React.FC<ModalProps> = ({
                             <Button
                               buttonType={cancelType}
                               onClick={onCancel}
-                              className="px-4"
+                              className="ml-3 sm:ml-0 sm:px-4"
                             >
                               {cancelText ? cancelText : 'Cancel'}
                             </Button>

src/components/RequestModal/TvRequestModal.tsx

@@ -0,0 +1,258 @@
+import React, { useState } from 'react';
+import Modal from '../Common/Modal';
+import { useUser } from '../../hooks/useUser';
+import { Permission } from '../../../server/lib/permissions';
+import { defineMessages, useIntl } from 'react-intl';
+import { MediaRequest } from '../../../server/entity/MediaRequest';
+import useSWR from 'swr';
+import { useToasts } from 'react-toast-notifications';
+import axios from 'axios';
+import type { MediaStatus } from '../../../server/constants/media';
+import { TvDetails, SeasonWithEpisodes } from '../../../server/models/Tv';
+
+const messages = defineMessages({
+  requestadmin: 'Your request will be immediately approved.',
+  cancelrequest:
+    'This will remove your request. Are you sure you want to continue?',
+});
+
+interface RequestModalProps {
+  request?: MediaRequest;
+  tmdbId: number;
+  visible?: boolean;
+  onCancel?: () => void;
+  onComplete?: (newStatus: MediaStatus) => void;
+  onUpdating?: (isUpdating: boolean) => void;
+}
+
+const TvRequestModal: React.FC<RequestModalProps> = ({
+  visible,
+  onCancel,
+  onComplete,
+  request,
+  tmdbId,
+  onUpdating,
+}) => {
+  const { addToast } = useToasts();
+  const { data, error } = useSWR<TvDetails>(
+    visible ? `/api/v1/tv/${tmdbId}` : null
+  );
+  const [selectedSeasons, setSelectedSeasons] = useState<number[]>([]);
+  const intl = useIntl();
+  const { hasPermission } = useUser();
+
+  const sendRequest = async () => {
+    if (selectedSeasons.length === 0) {
+      return;
+    }
+    if (onUpdating) {
+      onUpdating(true);
+    }
+    const response = await axios.post<MediaRequest>('/api/v1/request', {
+      mediaId: data?.id,
+      tvdbId: data?.externalIds.tvdbId,
+      mediaType: 'tv',
+      seasons: selectedSeasons,
+    });
+
+    if (response.data) {
+      if (onComplete) {
+        onComplete(response.data.media.status);
+      }
+      addToast(
+        <span>
+          <strong>{data?.name}</strong> succesfully requested!
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+      if (onUpdating) {
+        onUpdating(false);
+      }
+    }
+  };
+
+  const isSelectedSeason = (seasonNumber: number): boolean => {
+    return selectedSeasons.includes(seasonNumber);
+  };
+
+  const toggleSeason = (seasonNumber: number): void => {
+    if (selectedSeasons.includes(seasonNumber)) {
+      setSelectedSeasons((seasons) =>
+        seasons.filter((sn) => sn !== seasonNumber)
+      );
+    } else {
+      setSelectedSeasons((seasons) => [...seasons, seasonNumber]);
+    }
+  };
+
+  const toggleAllSeasons = (): void => {
+    if (
+      data &&
+      selectedSeasons.length >= 0 &&
+      selectedSeasons.length <
+        data?.seasons.filter((season) => season.seasonNumber !== 0).length
+    ) {
+      setSelectedSeasons(
+        data.seasons
+          .filter((season) => season.seasonNumber !== 0)
+          .map((season) => season.seasonNumber)
+      );
+    } else {
+      setSelectedSeasons([]);
+    }
+  };
+
+  const isAllSeasons = (): boolean => {
+    if (!data) {
+      return false;
+    }
+    return (
+      selectedSeasons.length ===
+      data.seasons.filter((season) => season.seasonNumber !== 0).length
+    );
+  };
+
+  const text = hasPermission(Permission.MANAGE_REQUESTS)
+    ? intl.formatMessage(messages.requestadmin)
+    : undefined;
+
+  return (
+    <Modal
+      visible={visible}
+      loading={!data && !error}
+      backgroundClickable
+      onCancel={onCancel}
+      onOk={() => sendRequest()}
+      title={`Request ${data?.name}`}
+      okText={
+        selectedSeasons.length === 0
+          ? 'Select a season'
+          : `Request ${selectedSeasons.length} seasons`
+      }
+      okDisabled={selectedSeasons.length === 0}
+      okButtonType="primary"
+      iconSvg={
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
+        </svg>
+      }
+    >
+      <div className="flex flex-col">
+        <div className="-mx-4 sm:mx-0 overflow-auto max-h-96">
+          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+            <div className="shadow overflow-hidden sm:rounded-lg">
+              <table className="min-w-full">
+                <thead>
+                  <tr>
+                    <th className="px-4 py-3 bg-cool-gray-500 w-16">
+                      <span
+                        role="checkbox"
+                        tabIndex={0}
+                        aria-checked={isAllSeasons()}
+                        onClick={() => toggleAllSeasons()}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === 'Space') {
+                            toggleAllSeasons();
+                          }
+                        }}
+                        className="group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none"
+                      >
+                        <span
+                          aria-hidden="true"
+                          className={`${
+                            isAllSeasons() ? 'bg-indigo-500' : 'bg-gray-800'
+                          } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                        ></span>
+                        <span
+                          aria-hidden="true"
+                          className={`${
+                            isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
+                          } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                        ></span>
+                      </span>
+                    </th>
+                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                      Season
+                    </th>
+                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                      # Of Episodes
+                    </th>
+                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                      Status
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-cool-gray-600 divide-y">
+                  {data?.seasons
+                    .filter((season) => season.seasonNumber !== 0)
+                    .map((season) => (
+                      <tr key={`season-${season.id}`}>
+                        <td className="px-4 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-100">
+                          <span
+                            role="checkbox"
+                            tabIndex={0}
+                            aria-checked={isSelectedSeason(season.seasonNumber)}
+                            onClick={() => toggleSeason(season.seasonNumber)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter' || e.key === 'Space') {
+                                toggleSeason(season.seasonNumber);
+                              }
+                            }}
+                            className="group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className={`${
+                                isSelectedSeason(season.seasonNumber)
+                                  ? 'bg-indigo-500'
+                                  : 'bg-gray-800'
+                              } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                            ></span>
+                            <span
+                              aria-hidden="true"
+                              className={`${
+                                isSelectedSeason(season.seasonNumber)
+                                  ? 'translate-x-5'
+                                  : 'translate-x-0'
+                              } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                            ></span>
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-100">
+                          {season.seasonNumber === 0
+                            ? 'Extras'
+                            : `Season ${season.seasonNumber}`}
+                        </td>
+                        <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-200">
+                          {season.episodeCount}
+                        </td>
+                        <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-200">
+                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-400 text-green-800">
+                            Available
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p className="mt-4">{text}</p>
+    </Modal>
+  );
+};
+
+export default TvRequestModal;

src/components/RequestModal/index.tsx

@@ -3,6 +3,7 @@ import useSWR from 'swr';
 import MovieRequestModal from './MovieRequestModal';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import type { MediaStatus } from '../../../server/constants/media';
+import TvRequestModal from './TvRequestModal';
 
 interface RequestModalProps {
   requestId?: number;
@@ -29,7 +30,16 @@ const RequestModal: React.FC<RequestModalProps> = ({
     requestId ? `/api/v1/request/${requestId}` : null
   );
   if (type === 'tv') {
-    return null;
+    return (
+      <TvRequestModal
+        onComplete={onComplete}
+        onCancel={onCancel}
+        visible={show}
+        request={data}
+        tmdbId={tmdbId}
+        onUpdating={onUpdating}
+      />
+    );
   }
 
   return (

tailwind.config.js

@@ -13,6 +13,8 @@ module.exports = {
   variants: {
     padding: ['first', 'last'],
     borderWidth: ['first', 'last'],
+    boxShadow: ['group-focus'],
+    opacity: ['disabled'],
   },
   plugins: [
     require('@tailwindcss/ui')({