chore(release): 1.6.0

Clarify email address field during setup

.all-contributorsrc

@@ -773,6 +773,105 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "lunks",
+      "name": "Pedro Nascimento",
+      "avatar_url": "https://avatars.githubusercontent.com/u/91118?v=4",
+      "profile": "http://twitter.com/lunks/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "owenvoke",
+      "name": "Owen Voke",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1899334?v=4",
+      "profile": "https://voke.dev",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Nimelrian",
+      "name": "Sebastian K",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8960836?v=4",
+      "profile": "https://github.com/Nimelrian",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "jariz",
+      "name": "jariz",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1415847?v=4",
+      "profile": "https://github.com/jariz",
+      "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>",
@@ -782,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
-
-# i18n locale files
-
-src/i18n/locale/ @Fallenbagel
+*                               @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/release.yml

@@ -94,7 +94,7 @@ jobs:
     name: Send Discord Notification
     needs: semantic-release
     if: always()
-    runs-on: self-hosted
+    runs-on: ubuntu-20.04
     steps:
       - name: Get Build Job Status
         uses: technote-space/workflow-conclusion-action@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

.vscode/settings.json

@@ -16,5 +16,8 @@
     }
   ],
   "editor.formatOnSave": true,
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "files.associations": {
+    "globals.css": "tailwindcss"
+  }
 }

CHANGELOG.md

@@ -1,3 +1,74 @@
+# [1.6.0](https://github.com/fallenbagel/jellyseerr/compare/v1.5.0...v1.6.0) (2023-08-04)
+
+
+### Bug Fixes
+
+* availability sync file detection ([#3371](https://github.com/fallenbagel/jellyseerr/issues/3371)) ([7522aa3](https://github.com/fallenbagel/jellyseerr/commit/7522aa31743b169c903ebdf9d4d698645d27514c))
+* corrected initial fallback data load on details page ([#3395](https://github.com/fallenbagel/jellyseerr/issues/3395)) ([4bd8764](https://github.com/fallenbagel/jellyseerr/commit/4bd87647d0551c20e13589a62690a6f3e5ad8ff7))
+* correctly load series fallback modal with sonarr v4 ([#3451](https://github.com/fallenbagel/jellyseerr/issues/3451)) ([e051b1d](https://github.com/fallenbagel/jellyseerr/commit/e051b1dfea9c9320cc9dd420c475ae74cff0d901))
+* **deps:** update all non-major dependencies ([#3223](https://github.com/fallenbagel/jellyseerr/issues/3223)) ([f5191ad](https://github.com/fallenbagel/jellyseerr/commit/f5191aded680357522a65bbdcc40d162b8fbf594))
+* error deleting users with over 1000 requests ([#3376](https://github.com/fallenbagel/jellyseerr/issues/3376)) ([ac77b03](https://github.com/fallenbagel/jellyseerr/commit/ac77b037d5fb0c54f5edf4b29d04adb57aef388f))
+* external url regex is now consistent with internal url ([33ec443](https://github.com/fallenbagel/jellyseerr/commit/33ec4436fb82e1eb1bc97dd650088c27785e9d94))
+* externalLinkBlock ([46cd4d0](https://github.com/fallenbagel/jellyseerr/commit/46cd4d01d9a3cf17d79350c5e678202820272299))
+* fix regex for internal url to use a more effecient one ([e848386](https://github.com/fallenbagel/jellyseerr/commit/e848386d10f05f157e7a6dde8847ecab50c169ac))
+* fixes RT ratings for tv shows ([#3492](https://github.com/fallenbagel/jellyseerr/issues/3492)) ([04fbd00](https://github.com/fallenbagel/jellyseerr/commit/04fbd00d4ac29045592588ef8b664d1916991e37)), closes [#3491](https://github.com/fallenbagel/jellyseerr/issues/3491)
+* **genreselector:** fix searching in Genre filter ([#3468](https://github.com/fallenbagel/jellyseerr/issues/3468)) ([d7fa35e](https://github.com/fallenbagel/jellyseerr/commit/d7fa35e066cf371797aaa46ca464aa531ba8fb35))
+* handle search results with collections ([#3393](https://github.com/fallenbagel/jellyseerr/issues/3393)) ([70b1540](https://github.com/fallenbagel/jellyseerr/commit/70b1540ae23e83e01013856a9e06ad39e600922d))
+* lock body scroll when using webkit ([#3399](https://github.com/fallenbagel/jellyseerr/issues/3399)) ([c27f960](https://github.com/fallenbagel/jellyseerr/commit/c27f96096ac8cc6c387f9d1dde5b263576ac2132))
+* **logs:** jellyfin auth error now has the severity warn consistent with local login ([cc041b5](https://github.com/fallenbagel/jellyseerr/commit/cc041b5e0aa2b67573edba5919772b77a5111162)), closes [#224](https://github.com/fallenbagel/jellyseerr/issues/224)
+* make a (shallow) copy of radarr/sonarr tags into a request before adding user tags ([#3485](https://github.com/fallenbagel/jellyseerr/issues/3485)) ([48f7666](https://github.com/fallenbagel/jellyseerr/commit/48f76662d5c08156f1da3f47e216c5f02668f64b))
+* **ui:** corrected default badge hover opacity ([#3369](https://github.com/fallenbagel/jellyseerr/issues/3369)) ([a4d07f5](https://github.com/fallenbagel/jellyseerr/commit/a4d07f5afab613317d96c9c6e9b47157a5a28986))
+* **ui:** corrected mobile menu spacing in collection details ([#3432](https://github.com/fallenbagel/jellyseerr/issues/3432)) ([77a33cb](https://github.com/fallenbagel/jellyseerr/commit/77a33cb74d744bb747b791785799b632af8c7862))
+* **ui:** Make play symbol white ([1fe4bb8](https://github.com/fallenbagel/jellyseerr/commit/1fe4bb8a0415a72791ced75a2fba1027287398d5))
+* **ui:** Resize Emby icon and add margins ([ad69d67](https://github.com/fallenbagel/jellyseerr/commit/ad69d6715e976630092bfbbb1843886523551014))
+* **watchlist:** add validation for creation request ([03316c6](https://github.com/fallenbagel/jellyseerr/commit/03316c642d1ecf89753789af08caf6e3aac80113))
+* **watchlist:** fix github code scanning ([c08897b](https://github.com/fallenbagel/jellyseerr/commit/c08897bdc1cff65862c62347572bbbd01b6c36ac))
+
+
+### Features
+
+* **add watchlist:** adding midding functionality from overserr ([5f1c10d](https://github.com/fallenbagel/jellyseerr/commit/5f1c10d50aaa430bcda96218ef2cc12a0eb926f3))
+* adds streaming services custom slider ([#3361](https://github.com/fallenbagel/jellyseerr/issues/3361)) ([2520d8f](https://github.com/fallenbagel/jellyseerr/commit/2520d8f739abfde608f3ef66a9fbe6b7b5c6647a))
+* auto tagging requested media with username ([#3338](https://github.com/fallenbagel/jellyseerr/issues/3338)) ([24f268b](https://github.com/fallenbagel/jellyseerr/commit/24f268b6cb67d9a8d8675cd6e09dd83a7f499add))
+* **discover:** support filtering by tmdb user vote count on discover page ([#3407](https://github.com/fallenbagel/jellyseerr/issues/3407)) ([aa84977](https://github.com/fallenbagel/jellyseerr/commit/aa849776809dfe891e67ff4db6861ef44df1a774))
+* **settings:** add internal url to jellyfin settings form ([0a30cd3](https://github.com/fallenbagel/jellyseerr/commit/0a30cd356d217a39546c016cc8bfa6ff6ad75e3e)), closes [#194](https://github.com/fallenbagel/jellyseerr/issues/194)
+* **src/components/externallinkblock/index.tsx:** support Emby icon ([672061c](https://github.com/fallenbagel/jellyseerr/commit/672061cd646c97c9954790c8e50eac88ea2666e9))
+* **tooltip:** email tooltip now appears when hovered over info icon ([cd7930e](https://github.com/fallenbagel/jellyseerr/commit/cd7930eef98451a781e5c9dc5ec223600a379f42))
+* translations update ([47287c3](https://github.com/fallenbagel/jellyseerr/commit/47287c368885d14bd1a56e3e8318ce22dd0f6ddf)), closes [#381](https://github.com/fallenbagel/jellyseerr/issues/381)
+* **watchlist:** add translation for en ([b7e3d28](https://github.com/fallenbagel/jellyseerr/commit/b7e3d285ed35b623062eceb0d99035cafbf075a6))
+
+# [1.5.0](https://github.com/fallenbagel/jellyseerr/compare/v1.4.1...v1.5.0) (2023-04-20)
+
+
+### Bug Fixes
+
+* add better checks on 4k detection of series ([bc9017f](https://github.com/fallenbagel/jellyseerr/commit/bc9017f54d84ec24c4d74d38e1b4e24219425d41))
+* added a refresh interval if download status is in progress ([#3275](https://github.com/fallenbagel/jellyseerr/issues/3275)) ([1e2c6f4](https://github.com/fallenbagel/jellyseerr/commit/1e2c6f46ab66c836f321b5d8e34f1e8124c0b542))
+* **build:** increase threshold for amount of data to be fetched when SSR'ing ([#3320](https://github.com/fallenbagel/jellyseerr/issues/3320)) ([d7b83d2](https://github.com/fallenbagel/jellyseerr/commit/d7b83d22cee3d20db564cc0564d42802b02327e3))
+* disable availability sync temporarily ([2e5cf22](https://github.com/fallenbagel/jellyseerr/commit/2e5cf226265686012329248e7f729fec324c3deb))
+* hide remove button when default service is not configured ([7d4455b](https://github.com/fallenbagel/jellyseerr/commit/7d4455ba6bfd12e2730f7085cbb87df246f01d22))
+* **jellyfin scan:** temporary workaround fix for jellyfin scan when display specials within season ([38fb66d](https://github.com/fallenbagel/jellyseerr/commit/38fb66d31e41232c01898d0d362af8338eb7b960)), closes [#215](https://github.com/fallenbagel/jellyseerr/issues/215) [#176](https://github.com/fallenbagel/jellyseerr/issues/176) [#246](https://github.com/fallenbagel/jellyseerr/issues/246)
+* lint issues ([bcd2bb7](https://github.com/fallenbagel/jellyseerr/commit/bcd2bb7c96810f5a6932f42468a628d2db1bc771))
+* logger was set to info for the wrong logs ([#3354](https://github.com/fallenbagel/jellyseerr/issues/3354)) ([c36a4ba](https://github.com/fallenbagel/jellyseerr/commit/c36a4ba2b8df05873f5dfd0946a9bc3dc4ecfd1d))
+* remove unnecessary parenthesis from api key generation ([#3336](https://github.com/fallenbagel/jellyseerr/issues/3336)) ([6bd3f01](https://github.com/fallenbagel/jellyseerr/commit/6bd3f015d65507efca60279007bd2b86ee860643))
+* **snapcraft:** use the correct config folder for image cache ([#3302](https://github.com/fallenbagel/jellyseerr/issues/3302)) ([c93467b](https://github.com/fallenbagel/jellyseerr/commit/c93467b3acf2c256324297e7e8f21e9944005dd4))
+* **ui:** hide mini status badge if non-4K media status is unknown ([#3346](https://github.com/fallenbagel/jellyseerr/issues/3346)) ([50f06da](https://github.com/fallenbagel/jellyseerr/commit/50f06dabbffc693f0843584a64d1d96e77982820))
+* **ui:** hide search bar behind slideover when opened ([#3348](https://github.com/fallenbagel/jellyseerr/issues/3348)) ([b3882de](https://github.com/fallenbagel/jellyseerr/commit/b3882de8930a70adb2f93a27be6370bfa1826587))
+* **ui:** prevent title cards from flickering when quickly hovering across them ([#3349](https://github.com/fallenbagel/jellyseerr/issues/3349)) ([eb5502a](https://github.com/fallenbagel/jellyseerr/commit/eb5502a16f86e37a933f6beca0678c2d228e77d5))
+* **watchlist:** correctly load more than 20 watchlist items ([#3351](https://github.com/fallenbagel/jellyseerr/issues/3351)) ([af880a6](https://github.com/fallenbagel/jellyseerr/commit/af880a6c839794b34bddcd7e0fe56353aa48ba36))
+
+
+### Features
+
+* add a button in ManageSlideOver to remove the movie and the file from Radarr/Sonarr ([2e74584](https://github.com/fallenbagel/jellyseerr/commit/2e7458457e995dd3ec6dd96035fe997646cdd446))
+* availability sync rework ([#3219](https://github.com/fallenbagel/jellyseerr/issues/3219)) ([ae38183](https://github.com/fallenbagel/jellyseerr/commit/ae3818304b2f75222d1bd223ece94f829a3b42d0)), closes [#377](https://github.com/fallenbagel/jellyseerr/issues/377)
+* full title of download item on hover with tooltip ([#3296](https://github.com/fallenbagel/jellyseerr/issues/3296)) ([33e7691](https://github.com/fallenbagel/jellyseerr/commit/33e7691b94d7d369a0a1410e434850bc51e5572e))
+
+
+### Performance Improvements
+
+* **imageproxy:** do not set cookies to image proxy so CDNs can cache images ([#3332](https://github.com/fallenbagel/jellyseerr/issues/3332)) ([966639d](https://github.com/fallenbagel/jellyseerr/commit/966639df430d32f6bfebdb16314dc4590d21caf8))
+
 ## [1.4.1](https://github.com/fallenbagel/jellyseerr/compare/v1.4.0...v1.4.1) (2023-01-31)
 
 

README.md

@@ -5,7 +5,6 @@
 <a href="https://discord.gg/ckbvBtDJgC"><img src="https://img.shields.io/badge/Discord-Chat-lightgrey" alt="Discord"></a>
 <a href="https://hub.docker.com/r/fallenbagel/jellyseerr"><img src="https://img.shields.io/docker/pulls/fallenbagel/jellyseerr" alt="Docker pulls"></a>
 <a href="https://github.com/fallenbagel/jellyseerr/blob/develop/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/fallenbagel/jellyseerr"></a>
-</p>
 
 **Jellyseerr** is a free and open source software application for managing requests for your media library. It is a a fork of Overseerr built to bring support for Jellyfin & Emby media servers!
 
@@ -141,3 +140,7 @@ Our [Code of Conduct](https://github.com/fallenbagel/jellyseerr/blob/develop/COD
 ## Contributing
 
 You can help improve Jellyseerr too! Check out our [Contribution Guide](https://github.com/fallenbagel/jellyseerr/blob/develop/CONTRIBUTING.md) to get started.
+
+## Contributors ✨
+
+Thanks goes to all wonderful people who contributed directly to Jellyseerr and Overseerr.

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', '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(

cypress/e2e/settings/discover-customization.cy.ts

@@ -96,7 +96,7 @@ describe('Discover Customization', () => {
       .should('be.disabled');
 
     cy.get('#data').clear();
-    cy.get('#data').type('time travel{enter}', { delay: 100 });
+    cy.get('#data').type('christmas{enter}', { delay: 100 });
 
     // Confirming we have some results
     cy.contains('.slider-header', sliderTitle)

next.config.js

@@ -23,5 +23,6 @@ module.exports = {
   },
   experimental: {
     scrollRestoration: true,
+    largePageDataBytes: 256000,
   },
 };

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:
@@ -3868,7 +3898,7 @@ paths:
                 $ref: '#/components/schemas/User'
   /user/{userId}/requests:
     get:
-      summary: Get user by ID
+      summary: Get requests for a specific user
       description: |
         Retrieves a user's requests in a JSON object.
       tags:
@@ -3962,13 +3992,49 @@ 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 user by ID
+      summary: Get the Plex watchlist for a specific user
       description: |
         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:
@@ -5876,6 +5962,23 @@ paths:
       responses:
         '204':
           description: Succesfully removed media item
+  /media/{mediaId}/file:
+    delete:
+      summary: Delete media file
+      description: Removes a media file from radarr/sonarr. The `ADMIN` permission is required to perform this action.
+      tags:
+        - media
+      parameters:
+        - in: path
+          name: mediaId
+          description: Media ID
+          required: true
+          example: '1'
+          schema:
+            type: string
+      responses:
+        '204':
+          description: Succesfully removed media item
   /media/{mediaId}/{status}:
     post:
       summary: Update media status

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellyseerr",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "private": true,
   "scripts": {
     "dev": "nodemon -e ts --watch server --watch overseerr-api.yml -e .json,.ts,.yml -x ts-node -r tsconfig-paths/register --files --project server/tsconfig.json server/index.ts",
@@ -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-locale": "3.0.11",
-    "@formatjs/intl-pluralrules": "5.1.8",
+    "@formatjs/intl-displaynames": "6.2.6",
+    "@formatjs/intl-locale": "3.1.1",
+    "@formatjs/intl-pluralrules": "5.1.10",
     "@formatjs/intl-utils": "3.8.4",
-    "@headlessui/react": "1.7.7",
-    "@heroicons/react": "2.0.13",
+    "@headlessui/react": "1.7.12",
+    "@heroicons/react": "2.0.16",
     "@supercharge/request-ip": "1.2.0",
     "@svgr/webpack": "6.5.1",
-    "@tanem/react-nprogress": "5.0.22",
-    "ace-builds": "1.14.0",
-    "axios": "1.2.2",
+    "@tanem/react-nprogress": "5.0.30",
+    "ace-builds": "1.15.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",
-    "nodemailer": "6.8.0",
-    "openpgp": "5.5.0",
+    "node-schedule": "2.1.1",
+    "nodemailer": "6.9.1",
+    "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-intl": "6.2.5",
-    "react-markdown": "8.0.4",
+    "react-intersection-observer": "9.4.3",
+    "react-intl": "6.2.10",
+    "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",
-    "swr": "2.0.0",
-    "typeorm": "0.3.11",
+    "swagger-ui-express": "4.6.2",
+    "swr": "2.0.4",
+    "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",
-    "@commitlint/cli": "17.4.0",
-    "@commitlint/config-conventional": "17.4.0",
+    "@babel/cli": "7.21.0",
+    "@commitlint/cli": "17.4.4",
+    "@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-session": "1.17.5",
+    "@types/express": "4.17.17",
+    "@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.26",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@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/parser": "5.48.0",
+    "@typescript-eslint/eslint-plugin": "5.54.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-jsx-a11y": "6.6.1",
+    "eslint-plugin-formatjs": "4.9.0",
+    "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",
-    "prettier": "2.8.1",
-    "prettier-plugin-organize-imports": "3.2.1",
-    "prettier-plugin-tailwindcss": "0.2.1",
+    "postcss": "8.4.21",
+    "prettier": "2.8.4",
+    "prettier-plugin-organize-imports": "3.2.2",
+    "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-dom": "18.0.10"
+    "@types/react": "18.0.28",
+    "@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.releaseYear === year.toString() && movie.title.includes(name)
+          (movie) => movie.releaseYear === year && movie.title.includes(name)
         );
       }
 
       // If we still dont find a movie, try to match just on year
       if (!movie) {
-        movie = contentResults.hits.find(
-          (movie) => movie.releaseYear === year.toString()
-        );
+        movie = contentResults.hits.find((movie) => movie.releaseYear === year);
       }
 
       // 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/radarr.ts

@@ -213,6 +213,20 @@ class RadarrAPI extends ServarrBase<{ movieId: number }> {
       );
     }
   }
+  public removeMovie = async (movieId: number): Promise<void> => {
+    try {
+      const { id, title } = await this.getMovieByTmdbId(movieId);
+      await this.axios.delete(`/movie/${id}`, {
+        params: {
+          deleteFiles: true,
+          addImportExclusion: false,
+        },
+      });
+      logger.info(`[Radarr] Removed movie ${title}`);
+    } catch (e) {
+      throw new Error(`[Radarr] Failed to remove movie: ${e.message}`);
+    }
+  };
 }
 
 export default RadarrAPI;

server/api/servarr/sonarr.ts

@@ -1,7 +1,7 @@
 import logger from '@server/logger';
 import ServarrBase from './base';
 
-interface SonarrSeason {
+export interface SonarrSeason {
   seasonNumber: number;
   monitored: boolean;
   statistics?: {
@@ -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', {
@@ -321,6 +340,20 @@ class SonarrAPI extends ServarrBase<{
 
     return newSeasons;
   }
+  public removeSerie = async (serieId: number): Promise<void> => {
+    try {
+      const { id, title } = await this.getSeriesByTvdbId(serieId);
+      await this.axios.delete(`/series/${id}`, {
+        params: {
+          deleteFiles: true,
+          addImportExclusion: false,
+        },
+      });
+      logger.info(`[Radarr] Removed serie ${title}`);
+    } catch (e) {
+      throw new Error(`[Radarr] Failed to remove serie: ${e.message}`);
+    }
+  };
 }
 
 export default SonarrAPI;

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({
-        where: { tmdbId: In(finalIds) },
-      });
+      const media = await mediaRepository
+        .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,
@@ -115,29 +127,29 @@ class Media {
   @Column({ type: 'datetime', nullable: true })
   public mediaAddedAt: Date;
 
-  @Column({ nullable: true })
-  public serviceId?: number;
+  @Column({ nullable: true, type: 'int' })
+  public serviceId?: number | null;
 
-  @Column({ nullable: true })
-  public serviceId4k?: number;
+  @Column({ nullable: true, type: 'int' })
+  public serviceId4k?: number | null;
 
-  @Column({ nullable: true })
-  public externalServiceId?: number;
+  @Column({ nullable: true, type: 'int' })
+  public externalServiceId?: number | null;
 
-  @Column({ nullable: true })
-  public externalServiceId4k?: number;
+  @Column({ nullable: true, type: 'int' })
+  public externalServiceId4k?: number | null;
 
-  @Column({ nullable: true })
-  public externalServiceSlug?: string;
+  @Column({ nullable: true, type: 'varchar' })
+  public externalServiceSlug?: string | null;
 
-  @Column({ nullable: true })
-  public externalServiceSlug4k?: string;
+  @Column({ nullable: true, type: 'varchar' })
+  public externalServiceSlug4k?: string | null;
 
-  @Column({ nullable: true })
-  public ratingKey?: string;
+  @Column({ nullable: true, type: 'varchar' })
+  public ratingKey?: string | null;
 
-  @Column({ nullable: true })
-  public ratingKey4k?: string;
+  @Column({ nullable: true, type: 'varchar' })
+  public ratingKey4k?: string | null;
 
   @Column({ nullable: true })
   public jellyfinMediaId?: string;
@@ -288,7 +300,9 @@ class Media {
     if (this.mediaType === MediaType.MOVIE) {
       if (
         this.externalServiceId !== undefined &&
-        this.serviceId !== undefined
+        this.externalServiceId !== null &&
+        this.serviceId !== undefined &&
+        this.serviceId !== null
       ) {
         this.downloadStatus = downloadTracker.getMovieProgress(
           this.serviceId,
@@ -298,7 +312,9 @@ class Media {
 
       if (
         this.externalServiceId4k !== undefined &&
-        this.serviceId4k !== undefined
+        this.externalServiceId4k !== null &&
+        this.serviceId4k !== undefined &&
+        this.serviceId4k !== null
       ) {
         this.downloadStatus4k = downloadTracker.getMovieProgress(
           this.serviceId4k,
@@ -310,7 +326,9 @@ class Media {
     if (this.mediaType === MediaType.TV) {
       if (
         this.externalServiceId !== undefined &&
-        this.serviceId !== undefined
+        this.externalServiceId !== null &&
+        this.serviceId !== undefined &&
+        this.serviceId !== null
       ) {
         this.downloadStatus = downloadTracker.getSeriesProgress(
           this.serviceId,
@@ -320,7 +338,9 @@ class Media {
 
       if (
         this.externalServiceId4k !== undefined &&
-        this.serviceId4k !== undefined
+        this.externalServiceId4k !== null &&
+        this.serviceId4k !== undefined &&
+        this.serviceId4k !== null
       ) {
         this.downloadStatus4k = downloadTracker.getSeriesProgress(
           this.serviceId4k,

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,
@@ -1187,3 +1255,5 @@ export class MediaRequest {
     }
   }
 }
+
+export default MediaRequest;

server/entity/SeasonRequest.ts

@@ -1,5 +1,7 @@
 import { MediaRequestStatus } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
 import {
+  AfterRemove,
   Column,
   CreateDateColumn,
   Entity,
@@ -34,6 +36,18 @@ class SeasonRequest {
   constructor(init?: Partial<SeasonRequest>) {
     Object.assign(this, init);
   }
+
+  @AfterRemove()
+  public async handleRemoveParent(): Promise<void> {
+    const mediaRequestRepository = getRepository(MediaRequest);
+    const requestToBeDeleted = await mediaRequestRepository.findOneOrFail({
+      where: { id: this.request.id },
+    });
+
+    if (requestToBeDeleted.seasons.length === 0) {
+      await mediaRequestRepository.delete({ id: this.request.id });
+    }
+  }
 }
 
 export default SeasonRequest;

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/index.ts

@@ -17,6 +17,7 @@ import WebhookAgent from '@server/lib/notifications/agents/webhook';
 import WebPushAgent from '@server/lib/notifications/agents/webpush';
 import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
+import clearCookies from '@server/middleware/clearcookies';
 import routes from '@server/routes';
 import imageproxy from '@server/routes/imageproxy';
 import { getAppVersion } from '@server/utils/appVersion';
@@ -192,7 +193,8 @@ app
     });
     server.use('/api/v1', routes);
 
-    server.use('/imageproxy', imageproxy);
+    // Do not set cookies so CDNs can cache them
+    server.use('/imageproxy', clearCookies, imageproxy);
 
     server.get('*', (req, res) => handle(req, res));
     server.use(

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/job/jellyfinsync/index.ts

@@ -278,11 +278,11 @@ class JobJellyfinSync {
                   ExtendedEpisodeData.MediaSources?.some((MediaSource) => {
                     return MediaSource.MediaStreams.some((MediaStream) => {
                       if (MediaStream.Type === 'Video') {
-                        if (MediaStream.Width ?? 0 < 2000) {
+                        if ((MediaStream.Width ?? 0) >= 2000) {
+                          total4k += episodeCount;
+                        } else {
                           totalStandard += episodeCount;
                         }
-                      } else {
-                        total4k += episodeCount;
                       }
                     });
                   });
@@ -311,13 +311,13 @@ class JobJellyfinSync {
                 // setting the status to AVAILABLE if all of a type is there, partially if some,
                 // and then not modifying the status if there are 0 items
                 existingSeason.status =
-                  totalStandard === season.episode_count
+                  totalStandard >= season.episode_count
                     ? MediaStatus.AVAILABLE
                     : totalStandard > 0
                     ? MediaStatus.PARTIALLY_AVAILABLE
                     : existingSeason.status;
                 existingSeason.status4k =
-                  this.enable4kShow && total4k === season.episode_count
+                  this.enable4kShow && total4k >= season.episode_count
                     ? MediaStatus.AVAILABLE
                     : this.enable4kShow && total4k > 0
                     ? MediaStatus.PARTIALLY_AVAILABLE
@@ -329,13 +329,13 @@ class JobJellyfinSync {
                     // This ternary is the same as the ones above, but it just falls back to "UNKNOWN"
                     // if we dont have any items for the season
                     status:
-                      totalStandard === season.episode_count
+                      totalStandard >= season.episode_count
                         ? MediaStatus.AVAILABLE
                         : totalStandard > 0
                         ? MediaStatus.PARTIALLY_AVAILABLE
                         : MediaStatus.UNKNOWN,
                     status4k:
-                      this.enable4kShow && total4k === season.episode_count
+                      this.enable4kShow && total4k >= season.episode_count
                         ? MediaStatus.AVAILABLE
                         : this.enable4kShow && total4k > 0
                         ? MediaStatus.PARTIALLY_AVAILABLE

server/job/schedule.ts

@@ -16,7 +16,7 @@ interface ScheduledJob {
   job: schedule.Job;
   name: string;
   type: 'process' | 'command';
-  interval: 'short' | 'long' | 'fixed';
+  interval: 'seconds' | 'minutes' | 'hours' | 'fixed';
   cronSchedule: string;
   running?: () => boolean;
   cancelFn?: () => void;
@@ -34,7 +34,7 @@ export const startJobs = (): void => {
       id: 'plex-recently-added-scan',
       name: 'Plex Recently Added Scan',
       type: 'process',
-      interval: 'short',
+      interval: 'minutes',
       cronSchedule: jobs['plex-recently-added-scan'].schedule,
       job: schedule.scheduleJob(
         jobs['plex-recently-added-scan'].schedule,
@@ -54,7 +54,7 @@ export const startJobs = (): void => {
       id: 'plex-full-scan',
       name: 'Plex Full Library Scan',
       type: 'process',
-      interval: 'long',
+      interval: 'hours',
       cronSchedule: jobs['plex-full-scan'].schedule,
       job: schedule.scheduleJob(jobs['plex-full-scan'].schedule, () => {
         logger.info('Starting scheduled job: Plex Full Library Scan', {
@@ -74,7 +74,7 @@ export const startJobs = (): void => {
       id: 'jellyfin-recently-added-sync',
       name: 'Jellyfin Recently Added Sync',
       type: 'process',
-      interval: 'long',
+      interval: 'minutes',
       cronSchedule: jobs['jellyfin-recently-added-sync'].schedule,
       job: schedule.scheduleJob(
         jobs['jellyfin-recently-added-sync'].schedule,
@@ -94,7 +94,7 @@ export const startJobs = (): void => {
       id: 'jellyfin-full-sync',
       name: 'Jellyfin Full Library Sync',
       type: 'process',
-      interval: 'long',
+      interval: 'hours',
       cronSchedule: jobs['jellyfin-full-sync'].schedule,
       job: schedule.scheduleJob(jobs['jellyfin-full-sync'].schedule, () => {
         logger.info('Starting scheduled job: Jellyfin Full Sync', {
@@ -112,7 +112,7 @@ export const startJobs = (): void => {
     id: 'plex-watchlist-sync',
     name: 'Plex Watchlist Sync',
     type: 'process',
-    interval: 'short',
+    interval: 'minutes',
     cronSchedule: jobs['plex-watchlist-sync'].schedule,
     job: schedule.scheduleJob(jobs['plex-watchlist-sync'].schedule, () => {
       logger.info('Starting scheduled job: Plex Watchlist Sync', {
@@ -127,7 +127,7 @@ export const startJobs = (): void => {
     id: 'radarr-scan',
     name: 'Radarr Scan',
     type: 'process',
-    interval: 'long',
+    interval: 'hours',
     cronSchedule: jobs['radarr-scan'].schedule,
     job: schedule.scheduleJob(jobs['radarr-scan'].schedule, () => {
       logger.info('Starting scheduled job: Radarr Scan', { label: 'Jobs' });
@@ -142,7 +142,7 @@ export const startJobs = (): void => {
     id: 'sonarr-scan',
     name: 'Sonarr Scan',
     type: 'process',
-    interval: 'long',
+    interval: 'hours',
     cronSchedule: jobs['sonarr-scan'].schedule,
     job: schedule.scheduleJob(jobs['sonarr-scan'].schedule, () => {
       logger.info('Starting scheduled job: Sonarr Scan', { label: 'Jobs' });
@@ -152,12 +152,30 @@ export const startJobs = (): void => {
     cancelFn: () => sonarrScanner.cancel(),
   });
 
+  // Checks if media is still available in plex/sonarr/radarr libs
+  /*  scheduledJobs.push({
+    id: 'availability-sync',
+    name: 'Media Availability Sync',
+    type: 'process',
+    interval: 'hours',
+    cronSchedule: jobs['availability-sync'].schedule,
+    job: schedule.scheduleJob(jobs['availability-sync'].schedule, () => {
+      logger.info('Starting scheduled job: Media Availability Sync', {
+        label: 'Jobs',
+      });
+      availabilitySync.run();
+    }),
+    running: () => availabilitySync.running,
+    cancelFn: () => availabilitySync.cancel(),
+  });
+*/
+
   // Run download sync every minute
   scheduledJobs.push({
     id: 'download-sync',
     name: 'Download Sync',
     type: 'command',
-    interval: 'fixed',
+    interval: 'seconds',
     cronSchedule: jobs['download-sync'].schedule,
     job: schedule.scheduleJob(jobs['download-sync'].schedule, () => {
       logger.debug('Starting scheduled job: Download Sync', {
@@ -172,7 +190,7 @@ export const startJobs = (): void => {
     id: 'download-sync-reset',
     name: 'Download Sync Reset',
     type: 'command',
-    interval: 'long',
+    interval: 'hours',
     cronSchedule: jobs['download-sync-reset'].schedule,
     job: schedule.scheduleJob(jobs['download-sync-reset'].schedule, () => {
       logger.info('Starting scheduled job: Download Sync Reset', {
@@ -182,12 +200,12 @@ export const startJobs = (): void => {
     }),
   });
 
-  // Run image cache cleanup every 5 minutes
+  // Run image cache cleanup every 24 hours
   scheduledJobs.push({
     id: 'image-cache-cleanup',
     name: 'Image Cache Cleanup',
     type: 'process',
-    interval: 'long',
+    interval: 'hours',
     cronSchedule: jobs['image-cache-cleanup'].schedule,
     job: schedule.scheduleJob(jobs['image-cache-cleanup'].schedule, () => {
       logger.info('Starting scheduled job: Image Cache Cleanup', {

server/lib/availabilitySync.ts

@@ -0,0 +1,790 @@
+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, SonarrSeries } from '@server/api/servarr/sonarr';
+import SonarrAPI from '@server/api/servarr/sonarr';
+import { MediaStatus } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
+import Media from '@server/entity/Media';
+import MediaRequest from '@server/entity/MediaRequest';
+import Season from '@server/entity/Season';
+import SeasonRequest from '@server/entity/SeasonRequest';
+import { User } from '@server/entity/User';
+import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
+import { getSettings } from '@server/lib/settings';
+import logger from '@server/logger';
+
+class AvailabilitySync {
+  public running = false;
+  private plexClient: PlexAPI;
+  private plexSeasonsCache: Record<string, PlexMetadata[]> = {};
+  private sonarrSeasonsCache: Record<string, SonarrSeason[]> = {};
+  private radarrServers: RadarrSettings[];
+  private sonarrServers: SonarrSettings[];
+
+  async run() {
+    const settings = getSettings();
+    this.running = true;
+    this.plexSeasonsCache = {};
+    this.sonarrSeasonsCache = {};
+    this.radarrServers = settings.radarr.filter((server) => server.syncEnabled);
+    this.sonarrServers = settings.sonarr.filter((server) => server.syncEnabled);
+    await this.initPlexClient();
+
+    if (!this.plexClient) {
+      return;
+    }
+
+    logger.info(`Starting availability sync...`, {
+      label: 'AvailabilitySync',
+    });
+    const mediaRepository = getRepository(Media);
+    const requestRepository = getRepository(MediaRequest);
+    const seasonRepository = getRepository(Season);
+    const seasonRequestRepository = getRepository(SeasonRequest);
+
+    const pageSize = 50;
+
+    try {
+      for await (const media of this.loadAvailableMediaPaginated(pageSize)) {
+        if (!this.running) {
+          throw new Error('Job aborted');
+        }
+
+        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
+        if (!mediaExists) {
+          if (
+            media.status !== MediaStatus.UNKNOWN ||
+            media.status4k !== MediaStatus.UNKNOWN
+          ) {
+            const request = await requestRepository.find({
+              relations: {
+                media: true,
+              },
+              where: { media: { id: media.id } },
+            });
+
+            logger.info(
+              `Media ID ${media.id} does not exist in any of your media instances. Status will be changed 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;
+          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(
+                  {
+                    relations: {
+                      request: {
+                        media: true,
+                      },
+                    },
+                    where: {
+                      request: {
+                        media: {
+                          id: media.id,
+                        },
+                      },
+                      seasonNumber: season.seasonNumber,
+                    },
+                  }
+                );
+
+                if (seasonToBeDeleted) {
+                  await seasonRequestRepository.remove(seasonToBeDeleted);
+                }
+
+                didDeleteSeasons = true;
+              }
+            }
+
+            if (didDeleteSeasons) {
+              if (
+                media.status === MediaStatus.AVAILABLE ||
+                media.status4k === MediaStatus.AVAILABLE
+              ) {
+                logger.info(
+                  `Marking media ID ${media.id} as PARTIALLY_AVAILABLE because season removal has occurred.`,
+                  { label: 'AvailabilitySync' }
+                );
+
+                if (media.status === MediaStatus.AVAILABLE) {
+                  await mediaRepository.update(media.id, {
+                    status: MediaStatus.PARTIALLY_AVAILABLE,
+                  });
+                }
+
+                if (media.status4k === MediaStatus.AVAILABLE) {
+                  await mediaRepository.update(media.id, {
+                    status4k: MediaStatus.PARTIALLY_AVAILABLE,
+                  });
+                }
+              }
+            }
+          }
+        }
+      }
+    } catch (ex) {
+      logger.error('Failed to complete availability sync.', {
+        errorMessage: ex.message,
+        label: 'AvailabilitySync',
+      });
+    } finally {
+      logger.info(`Availability sync complete.`, {
+        label: 'AvailabilitySync',
+      });
+      this.running = false;
+    }
+  }
+
+  public cancel() {
+    this.running = false;
+  }
+
+  private async *loadAvailableMediaPaginated(pageSize: number) {
+    let offset = 0;
+    const mediaRepository = getRepository(Media);
+    const whereOptions = [
+      { status: MediaStatus.AVAILABLE },
+      { status: MediaStatus.PARTIALLY_AVAILABLE },
+      { status4k: MediaStatus.AVAILABLE },
+      { status4k: MediaStatus.PARTIALLY_AVAILABLE },
+    ];
+
+    let mediaPage: Media[];
+
+    do {
+      yield* (mediaPage = await mediaRepository.find({
+        where: whereOptions,
+        skip: offset,
+        take: pageSize,
+      }));
+      offset += pageSize;
+    } while (mediaPage.length > 0);
+  }
+
+  private async mediaUpdater(media: Media, is4k: boolean): Promise<void> {
+    const mediaRepository = getRepository(Media);
+    const requestRepository = getRepository(MediaRequest);
+
+    const isTVType = media.mediaType === 'tv';
+
+    const request = await requestRepository.findOne({
+      relations: {
+        media: true,
+      },
+      where: { media: { id: media.id }, is4k: is4k ? true : false },
+    });
+
+    logger.info(
+      `Media ID ${media.id} does not exist in your ${is4k ? '4k' : 'non-4k'} ${
+        isTVType ? 'Sonarr' : 'Radarr'
+      } and Plex instance. Status will be changed to unknown.`,
+      { label: 'AvailabilitySync' }
+    );
+
+    await mediaRepository.update(
+      media.id,
+      is4k
+        ? {
+            status4k: MediaStatus.UNKNOWN,
+            serviceId4k: null,
+            externalServiceId4k: null,
+            externalServiceSlug4k: null,
+            ratingKey4k: null,
+          }
+        : {
+            status: MediaStatus.UNKNOWN,
+            serviceId: null,
+            externalServiceId: null,
+            externalServiceSlug: null,
+            ratingKey: null,
+          }
+    );
+
+    if (isTVType) {
+      const seasonRepository = getRepository(Season);
+
+      await seasonRepository?.update(
+        { media: { id: media.id } },
+        is4k
+          ? { status4k: MediaStatus.UNKNOWN }
+          : { status: MediaStatus.UNKNOWN }
+      );
+    }
+
+    await requestRepository.delete({ id: request?.id });
+  }
+
+  private async mediaExistsInRadarr(
+    media: Media,
+    existsInPlex: boolean,
+    existsInPlex4k: boolean
+  ): Promise<boolean> {
+    let existsInRadarr = true;
+    let existsInRadarr4k = true;
+
+    for (const server of this.radarrServers) {
+      const api = new RadarrAPI({
+        apiKey: server.apiKey,
+        url: RadarrAPI.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
+
+        let meta: RadarrMovie | undefined;
+
+        if (!server.is4k && media.externalServiceId) {
+          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 only a single non-4k or 4k exists, then change entity columns accordingly
+    // Related media request will then be deleted
+    if (
+      !existsInRadarr &&
+      (existsInRadarr4k || existsInPlex4k) &&
+      !existsInPlex
+    ) {
+      if (media.status !== MediaStatus.UNKNOWN) {
+        this.mediaUpdater(media, false);
+      }
+    }
+
+    if (
+      (existsInRadarr || existsInPlex) &&
+      !existsInRadarr4k &&
+      !existsInPlex4k
+    ) {
+      if (media.status4k !== MediaStatus.UNKNOWN) {
+        this.mediaUpdater(media, true);
+      }
+    }
+
+    if (existsInRadarr || existsInRadarr4k || existsInPlex || existsInPlex4k) {
+      return true;
+    }
+
+    return false;
+  }
+
+  private async mediaExistsInSonarr(
+    media: Media,
+    existsInPlex: boolean,
+    existsInPlex4k: boolean
+  ): Promise<boolean> {
+    let existsInSonarr = true;
+    let existsInSonarr4k = true;
+
+    for (const server of this.sonarrServers) {
+      const api = new SonarrAPI({
+        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
+
+        let meta: SonarrSeries | undefined;
+
+        if (!server.is4k && media.externalServiceId) {
+          meta = await api.getSeriesById(media.externalServiceId);
+          this.sonarrSeasonsCache[`${server.id}-${media.externalServiceId}`] =
+            meta.seasons;
+        }
+
+        if (server.is4k && media.externalServiceId4k) {
+          meta = await api.getSeriesById(media.externalServiceId4k);
+          this.sonarrSeasonsCache[`${server.id}-${media.externalServiceId4k}`] =
+            meta.seasons;
+        }
+
+        if (!server.is4k && (!meta || meta.statistics.episodeFileCount === 0)) {
+          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 only a single non-4k or 4k exists, then change entity columns accordingly
+    // Related media request will then be deleted
+    if (
+      !existsInSonarr &&
+      (existsInSonarr4k || existsInPlex4k) &&
+      !existsInPlex
+    ) {
+      if (media.status !== MediaStatus.UNKNOWN) {
+        this.mediaUpdater(media, false);
+      }
+    }
+
+    if (
+      (existsInSonarr || existsInPlex) &&
+      !existsInSonarr4k &&
+      !existsInPlex4k
+    ) {
+      if (media.status4k !== MediaStatus.UNKNOWN) {
+        this.mediaUpdater(media, true);
+      }
+    }
+
+    if (existsInSonarr || existsInSonarr4k || existsInPlex || existsInPlex4k) {
+      return true;
+    }
+
+    return false;
+  }
+
+  private async seasonExistsInSonarr(
+    media: Media,
+    season: Season,
+    seasonExistsInPlex: boolean,
+    seasonExistsInPlex4k: boolean
+  ): Promise<boolean> {
+    let seasonExistsInSonarr = true;
+    let seasonExistsInSonarr4k = true;
+
+    const mediaRepository = getRepository(Media);
+    const seasonRepository = getRepository(Season);
+    const seasonRequestRepository = getRepository(SeasonRequest);
+
+    for (const server of this.sonarrServers) {
+      const api = new SonarrAPI({
+        apiKey: server.apiKey,
+        url: SonarrAPI.buildUrl(server, '/api/v3'),
+      });
+
+      try {
+        // Here we can use the cache we built when we fetched the series with mediaExistsInSonarr
+        // If the cache does not have data, we will fetch with the api route
+
+        let seasons: SonarrSeason[] =
+          this.sonarrSeasonsCache[
+            `${server.id}-${
+              !server.is4k ? media.externalServiceId : media.externalServiceId4k
+            }`
+          ];
+
+        if (!server.is4k && media.externalServiceId) {
+          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;
+        }
+      }
+    }
+
+    const seasonToBeDeleted = await seasonRequestRepository.findOne({
+      relations: {
+        request: {
+          media: true,
+        },
+      },
+      where: {
+        request: {
+          is4k: seasonExistsInSonarr ? true : false,
+          media: {
+            id: media.id,
+          },
+        },
+        seasonNumber: season.seasonNumber,
+      },
+    });
+
+    // 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 (
+      !seasonExistsInSonarr &&
+      (seasonExistsInSonarr4k || seasonExistsInPlex4k) &&
+      !seasonExistsInPlex
+    ) {
+      if (season.status !== MediaStatus.UNKNOWN) {
+        logger.info(
+          `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, {
+          status: MediaStatus.UNKNOWN,
+        });
+
+        if (seasonToBeDeleted) {
+          await seasonRequestRepository.remove(seasonToBeDeleted);
+        }
+
+        if (media.status === MediaStatus.AVAILABLE) {
+          logger.info(
+            `Marking media ID ${media.id} as PARTIALLY_AVAILABLE because season removal has occurred.`,
+            { label: 'AvailabilitySync' }
+          );
+          await mediaRepository.update(media.id, {
+            status: MediaStatus.PARTIALLY_AVAILABLE,
+          });
+        }
+      }
+    }
+
+    if (
+      (seasonExistsInSonarr || seasonExistsInPlex) &&
+      !seasonExistsInSonarr4k &&
+      !seasonExistsInPlex4k
+    ) {
+      if (season.status4k !== MediaStatus.UNKNOWN) {
+        logger.info(
+          `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, {
+          status4k: MediaStatus.UNKNOWN,
+        });
+
+        if (seasonToBeDeleted) {
+          await seasonRequestRepository.remove(seasonToBeDeleted);
+        }
+
+        if (media.status4k === MediaStatus.AVAILABLE) {
+          logger.info(
+            `Marking media ID ${media.id} as PARTIALLY_AVAILABLE because season removal has occurred.`,
+            { label: 'AvailabilitySync' }
+          );
+          await mediaRepository.update(media.id, {
+            status4k: MediaStatus.PARTIALLY_AVAILABLE,
+          });
+        }
+      }
+    }
+
+    if (
+      seasonExistsInSonarr ||
+      seasonExistsInSonarr4k ||
+      seasonExistsInPlex ||
+      seasonExistsInPlex4k
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  private async mediaExists(media: Media): Promise<boolean> {
+    const ratingKey = media.ratingKey;
+    const ratingKey4k = media.ratingKey4k;
+
+    let existsInPlex = false;
+    let existsInPlex4k = false;
+
+    // Check each plex instance to see if media exists
+    try {
+      if (ratingKey) {
+        const meta = await this.plexClient?.getMetadata(ratingKey);
+        if (meta) {
+          existsInPlex = true;
+        }
+      }
+
+      if (ratingKey4k) {
+        const meta4k = await this.plexClient?.getMetadata(ratingKey4k);
+        if (meta4k) {
+          existsInPlex4k = true;
+        }
+      }
+    } catch (ex) {
+      if (!ex.message.includes('response code: 404')) {
+        throw ex;
+      }
+    }
+    // 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
+    // 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,
+        existsInPlex,
+        existsInPlex4k
+      );
+
+      // If true, media exists in at least one radarr or plex instance.
+      if (existsInRadarr) {
+        logger.warn(
+          `${media.id} exists in at least one Radarr or Plex instance. Media will be updated if set to available.`,
+          {
+            label: 'AvailabilitySync',
+          }
+        );
+
+        return true;
+      }
+    }
+
+    if (media.mediaType === 'tv') {
+      const existsInSonarr = await this.mediaExistsInSonarr(
+        media,
+        existsInPlex,
+        existsInPlex4k
+      );
+
+      // If true, media exists in at least one sonarr or plex instance.
+      if (existsInSonarr) {
+        logger.warn(
+          `${media.id} exists in at least one Sonarr or Plex instance. Media will be updated if set to available.`,
+          {
+            label: 'AvailabilitySync',
+          }
+        );
+
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private async seasonExists(media: Media, season: Season) {
+    const ratingKey = media.ratingKey;
+    const ratingKey4k = media.ratingKey4k;
+
+    let seasonExistsInPlex = false;
+    let seasonExistsInPlex4k = false;
+
+    if (ratingKey) {
+      const children =
+        this.plexSeasonsCache[ratingKey] ??
+        (await this.plexClient?.getChildrenMetadata(ratingKey)) ??
+        [];
+      this.plexSeasonsCache[ratingKey] = children;
+      const seasonMeta = children?.find(
+        (child) => child.index === season.seasonNumber
+      );
+
+      if (seasonMeta) {
+        seasonExistsInPlex = true;
+      }
+    }
+
+    if (ratingKey4k) {
+      const children4k =
+        this.plexSeasonsCache[ratingKey4k] ??
+        (await this.plexClient?.getChildrenMetadata(ratingKey4k)) ??
+        [];
+      this.plexSeasonsCache[ratingKey4k] = children4k;
+      const seasonMeta4k = children4k?.find(
+        (child) => child.index === season.seasonNumber
+      );
+
+      if (seasonMeta4k) {
+        seasonExistsInPlex4k = true;
+      }
+    }
+
+    // Base case if both season versions exist in plex
+    if (seasonExistsInPlex && seasonExistsInPlex4k) {
+      return true;
+    }
+
+    const existsInSonarr = await this.seasonExistsInSonarr(
+      media,
+      season,
+      seasonExistsInPlex,
+      seasonExistsInPlex4k
+    );
+
+    if (existsInSonarr) {
+      logger.warn(
+        `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',
+        }
+      );
+
+      return true;
+    }
+
+    return false;
+  }
+
+  private async initPlexClient() {
+    const userRepository = getRepository(User);
+    const admin = await userRepository.findOne({
+      select: { id: true, plexToken: true },
+      where: { id: 1 },
+    });
+
+    if (!admin) {
+      logger.warning('No admin configured. Availability sync skipped.');
+      return;
+    }
+
+    this.plexClient = new PlexAPI({ plexToken: admin.plexToken });
+  }
+}
+
+const availabilitySync = new AvailabilitySync();
+export default availabilitySync;

server/lib/imageproxy.ts

@@ -18,14 +18,14 @@ type ImageResponse = {
   imageBuffer: Buffer;
 };
 
+const baseCacheDirectory = process.env.CONFIG_DIRECTORY
+  ? `${process.env.CONFIG_DIRECTORY}/cache/images`
+  : path.join(__dirname, '../../config/cache/images');
+
 class ImageProxy {
   public static async clearCache(key: string) {
     let deletedImages = 0;
-    const cacheDirectory = path.join(
-      __dirname,
-      '../../config/cache/images/',
-      key
-    );
+    const cacheDirectory = path.join(baseCacheDirectory, key);
 
     const files = await promises.readdir(cacheDirectory);
 
@@ -57,11 +57,7 @@ class ImageProxy {
   public static async getImageStats(
     key: string
   ): Promise<{ size: number; imageCount: number }> {
-    const cacheDirectory = path.join(
-      __dirname,
-      '../../config/cache/images/',
-      key
-    );
+    const cacheDirectory = path.join(baseCacheDirectory, key);
 
     const imageTotalSize = await ImageProxy.getDirectorySize(cacheDirectory);
     const imageCount = await ImageProxy.getImageCount(cacheDirectory);
@@ -263,7 +259,7 @@ class ImageProxy {
   }
 
   private getCacheDirectory() {
-    return path.join(__dirname, '../../config/cache/images/', this.key);
+    return path.join(baseCacheDirectory, this.key);
   }
 }
 

server/lib/settings.ts

@@ -69,6 +69,7 @@ export interface DVRSettings {
   externalUrl?: string;
   syncEnabled: boolean;
   preventSearch: boolean;
+  tagRequests: boolean;
 }
 
 export interface RadarrSettings extends DVRSettings {
@@ -264,7 +265,8 @@ export type JobId =
   | 'download-sync-reset'
   | 'jellyfin-recently-added-sync'
   | 'jellyfin-full-sync'
-  | 'image-cache-cleanup';
+  | 'image-cache-cleanup'
+  | 'availability-sync';
 
 interface AllSettings {
   clientId: string;
@@ -435,6 +437,9 @@ class Settings {
         'sonarr-scan': {
           schedule: '0 30 4 * * *',
         },
+        'availability-sync': {
+          schedule: '0 0 5 * * *',
+        },
         'download-sync': {
           schedule: '0 * * * * *',
         },
@@ -590,7 +595,7 @@ class Settings {
   }
 
   private generateApiKey(): string {
-    return Buffer.from(`${Date.now()}${randomUUID()})`).toString('base64');
+    return Buffer.from(`${Date.now()}${randomUUID()}`).toString('base64');
   }
 
   private generateVapidKeys(force = false): void {

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/middleware/clearcookies.ts

@@ -0,0 +1,6 @@
+const clearCookies: Middleware = (_req, res, next) => {
+  res.removeHeader('Set-Cookie');
+  next();
+};
+
+export default clearCookies;

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)
       );
 
@@ -800,12 +822,12 @@ discoverRoutes.get<{ language: string }, GenreSliderItem[]>(
   }
 );
 
-discoverRoutes.get<{ page?: number }, WatchlistResponse>(
+discoverRoutes.get<Record<string, unknown>, WatchlistResponse>(
   '/watchlist',
   async (req, res) => {
     const userRepository = getRepository(User);
     const itemsPerPage = 20;
-    const page = req.params.page ?? 1;
+    const page = Number(req.query.page) ?? 1;
     const offset = (page - 1) * itemsPerPage;
 
     const activeUser = await userRepository.findOne({
@@ -813,6 +835,25 @@ discoverRoutes.get<{ page?: number }, 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({
@@ -829,8 +870,8 @@ discoverRoutes.get<{ page?: number }, WatchlistResponse>(
 
     return res.json({
       page,
-      totalPages: Math.ceil(watchlist.size / itemsPerPage),
-      totalResults: watchlist.size,
+      totalPages: Math.ceil(watchlist.totalSize / itemsPerPage),
+      totalResults: watchlist.totalSize,
       results: watchlist.items.map((item) => ({
         ratingKey: item.ratingKey,
         title: item.title,

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/media.ts

@@ -1,4 +1,7 @@
+import RadarrAPI from '@server/api/servarr/radarr';
+import SonarrAPI from '@server/api/servarr/sonarr';
 import TautulliAPI from '@server/api/tautulli';
+import TheMovieDb from '@server/api/themoviedb';
 import { MediaStatus, MediaType } from '@server/constants/media';
 import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
@@ -168,6 +171,100 @@ mediaRoutes.delete(
   }
 );
 
+mediaRoutes.delete(
+  '/:id/file',
+  isAuthenticated(Permission.MANAGE_REQUESTS),
+  async (req, res, next) => {
+    try {
+      const settings = getSettings();
+      const mediaRepository = getRepository(Media);
+      const media = await mediaRepository.findOneOrFail({
+        where: { id: Number(req.params.id) },
+      });
+      const is4k = media.serviceUrl4k !== undefined;
+      const isMovie = media.mediaType === MediaType.MOVIE;
+      let serviceSettings;
+      if (isMovie) {
+        serviceSettings = settings.radarr.find(
+          (radarr) => radarr.isDefault && radarr.is4k === is4k
+        );
+      } else {
+        serviceSettings = settings.sonarr.find(
+          (sonarr) => sonarr.isDefault && sonarr.is4k === is4k
+        );
+      }
+
+      if (
+        media.serviceId &&
+        media.serviceId >= 0 &&
+        serviceSettings?.id !== media.serviceId
+      ) {
+        if (isMovie) {
+          serviceSettings = settings.radarr.find(
+            (radarr) => radarr.id === media.serviceId
+          );
+        } else {
+          serviceSettings = settings.sonarr.find(
+            (sonarr) => sonarr.id === media.serviceId
+          );
+        }
+      }
+      if (!serviceSettings) {
+        logger.warn(
+          `There is no default ${
+            is4k ? '4K ' : '' + isMovie ? 'Radarr' : 'Sonarr'
+          }/ server configured. Did you set any of your ${
+            is4k ? '4K ' : '' + isMovie ? 'Radarr' : 'Sonarr'
+          } servers as default?`,
+          {
+            label: 'Media Request',
+            mediaId: media.id,
+          }
+        );
+        return;
+      }
+      let service;
+      if (isMovie) {
+        service = new RadarrAPI({
+          apiKey: serviceSettings?.apiKey,
+          url: RadarrAPI.buildUrl(serviceSettings, '/api/v3'),
+        });
+      } else {
+        service = new SonarrAPI({
+          apiKey: serviceSettings?.apiKey,
+          url: SonarrAPI.buildUrl(serviceSettings, '/api/v3'),
+        });
+      }
+
+      if (isMovie) {
+        await (service as RadarrAPI).removeMovie(
+          parseInt(
+            is4k
+              ? (media.externalServiceSlug4k as string)
+              : (media.externalServiceSlug as string)
+          )
+        );
+      } else {
+        const tmdb = new TheMovieDb();
+        const series = await tmdb.getTvShow({ tvId: media.tmdbId });
+        const tvdbId = series.external_ids.tvdb_id ?? media.tvdbId;
+        if (!tvdbId) {
+          throw new Error('TVDB ID not found');
+        }
+        await (service as SonarrAPI).removeSerie(tvdbId);
+      }
+
+      return res.status(204).send();
+    } catch (e) {
+      logger.error('Something went wrong fetching media in delete request', {
+        label: 'Media',
+        message: e.message,
+      });
+      next({ status: 404, message: 'Media not found' });
+    }
+  }
+);
+
 mediaRoutes.get<{ id: string }, MediaWatchDataResponse>(
   '/:id/watch_data',
   isAuthenticated(Permission.ADMIN),

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'}://${
-        sonarrSettings.hostname
-      }:${sonarrSettings.port}${sonarrSettings.baseUrl ?? ''}/api`,
+      url: SonarrAPI.buildUrl(sonarrSettings, '/api/v3'),
     });
 
     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());
@@ -685,7 +693,7 @@ router.get<{ id: string }, UserWatchDataResponse>(
   }
 );
 
-router.get<{ id: string; page?: number }, WatchlistResponse>(
+router.get<{ id: string }, WatchlistResponse>(
   '/:id/watchlist',
   async (req, res, next) => {
     if (
@@ -699,13 +707,12 @@ router.get<{ id: string; page?: number }, WatchlistResponse>(
     ) {
       return next({
         status: 403,
-        message:
-          "You do not have permission to view this user's Plex Watchlist.",
+        message: "You do not have permission to view this user's Watchlist.",
       });
     }
 
     const itemsPerPage = 20;
-    const page = req.params.page ?? 1;
+    const page = Number(req.query.page) ?? 1;
     const offset = (page - 1) * itemsPerPage;
 
     const user = await getRepository(User).findOneOrFail({
@@ -714,6 +721,24 @@ router.get<{ id: string; page?: number }, 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,
@@ -729,8 +754,8 @@ router.get<{ id: string; page?: number }, WatchlistResponse>(
 
     return res.json({
       page,
-      totalPages: Math.ceil(watchlist.size / itemsPerPage),
-      totalResults: watchlist.size,
+      totalPages: Math.ceil(watchlist.totalSize / itemsPerPage),
+      totalResults: watchlist.totalSize,
       results: watchlist.items.map((item) => ({
         ratingKey: item.ratingKey,
         title: item.title,

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 => {

snap/snapcraft.yaml

@@ -37,7 +37,7 @@ parts:
     override-pull: |
       snapcraftctl pull
       # Get information to determine snap grade and version
-      git config --global --add safe.directory /data/parts/jellyyseerr/src
+      git config --global --add safe.directory /data/parts/jellyseerr/src
       #setup yarn.rc
       echo "--install.frozen-lockfile\n--install.network-timeout 1000000" > .yarnrc
       BRANCH=$(git rev-parse --abbrev-ref HEAD)

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

@@ -10,6 +10,7 @@ import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import { MediaStatus } from '@server/constants/media';
 import type { Collection } from '@server/models/Collection';
@@ -39,20 +40,8 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
   const [requestModal, setRequestModal] = useState(false);
   const [is4k, setIs4k] = useState(false);
 
-  const {
-    data,
-    error,
-    mutate: revalidate,
-  } = useSWR<Collection>(`/api/v1/collection/${router.query.collectionId}`, {
-    fallbackData: collection,
-    revalidateOnMount: true,
-  });
-
-  const { data: genres } =
-    useSWR<{ id: number; name: string }[]>(`/api/v1/genres/movie`);
-
-  const [downloadStatus, downloadStatus4k] = useMemo(() => {
-    return [
+  const returnCollectionDownloadItems = (data: Collection | undefined) => {
+    const [downloadStatus, downloadStatus4k] = [
       data?.parts.flatMap((item) =>
         item.mediaInfo?.downloadStatus ? item.mediaInfo?.downloadStatus : []
       ),
@@ -60,7 +49,30 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
         item.mediaInfo?.downloadStatus4k ? item.mediaInfo?.downloadStatus4k : []
       ),
     ];
-  }, [data?.parts]);
+
+    return { downloadStatus, downloadStatus4k };
+  };
+
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<Collection>(`/api/v1/collection/${router.query.collectionId}`, {
+    fallbackData: collection,
+    revalidateOnMount: true,
+    refreshInterval: refreshIntervalHelper(
+      returnCollectionDownloadItems(collection),
+      15000
+    ),
+  });
+
+  const { data: genres } =
+    useSWR<{ id: number; name: string }[]>(`/api/v1/genres/movie`);
+
+  const [downloadStatus, downloadStatus4k] = useMemo(() => {
+    const downloadItems = returnCollectionDownloadItems(data);
+    return [downloadItems.downloadStatus, downloadItems.downloadStatus4k];
+  }, [data]);
 
   const [titles, titles4k] = useMemo(() => {
     return [
@@ -326,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}
@@ -336,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/ButtonWithDropdown/index.tsx

@@ -101,12 +101,12 @@ const ButtonWithDropdown = ({
           <Transition
             as={Fragment}
             show={isOpen}
-            enter="transition ease-out duration-100 opacity-0"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75 opacity-100"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
+            enter="transition ease-out duration-100"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
           >
             <div className="absolute right-0 z-40 mt-2 -mr-1 w-56 origin-top-right rounded-md shadow-lg">
               <div

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/Common/Modal/index.tsx

@@ -78,10 +78,10 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
         appear
         as="div"
         className="fixed top-0 bottom-0 left-0 right-0 z-50 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-70"
-        enter="transition opacity-0 duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="transition opacity-100 duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         ref={parentRef}
@@ -89,10 +89,10 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
         <Transition
           appear
           as={Fragment}
-          enter="transition opacity-0 duration-300 transform scale-75"
+          enter="transition duration-300"
           enterFrom="opacity-0 scale-75"
           enterTo="opacity-100 scale-100"
-          leave="transition opacity-100 duration-300"
+          leave="transition-opacity duration-300"
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
           show={loading}
@@ -102,7 +102,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           </div>
         </Transition>
         <Transition
-          className="hide-scrollbar relative inline-block w-full transform overflow-auto bg-gray-800 px-4 pt-4 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-700 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle"
+          className="hide-scrollbar relative inline-block w-full overflow-auto bg-gray-800 px-4 pt-4 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-700 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle"
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
@@ -111,10 +111,10 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           }}
           appear
           as="div"
-          enter="transition opacity-0 duration-300 transform scale-75"
+          enter="transition duration-300"
           enterFrom="opacity-0 scale-75"
           enterTo="opacity-100 scale-100"
-          leave="transition opacity-100 duration-300"
+          leave="transition-opacity duration-300"
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
           show={!loading}

src/components/Common/SlideCheckbox/index.tsx

@@ -29,7 +29,7 @@ const SlideCheckbox = ({ onClick, checked = false }: SlideCheckboxProps) => {
         aria-hidden="true"
         className={`${
           checked ? 'translate-x-5' : 'translate-x-0'
-        } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+        } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
       ></span>
     </span>
   );

src/components/Common/SlideOver/index.tsx

@@ -37,10 +37,10 @@ const SlideOver = ({
       as={Fragment}
       show={show}
       appear
-      enter="opacity-0 transition ease-in-out duration-300"
+      enter="transition-opacity ease-in-out duration-300"
       enterFrom="opacity-0"
       enterTo="opacity-100"
-      leave="opacity-100 transition ease-in-out duration-300"
+      leave="transition-opacity ease-in-out duration-300"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
@@ -58,16 +58,16 @@ const SlideOver = ({
           <section className="absolute inset-y-0 right-0 flex max-w-full">
             <Transition.Child
               appear
-              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enter="transition-transform ease-in-out duration-500 sm:duration-700"
               enterFrom="translate-x-full"
               enterTo="translate-x-0"
-              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leave="transition-transform ease-in-out duration-500 sm:duration-700"
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
               {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
               <div
-                className="slideover relative h-full w-screen max-w-md p-2 sm:p-4"
+                className="slideover relative h-full w-screen max-w-md p-2 sm:p-3"
                 ref={slideoverRef}
                 onClick={(e) => e.stopPropagation()}
               >

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(
-                    '$value',
-                    encodeURIExtraParams(values.data)
-                  )}
+                  extraParams={
+                    activeOption.type ===
+                      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

@@ -165,10 +165,10 @@ const Discover = () => {
           </Transition>
           <Transition
             show={isEditing}
-            enter="transition transform duration-300"
+            enter="transition duration-300"
             enterFrom="opacity-0 translate-y-6"
             enterTo="opacity-100 translate-y-0"
-            leave="transition duration-300 transform"
+            leave="transition duration-300"
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-6"
             className="safe-shift-edit-menu fixed right-0 left-0 z-50 flex flex-col items-center justify-end space-x-0 space-y-2 border-t border-gray-700 bg-gray-800 bg-opacity-80 p-4 backdrop-blur sm:bottom-0 sm:flex-row sm:space-y-0 sm:space-x-3"
@@ -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/IssueDetails/IssueComment/index.tsx

@@ -65,10 +65,10 @@ const IssueComment = ({
     >
       <Transition
         as={Fragment}
-        enter="transition opacity-0 duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="transition opacity-100 duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={showDeleteModal}
@@ -115,11 +115,11 @@ const IssueComment = ({
                     as={Fragment}
                     show={open}
                     enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
+                    enterFrom="opacity-0 scale-95"
+                    enterTo="opacity-100 scale-100"
                     leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
+                    leaveFrom="opacity-100 scale-100"
+                    leaveTo="opacity-0 scale-95"
                   >
                     <Menu.Items
                       static
@@ -164,7 +164,7 @@ const IssueComment = ({
             </Menu>
           )}
           <div
-            className={`absolute top-3 z-10 h-3 w-3 rotate-45 transform bg-gray-800 shadow ring-1 ring-gray-500 ${
+            className={`absolute top-3 z-10 h-3 w-3 rotate-45 bg-gray-800 shadow ring-1 ring-gray-500 ${
               isReversed ? '-left-1' : '-right-1'
             }`}
           />

src/components/IssueDetails/IssueDescription/index.tsx

@@ -57,11 +57,11 @@ const IssueDescription = ({
                   show={open}
                   as="div"
                   enter="transition ease-out duration-100"
-                  enterFrom="transform opacity-0 scale-95"
-                  enterTo="transform opacity-100 scale-100"
+                  enterFrom="opacity-0 scale-95"
+                  enterTo="opacity-100 scale-100"
                   leave="transition ease-in duration-75"
-                  leaveFrom="transform opacity-100 scale-100"
-                  leaveTo="transform opacity-0 scale-95"
+                  leaveFrom="opacity-100 scale-100"
+                  leaveTo="opacity-0 scale-95"
                 >
                   <Menu.Items
                     static

src/components/IssueDetails/index.tsx

@@ -187,10 +187,10 @@ const IssueDetails = () => {
       <PageTitle title={[intl.formatMessage(messages.issuepagetitle), title]} />
       <Transition
         as="div"
-        enter="transition opacity-0 duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="transition opacity-100 duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={showDeleteModal}

src/components/IssueModal/index.tsx

@@ -12,10 +12,10 @@ interface IssueModalProps {
 const IssueModal = ({ show, mediaType, onCancel, tmdbId }: IssueModalProps) => (
   <Transition
     as="div"
-    enter="transition opacity-0 duration-300"
+    enter="transition-opacity duration-300"
     enterFrom="opacity-0"
     enterTo="opacity-100"
-    leave="transition opacity-100 duration-300"
+    leave="transition-opacity duration-300"
     leaveFrom="opacity-100"
     leaveTo="opacity-0"
     show={show}

src/components/Layout/LanguagePicker/index.tsx

@@ -34,12 +34,12 @@ const LanguagePicker = () => {
       <Transition
         as="div"
         show={isDropdownOpen}
-        enter="transition ease-out duration-100 opacity-0"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75 opacity-100"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
+        enter="transition ease-out duration-100"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
       >
         <div
           className="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg"

src/components/Layout/MobileMenu/index.tsx

@@ -131,13 +131,13 @@ const MobileMenu = () => {
         show={isOpen}
         as="div"
         ref={ref}
-        enter="transition transform duration-500"
+        enter="transition duration-500"
         enterFrom="opacity-0 translate-y-0"
         enterTo="opacity-100 -translate-y-full"
-        leave="transition duration-500 transform"
+        leave="transition duration-500"
         leaveFrom="opacity-100 -translate-y-full"
         leaveTo="opacity-0 translate-y-0"
-        className="absolute top-0 left-0 right-0 flex w-full -translate-y-full transform flex-col space-y-6 border-t border-gray-600 bg-gray-900 bg-opacity-90 px-6 py-6 font-semibold text-gray-100 backdrop-blur"
+        className="absolute top-0 left-0 right-0 flex w-full -translate-y-full flex-col space-y-6 border-t border-gray-600 bg-gray-900 bg-opacity-90 px-6 py-6 font-semibold text-gray-100 backdrop-blur"
       >
         {filteredLinks.map((link) => {
           const isActive = router.pathname.match(link.activeRegExp);

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/Sidebar/index.tsx

@@ -128,10 +128,10 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
             </Transition.Child>
             <Transition.Child
               as="div"
-              enter="transition ease-in-out duration-300 transform"
+              enter="transition-transform ease-in-out duration-300"
               enterFrom="-translate-x-full"
               enterTo="translate-x-0"
-              leave="transition ease-in-out duration-300 transform"
+              leave="transition-transform ease-in-out duration-300"
               leaveFrom="translate-x-0"
               leaveTo="-translate-x-full"
             >

src/components/Layout/UserDropdown/index.tsx

@@ -63,11 +63,11 @@ const UserDropdown = () => {
       <Transition
         as={Fragment}
         enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
         leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
         appear
       >
         <Menu.Items className="absolute right-0 mt-2 w-72 origin-top-right rounded-md shadow-lg">

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/Login/JellyfinLogin.tsx

@@ -1,5 +1,7 @@
 import Button from '@app/components/Common/Button';
+import Tooltip from '@app/components/Common/Tooltip';
 import useSettings from '@app/hooks/useSettings';
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
@@ -13,6 +15,8 @@ const messages = defineMessages({
   password: 'Password',
   host: '{mediaServerName} URL',
   email: 'Email',
+  emailtooltip:
+    'Address does not need to be associated with your {mediaServerName} instance.',
   validationhostrequired: '{mediaServerName} URL required',
   validationhostformat: 'Valid URL required',
   validationemailrequired: 'Email required',
@@ -63,6 +67,10 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
       ),
       password: Yup.string(),
     });
+    const mediaServerFormatValues = {
+      mediaServerName:
+        publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+    };
     return (
       <Formik
         initialValues={{
@@ -101,12 +109,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
           <Form>
             <div className="sm:border-t sm:border-gray-800">
               <label htmlFor="host" className="text-label">
-                {intl.formatMessage(messages.host, {
-                  mediaServerName:
-                    publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                      ? 'Emby'
-                      : 'Jellyfin',
-                })}
+                {intl.formatMessage(messages.host, mediaServerFormatValues)}
               </label>
               <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                 <div className="flex rounded-md shadow-sm">
@@ -114,20 +117,34 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                     id="host"
                     name="host"
                     type="text"
-                    placeholder={intl.formatMessage(messages.host, {
-                      mediaServerName:
-                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                          ? 'Emby'
-                          : 'Jellyfin',
-                    })}
+                    placeholder={intl.formatMessage(
+                      messages.host,
+                      mediaServerFormatValues
+                    )}
                   />
                 </div>
                 {errors.host && touched.host && (
                   <div className="error">{errors.host}</div>
                 )}
               </div>
-              <label htmlFor="email" className="text-label">
+              <label
+                htmlFor="email"
+                className="text-label"
+                style={{ display: 'inline-flex' }}
+              >
                 {intl.formatMessage(messages.email)}
+                <span className="label-tip">
+                  <Tooltip
+                    content={intl.formatMessage(
+                      messages.emailtooltip,
+                      mediaServerFormatValues
+                    )}
+                  >
+                    <span className="tooltip-trigger">
+                      <InformationCircleIcon className="h-4 w-4" />
+                    </span>
+                  </Tooltip>
+                </span>
               </label>
               <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                 <div className="flex rounded-md shadow-sm">

src/components/Login/index.tsx

@@ -100,10 +100,10 @@ const Login = () => {
             <Transition
               as="div"
               show={!!error}
-              enter="opacity-0 transition duration-300"
+              enter="transition-opacity duration-300"
               enterFrom="opacity-0"
               enterTo="opacity-100"
-              leave="opacity-100 transition duration-300"
+              leave="transition-opacity duration-300"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >

src/components/ManageSlideOver/index.tsx

@@ -1,6 +1,7 @@
 import Button from '@app/components/Common/Button';
 import ConfirmButton from '@app/components/Common/ConfirmButton';
 import SlideOver from '@app/components/Common/SlideOver';
+import Tooltip from '@app/components/Common/Tooltip';
 import DownloadBlock from '@app/components/DownloadBlock';
 import IssueBlock from '@app/components/IssueBlock';
 import RequestBlock from '@app/components/RequestBlock';
@@ -8,11 +9,20 @@ import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { Bars4Icon, ServerIcon } from '@heroicons/react/24/outline';
-import { CheckCircleIcon, DocumentMinusIcon } from '@heroicons/react/24/solid';
+import {
+  CheckCircleIcon,
+  DocumentMinusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid';
 import { IssueStatus } from '@server/constants/issue';
-import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
+import {
+  MediaRequestStatus,
+  MediaStatus,
+  MediaType,
+} from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { MediaWatchDataResponse } from '@server/interfaces/api/mediaInterfaces';
+import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
@@ -32,8 +42,12 @@ const messages = defineMessages({
   manageModalClearMedia: 'Clear Data',
   manageModalClearMediaWarning:
     '* This will irreversibly remove all data for this {mediaType}, including any requests. If this item exists in your {mediaServerName} library, the media information will be recreated during the next scan.',
+  manageModalRemoveMediaWarning:
+    '* This will irreversibly remove this {mediaType} from {arr}, including all files.',
   openarr: 'Open in {arr}',
+  removearr: 'Remove from {arr}',
   openarr4k: 'Open in 4K {arr}',
+  removearr4k: 'Remove from 4K {arr}',
   downloadstatus: 'Downloads',
   markavailable: 'Mark as Available',
   mark4kavailable: 'Mark as Available in 4K',
@@ -88,6 +102,12 @@ const ManageSlideOver = ({
       ? `/api/v1/media/${data.mediaInfo.id}/watch_data`
       : null
   );
+  const { data: radarrData } = useSWR<RadarrSettings[]>(
+    '/api/v1/settings/radarr'
+  );
+  const { data: sonarrData } = useSWR<SonarrSettings[]>(
+    '/api/v1/settings/sonarr'
+  );
 
   const deleteMedia = async () => {
     if (data.mediaInfo) {
@@ -96,6 +116,35 @@ const ManageSlideOver = ({
     }
   };
 
+  const deleteMediaFile = async () => {
+    if (data.mediaInfo) {
+      await axios.delete(`/api/v1/media/${data.mediaInfo.id}/file`);
+      await axios.delete(`/api/v1/media/${data.mediaInfo.id}`);
+      revalidate();
+    }
+  };
+
+  const isDefaultService = () => {
+    if (data.mediaInfo) {
+      if (data.mediaInfo.mediaType === MediaType.MOVIE) {
+        return (
+          radarrData?.find(
+            (radarr) =>
+              radarr.isDefault && radarr.id === data.mediaInfo?.serviceId
+          ) !== undefined
+        );
+      } else {
+        return (
+          sonarrData?.find(
+            (sonarr) =>
+              sonarr.isDefault && sonarr.id === data.mediaInfo?.serviceId
+          ) !== undefined
+        );
+      }
+    }
+    return false;
+  };
+
   const markAvailable = async (is4k = false) => {
     if (data.mediaInfo) {
       await axios.post(`/api/v1/media/${data.mediaInfo?.id}/available`, {
@@ -149,20 +198,24 @@ const ManageSlideOver = ({
             <div className="overflow-hidden rounded-md border border-gray-700 shadow">
               <ul>
                 {data.mediaInfo?.downloadStatus?.map((status, index) => (
-                  <li
+                  <Tooltip
                     key={`dl-status-${status.externalId}-${index}`}
-                    className="border-b border-gray-700 last:border-b-0"
+                    content={status.title}
                   >
-                    <DownloadBlock downloadItem={status} />
-                  </li>
+                    <li className="border-b border-gray-700 last:border-b-0">
+                      <DownloadBlock downloadItem={status} />
+                    </li>
+                  </Tooltip>
                 ))}
                 {data.mediaInfo?.downloadStatus4k?.map((status, index) => (
-                  <li
+                  <Tooltip
                     key={`dl-status-${status.externalId}-${index}`}
-                    className="border-b border-gray-700 last:border-b-0"
+                    content={status.title}
                   >
-                    <DownloadBlock downloadItem={status} is4k />
-                  </li>
+                    <li className="border-b border-gray-700 last:border-b-0">
+                      <DownloadBlock downloadItem={status} is4k />
+                    </li>
+                  </Tooltip>
                 ))}
               </ul>
             </div>
@@ -328,6 +381,40 @@ const ManageSlideOver = ({
                     </Button>
                   </a>
                 )}
+
+                {hasPermission(Permission.ADMIN) &&
+                  data?.mediaInfo?.serviceUrl &&
+                  isDefaultService() && (
+                    <div>
+                      <ConfirmButton
+                        onClick={() => deleteMediaFile()}
+                        confirmText={intl.formatMessage(
+                          globalMessages.areyousure
+                        )}
+                        className="w-full"
+                      >
+                        <TrashIcon />
+                        <span>
+                          {intl.formatMessage(messages.removearr, {
+                            arr: mediaType === 'movie' ? 'Radarr' : 'Sonarr',
+                          })}
+                        </span>
+                      </ConfirmButton>
+                      <div className="mt-1 text-xs text-gray-400">
+                        {intl.formatMessage(
+                          messages.manageModalRemoveMediaWarning,
+                          {
+                            mediaType: intl.formatMessage(
+                              mediaType === 'movie'
+                                ? messages.movie
+                                : messages.tvshow
+                            ),
+                            arr: mediaType === 'movie' ? 'Radarr' : 'Sonarr',
+                          }
+                        )}
+                      </div>
+                    </div>
+                  )}
               </div>
             </div>
           )}
@@ -433,21 +520,54 @@ const ManageSlideOver = ({
                   </div>
                 )}
                 {data?.mediaInfo?.serviceUrl4k && (
-                  <a
-                    href={data?.mediaInfo?.serviceUrl4k}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="block"
-                  >
-                    <Button buttonType="ghost" className="w-full">
-                      <ServerIcon />
-                      <span>
-                        {intl.formatMessage(messages.openarr4k, {
-                          arr: mediaType === 'movie' ? 'Radarr' : 'Sonarr',
-                        })}
-                      </span>
-                    </Button>
-                  </a>
+                  <>
+                    <a
+                      href={data?.mediaInfo?.serviceUrl4k}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="block"
+                    >
+                      <Button buttonType="ghost" className="w-full">
+                        <ServerIcon />
+                        <span>
+                          {intl.formatMessage(messages.openarr4k, {
+                            arr: mediaType === 'movie' ? 'Radarr' : 'Sonarr',
+                          })}
+                        </span>
+                      </Button>
+                    </a>
+                    {isDefaultService() && (
+                      <div>
+                        <ConfirmButton
+                          onClick={() => deleteMediaFile()}
+                          confirmText={intl.formatMessage(
+                            globalMessages.areyousure
+                          )}
+                          className="w-full"
+                        >
+                          <TrashIcon />
+                          <span>
+                            {intl.formatMessage(messages.removearr4k, {
+                              arr: mediaType === 'movie' ? 'Radarr' : 'Sonarr',
+                            })}
+                          </span>
+                        </ConfirmButton>
+                        <div className="mt-1 text-xs text-gray-400">
+                          {intl.formatMessage(
+                            messages.manageModalRemoveMediaWarning,
+                            {
+                              mediaType: intl.formatMessage(
+                                mediaType === 'movie'
+                                  ? messages.movie
+                                  : messages.tvshow
+                              ),
+                              arr: mediaType === 'movie' ? 'Radarr' : 'Sonarr',
+                            }
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </>
                 )}
               </div>
             </div>

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/MovieDetails/index.tsx

@@ -26,6 +26,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import {
   ArrowRightCircleIcon,
   CloudIcon,
@@ -116,6 +117,13 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
     mutate: revalidate,
   } = useSWR<MovieDetailsType>(`/api/v1/movie/${router.query.movieId}`, {
     fallbackData: movie,
+    refreshInterval: refreshIntervalHelper(
+      {
+        downloadStatus: movie?.mediaInfo?.downloadStatus,
+        downloadStatus4k: movie?.mediaInfo?.downloadStatus4k,
+      },
+      15000
+    ),
   });
 
   const { data: ratingData } = useSWR<RTRating>(

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/RegionSelector/index.tsx

@@ -122,7 +122,7 @@ const RegionSelector = ({
 
             <Transition
               show={open}
-              leave="transition ease-in duration-100"
+              leave="transition-opacity ease-in duration-100"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
               className="absolute mt-1 w-full rounded-md bg-gray-800 shadow-lg"

src/components/RequestCard/index.tsx

@@ -7,6 +7,7 @@ import StatusBadge from '@app/components/StatusBadge';
 import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import { withProperties } from '@app/utils/typeHelpers';
 import {
   ArrowPathIcon,
@@ -220,6 +221,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
     request.type === 'movie'
       ? `/api/v1/movie/${request.media.tmdbId}`
       : `/api/v1/tv/${request.media.tmdbId}`;
+
   const { data: title, error } = useSWR<MovieDetails | TvDetails>(
     inView ? `${url}` : null
   );
@@ -229,6 +231,13 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
     mutate: revalidate,
   } = useSWR<MediaRequest>(`/api/v1/request/${request.id}`, {
     fallbackData: request,
+    refreshInterval: refreshIntervalHelper(
+      {
+        downloadStatus: request.media.downloadStatus,
+        downloadStatus4k: request.media.downloadStatus4k,
+      },
+      15000
+    ),
   });
 
   const { mediaUrl: plexUrl, mediaUrl4k: plexUrl4k } = useDeepLinks({

src/components/RequestList/RequestItem/index.tsx

@@ -7,6 +7,7 @@ import StatusBadge from '@app/components/StatusBadge';
 import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import {
   ArrowPathIcon,
   CheckIcon,
@@ -293,6 +294,13 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
     `/api/v1/request/${request.id}`,
     {
       fallbackData: request,
+      refreshInterval: refreshIntervalHelper(
+        {
+          downloadStatus: request.media.downloadStatus,
+          downloadStatus4k: request.media.downloadStatus4k,
+        },
+        15000
+      ),
     }
   );
 

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -582,10 +582,10 @@ const AdvancedRequester = ({
 
                     <Transition
                       show={open}
-                      enter="transition ease-in duration-300"
+                      enter="transition-opacity ease-in duration-300"
                       enterFrom="opacity-0"
                       enterTo="opacity-100"
-                      leave="transition ease-in duration-100"
+                      leave="transition-opacity ease-in duration-100"
                       leaveFrom="opacity-100"
                       leaveTo="opacity-0"
                       className="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 shadow-lg"

src/components/RequestModal/CollectionRequestModal.tsx

@@ -324,7 +324,7 @@ const CollectionRequestModal = ({
                           aria-hidden="true"
                           className={`${
                             isAllParts() ? 'translate-x-5' : 'translate-x-0'
-                          } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                          } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                         ></span>
                       </span>
                     </th>
@@ -389,7 +389,7 @@ const CollectionRequestModal = ({
                                 isSelectedPart(part.id)
                                   ? 'translate-x-5'
                                   : 'translate-x-0'
-                              } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                              } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                             ></span>
                           </span>
                         </td>

src/components/RequestModal/TvRequestModal.tsx

@@ -540,7 +540,7 @@ const TvRequestModal = ({
                           aria-hidden="true"
                           className={`${
                             isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
-                          } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                          } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                         ></span>
                       </span>
                     </th>
@@ -631,7 +631,7 @@ const TvRequestModal = ({
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                                } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                               ></span>
                             </span>
                           </td>

src/components/RequestModal/index.tsx

@@ -29,10 +29,10 @@ const RequestModal = ({
   return (
     <Transition
       as="div"
-      enter="transition opacity-0 duration-300"
+      enter="transition-opacity duration-300"
       enterFrom="opacity-0"
       enterTo="opacity-100"
-      leave="transition opacity-100 duration-300"
+      leave="transition-opacity duration-300"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
       show={show}

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) => ({
-      label: result.name,
-      value: result.id,
-    }));
+    return results.data
+      .map((result) => ({
+        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/LibraryItem.tsx

@@ -32,7 +32,7 @@ const LibraryItem = ({ isEnabled, name, onToggle }: LibraryItemProps) => {
               aria-hidden="true"
               className={`${
                 isEnabled ? 'translate-x-5' : 'translate-x-0'
-              } relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out`}
+              } relative inline-block h-5 w-5 rounded-full bg-white shadow transition duration-200 ease-in-out`}
             >
               <span
                 className={`${

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',
@@ -214,10 +217,10 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
       as="div"
       appear
       show
-      enter="transition ease-in-out duration-300 transform opacity-0"
+      enter="transition-opacity ease-in-out duration-300"
       enterFrom="opacity-0"
-      enterTo="opacuty-100"
-      leave="transition ease-in-out duration-300 transform opacity-100"
+      enterTo="opacity-100"
+      leave="transition-opacity ease-in-out duration-300"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
@@ -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/SettingsAbout/Releases/index.tsx

@@ -63,10 +63,10 @@ const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
     <div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3">
       <Transition
         as={Fragment}
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={isModalOpen}

src/components/Settings/SettingsJellyfin.tsx

@@ -30,8 +30,9 @@ const messages = defineMessages({
   jellyfinSettingsSuccess: '{mediaServerName} settings saved successfully!',
   jellyfinSettings: '{mediaServerName} Settings',
   jellyfinSettingsDescription:
-    'Optionally configure an external player endpoint for your {mediaServerName} server that is different to the internal URL used during setup',
+    'Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL.',
   externalUrl: 'External URL',
+  internalUrl: 'Internal URL',
   validationUrl: 'You must provide a valid URL',
   syncing: 'Syncing',
   syncJellyfin: 'Sync Libraries',
@@ -86,7 +87,11 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
 
   const JellyfinSettingsSchema = Yup.object().shape({
     jellyfinExternalUrl: Yup.string().matches(
-      /^(?:(?:(?:https?):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/,
+      /^(https?:\/\/)?(?:[\w-]+\.)*[\w-]+(?::\d{2,5})?(?:\/[\w-]+)*(?:\/)?$/gm,
+      intl.formatMessage(messages.validationUrl)
+    ),
+    jellyfinInternalUrl: Yup.string().matches(
+      /^(https?:\/\/)?(?:[\w-]+\.)*[\w-]+(?::\d{2,5})?(?:\/[\w-]+)*(?:\/)?$/gm,
       intl.formatMessage(messages.validationUrl)
     ),
   });
@@ -346,12 +351,14 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           </div>
           <Formik
             initialValues={{
+              jellyfinInternalUrl: data?.hostname || '',
               jellyfinExternalUrl: data?.externalHostname || '',
             }}
             validationSchema={JellyfinSettingsSchema}
             onSubmit={async (values) => {
               try {
                 await axios.post('/api/v1/settings/jellyfin', {
+                  hostname: values.jellyfinInternalUrl,
                   externalHostname: values.jellyfinExternalUrl,
                 } as JellyfinSettings);
 
@@ -388,6 +395,27 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
             {({ errors, touched, handleSubmit, isSubmitting, isValid }) => {
               return (
                 <form className="section" onSubmit={handleSubmit}>
+                  <div className="form-row">
+                    <label htmlFor="jellyfinInternalUrl" className="text-label">
+                      {intl.formatMessage(messages.internalUrl)}
+                    </label>
+                    <div className="form-input-area">
+                      <div className="form-input-field">
+                        <Field
+                          type="text"
+                          inputMode="url"
+                          id="jellyfinInternalUrl"
+                          name="jellyfinInternalUrl"
+                        />
+                      </div>
+                      {errors.jellyfinInternalUrl &&
+                        touched.jellyfinInternalUrl && (
+                          <div className="error">
+                            {errors.jellyfinInternalUrl}
+                          </div>
+                        )}
+                    </div>
+                  </div>
                   <div className="form-row">
                     <label htmlFor="jellyfinExternalUrl" className="text-label">
                       {intl.formatMessage(messages.externalUrl)}

src/components/Settings/SettingsJobsCache/index.tsx

@@ -57,6 +57,7 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages({
   'plex-watchlist-sync': 'Plex Watchlist Sync',
   'jellyfin-recently-added-sync': 'Jellyfin Recently Added Scan',
   'jellyfin-full-sync': 'Jellyfin Full Library Scan',
+  'availability-sync': 'Media Availability Sync',
   'radarr-scan': 'Radarr Scan',
   'sonarr-scan': 'Sonarr Scan',
   'download-sync': 'Download Sync',
@@ -71,6 +72,8 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages({
     'Every {jobScheduleHours, plural, one {hour} other {{jobScheduleHours} hours}}',
   editJobScheduleSelectorMinutes:
     'Every {jobScheduleMinutes, plural, one {minute} other {{jobScheduleMinutes} minutes}}',
+  editJobScheduleSelectorSeconds:
+    'Every {jobScheduleSeconds, plural, one {second} other {{jobScheduleSeconds} seconds}}',
   imagecache: 'Image Cache',
   imagecacheDescription:
     'When enabled in settings, Overseerr will proxy and cache images from pre-configured external sources. Cached images are saved into your config folder. You can find the files in <code>{appDataPath}/cache/images</code>.',
@@ -82,7 +85,7 @@ interface Job {
   id: JobId;
   name: string;
   type: 'process' | 'command';
-  interval: 'short' | 'long' | 'fixed';
+  interval: 'seconds' | 'minutes' | 'hours' | 'fixed';
   cronSchedule: string;
   nextExecutionTime: string;
   running: boolean;
@@ -93,10 +96,11 @@ type JobModalState = {
   job?: Job;
   scheduleHours: number;
   scheduleMinutes: number;
+  scheduleSeconds: number;
 };
 
 type JobModalAction =
-  | { type: 'set'; hours?: number; minutes?: number }
+  | { type: 'set'; hours?: number; minutes?: number; seconds?: number }
   | {
       type: 'close';
     }
@@ -119,6 +123,7 @@ const jobModalReducer = (
         job: action.job,
         scheduleHours: 1,
         scheduleMinutes: 5,
+        scheduleSeconds: 30,
       };
 
     case 'set':
@@ -126,6 +131,7 @@ const jobModalReducer = (
         ...state,
         scheduleHours: action.hours ?? state.scheduleHours,
         scheduleMinutes: action.minutes ?? state.scheduleMinutes,
+        scheduleSeconds: action.seconds ?? state.scheduleSeconds,
       };
   }
 };
@@ -153,6 +159,7 @@ const SettingsJobs = () => {
     isOpen: false,
     scheduleHours: 1,
     scheduleMinutes: 5,
+    scheduleSeconds: 30,
   });
   const [isSaving, setIsSaving] = useState(false);
   const settings = useSettings();
@@ -205,9 +212,11 @@ const SettingsJobs = () => {
     const jobScheduleCron = ['0', '0', '*', '*', '*', '*'];
 
     try {
-      if (jobModalState.job?.interval === 'short') {
+      if (jobModalState.job?.interval === 'seconds') {
+        jobScheduleCron.splice(0, 2, `*/${jobModalState.scheduleSeconds}`, '*');
+      } else if (jobModalState.job?.interval === 'minutes') {
         jobScheduleCron[1] = `*/${jobModalState.scheduleMinutes}`;
-      } else if (jobModalState.job?.interval === 'long') {
+      } else if (jobModalState.job?.interval === 'hours') {
         jobScheduleCron[2] = `*/${jobModalState.scheduleHours}`;
       } else {
         // jobs with interval: fixed should not be editable
@@ -249,10 +258,10 @@ const SettingsJobs = () => {
       />
       <Transition
         as={Fragment}
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={jobModalState.isOpen}
@@ -291,7 +300,30 @@ const SettingsJobs = () => {
                   {intl.formatMessage(messages.editJobSchedulePrompt)}
                 </label>
                 <div className="form-input-area">
-                  {jobModalState.job?.interval === 'short' ? (
+                  {jobModalState.job?.interval === 'seconds' ? (
+                    <select
+                      name="jobScheduleSeconds"
+                      className="inline"
+                      value={jobModalState.scheduleSeconds}
+                      onChange={(e) =>
+                        dispatch({
+                          type: 'set',
+                          seconds: Number(e.target.value),
+                        })
+                      }
+                    >
+                      {[30, 45, 60].map((v) => (
+                        <option value={v} key={`jobScheduleSeconds-${v}`}>
+                          {intl.formatMessage(
+                            messages.editJobScheduleSelectorSeconds,
+                            {
+                              jobScheduleSeconds: v,
+                            }
+                          )}
+                        </option>
+                      ))}
+                    </select>
+                  ) : jobModalState.job?.interval === 'minutes' ? (
                     <select
                       name="jobScheduleMinutes"
                       className="inline"

src/components/Settings/SettingsLogs/index.tsx

@@ -143,10 +143,10 @@ const SettingsLogs = () => {
       />
       <Transition
         as={Fragment}
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         appear

src/components/Settings/SettingsServices.tsx

@@ -247,10 +247,10 @@ const SettingsServices = () => {
       <Transition
         as={Fragment}
         show={deleteServerModal.open}
-        enter="transition ease-in-out duration-300 transform opacity-0"
+        enter="transition-opacity ease-in-out duration-300"
         enterFrom="opacity-0"
-        enterTo="opacuty-100"
-        leave="transition ease-in-out duration-300 transform opacity-100"
+        enterTo="opacity-100"
+        leave="transition-opacity ease-in-out duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >