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

pull/127/head
sct 4 years ago
parent 0fa007b27b
commit 608b96600a

@ -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}`
);
}
}
}
}

@ -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;

@ -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;

@ -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;

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

@ -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 request = new TvRequest({
const requestedSeasons = req.body.seasons as number[];
let existingSeasons: number[] = [];
// 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);

@ -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':

@ -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>
)}
{children && (
<div className="mt-2">
<p className="text-sm leading-5 text-cool-gray-300">
{children}
</p>
</div>
)}
</div>
</div>
{children && (
<div className="mt-4">
<p className="text-sm leading-5 text-cool-gray-300">
{children}
</p>
</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>

@ -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;

@ -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 (

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

Loading…
Cancel
Save