Merge branch 'develop' into feature-change-jellyfin-ip

.all-contributorsrc

@@ -809,6 +809,69 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Alexays",
+      "name": "Alex",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13947260?v=4",
+      "profile": "https://arouillard.fr",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Zebebles",
+      "name": "Zeb Muller",
+      "avatar_url": "https://avatars.githubusercontent.com/u/11425451?v=4",
+      "profile": "https://github.com/Zebebles",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "SMores",
+      "name": "Shane Friedman",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5354254?v=4",
+      "profile": "http://smoores.dev",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "IzaacJ",
+      "name": "Izaac Brånn",
+      "avatar_url": "https://avatars.githubusercontent.com/u/711323?v=4",
+      "profile": "https://izaacj.me",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "SalmanTariq",
+      "name": "Salman Tariq",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13284494?v=4",
+      "profile": "https://github.com/SalmanTariq",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "andrew-kennedy",
+      "name": "Andrew Kennedy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2387159?v=4",
+      "profile": "https://github.com/andrew-kennedy",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Fallenbagel",
+      "name": "Fallenbagel",
+      "avatar_url": "https://avatars.githubusercontent.com/u/98979876?v=4",
+      "profile": "https://github.com/Fallenbagel",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "badgeTemplate": "<a href=\"#contributors-\"><img alt=\"All Contributors\" src=\"https://img.shields.io/badge/all_contributors-<%= contributors.length %>-orange.svg\"/></a>",
@@ -818,5 +881,6 @@
   "repoType": "github",
   "repoHost": "https://github.com",
   "skipCi": false,
-  "commitConvention": "angular"
+  "commitConvention": "angular",
+  "commitType": "docs"
 }

.github/CODEOWNERS

@@ -1,7 +1,2 @@
 # Global code ownership
-
+*                               @Fallenbagel
--       @Fallenbagel
-
-# i18n locale files
-
-src/i18n/locale/ @Fallenbagel

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
   build_and_push:
     name: Build & Publish Docker Images
     if: github.ref == 'refs/heads/develop' && !contains(github.event.head_commit.message, '[skip ci]')
-    runs-on: ubuntu-20.04
+    runs-on: self-hosted
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.github/workflows/snap.yaml

@@ -41,6 +41,8 @@ jobs:
           fi
       - name: Set Up QEMU
         uses: docker/setup-qemu-action@v2
+      - name: Configure Git
+        run: git config --add safe.directory /data/parts/jellyseerr/src
       - name: Build Snap Package
         uses: diddlesnaps/snapcraft-multiarch-action@v1
         id: build

cypress/e2e/discover.cy.ts

@@ -187,7 +187,7 @@ describe('Discover', () => {
 
     cy.wait('@getWatchlist');
 
-    const sliderHeader = cy.contains('.slider-header', 'Your Plex Watchlist');
+    const sliderHeader = cy.contains('.slider-header', 'Your Watchlist');
 
     sliderHeader.scrollIntoView();
 
@@ -203,7 +203,7 @@ describe('Discover', () => {
       .find('[data-testid=title-card-title]')
       .invoke('text')
       .then((text) => {
-        cy.contains('.slider-header', 'Plex Watchlist')
+        cy.contains('.slider-header', 'Watchlist')
           .next('[data-testid=media-slider]')
           .find('[data-testid=title-card]')
           .first()

cypress/e2e/pull-to-refresh.cy.ts

@@ -13,7 +13,7 @@ describe('Pull To Refresh', () => {
       url: '/api/v1/*',
     }).as('apiCall');
 
-    cy.get('.searchbar').swipe('bottom', [190, 400]);
+    cy.get('.searchbar').swipe('bottom', [190, 500]);
 
     cy.wait('@apiCall').then((interception) => {
       assert.isNotNull(

overseerr-api.yml

@@ -36,6 +36,8 @@ tags:
     description: Endpoints related to retrieving collection details.
   - name: service
     description: Endpoints related to getting service (Radarr/Sonarr) details.
+  - name: watchlist
+    description: Collection of media to watch later
 servers:
   - url: '{server}/api/v1'
     variables:
@@ -44,6 +46,34 @@ servers:
 
 components:
   schemas:
+    Watchlist:
+      type: object
+      properties:
+        id:
+          type: integer
+          example: 1
+          readOnly: true
+        tmdbId:
+          type: number
+          example: 1
+        ratingKey:
+          type: string
+        type:
+          type: string
+        title:
+          type: string
+        media:
+          $ref: '#/components/schemas/MediaInfo'
+        createdAt:
+          type: string
+          example: '2020-09-12T10:00:27.000Z'
+          readOnly: true
+        updatedAt:
+          type: string
+          example: '2020-09-12T10:00:27.000Z'
+          readOnly: true
+        requestedBy:
+          $ref: '#/components/schemas/User'
     User:
       type: object
       properties:
@@ -3962,6 +3992,41 @@ paths:
                       restricted:
                         type: boolean
                         example: false
+  /watchlist:
+    post:
+      summary: Add media to watchlist
+      tags:
+        - watchlist
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Watchlist'
+      responses:
+        '200':
+          description: Watchlist data returned
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Watchlist'
+  /watchlist/{tmdbId}:
+    delete:
+      summary: Delete watchlist item
+      description: Removes a watchlist item.
+      tags:
+        - watchlist
+      parameters:
+        - in: path
+          name: tmdbId
+          description: tmdbId ID
+          required: true
+          example: '1'
+          schema:
+            type: string
+      responses:
+        '204':
+          description: Succesfully removed watchlist item
   /user/{userId}/watchlist:
     get:
       summary: Get the Plex watchlist for a specific user
@@ -3969,6 +4034,7 @@ paths:
         Retrieves a user's Plex Watchlist in a JSON object.
       tags:
         - users
+        - watchlist
       parameters:
         - in: path
           name: userId
@@ -4439,6 +4505,16 @@ paths:
           schema:
             type: number
             example: 10
+        - in: query
+          name: voteCountGte
+          schema:
+            type: number
+            example: 7
+        - in: query
+          name: voteCountLte
+          schema:
+            type: number
+            example: 10
         - in: query
           name: watchRegion
           schema:
@@ -4718,6 +4794,16 @@ paths:
           schema:
             type: number
             example: 10
+        - in: query
+          name: voteCountGte
+          schema:
+            type: number
+            example: 7
+        - in: query
+          name: voteCountLte
+          schema:
+            type: number
+            example: 10
         - in: query
           name: watchRegion
           schema:

package.json

@@ -8,6 +8,7 @@
     "build:next": "next build",
     "build": "yarn build:next && yarn build:server",
     "lint": "eslint \"./server/**/*.{ts,tsx}\" \"./src/**/*.{ts,tsx}\" --cache",
+    "lintfix": "eslint \"./server/**/*.{ts,tsx}\" \"./src/**/*.{ts,tsx}\" --fix",
     "start": "NODE_ENV=production node dist/index.js",
     "i18n:extract": "extract-messages -l=en -o src/i18n/locale -d en --flat true --overwriteDefault true \"./src/**/!(*.test).{ts,tsx}\"",
     "migration:generate": "ts-node -r tsconfig-paths/register --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:generate -d server/datasource.ts",
@@ -29,17 +30,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@formatjs/intl-displaynames": "6.2.3",
+    "@formatjs/intl-displaynames": "6.2.6",
-    "@formatjs/intl-locale": "3.0.11",
+    "@formatjs/intl-locale": "3.1.1",
-    "@formatjs/intl-pluralrules": "5.1.8",
+    "@formatjs/intl-pluralrules": "5.1.10",
     "@formatjs/intl-utils": "3.8.4",
-    "@headlessui/react": "1.7.7",
+    "@headlessui/react": "1.7.12",
-    "@heroicons/react": "2.0.13",
+    "@heroicons/react": "2.0.16",
     "@supercharge/request-ip": "1.2.0",
     "@svgr/webpack": "6.5.1",
-    "@tanem/react-nprogress": "5.0.22",
+    "@tanem/react-nprogress": "5.0.30",
-    "ace-builds": "1.14.0",
+    "ace-builds": "1.15.2",
-    "axios": "1.2.2",
+    "axios": "1.3.4",
     "axios-rate-limit": "1.3.0",
     "bcrypt": "5.1.0",
     "bowser": "2.11.0",
@@ -47,7 +48,7 @@
     "cookie-parser": "1.4.6",
     "copy-to-clipboard": "3.3.3",
     "country-flag-icons": "1.5.5",
-    "cronstrue": "2.21.0",
+    "cronstrue": "2.23.0",
     "csurf": "1.11.0",
     "date-fns": "2.29.3",
     "dayjs": "1.11.7",
@@ -64,23 +65,22 @@
     "next": "12.3.4",
     "node-cache": "5.1.2",
     "node-gyp": "9.3.1",
-    "node-schedule": "2.1.0",
+    "node-schedule": "2.1.1",
-    "nodemailer": "6.8.0",
+    "nodemailer": "6.9.1",
-    "openpgp": "5.5.0",
+    "openpgp": "5.7.0",
     "plex-api": "5.3.2",
     "pug": "3.0.2",
-    "pulltorefreshjs": "0.1.22",
     "react": "18.2.0",
     "react-ace": "10.1.0",
     "react-animate-height": "2.1.2",
-    "react-aria": "3.22.0",
+    "react-aria": "3.23.0",
     "react-dom": "18.2.0",
-    "react-intersection-observer": "9.4.1",
+    "react-intersection-observer": "9.4.3",
-    "react-intl": "6.2.5",
+    "react-intl": "6.2.10",
-    "react-markdown": "8.0.4",
+    "react-markdown": "8.0.5",
     "react-popper-tooltip": "4.4.2",
     "react-select": "5.7.0",
-    "react-spring": "9.6.1",
+    "react-spring": "9.7.1",
     "react-tailwindcss-datepicker-sct": "1.3.4",
     "react-toast-notifications": "2.5.1",
     "react-truncate-markup": "5.1.2",
@@ -89,42 +89,41 @@
     "secure-random-password": "0.2.3",
     "semver": "7.3.8",
     "sqlite3": "5.1.4",
-    "swagger-ui-express": "4.6.0",
+    "swagger-ui-express": "4.6.2",
-    "swr": "2.0.0",
+    "swr": "2.0.4",
-    "typeorm": "0.3.11",
+    "typeorm": "0.3.12",
     "web-push": "3.5.0",
     "winston": "3.8.2",
     "winston-daily-rotate-file": "4.7.1",
     "xml2js": "0.4.23",
     "yamljs": "0.3.0",
     "yup": "0.32.11",
-    "zod": "3.20.2"
+    "zod": "3.20.6"
   },
   "devDependencies": {
-    "@babel/cli": "7.20.7",
+    "@babel/cli": "7.21.0",
-    "@commitlint/cli": "17.4.0",
+    "@commitlint/cli": "17.4.4",
-    "@commitlint/config-conventional": "17.4.0",
+    "@commitlint/config-conventional": "17.4.4",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/forms": "0.5.3",
-    "@tailwindcss/typography": "0.5.8",
+    "@tailwindcss/typography": "0.5.9",
     "@types/bcrypt": "5.0.0",
     "@types/cookie-parser": "1.4.3",
     "@types/country-flag-icons": "1.2.0",
     "@types/csurf": "1.11.2",
     "@types/email-templates": "8.0.4",
-    "@types/express": "4.17.15",
+    "@types/express": "4.17.17",
-    "@types/express-session": "1.17.5",
+    "@types/express-session": "1.17.6",
     "@types/lodash": "4.14.191",
     "@types/node": "17.0.36",
     "@types/node-schedule": "2.1.0",
     "@types/nodemailer": "6.4.7",
-    "@types/pulltorefreshjs": "0.1.5",
+    "@types/react": "18.0.28",
-    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.11",
-    "@types/react-dom": "18.0.10",
     "@types/react-transition-group": "4.4.5",
     "@types/secure-random-password": "0.2.1",
     "@types/semver": "7.3.13",
@@ -133,45 +132,46 @@
     "@types/xml2js": "0.4.11",
     "@types/yamljs": "0.2.31",
     "@types/yup": "0.29.14",
-    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/eslint-plugin": "5.54.0",
-    "@typescript-eslint/parser": "5.48.0",
+    "@typescript-eslint/parser": "5.54.0",
     "autoprefixer": "10.4.13",
     "babel-plugin-react-intl": "8.2.25",
     "babel-plugin-react-intl-auto": "3.3.0",
-    "commitizen": "4.2.6",
+    "commitizen": "4.3.0",
     "copyfiles": "2.4.1",
     "cy-mobile-commands": "0.3.0",
-    "cypress": "12.3.0",
+    "cypress": "12.7.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "8.31.0",
+    "eslint": "8.35.0",
     "eslint-config-next": "12.3.4",
     "eslint-config-prettier": "8.6.0",
-    "eslint-plugin-formatjs": "4.3.9",
+    "eslint-plugin-formatjs": "4.9.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-no-relative-import-paths": "1.5.2",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "extract-react-intl-messages": "4.1.1",
     "husky": "8.0.3",
-    "lint-staged": "13.1.0",
+    "lint-staged": "13.1.2",
     "nodemon": "2.0.20",
-    "postcss": "8.4.20",
+    "postcss": "8.4.21",
-    "prettier": "2.8.1",
+    "prettier": "2.8.4",
-    "prettier-plugin-organize-imports": "3.2.1",
+    "prettier-plugin-organize-imports": "3.2.2",
-    "prettier-plugin-tailwindcss": "0.2.1",
+    "prettier-plugin-tailwindcss": "0.2.3",
     "semantic-release": "19.0.5",
     "semantic-release-docker-buildx": "1.0.1",
-    "tailwindcss": "3.2.4",
+    "tailwindcss": "3.2.7",
     "ts-node": "10.9.1",
     "tsc-alias": "1.8.2",
     "tsconfig-paths": "4.1.2",
-    "typescript": "4.9.4"
+    "typescript": "4.9.5"
   },
   "resolutions": {
     "sqlite3/node-gyp": "8.4.1",
-    "@types/react": "18.0.26",
+    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.10"
+    "@types/react-dom": "18.0.11",
+    "@types/express-session": "1.17.6"
   },
   "config": {
     "commitizen": {

server/api/rottentomatoes.ts

@@ -17,7 +17,7 @@ interface RTAlgoliaHit {
   title: string;
   titles: string[];
   description: string;
-  releaseYear: string;
+  releaseYear: number;
   rating: string;
   genres: string[];
   updateDate: string;
@@ -111,22 +111,19 @@ class RottenTomatoes extends ExternalAPI {
 
       // First, attempt to match exact name and year
       let movie = contentResults.hits.find(
-        (movie) => movie.releaseYear === year.toString() && movie.title === name
+        (movie) => movie.releaseYear === year && movie.title === name
       );
 
       // If we don't find a movie, try to match partial name and year
       if (!movie) {
         movie = contentResults.hits.find(
-          (movie) =>
+          (movie) => movie.releaseYear === year && movie.title.includes(name)
-            movie.releaseYear === year.toString() && movie.title.includes(name)
         );
       }
 
       // If we still dont find a movie, try to match just on year
       if (!movie) {
-        movie = contentResults.hits.find(
+        movie = contentResults.hits.find((movie) => movie.releaseYear === year);
-          (movie) => movie.releaseYear === year.toString()
-        );
       }
 
       // One last try, try exact name match only
@@ -181,7 +178,7 @@ class RottenTomatoes extends ExternalAPI {
 
       if (year) {
         tvshow = contentResults.hits.find(
-          (series) => series.releaseYear === year.toString()
+          (series) => series.releaseYear === year
         );
       }
 

server/api/servarr/sonarr.ts

@@ -76,6 +76,15 @@ export interface SonarrSeries {
     ignoreEpisodesWithoutFiles?: boolean;
     searchForMissingEpisodes?: boolean;
   };
+  statistics: {
+    seasonCount: number;
+    episodeFileCount: number;
+    episodeCount: number;
+    totalEpisodeCount: number;
+    sizeOnDisk: number;
+    releaseGroups: string[];
+    percentOfEpisodes: number;
+  };
 }
 
 export interface AddSeriesOptions {
@@ -116,6 +125,16 @@ class SonarrAPI extends ServarrBase<{
     }
   }
 
+  public async getSeriesById(id: number): Promise<SonarrSeries> {
+    try {
+      const response = await this.axios.get<SonarrSeries>(`/series/${id}`);
+
+      return response.data;
+    } catch (e) {
+      throw new Error(`[Sonarr] Failed to retrieve series by ID: ${e.message}`);
+    }
+  }
+
   public async getSeriesByTitle(title: string): Promise<SonarrSeries[]> {
     try {
       const response = await this.axios.get<SonarrSeries[]>('/series/lookup', {

server/api/themoviedb/index.ts

@@ -65,6 +65,8 @@ interface DiscoverMovieOptions {
   withRuntimeLte?: string;
   voteAverageGte?: string;
   voteAverageLte?: string;
+  voteCountGte?: string;
+  voteCountLte?: string;
   originalLanguage?: string;
   genre?: string;
   studio?: string;
@@ -83,6 +85,8 @@ interface DiscoverTvOptions {
   withRuntimeLte?: string;
   voteAverageGte?: string;
   voteAverageLte?: string;
+  voteCountGte?: string;
+  voteCountLte?: string;
   includeEmptyReleaseDate?: boolean;
   originalLanguage?: string;
   genre?: string;
@@ -460,6 +464,8 @@ class TheMovieDb extends ExternalAPI {
     withRuntimeLte,
     voteAverageGte,
     voteAverageLte,
+    voteCountGte,
+    voteCountLte,
     watchProviders,
     watchRegion,
   }: DiscoverMovieOptions = {}): Promise<TmdbSearchMovieResponse> => {
@@ -504,6 +510,8 @@ class TheMovieDb extends ExternalAPI {
           'with_runtime.lte': withRuntimeLte,
           'vote_average.gte': voteAverageGte,
           'vote_average.lte': voteAverageLte,
+          'vote_count.gte': voteCountGte,
+          'vote_count.lte': voteCountLte,
           watch_region: watchRegion,
           with_watch_providers: watchProviders,
         },
@@ -530,6 +538,8 @@ class TheMovieDb extends ExternalAPI {
     withRuntimeLte,
     voteAverageGte,
     voteAverageLte,
+    voteCountGte,
+    voteCountLte,
     watchProviders,
     watchRegion,
   }: DiscoverTvOptions = {}): Promise<TmdbSearchTvResponse> => {
@@ -574,6 +584,8 @@ class TheMovieDb extends ExternalAPI {
           'with_runtime.lte': withRuntimeLte,
           'vote_average.gte': voteAverageGte,
           'vote_average.lte': voteAverageLte,
+          'vote_count.gte': voteCountGte,
+          'vote_count.lte': voteCountLte,
           with_watch_providers: watchProviders,
           watch_region: watchRegion,
         },

server/api/themoviedb/interfaces.ts

@@ -28,6 +28,18 @@ export interface TmdbTvResult extends TmdbMediaResult {
   first_air_date: string;
 }
 
+export interface TmdbCollectionResult {
+  id: number;
+  media_type: 'collection';
+  title: string;
+  original_title: string;
+  adult: boolean;
+  poster_path?: string;
+  backdrop_path?: string;
+  overview: string;
+  original_language: string;
+}
+
 export interface TmdbPersonResult {
   id: number;
   name: string;
@@ -45,7 +57,12 @@ interface TmdbPaginatedResponse {
 }
 
 export interface TmdbSearchMultiResponse extends TmdbPaginatedResponse {
-  results: (TmdbMovieResult | TmdbTvResult | TmdbPersonResult)[];
+  results: (
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
+  )[];
 }
 
 export interface TmdbSearchMovieResponse extends TmdbPaginatedResponse {

server/constants/discover.ts

@@ -20,6 +20,8 @@ export enum DiscoverSliderType {
   TMDB_SEARCH,
   TMDB_STUDIO,
   TMDB_NETWORK,
+  TMDB_MOVIE_STREAMING_SERVICES,
+  TMDB_TV_STREAMING_SERVICES,
 }
 
 export const defaultSliders: Partial<DiscoverSlider>[] = [

server/entity/Media.ts

@@ -3,6 +3,8 @@ import SonarrAPI from '@server/api/servarr/sonarr';
 import { MediaStatus, MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import { getRepository } from '@server/datasource';
+import type { User } from '@server/entity/User';
+import { Watchlist } from '@server/entity/Watchlist';
 import type { DownloadingItem } from '@server/lib/downloadtracker';
 import downloadTracker from '@server/lib/downloadtracker';
 import { getSettings } from '@server/lib/settings';
@@ -12,7 +14,6 @@ import {
   Column,
   CreateDateColumn,
   Entity,
-  In,
   Index,
   OneToMany,
   PrimaryGeneratedColumn,
@@ -25,6 +26,7 @@ import Season from './Season';
 @Entity()
 class Media {
   public static async getRelatedMedia(
+    user: User | undefined,
     tmdbIds: number | number[]
   ): Promise<Media[]> {
     const mediaRepository = getRepository(Media);
@@ -37,9 +39,16 @@ class Media {
         finalIds = tmdbIds;
       }
 
-      const media = await mediaRepository.find({
+      const media = await mediaRepository
-        where: { tmdbId: In(finalIds) },
+        .createQueryBuilder('media')
-      });
+        .leftJoinAndSelect(
+          'media.watchlists',
+          'watchlist',
+          'media.id= watchlist.media and watchlist.requestedBy = :userId',
+          { userId: user?.id }
+        ) //,
+        .where(' media.tmdbId in (:...finalIds)', { finalIds })
+        .getMany();
 
       return media;
     } catch (e) {
@@ -94,6 +103,9 @@ class Media {
   @OneToMany(() => MediaRequest, (request) => request.media, { cascade: true })
   public requests: MediaRequest[];
 
+  @OneToMany(() => Watchlist, (watchlist) => watchlist.media)
+  public watchlists: null | Watchlist[];
+
   @OneToMany(() => Season, (season) => season.media, {
     cascade: true,
     eager: true,

server/entity/MediaRequest.ts

@@ -704,7 +704,7 @@ export class MediaRequest {
 
         let rootFolder = radarrSettings.activeDirectory;
         let qualityProfile = radarrSettings.activeProfileId;
-        let tags = radarrSettings.tags;
+        let tags = radarrSettings.tags ? [...radarrSettings.tags] : [];
 
         if (
           this.rootFolder &&
@@ -764,6 +764,38 @@ export class MediaRequest {
           return;
         }
 
+        if (radarrSettings.tagRequests) {
+          let userTag = (await radarr.getTags()).find((v) =>
+            v.label.startsWith(this.requestedBy.id + ' - ')
+          );
+          if (!userTag) {
+            logger.info(`Requester has no active tag. Creating new`, {
+              label: 'Media Request',
+              requestId: this.id,
+              mediaId: this.media.id,
+              userId: this.requestedBy.id,
+              newTag:
+                this.requestedBy.id + ' - ' + this.requestedBy.displayName,
+            });
+            userTag = await radarr.createTag({
+              label: this.requestedBy.id + ' - ' + this.requestedBy.displayName,
+            });
+          }
+          if (userTag.id) {
+            if (!tags?.find((v) => v === userTag?.id)) {
+              tags?.push(userTag.id);
+            }
+          } else {
+            logger.warn(`Requester has no tag and failed to add one`, {
+              label: 'Media Request',
+              requestId: this.id,
+              mediaId: this.media.id,
+              userId: this.requestedBy.id,
+              radarrServer: radarrSettings.hostname + ':' + radarrSettings.port,
+            });
+          }
+        }
+
         if (
           media[this.is4k ? 'status4k' : 'status'] === MediaStatus.AVAILABLE
         ) {
@@ -970,7 +1002,11 @@ export class MediaRequest {
         let tags =
           seriesType === 'anime'
             ? sonarrSettings.animeTags
-            : sonarrSettings.tags;
+              ? [...sonarrSettings.animeTags]
+              : []
+            : sonarrSettings.tags
+            ? [...sonarrSettings.tags]
+            : [];
 
         if (
           this.rootFolder &&
@@ -1022,6 +1058,38 @@ export class MediaRequest {
           });
         }
 
+        if (sonarrSettings.tagRequests) {
+          let userTag = (await sonarr.getTags()).find((v) =>
+            v.label.startsWith(this.requestedBy.id + ' - ')
+          );
+          if (!userTag) {
+            logger.info(`Requester has no active tag. Creating new`, {
+              label: 'Media Request',
+              requestId: this.id,
+              mediaId: this.media.id,
+              userId: this.requestedBy.id,
+              newTag:
+                this.requestedBy.id + ' - ' + this.requestedBy.displayName,
+            });
+            userTag = await sonarr.createTag({
+              label: this.requestedBy.id + ' - ' + this.requestedBy.displayName,
+            });
+          }
+          if (userTag.id) {
+            if (!tags?.find((v) => v === userTag?.id)) {
+              tags?.push(userTag.id);
+            }
+          } else {
+            logger.warn(`Requester has no tag and failed to add one`, {
+              label: 'Media Request',
+              requestId: this.id,
+              mediaId: this.media.id,
+              userId: this.requestedBy.id,
+              sonarrServer: sonarrSettings.hostname + ':' + sonarrSettings.port,
+            });
+          }
+        }
+
         const sonarrSeriesOptions: AddSeriesOptions = {
           profileId: qualityProfile,
           languageProfileId: languageProfile,

server/entity/User.ts

@@ -1,6 +1,7 @@
 import { MediaRequestStatus, MediaType } from '@server/constants/media';
 import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
+import { Watchlist } from '@server/entity/Watchlist';
 import type { QuotaResponse } from '@server/interfaces/api/userInterfaces';
 import PreparedEmail from '@server/lib/email';
 import type { PermissionCheckOptions } from '@server/lib/permissions';
@@ -103,6 +104,9 @@ export class User {
   @OneToMany(() => MediaRequest, (request) => request.requestedBy)
   public requests: MediaRequest[];
 
+  @OneToMany(() => Watchlist, (watchlist) => watchlist.requestedBy)
+  public watchlists: Watchlist[];
+
   @Column({ nullable: true })
   public movieQuotaLimit?: number;
 

server/entity/Watchlist.ts

@@ -0,0 +1,157 @@
+import TheMovieDb from '@server/api/themoviedb';
+import { MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
+import Media from '@server/entity/Media';
+import { User } from '@server/entity/User';
+import type { WatchlistItem } from '@server/interfaces/api/discoverInterfaces';
+import logger from '@server/logger';
+import {
+  Column,
+  CreateDateColumn,
+  Entity,
+  Index,
+  ManyToOne,
+  PrimaryGeneratedColumn,
+  Unique,
+  UpdateDateColumn,
+} from 'typeorm';
+import type { ZodNumber, ZodOptional, ZodString } from 'zod';
+
+export class DuplicateWatchlistRequestError extends Error {}
+export class NotFoundError extends Error {
+  constructor(message = 'Not found') {
+    super(message);
+    this.name = 'NotFoundError';
+  }
+}
+
+@Entity()
+@Unique('UNIQUE_USER_DB', ['tmdbId', 'requestedBy'])
+export class Watchlist implements WatchlistItem {
+  @PrimaryGeneratedColumn()
+  id: number;
+
+  @Column({ type: 'varchar' })
+  public ratingKey = '';
+
+  @Column({ type: 'varchar' })
+  public mediaType: MediaType;
+
+  @Column({ type: 'varchar' })
+  title = '';
+
+  @Column()
+  @Index()
+  public tmdbId: number;
+
+  @ManyToOne(() => User, (user) => user.watchlists, {
+    eager: true,
+    onDelete: 'CASCADE',
+  })
+  public requestedBy: User;
+
+  @ManyToOne(() => Media, (media) => media.watchlists, {
+    eager: true,
+    onDelete: 'CASCADE',
+  })
+  public media: Media;
+
+  @CreateDateColumn()
+  public createdAt: Date;
+
+  @UpdateDateColumn()
+  public updatedAt: Date;
+
+  constructor(init?: Partial<Watchlist>) {
+    Object.assign(this, init);
+  }
+
+  public static async createWatchlist({
+    watchlistRequest,
+    user,
+  }: {
+    watchlistRequest: {
+      mediaType: MediaType;
+      ratingKey?: ZodOptional<ZodString>['_output'];
+      title?: ZodOptional<ZodString>['_output'];
+      tmdbId: ZodNumber['_output'];
+    };
+    user: User;
+  }): Promise<Watchlist> {
+    const watchlistRepository = getRepository(this);
+    const mediaRepository = getRepository(Media);
+    const tmdb = new TheMovieDb();
+
+    const tmdbMedia =
+      watchlistRequest.mediaType === MediaType.MOVIE
+        ? await tmdb.getMovie({ movieId: watchlistRequest.tmdbId })
+        : await tmdb.getTvShow({ tvId: watchlistRequest.tmdbId });
+
+    const existing = await watchlistRepository
+      .createQueryBuilder('watchlist')
+      .leftJoinAndSelect('watchlist.requestedBy', 'user')
+      .where('user.id = :userId', { userId: user.id })
+      .andWhere('watchlist.tmdbId = :tmdbId', {
+        tmdbId: watchlistRequest.tmdbId,
+      })
+      .andWhere('watchlist.mediaType = :mediaType', {
+        mediaType: watchlistRequest.mediaType,
+      })
+      .getMany();
+
+    if (existing && existing.length > 0) {
+      logger.warn('Duplicate request for watchlist blocked', {
+        tmdbId: watchlistRequest.tmdbId,
+        mediaType: watchlistRequest.mediaType,
+        label: 'Watchlist',
+      });
+
+      throw new DuplicateWatchlistRequestError();
+    }
+
+    let media = await mediaRepository.findOne({
+      where: {
+        tmdbId: watchlistRequest.tmdbId,
+        mediaType: watchlistRequest.mediaType,
+      },
+    });
+
+    if (!media) {
+      media = new Media({
+        tmdbId: tmdbMedia.id,
+        tvdbId: tmdbMedia.external_ids.tvdb_id,
+        mediaType: watchlistRequest.mediaType,
+      });
+    }
+
+    const watchlist = new this({
+      ...watchlistRequest,
+      requestedBy: user,
+      media,
+    });
+
+    await mediaRepository.save(media);
+    await watchlistRepository.save(watchlist);
+    return watchlist;
+  }
+
+  public static async deleteWatchlist(
+    tmdbId: Watchlist['tmdbId'],
+    user: User
+  ): Promise<Watchlist | null> {
+    const watchlistRepository = getRepository(this);
+    const watchlist = await watchlistRepository.findOneBy({
+      tmdbId,
+      requestedBy: { id: user.id },
+    });
+    if (!watchlist) {
+      throw new NotFoundError('not Found');
+    }
+
+    if (watchlist) {
+      await watchlistRepository.delete(watchlist.id);
+    }
+
+    return watchlist;
+  }
+}

server/interfaces/api/watchlistCreate.ts

@@ -0,0 +1,9 @@
+import { MediaType } from '@server/constants/media';
+import { z } from 'zod';
+
+export const watchlistCreate = z.object({
+  ratingKey: z.coerce.string().optional(),
+  tmdbId: z.coerce.number(),
+  mediaType: z.nativeEnum(MediaType),
+  title: z.coerce.string().optional(),
+});

server/lib/availabilitySync.ts

@@ -1,7 +1,8 @@
 import type { PlexMetadata } from '@server/api/plexapi';
 import PlexAPI from '@server/api/plexapi';
+import type { RadarrMovie } from '@server/api/servarr/radarr';
 import RadarrAPI from '@server/api/servarr/radarr';
-import type { SonarrSeason } from '@server/api/servarr/sonarr';
+import type { SonarrSeason, SonarrSeries } from '@server/api/servarr/sonarr';
 import SonarrAPI from '@server/api/servarr/sonarr';
 import { MediaStatus } from '@server/constants/media';
 import { getRepository } from '@server/datasource';
@@ -47,158 +48,150 @@ class AvailabilitySync {
 
     try {
       for await (const media of this.loadAvailableMediaPaginated(pageSize)) {
-        try {
+        if (!this.running) {
-          if (!this.running) {
+          throw new Error('Job aborted');
-            throw new Error('Job aborted');
+        }
-          }
 
-          const mediaExists = await this.mediaExists(media);
+        const mediaExists = await this.mediaExists(media);
 
-          //We can not delete media so if both versions do not exist, we will change both columns to unknown or null
+        // We can not delete media so if both versions do not exist, we will change both columns to unknown or null
-          if (!mediaExists) {
+        if (!mediaExists) {
-            if (
+          if (
-              media.status !== MediaStatus.UNKNOWN ||
+            media.status !== MediaStatus.UNKNOWN ||
-              media.status4k !== MediaStatus.UNKNOWN
+            media.status4k !== MediaStatus.UNKNOWN
-            ) {
+          ) {
-              const request = await requestRepository.find({
+            const request = await requestRepository.find({
-                relations: {
+              relations: {
-                  media: true,
+                media: true,
-                },
+              },
-                where: { media: { id: media.id } },
+              where: { media: { id: media.id } },
-              });
-
-              logger.info(
-                `${
-                  media.mediaType === 'tv' ? media.tvdbId : media.tmdbId
-                } does not exist in any of your media instances. We will change its status to unknown.`,
-                { label: 'AvailabilitySync' }
-              );
-
-              await mediaRepository.update(media.id, {
-                status: MediaStatus.UNKNOWN,
-                status4k: MediaStatus.UNKNOWN,
-                serviceId: null,
-                serviceId4k: null,
-                externalServiceId: null,
-                externalServiceId4k: null,
-                externalServiceSlug: null,
-                externalServiceSlug4k: null,
-                ratingKey: null,
-                ratingKey4k: null,
-              });
-
-              await requestRepository.remove(request);
-            }
-          }
-
-          if (media.mediaType === 'tv') {
-            // ok, the show itself exists, but do all it's seasons?
-            const seasons = await seasonRepository.find({
-              where: [
-                { status: MediaStatus.AVAILABLE, media: { id: media.id } },
-                {
-                  status: MediaStatus.PARTIALLY_AVAILABLE,
-                  media: { id: media.id },
-                },
-                { status4k: MediaStatus.AVAILABLE, media: { id: media.id } },
-                {
-                  status4k: MediaStatus.PARTIALLY_AVAILABLE,
-                  media: { id: media.id },
-                },
-              ],
             });
 
-            let didDeleteSeasons = false;
+            logger.info(
-            for (const season of seasons) {
+              `Media ID ${media.id} does not exist in any of your media instances. Status will be changed to unknown.`,
-              if (
+              { label: 'AvailabilitySync' }
-                !mediaExists &&
+            );
-                (season.status !== MediaStatus.UNKNOWN ||
+
-                  season.status4k !== MediaStatus.UNKNOWN)
+            await mediaRepository.update(media.id, {
-              ) {
+              status: MediaStatus.UNKNOWN,
-                await seasonRepository.update(
+              status4k: MediaStatus.UNKNOWN,
-                  { id: season.id },
+              serviceId: null,
+              serviceId4k: null,
+              externalServiceId: null,
+              externalServiceId4k: null,
+              externalServiceSlug: null,
+              externalServiceSlug4k: null,
+              ratingKey: null,
+              ratingKey4k: null,
+            });
+
+            await requestRepository.remove(request);
+          }
+        }
+
+        if (media.mediaType === 'tv') {
+          // ok, the show itself exists, but do all it's seasons?
+          const seasons = await seasonRepository.find({
+            where: [
+              { status: MediaStatus.AVAILABLE, media: { id: media.id } },
+              {
+                status: MediaStatus.PARTIALLY_AVAILABLE,
+                media: { id: media.id },
+              },
+              { status4k: MediaStatus.AVAILABLE, media: { id: media.id } },
+              {
+                status4k: MediaStatus.PARTIALLY_AVAILABLE,
+                media: { id: media.id },
+              },
+            ],
+          });
+
+          let didDeleteSeasons = false;
+          for (const season of seasons) {
+            if (
+              !mediaExists &&
+              (season.status !== MediaStatus.UNKNOWN ||
+                season.status4k !== MediaStatus.UNKNOWN)
+            ) {
+              await seasonRepository.update(
+                { id: season.id },
+                {
+                  status: MediaStatus.UNKNOWN,
+                  status4k: MediaStatus.UNKNOWN,
+                }
+              );
+            } else {
+              const seasonExists = await this.seasonExists(media, season);
+
+              if (!seasonExists) {
+                logger.info(
+                  `Removing season ${season.seasonNumber}, media ID ${media.id} because it does not exist in any of your media instances.`,
+                  { label: 'AvailabilitySync' }
+                );
+
+                if (
+                  season.status !== MediaStatus.UNKNOWN ||
+                  season.status4k !== MediaStatus.UNKNOWN
+                ) {
+                  await seasonRepository.update(
+                    { id: season.id },
+                    {
+                      status: MediaStatus.UNKNOWN,
+                      status4k: MediaStatus.UNKNOWN,
+                    }
+                  );
+                }
+
+                const seasonToBeDeleted = await seasonRequestRepository.findOne(
                   {
-                    status: MediaStatus.UNKNOWN,
+                    relations: {
-                    status4k: MediaStatus.UNKNOWN,
+                      request: {
+                        media: true,
+                      },
+                    },
+                    where: {
+                      request: {
+                        media: {
+                          id: media.id,
+                        },
+                      },
+                      seasonNumber: season.seasonNumber,
+                    },
                   }
                 );
-              } else {
-                const seasonExists = await this.seasonExists(media, season);
 
-                if (!seasonExists) {
+                if (seasonToBeDeleted) {
-                  logger.info(
+                  await seasonRequestRepository.remove(seasonToBeDeleted);
-                    `Removing season ${season.seasonNumber}, media id: ${media.tvdbId} because it does not exist in any of your media instances.`,
-                    { label: 'AvailabilitySync' }
-                  );
-
-                  if (
-                    season.status !== MediaStatus.UNKNOWN ||
-                    season.status4k !== MediaStatus.UNKNOWN
-                  ) {
-                    await seasonRepository.update(
-                      { id: season.id },
-                      {
-                        status: MediaStatus.UNKNOWN,
-                        status4k: MediaStatus.UNKNOWN,
-                      }
-                    );
-                  }
-
-                  const seasonToBeDeleted =
-                    await seasonRequestRepository.findOne({
-                      relations: {
-                        request: {
-                          media: true,
-                        },
-                      },
-                      where: {
-                        request: {
-                          media: {
-                            id: media.id,
-                          },
-                        },
-                        seasonNumber: season.seasonNumber,
-                      },
-                    });
-
-                  if (seasonToBeDeleted) {
-                    await seasonRequestRepository.remove(seasonToBeDeleted);
-                  }
-
-                  didDeleteSeasons = true;
                 }
+
+                didDeleteSeasons = true;
               }
+            }
 
-              if (didDeleteSeasons) {
+            if (didDeleteSeasons) {
-                if (
+              if (
-                  media.status === MediaStatus.AVAILABLE ||
+                media.status === MediaStatus.AVAILABLE ||
-                  media.status4k === MediaStatus.AVAILABLE
+                media.status4k === MediaStatus.AVAILABLE
-                ) {
+              ) {
-                  logger.info(
+                logger.info(
-                    `Marking media id: ${media.tvdbId} as PARTIALLY_AVAILABLE because we deleted some of its seasons.`,
+                  `Marking media ID ${media.id} as PARTIALLY_AVAILABLE because season removal has occurred.`,
-                    { label: 'AvailabilitySync' }
+                  { label: 'AvailabilitySync' }
-                  );
+                );
 
-                  if (media.status === MediaStatus.AVAILABLE) {
+                if (media.status === MediaStatus.AVAILABLE) {
-                    await mediaRepository.update(media.id, {
+                  await mediaRepository.update(media.id, {
-                      status: MediaStatus.PARTIALLY_AVAILABLE,
+                    status: MediaStatus.PARTIALLY_AVAILABLE,
-                    });
+                  });
-                  }
+                }
 
-                  if (media.status4k === MediaStatus.AVAILABLE) {
+                if (media.status4k === MediaStatus.AVAILABLE) {
-                    await mediaRepository.update(media.id, {
+                  await mediaRepository.update(media.id, {
-                      status4k: MediaStatus.PARTIALLY_AVAILABLE,
+                    status4k: MediaStatus.PARTIALLY_AVAILABLE,
-                    });
+                  });
-                  }
                 }
               }
             }
           }
-        } catch (ex) {
-          logger.error('Failure with media.', {
-            errorMessage: ex.message,
-            label: 'AvailabilitySync',
-          });
         }
       }
     } catch (ex) {
@@ -254,9 +247,9 @@ class AvailabilitySync {
     });
 
     logger.info(
-      `${media.tmdbId} does not exist in your ${is4k ? '4k' : 'non-4k'} ${
+      `Media ID ${media.id} does not exist in your ${is4k ? '4k' : 'non-4k'} ${
-        isTVType ? 'sonarr' : 'radarr'
+        isTVType ? 'Sonarr' : 'Radarr'
-      } and plex instance. We will change its status to unknown.`,
+      } and Plex instance. Status will be changed to unknown.`,
       { label: 'AvailabilitySync' }
     );
 
@@ -306,46 +299,70 @@ class AvailabilitySync {
         apiKey: server.apiKey,
         url: RadarrAPI.buildUrl(server, '/api/v3'),
       });
-      const meta = await api.getMovieByTmdbId(media.tmdbId);
+      try {
+        // Check if both exist or if a single non-4k or 4k exists
+        // If both do not exist we will return false
 
-      //check if both exist or if a single non-4k or 4k exists
+        let meta: RadarrMovie | undefined;
-      //if both do not exist we will return false
-      if (!server.is4k && !meta.id) {
-        existsInRadarr = false;
-      }
 
-      if (server.is4k && !meta.id) {
+        if (!server.is4k && media.externalServiceId) {
-        existsInRadarr4k = false;
+          meta = await api.getMovie({ id: media.externalServiceId });
+        }
+
+        if (server.is4k && media.externalServiceId4k) {
+          meta = await api.getMovie({ id: media.externalServiceId4k });
+        }
+
+        if (!server.is4k && (!meta || !meta.hasFile)) {
+          existsInRadarr = false;
+        }
+
+        if (server.is4k && (!meta || !meta.hasFile)) {
+          existsInRadarr4k = false;
+        }
+      } catch (ex) {
+        logger.debug(
+          `Failure retrieving media ID ${media.id} from your ${
+            !server.is4k ? 'non-4K' : '4K'
+          } Radarr.`,
+          {
+            errorMessage: ex.message,
+            label: 'AvailabilitySync',
+          }
+        );
+        if (!server.is4k) {
+          existsInRadarr = false;
+        }
+
+        if (server.is4k) {
+          existsInRadarr4k = false;
+        }
       }
     }
 
-    if (existsInRadarr && existsInRadarr4k) {
+    // If only a single non-4k or 4k exists, then change entity columns accordingly
-      return true;
+    // Related media request will then be deleted
-    }
+    if (
-
+      !existsInRadarr &&
-    if (!existsInRadarr && existsInPlex) {
+      (existsInRadarr4k || existsInPlex4k) &&
-      return true;
+      !existsInPlex
-    }
+    ) {
-
-    if (!existsInRadarr4k && existsInPlex4k) {
-      return true;
-    }
-
-    //if only a single non-4k or 4k exists, then change entity columns accordingly
-    //related media request will then be deleted
-    if (!existsInRadarr && existsInRadarr4k && !existsInPlex) {
       if (media.status !== MediaStatus.UNKNOWN) {
         this.mediaUpdater(media, false);
       }
     }
 
-    if (existsInRadarr && !existsInRadarr4k && !existsInPlex4k) {
+    if (
+      (existsInRadarr || existsInPlex) &&
+      !existsInRadarr4k &&
+      !existsInPlex4k
+    ) {
       if (media.status4k !== MediaStatus.UNKNOWN) {
         this.mediaUpdater(media, true);
       }
     }
 
-    if (existsInRadarr || existsInRadarr4k) {
+    if (existsInRadarr || existsInRadarr4k || existsInPlex || existsInPlex4k) {
       return true;
     }
 
@@ -357,10 +374,6 @@ class AvailabilitySync {
     existsInPlex: boolean,
     existsInPlex4k: boolean
   ): Promise<boolean> {
-    if (!media.tvdbId) {
-      return false;
-    }
-
     let existsInSonarr = true;
     let existsInSonarr4k = true;
 
@@ -369,49 +382,75 @@ class AvailabilitySync {
         apiKey: server.apiKey,
         url: SonarrAPI.buildUrl(server, '/api/v3'),
       });
+      try {
+        // Check if both exist or if a single non-4k or 4k exists
+        // If both do not exist we will return false
 
-      const meta = await api.getSeriesByTvdbId(media.tvdbId);
+        let meta: SonarrSeries | undefined;
 
-      this.sonarrSeasonsCache[`${server.id}-${media.tvdbId}`] = meta.seasons;
+        if (!server.is4k && media.externalServiceId) {
+          meta = await api.getSeriesById(media.externalServiceId);
+          this.sonarrSeasonsCache[`${server.id}-${media.externalServiceId}`] =
+            meta.seasons;
+        }
 
-      //check if both exist or if a single non-4k or 4k exists
+        if (server.is4k && media.externalServiceId4k) {
-      //if both do not exist we will return false
+          meta = await api.getSeriesById(media.externalServiceId4k);
-      if (!server.is4k && !meta.id) {
+          this.sonarrSeasonsCache[`${server.id}-${media.externalServiceId4k}`] =
-        existsInSonarr = false;
+            meta.seasons;
-      }
+        }
 
-      if (server.is4k && !meta.id) {
+        if (!server.is4k && (!meta || meta.statistics.episodeFileCount === 0)) {
-        existsInSonarr4k = false;
+          existsInSonarr = false;
+        }
+
+        if (server.is4k && (!meta || meta.statistics.episodeFileCount === 0)) {
+          existsInSonarr4k = false;
+        }
+      } catch (ex) {
+        logger.debug(
+          `Failure retrieving media ID ${media.id} from your ${
+            !server.is4k ? 'non-4K' : '4K'
+          } Sonarr.`,
+          {
+            errorMessage: ex.message,
+            label: 'AvailabilitySync',
+          }
+        );
+
+        if (!server.is4k) {
+          existsInSonarr = false;
+        }
+
+        if (server.is4k) {
+          existsInSonarr4k = false;
+        }
       }
     }
 
-    if (existsInSonarr && existsInSonarr4k) {
+    // If only a single non-4k or 4k exists, then change entity columns accordingly
-      return true;
+    // Related media request will then be deleted
-    }
+    if (
-
+      !existsInSonarr &&
-    if (!existsInSonarr && existsInPlex) {
+      (existsInSonarr4k || existsInPlex4k) &&
-      return true;
+      !existsInPlex
-    }
+    ) {
-
-    if (!existsInSonarr4k && existsInPlex4k) {
-      return true;
-    }
-
-    //if only a single non-4k or 4k exists, then change entity columns accordingly
-    //related media request will then be deleted
-    if (!existsInSonarr && existsInSonarr4k && !existsInPlex) {
       if (media.status !== MediaStatus.UNKNOWN) {
         this.mediaUpdater(media, false);
       }
     }
 
-    if (existsInSonarr && !existsInSonarr4k && !existsInPlex4k) {
+    if (
+      (existsInSonarr || existsInPlex) &&
+      !existsInSonarr4k &&
+      !existsInPlex4k
+    ) {
       if (media.status4k !== MediaStatus.UNKNOWN) {
         this.mediaUpdater(media, true);
       }
     }
 
-    if (existsInSonarr || existsInSonarr4k) {
+    if (existsInSonarr || existsInSonarr4k || existsInPlex || existsInPlex4k) {
       return true;
     }
 
@@ -424,10 +463,6 @@ class AvailabilitySync {
     seasonExistsInPlex: boolean,
     seasonExistsInPlex4k: boolean
   ): Promise<boolean> {
-    if (!media.tvdbId) {
-      return false;
-    }
-
     let seasonExistsInSonarr = true;
     let seasonExistsInSonarr4k = true;
 
@@ -441,35 +476,67 @@ class AvailabilitySync {
         url: SonarrAPI.buildUrl(server, '/api/v3'),
       });
 
-      const seasons =
+      try {
-        this.sonarrSeasonsCache[`${server.id}-${media.tvdbId}`] ??
+        // Here we can use the cache we built when we fetched the series with mediaExistsInSonarr
-        (await api.getSeriesByTvdbId(media.tvdbId)).seasons;
+        // If the cache does not have data, we will fetch with the api route
-      this.sonarrSeasonsCache[`${server.id}-${media.tvdbId}`] = seasons;
 
-      const hasMonitoredSeason = seasons.find(
+        let seasons: SonarrSeason[] =
-        ({ monitored, seasonNumber }) =>
+          this.sonarrSeasonsCache[
-          monitored && season.seasonNumber === seasonNumber
+            `${server.id}-${
-      );
+              !server.is4k ? media.externalServiceId : media.externalServiceId4k
+            }`
+          ];
 
-      if (!server.is4k && !hasMonitoredSeason) {
+        if (!server.is4k && media.externalServiceId) {
-        seasonExistsInSonarr = false;
+          seasons =
+            this.sonarrSeasonsCache[
+              `${server.id}-${media.externalServiceId}`
+            ] ?? (await api.getSeriesById(media.externalServiceId)).seasons;
+          this.sonarrSeasonsCache[`${server.id}-${media.externalServiceId}`] =
+            seasons;
+        }
+
+        if (server.is4k && media.externalServiceId4k) {
+          seasons =
+            this.sonarrSeasonsCache[
+              `${server.id}-${media.externalServiceId4k}`
+            ] ?? (await api.getSeriesById(media.externalServiceId4k)).seasons;
+          this.sonarrSeasonsCache[`${server.id}-${media.externalServiceId4k}`] =
+            seasons;
+        }
+
+        const seasonIsUnavailable = seasons?.find(
+          ({ seasonNumber, statistics }) =>
+            season.seasonNumber === seasonNumber &&
+            statistics?.episodeFileCount === 0
+        );
+
+        if (!server.is4k && seasonIsUnavailable) {
+          seasonExistsInSonarr = false;
+        }
+
+        if (server.is4k && seasonIsUnavailable) {
+          seasonExistsInSonarr4k = false;
+        }
+      } catch (ex) {
+        logger.debug(
+          `Failure retrieving media ID ${media.id} from your ${
+            !server.is4k ? 'non-4K' : '4K'
+          } Sonarr.`,
+          {
+            errorMessage: ex.message,
+            label: 'AvailabilitySync',
+          }
+        );
+
+        if (!server.is4k) {
+          seasonExistsInSonarr = false;
+        }
+
+        if (server.is4k) {
+          seasonExistsInSonarr4k = false;
+        }
       }
-
-      if (server.is4k && !hasMonitoredSeason) {
-        seasonExistsInSonarr4k = false;
-      }
-    }
-
-    if (seasonExistsInSonarr && seasonExistsInSonarr4k) {
-      return true;
-    }
-
-    if (!seasonExistsInSonarr && seasonExistsInPlex) {
-      return true;
-    }
-
-    if (!seasonExistsInSonarr4k && seasonExistsInPlex4k) {
-      return true;
     }
 
     const seasonToBeDeleted = await seasonRequestRepository.findOne({
@@ -489,16 +556,16 @@ class AvailabilitySync {
       },
     });
 
-    //if season does not exist, we will change status to unknown and delete related season request
+    // If season does not exist, we will change status to unknown and delete related season request
-    //if parent media request is empty(all related seasons have been removed), parent is automatically deleted
+    // If parent media request is empty(all related seasons have been removed), parent is automatically deleted
     if (
       !seasonExistsInSonarr &&
-      seasonExistsInSonarr4k &&
+      (seasonExistsInSonarr4k || seasonExistsInPlex4k) &&
       !seasonExistsInPlex
     ) {
       if (season.status !== MediaStatus.UNKNOWN) {
         logger.info(
-          `${media.tvdbId}, season: ${season.seasonNumber} does not exist in your non-4k sonarr and plex instance. We will change its status to unknown.`,
+          `Season ${season.seasonNumber}, media ID ${media.id} does not exist in your non-4k Sonarr and Plex instance. Status will be changed to unknown.`,
           { label: 'AvailabilitySync' }
         );
         await seasonRepository.update(season.id, {
@@ -511,7 +578,7 @@ class AvailabilitySync {
 
         if (media.status === MediaStatus.AVAILABLE) {
           logger.info(
-            `Marking media id: ${media.tvdbId} as PARTIALLY_AVAILABLE because we deleted one of its seasons.`,
+            `Marking media ID ${media.id} as PARTIALLY_AVAILABLE because season removal has occurred.`,
             { label: 'AvailabilitySync' }
           );
           await mediaRepository.update(media.id, {
@@ -522,13 +589,13 @@ class AvailabilitySync {
     }
 
     if (
-      seasonExistsInSonarr &&
+      (seasonExistsInSonarr || seasonExistsInPlex) &&
       !seasonExistsInSonarr4k &&
       !seasonExistsInPlex4k
     ) {
       if (season.status4k !== MediaStatus.UNKNOWN) {
         logger.info(
-          `${media.tvdbId}, season: ${season.seasonNumber} does not exist in your 4k sonarr and plex instance. We will change its status to unknown.`,
+          `Season ${season.seasonNumber}, media ID ${media.id} does not exist in your 4k Sonarr and Plex instance. Status will be changed to unknown.`,
           { label: 'AvailabilitySync' }
         );
         await seasonRepository.update(season.id, {
@@ -541,7 +608,7 @@ class AvailabilitySync {
 
         if (media.status4k === MediaStatus.AVAILABLE) {
           logger.info(
-            `Marking media id: ${media.tvdbId} as PARTIALLY_AVAILABLE because we deleted one of its seasons.`,
+            `Marking media ID ${media.id} as PARTIALLY_AVAILABLE because season removal has occurred.`,
             { label: 'AvailabilitySync' }
           );
           await mediaRepository.update(media.id, {
@@ -551,7 +618,12 @@ class AvailabilitySync {
       }
     }
 
-    if (seasonExistsInSonarr || seasonExistsInSonarr4k) {
+    if (
+      seasonExistsInSonarr ||
+      seasonExistsInSonarr4k ||
+      seasonExistsInPlex ||
+      seasonExistsInPlex4k
+    ) {
       return true;
     }
 
@@ -565,7 +637,7 @@ class AvailabilitySync {
     let existsInPlex = false;
     let existsInPlex4k = false;
 
-    //check each plex instance to see if media exists
+    // Check each plex instance to see if media exists
     try {
       if (ratingKey) {
         const meta = await this.plexClient?.getMetadata(ratingKey);
@@ -573,6 +645,7 @@ class AvailabilitySync {
           existsInPlex = true;
         }
       }
+
       if (ratingKey4k) {
         const meta4k = await this.plexClient?.getMetadata(ratingKey4k);
         if (meta4k) {
@@ -580,18 +653,17 @@ class AvailabilitySync {
         }
       }
     } catch (ex) {
-      // TODO: oof, not the nicest way of handling this, but plex-api does not leave us with any other options...
       if (!ex.message.includes('response code: 404')) {
         throw ex;
       }
     }
-    //base case for if both media versions exist in plex
+    // Base case if both media versions exist in plex
     if (existsInPlex && existsInPlex4k) {
       return true;
     }
 
-    //we then check radarr or sonarr has that specific media. If not, then we will move to delete
+    // We then check radarr or sonarr has that specific media. If not, then we will move to delete
-    //if a non-4k or 4k version exists in at least one of the instances, we will only update that specific version
+    // If a non-4k or 4k version exists in at least one of the instances, we will only update that specific version
     if (media.mediaType === 'movie') {
       const existsInRadarr = await this.mediaExistsInRadarr(
         media,
@@ -599,10 +671,10 @@ class AvailabilitySync {
         existsInPlex4k
       );
 
-      //if true, media exists in at least one radarr or plex instance.
+      // If true, media exists in at least one radarr or plex instance.
       if (existsInRadarr) {
         logger.warn(
-          `${media.tmdbId} exists in at least one radarr or plex instance. Media will be updated if set to available.`,
+          `${media.id} exists in at least one Radarr or Plex instance. Media will be updated if set to available.`,
           {
             label: 'AvailabilitySync',
           }
@@ -619,10 +691,10 @@ class AvailabilitySync {
         existsInPlex4k
       );
 
-      //if true, media exists in at least one sonarr or plex instance.
+      // If true, media exists in at least one sonarr or plex instance.
       if (existsInSonarr) {
         logger.warn(
-          `${media.tvdbId} exists in at least one sonarr or plex instance. Media will be updated if set to available.`,
+          `${media.id} exists in at least one Sonarr or Plex instance. Media will be updated if set to available.`,
           {
             label: 'AvailabilitySync',
           }
@@ -672,7 +744,7 @@ class AvailabilitySync {
       }
     }
 
-    //base case for if both season versions exist in plex
+    // Base case if both season versions exist in plex
     if (seasonExistsInPlex && seasonExistsInPlex4k) {
       return true;
     }
@@ -686,7 +758,7 @@ class AvailabilitySync {
 
     if (existsInSonarr) {
       logger.warn(
-        `${media.tvdbId}, season: ${season.seasonNumber} exists in at least one sonarr or plex instance. Media will be updated if set to available.`,
+        `Season ${season.seasonNumber}, media ID ${media.id} exists in at least one Sonarr or Plex instance. Media will be updated if set to available.`,
         {
           label: 'AvailabilitySync',
         }

server/lib/settings.ts

@@ -69,6 +69,7 @@ export interface DVRSettings {
   externalUrl?: string;
   syncEnabled: boolean;
   preventSearch: boolean;
+  tagRequests: boolean;
 }
 
 export interface RadarrSettings extends DVRSettings {

server/lib/watchlistsync.ts

@@ -65,6 +65,7 @@ class WatchlistSync {
     const response = await plexTvApi.getWatchlist({ size: 200 });
 
     const mediaItems = await Media.getRelatedMedia(
+      user,
       response.items.map((i) => i.tmdbId)
     );
 

server/migration/1682608634546-AddWatchlists.ts

@@ -0,0 +1,19 @@
+import type { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddWatchlists1682608634546 implements MigrationInterface {
+  name = 'AddWatchlists1682608634546';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "watchlist" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "ratingKey" varchar NOT NULL, "mediaType" varchar NOT NULL, "title" varchar NOT NULL, "tmdbId" integer NOT NULL, "createdAt" datetime NOT NULL DEFAULT (datetime('now')), "updatedAt" datetime NOT NULL DEFAULT (datetime('now')), "requestedById" integer, "mediaId" integer, CONSTRAINT "UNIQUE_USER_DB" UNIQUE ("tmdbId", "requestedById"))`
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_939f205946256cc0d2a1ac51a8" ON "watchlist" ("tmdbId") `
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP INDEX "IDX_939f205946256cc0d2a1ac51a8"`);
+    await queryRunner.query(`DROP TABLE "watchlist"`);
+  }
+}

server/models/Search.ts

@@ -1,4 +1,5 @@
 import type {
+  TmdbCollectionResult,
   TmdbMovieDetails,
   TmdbMovieResult,
   TmdbPersonDetails,
@@ -9,7 +10,7 @@ import type {
 import { MediaType as MainMediaType } from '@server/constants/media';
 import type Media from '@server/entity/Media';
 
-export type MediaType = 'tv' | 'movie' | 'person';
+export type MediaType = 'tv' | 'movie' | 'person' | 'collection';
 
 interface SearchResult {
   id: number;
@@ -43,6 +44,18 @@ export interface TvResult extends SearchResult {
   firstAirDate: string;
 }
 
+export interface CollectionResult {
+  id: number;
+  mediaType: 'collection';
+  title: string;
+  originalTitle: string;
+  adult: boolean;
+  posterPath?: string;
+  backdropPath?: string;
+  overview: string;
+  originalLanguage: string;
+}
+
 export interface PersonResult {
   id: number;
   name: string;
@@ -53,7 +66,7 @@ export interface PersonResult {
   knownFor: (MovieResult | TvResult)[];
 }
 
-export type Results = MovieResult | TvResult | PersonResult;
+export type Results = MovieResult | TvResult | PersonResult | CollectionResult;
 
 export const mapMovieResult = (
   movieResult: TmdbMovieResult,
@@ -99,6 +112,20 @@ export const mapTvResult = (
   mediaInfo: media,
 });
 
+export const mapCollectionResult = (
+  collectionResult: TmdbCollectionResult
+): CollectionResult => ({
+  id: collectionResult.id,
+  mediaType: collectionResult.media_type || 'collection',
+  adult: collectionResult.adult,
+  originalLanguage: collectionResult.original_language,
+  originalTitle: collectionResult.original_title,
+  title: collectionResult.title,
+  overview: collectionResult.overview,
+  backdropPath: collectionResult.backdrop_path,
+  posterPath: collectionResult.poster_path,
+});
+
 export const mapPersonResult = (
   personResult: TmdbPersonResult
 ): PersonResult => ({
@@ -118,7 +145,12 @@ export const mapPersonResult = (
 });
 
 export const mapSearchResults = (
-  results: (TmdbMovieResult | TmdbTvResult | TmdbPersonResult)[],
+  results: (
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
+  )[],
   media?: Media[]
 ): Results[] =>
   results.map((result) => {
@@ -139,6 +171,8 @@ export const mapSearchResults = (
               req.tmdbId === result.id && req.mediaType === MainMediaType.TV
           )
         );
+      case 'collection':
+        return mapCollectionResult(result);
       default:
         return mapPersonResult(result);
     }

server/repositories/watchlist.repository.ts

@@ -0,0 +1,11 @@
+import { getRepository } from '@server/datasource';
+import { Watchlist } from '@server/entity/Watchlist';
+
+export const UserRepository = getRepository(Watchlist).extend({
+  // findByName(firstName: string, lastName: string) {
+  //   return this.createQueryBuilder("user")
+  //     .where("user.firstName = :firstName", { firstName })
+  //     .andWhere("user.lastName = :lastName", { lastName })
+  //     .getMany()
+  // },
+});

server/routes/auth.ts

@@ -380,7 +380,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
     return res.status(200).json(user?.filter() ?? {});
   } catch (e) {
     if (e.message === 'Unauthorized') {
-      logger.info(
+      logger.warn(
         'Failed login attempt from user with incorrect Jellyfin credentials',
         {
           label: 'Auth',

server/routes/collection.ts

@@ -16,6 +16,7 @@ collectionRoutes.get<{ id: string }>('/:id', async (req, res, next) => {
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       collection.parts.map((part) => part.id)
     );
 

server/routes/discover.ts

@@ -6,6 +6,7 @@ import { MediaType } from '@server/constants/media';
 import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
 import { User } from '@server/entity/User';
+import { Watchlist } from '@server/entity/Watchlist';
 import type {
   GenreSliderItem,
   WatchlistResponse,
@@ -14,12 +15,13 @@ import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import { mapProductionCompany } from '@server/models/Movie';
 import {
+  mapCollectionResult,
   mapMovieResult,
   mapPersonResult,
   mapTvResult,
 } from '@server/models/Search';
 import { mapNetwork } from '@server/models/Tv';
-import { isMovie, isPerson } from '@server/utils/typeHelpers';
+import { isCollection, isMovie, isPerson } from '@server/utils/typeHelpers';
 import { Router } from 'express';
 import { sortBy } from 'lodash';
 import { z } from 'zod';
@@ -64,6 +66,8 @@ const QueryFilterOptions = z.object({
   withRuntimeLte: z.coerce.string().optional(),
   voteAverageGte: z.coerce.string().optional(),
   voteAverageLte: z.coerce.string().optional(),
+  voteCountGte: z.coerce.string().optional(),
+  voteCountLte: z.coerce.string().optional(),
   network: z.coerce.string().optional(),
   watchProviders: z.coerce.string().optional(),
   watchRegion: z.coerce.string().optional(),
@@ -95,11 +99,14 @@ discoverRoutes.get('/movies', async (req, res, next) => {
       withRuntimeLte: query.withRuntimeLte,
       voteAverageGte: query.voteAverageGte,
       voteAverageLte: query.voteAverageLte,
+      voteCountGte: query.voteCountGte,
+      voteCountLte: query.voteCountLte,
       watchProviders: query.watchProviders,
       watchRegion: query.watchRegion,
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       data.results.map((result) => result.id)
     );
 
@@ -164,6 +171,7 @@ discoverRoutes.get<{ language: string }>(
       });
 
       const media = await Media.getRelatedMedia(
+        req.user,
         data.results.map((result) => result.id)
       );
 
@@ -221,6 +229,7 @@ discoverRoutes.get<{ genreId: string }>(
       });
 
       const media = await Media.getRelatedMedia(
+        req.user,
         data.results.map((result) => result.id)
       );
 
@@ -268,6 +277,7 @@ discoverRoutes.get<{ studioId: string }>(
       });
 
       const media = await Media.getRelatedMedia(
+        req.user,
         data.results.map((result) => result.id)
       );
 
@@ -317,6 +327,7 @@ discoverRoutes.get('/movies/upcoming', async (req, res, next) => {
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       data.results.map((result) => result.id)
     );
 
@@ -370,11 +381,14 @@ discoverRoutes.get('/tv', async (req, res, next) => {
       withRuntimeLte: query.withRuntimeLte,
       voteAverageGte: query.voteAverageGte,
       voteAverageLte: query.voteAverageLte,
+      voteCountGte: query.voteCountGte,
+      voteCountLte: query.voteCountLte,
       watchProviders: query.watchProviders,
       watchRegion: query.watchRegion,
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       data.results.map((result) => result.id)
     );
 
@@ -438,6 +452,7 @@ discoverRoutes.get<{ language: string }>(
       });
 
       const media = await Media.getRelatedMedia(
+        req.user,
         data.results.map((result) => result.id)
       );
 
@@ -495,6 +510,7 @@ discoverRoutes.get<{ genreId: string }>(
       });
 
       const media = await Media.getRelatedMedia(
+        req.user,
         data.results.map((result) => result.id)
       );
 
@@ -542,6 +558,7 @@ discoverRoutes.get<{ networkId: string }>(
       });
 
       const media = await Media.getRelatedMedia(
+        req.user,
         data.results.map((result) => result.id)
       );
 
@@ -591,6 +608,7 @@ discoverRoutes.get('/tv/upcoming', async (req, res, next) => {
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       data.results.map((result) => result.id)
     );
 
@@ -629,6 +647,7 @@ discoverRoutes.get('/trending', async (req, res, next) => {
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       data.results.map((result) => result.id)
     );
 
@@ -647,6 +666,8 @@ discoverRoutes.get('/trending', async (req, res, next) => {
             )
           : isPerson(result)
           ? mapPersonResult(result)
+          : isCollection(result)
+          ? mapCollectionResult(result)
           : mapTvResult(
               result,
               media.find(
@@ -681,6 +702,7 @@ discoverRoutes.get<{ keywordId: string }>(
       });
 
       const media = await Media.getRelatedMedia(
+        req.user,
         data.results.map((result) => result.id)
       );
 
@@ -813,6 +835,25 @@ discoverRoutes.get<Record<string, unknown>, WatchlistResponse>(
       select: ['id', 'plexToken'],
     });
 
+    if (activeUser) {
+      const [result, total] = await getRepository(Watchlist).findAndCount({
+        where: { requestedBy: { id: activeUser?.id } },
+        relations: {
+          /*requestedBy: true,media:true*/
+        },
+        // loadRelationIds: true,
+        take: itemsPerPage,
+        skip: offset,
+      });
+      if (total) {
+        return res.json({
+          page: page,
+          totalPages: total / itemsPerPage,
+          totalResults: total,
+          results: result,
+        });
+      }
+    }
     if (!activeUser?.plexToken) {
       // We will just return an empty array if the user has no Plex token
       return res.json({

server/routes/index.ts

@@ -15,6 +15,7 @@ import { mapWatchProviderDetails } from '@server/models/common';
 import { mapProductionCompany } from '@server/models/Movie';
 import { mapNetwork } from '@server/models/Tv';
 import settingsRoutes from '@server/routes/settings';
+import watchlistRoutes from '@server/routes/watchlist';
 import { appDataPath, appDataStatus } from '@server/utils/appDataVolume';
 import { getAppVersion, getCommitTag } from '@server/utils/appVersion';
 import restartFlag from '@server/utils/restartFlag';
@@ -116,6 +117,7 @@ router.use('/settings', isAuthenticated(Permission.ADMIN), settingsRoutes);
 router.use('/search', isAuthenticated(), searchRoutes);
 router.use('/discover', isAuthenticated(), discoverRoutes);
 router.use('/request', isAuthenticated(), requestRoutes);
+router.use('/watchlist', isAuthenticated(), watchlistRoutes);
 router.use('/movie', isAuthenticated(), movieRoutes);
 router.use('/tv', isAuthenticated(), tvRoutes);
 router.use('/media', isAuthenticated(), mediaRoutes);

server/routes/movie.ts

@@ -45,6 +45,7 @@ movieRoutes.get('/:id/recommendations', async (req, res, next) => {
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       results.results.map((result) => result.id)
     );
 
@@ -86,6 +87,7 @@ movieRoutes.get('/:id/similar', async (req, res, next) => {
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       results.results.map((result) => result.id)
     );
 

server/routes/person.ts

@@ -42,10 +42,12 @@ personRoutes.get('/:id/combined_credits', async (req, res, next) => {
     });
 
     const castMedia = await Media.getRelatedMedia(
+      req.user,
       combinedCredits.cast.map((result) => result.id)
     );
 
     const crewMedia = await Media.getRelatedMedia(
+      req.user,
       combinedCredits.crew.map((result) => result.id)
     );
 

server/routes/search.ts

@@ -34,6 +34,7 @@ searchRoutes.get('/', async (req, res, next) => {
     }
 
     const media = await Media.getRelatedMedia(
+      req.user,
       results.results.map((result) => result.id)
     );
 

server/routes/service.ts

@@ -183,9 +183,7 @@ serviceRoutes.get<{ tmdbId: string }>(
 
     const sonarr = new SonarrAPI({
       apiKey: sonarrSettings.apiKey,
-      url: `${sonarrSettings.useSsl ? 'https' : 'http'}://${
+      url: SonarrAPI.buildUrl(sonarrSettings, '/api/v3'),
-        sonarrSettings.hostname
-      }:${sonarrSettings.port}${sonarrSettings.baseUrl ?? ''}/api`,
     });
 
     try {

server/routes/tv.ts

@@ -69,6 +69,7 @@ tvRoutes.get('/:id/recommendations', async (req, res, next) => {
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       results.results.map((result) => result.id)
     );
 
@@ -109,6 +110,7 @@ tvRoutes.get('/:id/similar', async (req, res, next) => {
     });
 
     const media = await Media.getRelatedMedia(
+      req.user,
       results.results.map((result) => result.id)
     );
 

server/routes/user/index.ts

@@ -8,6 +8,7 @@ import Media from '@server/entity/Media';
 import { MediaRequest } from '@server/entity/MediaRequest';
 import { User } from '@server/entity/User';
 import { UserPushSubscription } from '@server/entity/UserPushSubscription';
+import { Watchlist } from '@server/entity/Watchlist';
 import type { WatchlistResponse } from '@server/interfaces/api/discoverInterfaces';
 import type {
   QuotaResponse,
@@ -382,7 +383,14 @@ router.delete<{ id: string }>(
        * we manually remove all requests from the user here so the parent media's
        * properly reflect the change.
        */
-      await requestRepository.remove(user.requests);
+      await requestRepository.remove(user.requests, {
+        /**
+         * Break-up into groups of 1000 requests to be removed at a time.
+         * Necessary for users with >1000 requests, else an SQLite 'Expression tree is too large' error occurs.
+         * https://typeorm.io/repository-api#additional-options
+         */
+        chunk: user.requests.length / 1000,
+      });
 
       await userRepository.delete(user.id);
       return res.status(200).json(user.filter());
@@ -699,8 +707,7 @@ router.get<{ id: string }, WatchlistResponse>(
     ) {
       return next({
         status: 403,
-        message:
+        message: "You do not have permission to view this user's Watchlist.",
-          "You do not have permission to view this user's Plex Watchlist.",
       });
     }
 
@@ -714,6 +721,24 @@ router.get<{ id: string }, WatchlistResponse>(
     });
 
     if (!user?.plexToken) {
+      if (user) {
+        const [result, total] = await getRepository(Watchlist).findAndCount({
+          where: { requestedBy: { id: user?.id } },
+          relations: { requestedBy: true },
+          // loadRelationIds: true,
+          take: itemsPerPage,
+          skip: offset,
+        });
+        if (total) {
+          return res.json({
+            page: page,
+            totalPages: total / itemsPerPage,
+            totalResults: total,
+            results: result,
+          });
+        }
+      }
+
       // We will just return an empty array if the user has no Plex token
       return res.json({
         page: 1,

server/routes/watchlist.ts

@@ -0,0 +1,73 @@
+import {
+  DuplicateWatchlistRequestError,
+  NotFoundError,
+  Watchlist,
+} from '@server/entity/Watchlist';
+import logger from '@server/logger';
+import { Router } from 'express';
+import { QueryFailedError } from 'typeorm';
+
+import { watchlistCreate } from '@server/interfaces/api/watchlistCreate';
+
+const watchlistRoutes = Router();
+
+watchlistRoutes.post<never, Watchlist, Watchlist>(
+  '/',
+  async (req, res, next) => {
+    try {
+      if (!req.user) {
+        return next({
+          status: 401,
+          message: 'You must be logged in to add watchlist.',
+        });
+      }
+      const values = watchlistCreate.parse(req.body);
+
+      const request = await Watchlist.createWatchlist({
+        watchlistRequest: values,
+        user: req.user,
+      });
+      return res.status(201).json(request);
+    } catch (error) {
+      if (!(error instanceof Error)) {
+        return;
+      }
+      switch (error.constructor) {
+        case QueryFailedError:
+          logger.warn('Something wrong with data watchlist', {
+            tmdbId: req.body.tmdbId,
+            mediaType: req.body.mediaType,
+            label: 'Watchlist',
+          });
+          return next({ status: 409, message: 'Something wrong' });
+        case DuplicateWatchlistRequestError:
+          return next({ status: 409, message: error.message });
+        default:
+          return next({ status: 500, message: error.message });
+      }
+    }
+  }
+);
+
+watchlistRoutes.delete('/:tmdbId', async (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 401,
+      message: 'You must be logged in to delete watchlist data.',
+    });
+  }
+  try {
+    await Watchlist.deleteWatchlist(Number(req.params.tmdbId), req.user);
+    return res.status(204).send();
+  } catch (e) {
+    if (e instanceof NotFoundError) {
+      return next({
+        status: 401,
+        message: e.message,
+      });
+    }
+    return next({ status: 500, message: e.message });
+  }
+});
+
+export default watchlistRoutes;

server/utils/typeHelpers.ts

@@ -1,4 +1,5 @@
 import type {
+  TmdbCollectionResult,
   TmdbMovieDetails,
   TmdbMovieResult,
   TmdbPersonDetails,
@@ -8,17 +9,35 @@ import type {
 } from '@server/api/themoviedb/interfaces';
 
 export const isMovie = (
-  movie: TmdbMovieResult | TmdbTvResult | TmdbPersonResult
+  movie:
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
 ): movie is TmdbMovieResult => {
   return (movie as TmdbMovieResult).title !== undefined;
 };
 
 export const isPerson = (
-  person: TmdbMovieResult | TmdbTvResult | TmdbPersonResult
+  person:
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
 ): person is TmdbPersonResult => {
   return (person as TmdbPersonResult).known_for !== undefined;
 };
 
+export const isCollection = (
+  collection:
+    | TmdbMovieResult
+    | TmdbTvResult
+    | TmdbPersonResult
+    | TmdbCollectionResult
+): collection is TmdbCollectionResult => {
+  return (collection as TmdbCollectionResult).media_type === 'collection';
+};
+
 export const isMovieDetails = (
   movie: TmdbMovieDetails | TmdbTvDetails | TmdbPersonDetails
 ): movie is TmdbMovieDetails => {

src/assets/services/emby.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 712.60077 712.5481"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:0;fill:#ffffff;stroke-width:4.12543"
+     id="rect249"
+     width="712.60077"
+     height="712.5481"
+     x="-0.00071160076"
+     y="2.0223413e-11" />
+  <rect
+     style="fill:#ffffff"
+     id="rect289"
+     width="230.18982"
+     height="229.82355"
+     x="241.20476"
+     y="241.36227" />
+  <g
+     id="layer1"
+     transform="matrix(0.70249853,0,0,0.70249853,88.770447,96.84571)">
+    <path
+       id="path3427"
+       d="m 327.06546,642.18589 c -45.39663,-45.86009 -82.73776,-83.3683 -82.98029,-83.3516 -0.24253,0.0167 -7.23324,6.65975 -15.53493,14.7623 l -15.09396,14.73193 -40.13624,-40.38805 C 151.24511,525.72706 108.73555,482.86504 78.854363,452.69158 l -54.329437,-54.86086 83.720394,-82.90796 83.72039,-82.90797 -15.19316,-15.20441 -15.19315,-15.20443 95.18008,-94.29313 c 52.34904,-51.86121 95.35849,-94.293118 95.57653,-94.293118 0.21805,0 37.39519,37.357576 82.61589,83.016832 45.22068,45.659256 82.53772,83.131956 82.92673,83.272666 0.38901,0.14071 7.46336,-6.49498 15.72077,-14.746 l 15.01348,-15.00184 7.14591,7.19902 c 73.95232,74.50189 181.50599,183.56427 181.36678,183.9109 -0.10065,0.25064 -37.54056,37.44106 -83.19981,82.64536 -45.65926,45.2043 -83.10802,82.41429 -83.21946,82.68884 -0.11145,0.27456 6.50478,7.34753 14.70272,15.71771 l 14.90534,15.21851 -15.3888,15.28883 c -21.09609,20.95904 -162.95155,161.27018 -169.79551,167.947 l -5.52526,5.39033 z m 89.8523,-204.1566 c 64.84836,-37.53366 117.81919,-68.54793 117.71294,-68.92058 -0.15927,-0.55862 -233.55022,-136.2489 -236.27084,-137.3646 -0.68441,-0.28068 -0.85761,27.45642 -0.85761,137.33982 0,99.83563 0.20749,137.62237 0.75471,137.43996 0.41509,-0.13837 53.81245,-30.96093 118.6608,-68.4946 z"
+       style="fill:#52b54b;fill-opacity:1;stroke:none" />
+  </g>
+</svg>

src/components/CollectionDetails/index.tsx

@@ -338,6 +338,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
           <TitleCard
             key={`collection-movie-${title.id}`}
             id={title.id}
+            isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
             image={title.posterPath}
             status={title.mediaInfo?.status}
             summary={title.overview}
@@ -348,7 +349,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
           />
         ))}
       />
-      <div className="pb-8" />
+      <div className="extra-bottom-space relative" />
     </div>
   );
 };

src/components/Common/Badge/index.tsx

@@ -71,7 +71,7 @@ const Badge = (
         'bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100'
       );
       if (href) {
-        badgeStyle.push('hover:bg-indigo-500 bg-opacity-100');
+        badgeStyle.push('hover:bg-indigo-500 hover:bg-opacity-100');
       }
   }
 

src/components/Common/ListView/index.tsx

@@ -5,6 +5,7 @@ import useVerticalScroll from '@app/hooks/useVerticalScroll';
 import globalMessages from '@app/i18n/globalMessages';
 import type { WatchlistItem } from '@server/interfaces/api/discoverInterfaces';
 import type {
+  CollectionResult,
   MovieResult,
   PersonResult,
   TvResult,
@@ -12,7 +13,7 @@ import type {
 import { useIntl } from 'react-intl';
 
 type ListViewProps = {
-  items?: (TvResult | MovieResult | PersonResult)[];
+  items?: (TvResult | MovieResult | PersonResult | CollectionResult)[];
   plexItems?: WatchlistItem[];
   isEmpty?: boolean;
   isLoading?: boolean;
@@ -57,7 +58,9 @@ const ListView = ({
             case 'movie':
               titleCard = (
                 <TitleCard
+                  key={title.id}
                   id={title.id}
+                  isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
                   image={title.posterPath}
                   status={title.mediaInfo?.status}
                   summary={title.overview}
@@ -75,7 +78,9 @@ const ListView = ({
             case 'tv':
               titleCard = (
                 <TitleCard
+                  key={title.id}
                   id={title.id}
+                  isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
                   image={title.posterPath}
                   status={title.mediaInfo?.status}
                   summary={title.overview}
@@ -90,6 +95,18 @@ const ListView = ({
                 />
               );
               break;
+            case 'collection':
+              titleCard = (
+                <TitleCard
+                  id={title.id}
+                  image={title.posterPath}
+                  summary={title.overview}
+                  title={title.title}
+                  mediaType={title.mediaType}
+                  canExpand
+                />
+              );
+              break;
             case 'person':
               titleCard = (
                 <PersonCard

src/components/Discover/CreateSlider/index.tsx

@@ -2,6 +2,7 @@ import Button from '@app/components/Common/Button';
 import Tooltip from '@app/components/Common/Tooltip';
 import { sliderTitles } from '@app/components/Discover/constants';
 import MediaSlider from '@app/components/MediaSlider';
+import { WatchProviderSelector } from '@app/components/Selector';
 import { encodeURIExtraParams } from '@app/hooks/useDiscover';
 import type {
   TmdbCompanySearchResponse,
@@ -55,7 +56,7 @@ type CreateOption = {
   dataUrl: string;
   params?: string;
   titlePlaceholderText: string;
-  dataPlaceholderText: string;
+  dataPlaceholderText?: string;
 };
 
 const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
@@ -276,6 +277,20 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
       titlePlaceholderText: intl.formatMessage(messages.slidernameplaceholder),
       dataPlaceholderText: intl.formatMessage(messages.providetmdbsearch),
     },
+    {
+      type: DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES,
+      title: intl.formatMessage(sliderTitles.tmdbmoviestreamingservices),
+      dataUrl: '/api/v1/discover/movies',
+      params: 'watchRegion=$regionValue&watchProviders=$providersValue',
+      titlePlaceholderText: intl.formatMessage(messages.slidernameplaceholder),
+    },
+    {
+      type: DiscoverSliderType.TMDB_TV_STREAMING_SERVICES,
+      title: intl.formatMessage(sliderTitles.tmdbtvstreamingservices),
+      dataUrl: '/api/v1/discover/tv',
+      params: 'watchRegion=$regionValue&watchProviders=$providersValue',
+      titlePlaceholderText: intl.formatMessage(messages.slidernameplaceholder),
+    },
   ];
 
   return (
@@ -417,6 +432,40 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
               />
             );
             break;
+          case DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES:
+            dataInput = (
+              <WatchProviderSelector
+                type={'movie'}
+                region={slider?.data?.split(',')[0]}
+                activeProviders={
+                  slider?.data
+                    ?.split(',')[1]
+                    .split('|')
+                    .map((v) => Number(v)) ?? []
+                }
+                onChange={(region, providers) => {
+                  setFieldValue('data', `${region},${providers.join('|')}`);
+                }}
+              />
+            );
+            break;
+          case DiscoverSliderType.TMDB_TV_STREAMING_SERVICES:
+            dataInput = (
+              <WatchProviderSelector
+                type={'tv'}
+                region={slider?.data?.split(',')[0]}
+                activeProviders={
+                  slider?.data
+                    ?.split(',')[1]
+                    .split('|')
+                    .map((v) => Number(v)) ?? []
+                }
+                onChange={(region, providers) => {
+                  setFieldValue('data', `${region},${providers.join('|')}`);
+                }}
+              />
+            );
+            break;
           default:
             dataInput = (
               <Field
@@ -488,10 +537,25 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
                     '$value',
                     encodeURIExtraParams(values.data)
                   )}
-                  extraParams={activeOption.params?.replace(
+                  extraParams={
-                    '$value',
+                    activeOption.type ===
-                    encodeURIExtraParams(values.data)
+                      DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES ||
-                  )}
+                    activeOption.type ===
+                      DiscoverSliderType.TMDB_TV_STREAMING_SERVICES
+                      ? activeOption.params
+                          ?.replace(
+                            '$regionValue',
+                            encodeURIExtraParams(values?.data.split(',')[0])
+                          )
+                          .replace(
+                            '$providersValue',
+                            encodeURIExtraParams(values?.data.split(',')[1])
+                          )
+                      : activeOption.params?.replace(
+                          '$value',
+                          encodeURIExtraParams(values.data)
+                        )
+                  }
                   onNewTitles={updateResultCount}
                 />
               </div>

src/components/Discover/DiscoverSliderEdit/index.tsx

@@ -164,6 +164,10 @@ const DiscoverSliderEdit = ({
         return intl.formatMessage(sliderTitles.tmdbnetwork);
       case DiscoverSliderType.TMDB_SEARCH:
         return intl.formatMessage(sliderTitles.tmdbsearch);
+      case DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES:
+        return intl.formatMessage(sliderTitles.tmdbmoviestreamingservices);
+      case DiscoverSliderType.TMDB_TV_STREAMING_SERVICES:
+        return intl.formatMessage(sliderTitles.tmdbtvstreamingservices);
       default:
         return 'Unknown Slider';
     }
@@ -195,7 +199,9 @@ const DiscoverSliderEdit = ({
           className={`${slider.data ? 'mb-4' : 'mb-0'} flex space-x-2 md:mb-0`}
         >
           <Bars3Icon className="h-6 w-6" />
-          <div>{getSliderTitle(slider)}</div>
+          <div className="w-7/12 truncate md:w-full">
+            {getSliderTitle(slider)}
+          </div>
         </div>
         <div
           className={`pointer-events-none ${

src/components/Discover/DiscoverWatchlist/index.tsx

@@ -10,7 +10,7 @@ import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
-  discoverwatchlist: 'Your Plex Watchlist',
+  discoverwatchlist: 'Your Watchlist',
   watchlist: 'Plex Watchlist',
 });
 

src/components/Discover/FilterSlideover/index.tsx

@@ -35,8 +35,10 @@ const messages = defineMessages({
   ratingText: 'Ratings between {minValue} and {maxValue}',
   clearfilters: 'Clear Active Filters',
   tmdbuserscore: 'TMDB User Score',
+  tmdbuservotecount: 'TMDB User Vote Count',
   runtime: 'Runtime',
   streamingservices: 'Streaming Services',
+  voteCount: 'Number of votes between {minValue} and {maxValue}',
 });
 
 type FilterSlideoverProps = {
@@ -246,6 +248,45 @@ const FilterSlideover = ({
             })}
           />
         </div>
+        <span className="text-lg font-semibold">
+          {intl.formatMessage(messages.tmdbuservotecount)}
+        </span>
+        <div className="relative z-0">
+          <MultiRangeSlider
+            min={0}
+            max={1000}
+            defaultMaxValue={
+              currentFilters.voteCountLte
+                ? Number(currentFilters.voteCountLte)
+                : undefined
+            }
+            defaultMinValue={
+              currentFilters.voteCountGte
+                ? Number(currentFilters.voteCountGte)
+                : undefined
+            }
+            onUpdateMin={(min) => {
+              updateQueryParams(
+                'voteCountGte',
+                min !== 0 && Number(currentFilters.voteCountLte) !== 1000
+                  ? min.toString()
+                  : undefined
+              );
+            }}
+            onUpdateMax={(max) => {
+              updateQueryParams(
+                'voteCountLte',
+                max !== 1000 && Number(currentFilters.voteCountGte) !== 0
+                  ? max.toString()
+                  : undefined
+              );
+            }}
+            subText={intl.formatMessage(messages.voteCount, {
+              minValue: currentFilters.voteCountGte ?? 0,
+              maxValue: currentFilters.voteCountLte ?? 1000,
+            })}
+          />
+        </div>
         <span className="text-lg font-semibold">
           {intl.formatMessage(messages.streamingservices)}
         </span>

src/components/Discover/PlexWatchlistSlider/index.tsx

@@ -1,6 +1,6 @@
 import Slider from '@app/components/Slider';
 import TmdbTitleCard from '@app/components/TitleCard/TmdbTitleCard';
-import { UserType, useUser } from '@app/hooks/useUser';
+import { useUser } from '@app/hooks/useUser';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { WatchlistItem } from '@server/interfaces/api/discoverInterfaces';
 import Link from 'next/link';
@@ -8,7 +8,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 
 const messages = defineMessages({
-  plexwatchlist: 'Your Plex Watchlist',
+  plexwatchlist: 'Your Watchlist',
   emptywatchlist:
     'Media added to your <PlexWatchlistSupportLink>Plex Watchlist</PlexWatchlistSupportLink> will appear here.',
 });
@@ -22,12 +22,11 @@ const PlexWatchlistSlider = () => {
     totalPages: number;
     totalResults: number;
     results: WatchlistItem[];
-  }>(user?.userType === UserType.PLEX ? '/api/v1/discover/watchlist' : null, {
+  }>('/api/v1/discover/watchlist', {
     revalidateOnMount: true,
   });
 
   if (
-    user?.userType !== UserType.PLEX ||
     (watchlistItems &&
       watchlistItems.results.length === 0 &&
       !user?.settings?.watchlistSyncMovies &&
@@ -69,6 +68,7 @@ const PlexWatchlistSlider = () => {
             key={`watchlist-slider-item-${item.ratingKey}`}
             tmdbId={item.tmdbId}
             type={item.mediaType}
+            isAddedToWatchlist={true}
           />
         ))}
       />

src/components/Discover/constants.ts

@@ -74,7 +74,7 @@ export const sliderTitles = defineMessages({
   recentlyAdded: 'Recently Added',
   upcoming: 'Upcoming Movies',
   trending: 'Trending',
-  plexwatchlist: 'Your Plex Watchlist',
+  plexwatchlist: 'Your Watchlist',
   moviegenres: 'Movie Genres',
   tvgenres: 'Series Genres',
   studios: 'Studios',
@@ -86,6 +86,8 @@ export const sliderTitles = defineMessages({
   tmdbnetwork: 'TMDB Network',
   tmdbstudio: 'TMDB Studio',
   tmdbsearch: 'TMDB Search',
+  tmdbmoviestreamingservices: 'TMDB Movie Streaming Services',
+  tmdbtvstreamingservices: 'TMDB TV Streaming Services',
 });
 
 export const QueryFilterOptions = z.object({
@@ -102,6 +104,8 @@ export const QueryFilterOptions = z.object({
   withRuntimeLte: z.string().optional(),
   voteAverageGte: z.string().optional(),
   voteAverageLte: z.string().optional(),
+  voteCountLte: z.string().optional(),
+  voteCountGte: z.string().optional(),
   watchRegion: z.string().optional(),
   watchProviders: z.string().optional(),
 });
@@ -167,6 +171,14 @@ export const prepareFilterValues = (
     filterValues.voteAverageLte = values.voteAverageLte;
   }
 
+  if (values.voteCountGte) {
+    filterValues.voteCountGte = values.voteCountGte;
+  }
+
+  if (values.voteCountLte) {
+    filterValues.voteCountLte = values.voteCountLte;
+  }
+
   if (values.watchProviders) {
     filterValues.watchProviders = values.watchProviders;
   }
@@ -188,6 +200,12 @@ export const countActiveFilters = (filterValues: FilterOptions): number => {
     delete clonedFilters.voteAverageLte;
   }
 
+  if (clonedFilters.voteCountGte || filterValues.voteCountLte) {
+    totalCount += 1;
+    delete clonedFilters.voteCountGte;
+    delete clonedFilters.voteCountLte;
+  }
+
   if (clonedFilters.withRuntimeGte || filterValues.withRuntimeLte) {
     totalCount += 1;
     delete clonedFilters.withRuntimeGte;

src/components/Discover/index.tsx

@@ -365,6 +365,36 @@ const Discover = () => {
               />
             );
             break;
+          case DiscoverSliderType.TMDB_MOVIE_STREAMING_SERVICES:
+            sliderComponent = (
+              <MediaSlider
+                sliderKey={`custom-slider-${slider.id}`}
+                title={slider.title ?? ''}
+                url="/api/v1/discover/movies"
+                extraParams={`watchRegion=${
+                  slider.data?.split(',')[0]
+                }&watchProviders=${slider.data?.split(',')[1]}`}
+                linkUrl={`/discover/movies?watchRegion=${
+                  slider.data?.split(',')[0]
+                }&watchProviders=${slider.data?.split(',')[1]}`}
+              />
+            );
+            break;
+          case DiscoverSliderType.TMDB_TV_STREAMING_SERVICES:
+            sliderComponent = (
+              <MediaSlider
+                sliderKey={`custom-slider-${slider.id}`}
+                title={slider.title ?? ''}
+                url="/api/v1/discover/tv"
+                extraParams={`watchRegion=${
+                  slider.data?.split(',')[0]
+                }&watchProviders=${slider.data?.split(',')[1]}`}
+                linkUrl={`/discover/tv?watchRegion=${
+                  slider.data?.split(',')[0]
+                }&watchProviders=${slider.data?.split(',')[1]}`}
+              />
+            );
+            break;
         }
 
         if (isEditing) {

src/components/ExternalLinkBlock/index.tsx

@@ -1,3 +1,4 @@
+import EmbyLogo from '@app/assets/services/emby.svg';
 import ImdbLogo from '@app/assets/services/imdb.svg';
 import JellyfinLogo from '@app/assets/services/jellyfin.svg';
 import PlexLogo from '@app/assets/services/plex.svg';
@@ -9,6 +10,7 @@ import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
+import getConfig from 'next/config';
 
 interface ExternalLinkBlockProps {
   mediaType: 'movie' | 'tv';
@@ -28,6 +30,7 @@ const ExternalLinkBlock = ({
   mediaUrl,
 }: ExternalLinkBlockProps) => {
   const settings = useSettings();
+  const { publicRuntimeConfig } = getConfig();
   const { locale } = useLocale();
 
   return (
@@ -41,6 +44,8 @@ const ExternalLinkBlock = ({
         >
           {settings.currentSettings.mediaServerType === MediaServerType.PLEX ? (
             <PlexLogo />
+          ) : publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? (
+            <EmbyLogo />
           ) : (
             <JellyfinLogo />
           )}

src/components/Layout/PullToRefresh/index.tsx

@@ -0,0 +1,118 @@
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import { useRouter } from 'next/router';
+import { useEffect, useRef, useState } from 'react';
+
+const PullToRefresh = () => {
+  const router = useRouter();
+
+  const [pullStartPoint, setPullStartPoint] = useState(0);
+  const [pullChange, setPullChange] = useState(0);
+  const refreshDiv = useRef<HTMLDivElement>(null);
+
+  // Various pull down thresholds that determine icon location
+  const pullDownInitThreshold = pullChange > 20;
+  const pullDownStopThreshold = 120;
+  const pullDownReloadThreshold = pullChange > 340;
+  const pullDownIconLocation = pullChange / 3;
+
+  useEffect(() => {
+    // Reload function that is called when reload threshold has been hit
+    // Add loading class to determine when to add spin animation
+    const forceReload = () => {
+      refreshDiv.current?.classList.add('loading');
+      setTimeout(() => {
+        router.reload();
+      }, 1000);
+    };
+
+    const html = document.querySelector('html');
+
+    // Determines if we are at the top of the page
+    // Locks or unlocks page when pulling down to refresh
+    const pullStart = (e: TouchEvent) => {
+      setPullStartPoint(e.targetTouches[0].screenY);
+
+      if (window.scrollY === 0 && window.scrollX === 0) {
+        refreshDiv.current?.classList.add('block');
+        refreshDiv.current?.classList.remove('hidden');
+        document.body.style.touchAction = 'none';
+        document.body.style.overscrollBehavior = 'none';
+        if (html) {
+          html.style.overscrollBehaviorY = 'none';
+        }
+      } else {
+        refreshDiv.current?.classList.remove('block');
+        refreshDiv.current?.classList.add('hidden');
+      }
+    };
+
+    // Tracks how far we have pulled down the refresh icon
+    const pullDown = async (e: TouchEvent) => {
+      const screenY = e.targetTouches[0].screenY;
+
+      const pullLength =
+        pullStartPoint < screenY ? Math.abs(screenY - pullStartPoint) : 0;
+
+      setPullChange(pullLength);
+    };
+
+    // Will reload the page if we are past the threshold
+    // Otherwise, we reset the pull
+    const pullFinish = () => {
+      setPullStartPoint(0);
+
+      if (pullDownReloadThreshold) {
+        forceReload();
+      } else {
+        setPullChange(0);
+      }
+
+      document.body.style.touchAction = 'auto';
+      document.body.style.overscrollBehaviorY = 'auto';
+      if (html) {
+        html.style.overscrollBehaviorY = 'auto';
+      }
+    };
+
+    window.addEventListener('touchstart', pullStart, { passive: false });
+    window.addEventListener('touchmove', pullDown, { passive: false });
+    window.addEventListener('touchend', pullFinish, { passive: false });
+
+    return () => {
+      window.removeEventListener('touchstart', pullStart);
+      window.removeEventListener('touchmove', pullDown);
+      window.removeEventListener('touchend', pullFinish);
+    };
+  }, [pullDownInitThreshold, pullDownReloadThreshold, pullStartPoint, router]);
+
+  return (
+    <div
+      ref={refreshDiv}
+      className="absolute left-0 right-0 top-0 z-50 m-auto w-fit transition-all ease-out"
+      id="refreshIcon"
+      style={{
+        top:
+          pullDownIconLocation < pullDownStopThreshold && pullDownInitThreshold
+            ? pullDownIconLocation
+            : pullDownInitThreshold
+            ? pullDownStopThreshold
+            : '',
+      }}
+    >
+      <div
+        className={`${
+          refreshDiv.current?.classList.contains('loading') && 'animate-spin'
+        } relative -top-24 h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 shadow-md shadow-black ring-1 ring-gray-700`}
+        style={{ animationDirection: 'reverse' }}
+      >
+        <ArrowPathIcon
+          className={`rounded-full ${
+            pullDownReloadThreshold && 'rotate-180'
+          } text-indigo-500 transition-all duration-300`}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PullToRefresh;

src/components/Layout/index.tsx

@@ -1,8 +1,8 @@
 import MobileMenu from '@app/components/Layout/MobileMenu';
+import PullToRefresh from '@app/components/Layout/PullToRefresh';
 import SearchInput from '@app/components/Layout/SearchInput';
 import Sidebar from '@app/components/Layout/Sidebar';
 import UserDropdown from '@app/components/Layout/UserDropdown';
-import PullToRefresh from '@app/components/PullToRefresh';
 import type { AvailableLocale } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';

src/components/MediaSlider/index.tsx

@@ -95,7 +95,9 @@ const MediaSlider = ({
       case 'movie':
         return (
           <TitleCard
+            key={title.id}
             id={title.id}
+            isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
             image={title.posterPath}
             status={title.mediaInfo?.status}
             summary={title.overview}
@@ -109,7 +111,9 @@ const MediaSlider = ({
       case 'tv':
         return (
           <TitleCard
+            key={title.id}
             id={title.id}
+            isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
             image={title.posterPath}
             status={title.mediaInfo?.status}
             summary={title.overview}

src/components/NotificationTypeSelector/index.tsx

@@ -62,7 +62,7 @@ const messages = defineMessages({
     'Get notified when issues are reopened by other users.',
   mediaautorequested: 'Request Automatically Submitted',
   mediaautorequestedDescription:
-    'Get notified when new media requests are automatically submitted for items on your Plex Watchlist.',
+    'Get notified when new media requests are automatically submitted for items on Your Watchlist.',
 });
 
 export const hasNotificationType = (

src/components/PersonDetails/index.tsx

@@ -133,6 +133,7 @@ const PersonDetails = () => {
           return (
             <li key={`list-cast-item-${media.id}-${index}`}>
               <TitleCard
+                key={media.id}
                 id={media.id}
                 title={media.mediaType === 'movie' ? media.title : media.name}
                 userScore={media.voteAverage}
@@ -173,6 +174,7 @@ const PersonDetails = () => {
           return (
             <li key={`list-crew-item-${media.id}-${index}`}>
               <TitleCard
+                key={media.id}
                 id={media.id}
                 title={media.mediaType === 'movie' ? media.title : media.name}
                 userScore={media.voteAverage}

src/components/PullToRefresh/index.tsx

@@ -1,45 +0,0 @@
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import { useRouter } from 'next/router';
-import PR from 'pulltorefreshjs';
-import { useEffect } from 'react';
-import ReactDOMServer from 'react-dom/server';
-
-const PullToRefresh = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    PR.init({
-      mainElement: '#pull-to-refresh',
-      onRefresh() {
-        router.reload();
-      },
-      iconArrow: ReactDOMServer.renderToString(
-        <div className="p-2">
-          <ArrowPathIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
-        </div>
-      ),
-      iconRefreshing: ReactDOMServer.renderToString(
-        <div
-          className="animate-spin p-2"
-          style={{ animationDirection: 'reverse' }}
-        >
-          <ArrowPathIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
-        </div>
-      ),
-      instructionsPullToRefresh: ReactDOMServer.renderToString(<div />),
-      instructionsReleaseToRefresh: ReactDOMServer.renderToString(<div />),
-      instructionsRefreshing: ReactDOMServer.renderToString(<div />),
-      distReload: 60,
-      distIgnore: 15,
-      shouldPullToRefresh: () =>
-        !window.scrollY && document.body.style.overflow !== 'hidden',
-    });
-    return () => {
-      PR.destroyAll();
-    };
-  }, [router]);
-
-  return <div id="pull-to-refresh"></div>;
-};
-
-export default PullToRefresh;

src/components/Selector/index.tsx

@@ -169,15 +169,19 @@ export const GenreSelector = ({
     loadDefaultGenre();
   }, [defaultValue, type]);
 
-  const loadGenreOptions = async () => {
+  const loadGenreOptions = async (inputValue: string) => {
     const results = await axios.get<GenreSliderItem[]>(
       `/api/v1/discover/genreslider/${type}`
     );
 
-    return results.data.map((result) => ({
+    return results.data
-      label: result.name,
+      .map((result) => ({
-      value: result.id,
+        label: result.name,
-    }));
+        value: result.id,
+      }))
+      .filter(({ label }) =>
+        label.toLowerCase().includes(inputValue.toLowerCase())
+      );
   };
 
   return (
@@ -305,7 +309,9 @@ export const WatchProviderSelector = ({
 
   useEffect(() => {
     onChange(watchRegion, activeProvider);
-  }, [activeProvider, watchRegion, onChange]);
+    // removed onChange as a dependency as we only need to call it when the value(s) change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeProvider, watchRegion]);
 
   const orderedData = useMemo(() => {
     if (!data) {
@@ -344,7 +350,7 @@ export const WatchProviderSelector = ({
         <SmallLoadingSpinner />
       ) : (
         <div className="grid">
-          <div className="grid grid-cols-6 gap-2">
+          <div className="provider-icons grid gap-2">
             {initialProviders.map((provider) => {
               const isActive = activeProvider.includes(provider.id);
               return (
@@ -353,7 +359,7 @@ export const WatchProviderSelector = ({
                   key={`prodiver-${provider.id}`}
                 >
                   <div
-                    className={`provider-container relative h-full w-full cursor-pointer rounded-lg p-2 ring-1 ${
+                    className={`provider-container relative w-full cursor-pointer rounded-lg p-2 ring-1 ${
                       isActive
                         ? 'bg-gray-600 ring-indigo-500 hover:bg-gray-500'
                         : 'bg-gray-700 ring-gray-500 hover:bg-gray-600'
@@ -386,7 +392,7 @@ export const WatchProviderSelector = ({
             })}
           </div>
           {showMore && otherProviders.length > 0 && (
-            <div className="relative top-2 grid grid-cols-6 gap-2">
+            <div className="provider-icons relative top-2 grid gap-2">
               {otherProviders.map((provider) => {
                 const isActive = activeProvider.includes(provider.id);
                 return (
@@ -395,7 +401,7 @@ export const WatchProviderSelector = ({
                     key={`prodiver-${provider.id}`}
                   >
                     <div
-                      className={`provider-container relative h-full w-full cursor-pointer rounded-lg p-2 ring-1 transition ${
+                      className={`provider-container relative w-full cursor-pointer rounded-lg p-2 ring-1 transition ${
                         isActive
                           ? 'bg-gray-600 ring-indigo-500 hover:bg-gray-500'
                           : 'bg-gray-700 ring-gray-500 hover:bg-gray-600'

src/components/Settings/RadarrModal/index.tsx

@@ -57,6 +57,9 @@ const messages = defineMessages({
   testFirstTags: 'Test connection to load tags',
   tags: 'Tags',
   enableSearch: 'Enable Automatic Search',
+  tagRequests: 'Tag Requests',
+  tagRequestsInfo:
+    "Automatically add an additional tag with the requester's user ID & display name",
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
   validationBaseUrlLeadingSlash: 'URL base must have a leading slash',
@@ -238,6 +241,7 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
           externalUrl: radarr?.externalUrl,
           syncEnabled: radarr?.syncEnabled ?? false,
           enableSearch: !radarr?.preventSearch,
+          tagRequests: radarr?.tagRequests ?? false,
         }}
         validationSchema={RadarrSettingsSchema}
         onSubmit={async (values) => {
@@ -263,6 +267,7 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
               externalUrl: values.externalUrl,
               syncEnabled: values.syncEnabled,
               preventSearch: !values.enableSearch,
+              tagRequests: values.tagRequests,
             };
             if (!radarr) {
               await axios.post('/api/v1/settings/radarr', submission);
@@ -713,6 +718,21 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="tagRequests" className="checkbox-label">
+                    {intl.formatMessage(messages.tagRequests)}
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.tagRequestsInfo)}
+                    </span>
+                  </label>
+                  <div className="form-input-area">
+                    <Field
+                      type="checkbox"
+                      id="tagRequests"
+                      name="tagRequests"
+                    />
+                  </div>
+                </div>
               </div>
             </Modal>
           );

src/components/Settings/SonarrModal/index.tsx

@@ -62,6 +62,9 @@ const messages = defineMessages({
   syncEnabled: 'Enable Scan',
   externalUrl: 'External URL',
   enableSearch: 'Enable Automatic Search',
+  tagRequests: 'Tag Requests',
+  tagRequestsInfo:
+    "Automatically add an additional tag with the requester's user ID & display name",
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
   validationBaseUrlLeadingSlash: 'Base URL must have a leading slash',
@@ -252,6 +255,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
           externalUrl: sonarr?.externalUrl,
           syncEnabled: sonarr?.syncEnabled ?? false,
           enableSearch: !sonarr?.preventSearch,
+          tagRequests: sonarr?.tagRequests ?? false,
         }}
         validationSchema={SonarrSettingsSchema}
         onSubmit={async (values) => {
@@ -292,6 +296,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
               externalUrl: values.externalUrl,
               syncEnabled: values.syncEnabled,
               preventSearch: !values.enableSearch,
+              tagRequests: values.tagRequests,
             };
             if (!sonarr) {
               await axios.post('/api/v1/settings/sonarr', submission);
@@ -960,6 +965,21 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="tagRequests" className="checkbox-label">
+                    {intl.formatMessage(messages.tagRequests)}
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.tagRequestsInfo)}
+                    </span>
+                  </label>
+                  <div className="form-input-area">
+                    <Field
+                      type="checkbox"
+                      id="tagRequests"
+                      name="tagRequests"
+                    />
+                  </div>
+                </div>
               </div>
             </Modal>
           );

src/components/TitleCard/TmdbTitleCard.tsx

@@ -11,6 +11,7 @@ export interface TmdbTitleCardProps {
   tvdbId?: number;
   type: 'movie' | 'tv';
   canExpand?: boolean;
+  isAddedToWatchlist?: boolean;
 }
 
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -23,6 +24,7 @@ const TmdbTitleCard = ({
   tvdbId,
   type,
   canExpand,
+  isAddedToWatchlist = false,
 }: TmdbTitleCardProps) => {
   const { hasPermission } = useUser();
 
@@ -56,7 +58,11 @@ const TmdbTitleCard = ({
 
   return isMovie(title) ? (
     <TitleCard
+      key={title.id}
       id={title.id}
+      isAddedToWatchlist={
+        title.mediaInfo?.watchlists?.length || isAddedToWatchlist
+      }
       image={title.posterPath}
       status={title.mediaInfo?.status}
       summary={title.overview}
@@ -68,7 +74,11 @@ const TmdbTitleCard = ({
     />
   ) : (
     <TitleCard
+      key={title.id}
       id={title.id}
+      isAddedToWatchlist={
+        title.mediaInfo?.watchlists?.length || isAddedToWatchlist
+      }
       image={title.posterPath}
       status={title.mediaInfo?.status}
       summary={title.overview}

src/components/TitleCard/index.tsx

@@ -10,12 +10,21 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { withProperties } from '@app/utils/typeHelpers';
 import { Transition } from '@headlessui/react';
-import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowDownTrayIcon,
+  MinusCircleIcon,
+  StarIcon,
+} from '@heroicons/react/24/outline';
 import { MediaStatus } from '@server/constants/media';
+import type { Watchlist } from '@server/entity/Watchlist';
 import type { MediaType } from '@server/models/Search';
+import axios from 'axios';
 import Link from 'next/link';
+import type React from 'react';
 import { Fragment, useCallback, useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import { mutate } from 'swr';
 
 interface TitleCardProps {
   id: number;
@@ -23,13 +32,24 @@ interface TitleCardProps {
   summary?: string;
   year?: string;
   title: string;
-  userScore: number;
+  userScore?: number;
   mediaType: MediaType;
   status?: MediaStatus;
   canExpand?: boolean;
   inProgress?: boolean;
+  isAddedToWatchlist?: number | boolean;
 }
 
+const messages = defineMessages({
+  addToWatchList: 'Add to watchlist',
+  watchlistSuccess:
+    '<strong>{title}</strong> added to watchlist  successfully!',
+  watchlistDeleted:
+    '<strong>{title}</strong> Removed from watchlist  successfully!',
+  watchlistCancel: 'watchlist for <strong>{title}</strong> canceled.',
+  watchlistError: 'Something went wrong try again.',
+});
+
 const TitleCard = ({
   id,
   image,
@@ -38,6 +58,7 @@ const TitleCard = ({
   title,
   status,
   mediaType,
+  isAddedToWatchlist = false,
   inProgress = false,
   canExpand = false,
 }: TitleCardProps) => {
@@ -48,6 +69,10 @@ const TitleCard = ({
   const [currentStatus, setCurrentStatus] = useState(status);
   const [showDetail, setShowDetail] = useState(false);
   const [showRequestModal, setShowRequestModal] = useState(false);
+  const { addToast } = useToasts();
+  const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
+    !isAddedToWatchlist
+  );
 
   // Just to get the year from the date
   if (year) {
@@ -68,12 +93,73 @@ const TitleCard = ({
     []
   );
 
+  const onClickWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+    try {
+      const response = await axios.post<Watchlist>('/api/v1/watchlist', {
+        tmdbId: id,
+        mediaType,
+        title,
+      });
+      mutate('/api/v1/discover/watchlist');
+      if (response.data) {
+        addToast(
+          <span>
+            {intl.formatMessage(messages.watchlistSuccess, {
+              title,
+              strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
+        );
+      }
+    } catch (e) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
+      setIsUpdating(false);
+      setToggleWatchlist((prevState) => !prevState);
+    }
+  };
+
+  const onClickDeleteWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+    try {
+      const response = await axios.delete<Watchlist>('/api/v1/watchlist/' + id);
+
+      if (response.status === 204) {
+        addToast(
+          <span>
+            {intl.formatMessage(messages.watchlistDeleted, {
+              title,
+              strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+            })}
+          </span>,
+          { appearance: 'info', autoDismiss: true }
+        );
+      }
+    } catch (e) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
+      setIsUpdating(false);
+      mutate('/api/v1/discover/watchlist');
+      setToggleWatchlist((prevState) => !prevState);
+    }
+  };
+
   const closeModal = useCallback(() => setShowRequestModal(false), []);
 
   const showRequestButton = hasPermission(
     [
       Permission.REQUEST,
-      mediaType === 'movie' ? Permission.REQUEST_MOVIE : Permission.REQUEST_TV,
+      mediaType === 'movie' || mediaType === 'collection'
+        ? Permission.REQUEST_MOVIE
+        : Permission.REQUEST_TV,
     ],
     { type: 'or' }
   );
@@ -86,7 +172,13 @@ const TitleCard = ({
       <RequestModal
         tmdbId={id}
         show={showRequestModal}
-        type={mediaType === 'movie' ? 'movie' : 'tv'}
+        type={
+          mediaType === 'movie'
+            ? 'movie'
+            : mediaType === 'collection'
+            ? 'collection'
+            : 'tv'
+        }
         onComplete={requestComplete}
         onUpdating={requestUpdating}
         onCancel={closeModal}
@@ -130,7 +222,7 @@ const TitleCard = ({
           <div className="absolute left-0 right-0 flex items-center justify-between p-2">
             <div
               className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow-md ${
-                mediaType === 'movie'
+                mediaType === 'movie' || mediaType === 'collection'
                   ? 'border-blue-500 bg-blue-600'
                   : 'border-purple-600 bg-purple-600'
               }`}
@@ -138,9 +230,33 @@ const TitleCard = ({
               <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
                 {mediaType === 'movie'
                   ? intl.formatMessage(globalMessages.movie)
+                  : mediaType === 'collection'
+                  ? intl.formatMessage(globalMessages.collection)
                   : intl.formatMessage(globalMessages.tvshow)}
               </div>
             </div>
+            {showDetail && (
+              <>
+                {toggleWatchlist ? (
+                  <Button
+                    buttonType={'ghost'}
+                    className="z-40"
+                    buttonSize={'sm'}
+                    onClick={onClickWatchlistBtn}
+                  >
+                    <StarIcon className={'h-3 text-amber-300'} />
+                  </Button>
+                ) : (
+                  <Button
+                    className="z-40"
+                    buttonSize={'sm'}
+                    onClick={onClickDeleteWatchlistBtn}
+                  >
+                    <MinusCircleIcon className={'h-3'} />
+                  </Button>
+                )}
+              </>
+            )}
             {currentStatus && currentStatus !== MediaStatus.UNKNOWN && (
               <div className="pointer-events-none z-40 flex items-center">
                 <StatusBadgeMini
@@ -177,7 +293,15 @@ const TitleCard = ({
             leaveTo="opacity-0"
           >
             <div className="absolute inset-0 overflow-hidden rounded-xl">
-              <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
+              <Link
+                href={
+                  mediaType === 'movie'
+                    ? `/movie/${id}`
+                    : mediaType === 'collection'
+                    ? `/collection/${id}`
+                    : `/tv/${id}`
+                }
+              >
                 <a
                   className="absolute inset-0 h-full w-full cursor-pointer overflow-hidden text-left"
                   style={{

src/hooks/useLockBodyScroll.ts

@@ -15,13 +15,20 @@ export const useLockBodyScroll = (
   disabled?: boolean
 ): void => {
   useEffect(() => {
-    const originalStyle = window.getComputedStyle(document.body).overflow;
+    const originalOverflowStyle = window.getComputedStyle(
+      document.body
+    ).overflow;
+    const originalTouchActionStyle = window.getComputedStyle(
+      document.body
+    ).touchAction;
     if (isLocked && !disabled) {
       document.body.style.overflow = 'hidden';
+      document.body.style.touchAction = 'none';
     }
     return () => {
       if (!disabled) {
-        document.body.style.overflow = originalStyle;
+        document.body.style.overflow = originalOverflowStyle;
+        document.body.style.touchAction = originalTouchActionStyle;
       }
     };
   }, [isLocked, disabled]);

src/i18n/globalMessages.ts

@@ -16,6 +16,7 @@ const globalMessages = defineMessages({
   approved: 'Approved',
   movie: 'Movie',
   movies: 'Movies',
+  collection: 'Collection',
   tvshow: 'Series',
   tvshows: 'Series',
   cancel: 'Cancel',

src/i18n/locale/en.json

@@ -59,7 +59,7 @@
   "components.Discover.DiscoverTvGenre.genreSeries": "{genre} Series",
   "components.Discover.DiscoverTvKeyword.keywordSeries": "{keywordTitle} Series",
   "components.Discover.DiscoverTvLanguage.languageSeries": "{language} Series",
-  "components.Discover.DiscoverWatchlist.discoverwatchlist": "Your Plex Watchlist",
+  "components.Discover.DiscoverWatchlist.discoverwatchlist": "Your Watchlist",
   "components.Discover.DiscoverWatchlist.watchlist": "Plex Watchlist",
   "components.Discover.FilterSlideover.activefilters": "{count, plural, one {# Active Filter} other {# Active Filters}}",
   "components.Discover.FilterSlideover.clearfilters": "Clear Active Filters",
@@ -76,7 +76,9 @@
   "components.Discover.FilterSlideover.streamingservices": "Streaming Services",
   "components.Discover.FilterSlideover.studio": "Studio",
   "components.Discover.FilterSlideover.tmdbuserscore": "TMDB User Score",
+  "components.Discover.FilterSlideover.tmdbuservotecount": "TMDB User Vote Count",
   "components.Discover.FilterSlideover.to": "To",
+  "components.Discover.FilterSlideover.voteCount": "Number of votes between {minValue} and {maxValue}",
   "components.Discover.MovieGenreList.moviegenres": "Movie Genres",
   "components.Discover.MovieGenreSlider.moviegenres": "Movie Genres",
   "components.Discover.NetworkSlider.networks": "Networks",
@@ -92,7 +94,8 @@
   "components.Discover.emptywatchlist": "Media added to your <PlexWatchlistSupportLink>Plex Watchlist</PlexWatchlistSupportLink> will appear here.",
   "components.Discover.moviegenres": "Movie Genres",
   "components.Discover.networks": "Networks",
-  "components.Discover.plexwatchlist": "Your Plex Watchlist",
+  "components.Discover.noRequests": "No requests.",
+  "components.Discover.plexwatchlist": "Your Watchlist",
   "components.Discover.popularmovies": "Popular Movies",
   "components.Discover.populartv": "Popular Series",
   "components.Discover.recentlyAdded": "Recently Added",
@@ -105,11 +108,13 @@
   "components.Discover.studios": "Studios",
   "components.Discover.tmdbmoviegenre": "TMDB Movie Genre",
   "components.Discover.tmdbmoviekeyword": "TMDB Movie Keyword",
+  "components.Discover.tmdbmoviestreamingservices": "TMDB Movie Streaming Services",
   "components.Discover.tmdbnetwork": "TMDB Network",
   "components.Discover.tmdbsearch": "TMDB Search",
   "components.Discover.tmdbstudio": "TMDB Studio",
   "components.Discover.tmdbtvgenre": "TMDB Series Genre",
   "components.Discover.tmdbtvkeyword": "TMDB Series Keyword",
+  "components.Discover.tmdbtvstreamingservices": "TMDB TV Streaming Services",
   "components.Discover.trending": "Trending",
   "components.Discover.tvgenres": "Series Genres",
   "components.Discover.upcoming": "Upcoming Movies",
@@ -198,6 +203,8 @@
   "components.Layout.Sidebar.browsemovies": "Movies",
   "components.Layout.Sidebar.browsetv": "Series",
   "components.Layout.Sidebar.dashboard": "Discover",
+  "components.Layout.Sidebar.browsemovies": "Movies",
+  "components.Layout.Sidebar.browsetv": "Series",
   "components.Layout.Sidebar.issues": "Issues",
   "components.Layout.Sidebar.requests": "Requests",
   "components.Layout.Sidebar.settings": "Settings",
@@ -320,7 +327,7 @@
   "components.NotificationTypeSelector.mediaapproved": "Request Approved",
   "components.NotificationTypeSelector.mediaapprovedDescription": "Send notifications when media requests are manually approved.",
   "components.NotificationTypeSelector.mediaautorequested": "Request Automatically Submitted",
-  "components.NotificationTypeSelector.mediaautorequestedDescription": "Get notified when new media requests are automatically submitted for items on your Plex Watchlist.",
+  "components.NotificationTypeSelector.mediaautorequestedDescription": "Get notified when new media requests are automatically submitted for items on Your Watchlist.",
   "components.NotificationTypeSelector.mediaavailable": "Request Available",
   "components.NotificationTypeSelector.mediaavailableDescription": "Send notifications when media requests become available.",
   "components.NotificationTypeSelector.mediadeclined": "Request Declined",
@@ -706,6 +713,8 @@
   "components.Settings.RadarrModal.servername": "Server Name",
   "components.Settings.RadarrModal.ssl": "Use SSL",
   "components.Settings.RadarrModal.syncEnabled": "Enable Scan",
+  "components.Settings.RadarrModal.tagRequests": "Tag Requests",
+  "components.Settings.RadarrModal.tagRequestsInfo": "Automatically add an additional tag with the requester's user ID & display name",
   "components.Settings.RadarrModal.tags": "Tags",
   "components.Settings.RadarrModal.testFirstQualityProfiles": "Test connection to load quality profiles",
   "components.Settings.RadarrModal.testFirstRootFolders": "Test connection to load root folders",
@@ -885,6 +894,8 @@
   "components.Settings.SonarrModal.servername": "Server Name",
   "components.Settings.SonarrModal.ssl": "Use SSL",
   "components.Settings.SonarrModal.syncEnabled": "Enable Scan",
+  "components.Settings.SonarrModal.tagRequests": "Tag Requests",
+  "components.Settings.SonarrModal.tagRequestsInfo": "Automatically add an additional tag with the requester's user ID & display name",
   "components.Settings.SonarrModal.tags": "Tags",
   "components.Settings.SonarrModal.testFirstLanguageProfiles": "Test connection to load language profiles",
   "components.Settings.SonarrModal.testFirstQualityProfiles": "Test connection to load quality profiles",
@@ -1222,6 +1233,11 @@
   "components.UserProfile.seriesrequest": "Series Requests",
   "components.UserProfile.totalrequests": "Total Requests",
   "components.UserProfile.unlimited": "Unlimited",
+  "components.TitleCard.addToWatchList": "Add to watchlist",
+  "components.TitleCard.watchlistCancel": "watchlist for <strong>{title}</strong> canceled.",
+  "components.TitleCard.watchlistDeleted": "<strong>{title}</strong> Removed from watchlist  successfully!",
+  "components.TitleCard.watchlistError": "Something went wrong try again.",
+  "components.TitleCard.watchlistSuccess": "<strong>{title}</strong> added to watchlist  successfully!",
   "i18n.advanced": "Advanced",
   "i18n.all": "All",
   "i18n.approve": "Approve",
@@ -1232,6 +1248,7 @@
   "i18n.cancel": "Cancel",
   "i18n.canceling": "Canceling…",
   "i18n.close": "Close",
+  "i18n.collection": "Collection",
   "i18n.decline": "Decline",
   "i18n.declined": "Declined",
   "i18n.delete": "Delete",

src/i18n/locale/ua.json

@@ -12,7 +12,7 @@
   "components.Discover.DiscoverStudio.studioMovies": "Фільми {studio}",
   "components.Discover.DiscoverTvGenre.genreSeries": "Серіали в жанрі \"{genre}\"",
   "components.Discover.DiscoverTvLanguage.languageSeries": "Серіали мовою \"{language}\"",
-  "components.Discover.DiscoverWatchlist.discoverwatchlist": "Your Plex Watchlist",
+  "components.Discover.DiscoverWatchlist.discoverwatchlist": "Your Watchlist",
   "components.Discover.DiscoverWatchlist.watchlist": "Список спостереження Plex",
   "components.Discover.MovieGenreList.moviegenres": "Фільми за жанрами",
   "components.Discover.MovieGenreSlider.moviegenres": "Фільми за жанрами",

src/i18n/locale/zh_Hans.json

@@ -274,6 +274,8 @@
   "components.Layout.UserDropdown.signout": "登出",
   "components.Layout.UserDropdown.settings": "用户设定",
   "components.Layout.UserDropdown.myprofile": "个人档案",
+  "components.Layout.Sidebar.browsemovies": "电影",
+  "components.Layout.Sidebar.browsetv": "电视节目",
   "components.Layout.Sidebar.users": "用户",
   "components.Layout.Sidebar.settings": "设定",
   "components.Layout.Sidebar.requests": "请求",
@@ -289,6 +291,7 @@
   "components.Discover.trending": "趋势",
   "components.Discover.recentrequests": "最新请求",
   "components.Discover.recentlyAdded": "最新添加",
+  "components.Discover.RecentlyAddedSlider.recentlyAdded": "最近添加",
   "components.Discover.populartv": "热门电视节目",
   "components.Discover.popularmovies": "热门电影",
   "components.Discover.discovertv": "热门电视节目",

src/pages/movie/[movieId]/index.tsx

@@ -1,7 +1,7 @@
 import MovieDetails from '@app/components/MovieDetails';
 import type { MovieDetails as MovieDetailsType } from '@server/models/Movie';
 import axios from 'axios';
-import type { NextPage } from 'next';
+import type { GetServerSideProps, NextPage } from 'next';
 
 interface MoviePageProps {
   movie?: MovieDetailsType;
@@ -11,25 +11,25 @@ const MoviePage: NextPage<MoviePageProps> = ({ movie }) => {
   return <MovieDetails movie={movie} />;
 };
 
-MoviePage.getInitialProps = async (ctx) => {
+export const getServerSideProps: GetServerSideProps<MoviePageProps> = async (
-  if (ctx.req) {
+  ctx
-    const response = await axios.get<MovieDetailsType>(
+) => {
-      `http://localhost:${process.env.PORT || 5055}/api/v1/movie/${
+  const response = await axios.get<MovieDetailsType>(
-        ctx.query.movieId
+    `http://localhost:${process.env.PORT || 5055}/api/v1/movie/${
-      }`,
+      ctx.query.movieId
-      {
+    }`,
-        headers: ctx.req?.headers?.cookie
+    {
-          ? { cookie: ctx.req.headers.cookie }
+      headers: ctx.req?.headers?.cookie
-          : undefined,
+        ? { cookie: ctx.req.headers.cookie }
-      }
+        : undefined,
-    );
+    }
+  );
 
-    return {
+  return {
+    props: {
       movie: response.data,
-    };
+    },
-  }
+  };
-
-  return {};
 };
 
 export default MoviePage;

src/pages/tv/[tvId]/index.tsx

@@ -1,7 +1,7 @@
 import TvDetails from '@app/components/TvDetails';
 import type { TvDetails as TvDetailsType } from '@server/models/Tv';
 import axios from 'axios';
-import type { NextPage } from 'next';
+import type { GetServerSideProps, NextPage } from 'next';
 
 interface TvPageProps {
   tv?: TvDetailsType;
@@ -11,25 +11,23 @@ const TvPage: NextPage<TvPageProps> = ({ tv }) => {
   return <TvDetails tv={tv} />;
 };
 
-TvPage.getInitialProps = async (ctx) => {
+export const getServerSideProps: GetServerSideProps<TvPageProps> = async (
-  if (ctx.req) {
+  ctx
-    const response = await axios.get<TvDetailsType>(
+) => {
-      `http://localhost:${process.env.PORT || 5055}/api/v1/tv/${
+  const response = await axios.get<TvDetailsType>(
-        ctx.query.tvId
+    `http://localhost:${process.env.PORT || 5055}/api/v1/tv/${ctx.query.tvId}`,
-      }`,
+    {
-      {
+      headers: ctx.req?.headers?.cookie
-        headers: ctx.req?.headers?.cookie
+        ? { cookie: ctx.req.headers.cookie }
-          ? { cookie: ctx.req.headers.cookie }
+        : undefined,
-          : undefined,
+    }
-      }
+  );
-    );
 
-    return {
+  return {
+    props: {
       tv: response.data,
-    };
+    },
-  }
+  };
-
-  return {};
 };
 
 export default TvPage;

src/styles/globals.css

@@ -17,7 +17,7 @@
 
   body {
     @apply bg-gray-900;
-    overscroll-behavior-y: contain;
+    -webkit-overflow-scrolling: touch;
   }
 
   code {
@@ -73,6 +73,10 @@
     grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
   }
 
+  .provider-icons {
+    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
+  }
+
   .slider-header {
     @apply relative mt-6 mb-4 flex;
   }