fix: type declarations for csurf

This reverts csrf-csrf change brought on by `9e3119` in #1393 back to `csurf` that is maintained

.github/workflows/cypress.yml

@@ -37,7 +37,6 @@ jobs:
           COMMIT_INFO_MESSAGE: ${{github.event.pull_request.title}}
           COMMIT_INFO_SHA: ${{github.event.pull_request.head.sha}}
       - name: Upload video files
-        if: always()
         uses: actions/upload-artifact@v4
         with:
           name: cypress-videos

charts/jellyseerr-chart/Chart.yaml

@@ -3,8 +3,8 @@ kubeVersion: ">=1.23.0-0"
 name: jellyseerr-chart
 description: Jellyseerr helm chart for Kubernetes
 type: application
-version: 2.3.0
-appVersion: "2.5.0"
+version: 2.1.1
+appVersion: "2.3.0"
 maintainers:
   - name: Jellyseerr
     url: https://github.com/Fallenbagel/jellyseerr

charts/jellyseerr-chart/README.md

@@ -1,6 +1,6 @@
 # jellyseerr-chart
 
-![Version: 2.3.0](https://img.shields.io/badge/Version-2.3.0-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.5.0](https://img.shields.io/badge/AppVersion-2.5.0-informational?style=flat-square)
+![Version: 2.1.1](https://img.shields.io/badge/Version-2.1.1-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.3.0](https://img.shields.io/badge/AppVersion-2.3.0-informational?style=flat-square)
 
 Jellyseerr helm chart for Kubernetes
 

docs/getting-started/buildfromsource.mdx

@@ -255,8 +255,7 @@ To run jellyseerr as a service:
 1. Download the [Non-Sucking Service Manager](https://nssm.cc/download)
 2. Install NSSM:
 ```powershell
-nssm install Jellyseerr "C:\Program Files\nodejs\node.exe" "C:\jellyseerr\dist\index.js"
-nssm set Jellyseerr AppDirectory "C:\jellyseerr"
+nssm install Jellyseerr "C:\Program Files\nodejs\node.exe" ["C:\jellyseerr\dist\index.js"]
 nssm set Jellyseerr AppEnvironmentExtra NODE_ENV=production
 ```
 3. Start the service:

docs/troubleshooting.mdx

@@ -24,12 +24,6 @@ or for Cloudflare's DNS:
 ```bash
 --dns=1.1.1.1
 ```
-or for Quad9 DNS:
-```bash
---dns=9.9.9.9
-```
-
-You can try them all and see which one works for your network.
 
   </TabItem>
 
@@ -51,16 +45,6 @@ services:
     dns:
       - 1.1.1.1
 ```
-or for Quad9's DNS:
-```yaml
----
-services:
-  jellyseerr:
-    dns:
-      - 9.9.9.9
-```
-
-You can try them all and see which one works for your network.
 
   </TabItem>
 
@@ -72,7 +56,7 @@ You can try them all and see which one works for your network.
 4. Click on Change adapter settings.
 5. Right-click the network interface connected to the internet and select Properties.
 6. Select Internet Protocol Version 4 (TCP/IPv4) and click Properties.
-7. Select Use the following DNS server addresses and enter `8.8.8.8` for Google's DNS or `1.1.1.1` for Cloudflare's DNS or `9.9.9.9` for Quad9's DNS.
+7. Select Use the following DNS server addresses and enter `8.8.8.8` for Google's DNS or `1.1.1.1` for Cloudflare's DNS.
 
   </TabItem>
 
@@ -89,10 +73,6 @@ You can try them all and see which one works for your network.
     ```bash
     nameserver 1.1.1.1
     ```
-    or for Quad9's DNS:
-    ```bash
-    nameserver 9.9.9.9
-    ```
 
   </TabItem>
 </Tabs>
@@ -101,7 +81,7 @@ You can try them all and see which one works for your network.
 
 Sometimes there are configuration issues with IPV6 that prevent the hostname resolution from working correctly.
 
-You can try to force the resolution to use IPV4 first by going to `Settings > Networking > Advanced Networking` and enabling `Force IPv4 Resolution First` setting and restarting. You can also add the environment variable, `FORCE_IPV4_FIRST=true`:
+You can try to force the resolution to use IPV4 first by setting the `FORCE_IPV4_FIRST` environment variable to `true`:
 
 <Tabs groupId="methods" queryString>
   <TabItem value="docker-cli" label="Docker CLI">

server/api/plextv.ts

@@ -378,7 +378,6 @@ class PlexTvAPI extends ExternalAPI {
       logger.error('Failed to ping token', {
         label: 'Plex Refresh Token',
         errorMessage: e.message,
-        errorCause: e.cause,
       });
     }
   }

server/lib/availabilitySync.ts

@@ -404,34 +404,6 @@ class AvailabilitySync {
             });
           }
 
-          if (
-            !showExists &&
-            (media.status === MediaStatus.AVAILABLE ||
-              media.status === MediaStatus.PARTIALLY_AVAILABLE ||
-              media.seasons.some(
-                (season) => season.status === MediaStatus.AVAILABLE
-              ) ||
-              media.seasons.some(
-                (season) => season.status === MediaStatus.PARTIALLY_AVAILABLE
-              ))
-          ) {
-            await this.mediaUpdater(media, false, mediaServerType);
-          }
-
-          if (
-            !showExists4k &&
-            (media.status4k === MediaStatus.AVAILABLE ||
-              media.status4k === MediaStatus.PARTIALLY_AVAILABLE ||
-              media.seasons.some(
-                (season) => season.status4k === MediaStatus.AVAILABLE
-              ) ||
-              media.seasons.some(
-                (season) => season.status4k === MediaStatus.PARTIALLY_AVAILABLE
-              ))
-          ) {
-            await this.mediaUpdater(media, true, mediaServerType);
-          }
-
           // TODO: Figure out how to run seasonUpdater for each season
 
           if ([...finalSeasons.values()].includes(false)) {
@@ -451,6 +423,22 @@ class AvailabilitySync {
               mediaServerType
             );
           }
+
+          if (
+            !showExists &&
+            (media.status === MediaStatus.AVAILABLE ||
+              media.status === MediaStatus.PARTIALLY_AVAILABLE)
+          ) {
+            await this.mediaUpdater(media, false, mediaServerType);
+          }
+
+          if (
+            !showExists4k &&
+            (media.status4k === MediaStatus.AVAILABLE ||
+              media.status4k === MediaStatus.PARTIALLY_AVAILABLE)
+          ) {
+            await this.mediaUpdater(media, true, mediaServerType);
+          }
         }
       }
     } catch (ex) {
@@ -478,10 +466,6 @@ class AvailabilitySync {
       { status: MediaStatus.PARTIALLY_AVAILABLE },
       { status4k: MediaStatus.AVAILABLE },
       { status4k: MediaStatus.PARTIALLY_AVAILABLE },
-      { seasons: { status: MediaStatus.AVAILABLE } },
-      { seasons: { status: MediaStatus.PARTIALLY_AVAILABLE } },
-      { seasons: { status4k: MediaStatus.AVAILABLE } },
-      { seasons: { status4k: MediaStatus.PARTIALLY_AVAILABLE } },
     ];
 
     let mediaPage: Media[];

server/routes/media.ts

@@ -237,19 +237,6 @@ mediaRoutes.delete(
       }
 
       if (isMovie) {
-        // check if the movie exists
-        try {
-          await (service as RadarrAPI).getMovie({
-            id: parseInt(
-              is4k
-                ? (media.externalServiceSlug4k as string)
-                : (media.externalServiceSlug as string)
-            ),
-          });
-        } catch {
-          return res.status(204).send();
-        }
-        // remove the movie
         await (service as RadarrAPI).removeMovie(
           parseInt(
             is4k
@@ -264,13 +251,6 @@ mediaRoutes.delete(
         if (!tvdbId) {
           throw new Error('TVDB ID not found');
         }
-        // check if the series exists
-        try {
-          await (service as SonarrAPI).getSeriesByTvdbId(tvdbId);
-        } catch {
-          return res.status(204).send();
-        }
-        // remove the series
         await (service as SonarrAPI).removeSerie(tvdbId);
       }
 

server/routes/user/index.ts

@@ -60,24 +60,22 @@ router.get('/', async (req, res, next) => {
         query = query.orderBy('user.updatedAt', 'DESC');
         break;
       case 'displayname':
-        query = query
-          .addSelect(
-            `CASE WHEN (user.username IS NULL OR user.username = '') THEN (
-              CASE WHEN (user.plexUsername IS NULL OR user.plexUsername = '') THEN (
-                CASE WHEN (user.jellyfinUsername IS NULL OR user.jellyfinUsername = '') THEN
-                  "user"."email"
-                ELSE
-                  LOWER(user.jellyfinUsername)
-                END)
-              ELSE
-                LOWER(user.jellyfinUsername)
-              END)
-            ELSE
-              LOWER(user.username)
-            END`,
-            'displayname_sort_key'
-          )
-          .orderBy('displayname_sort_key', 'ASC');
+        query = query.orderBy(
+          `CASE WHEN (user.username IS NULL OR user.username = '') THEN (
+             CASE WHEN (user.plexUsername IS NULL OR user.plexUsername = '') THEN (
+               CASE WHEN (user.jellyfinUsername IS NULL OR user.jellyfinUsername = '') THEN
+                 "user"."email"
+               ELSE
+                 LOWER(user.jellyfinUsername)
+               END)
+             ELSE
+               LOWER(user.jellyfinUsername)
+             END)
+           ELSE
+             LOWER(user.username)
+           END`,
+          'ASC'
+        );
         break;
       case 'requests':
         query = query

server/utils/customProxyAgent.ts

@@ -8,9 +8,8 @@ export default async function createCustomProxyAgent(
 ) {
   const defaultAgent = new Agent({ keepAliveTimeout: 5000 });
 
-  const skipUrl = (url: string | URL) => {
-    const hostname =
-      typeof url === 'string' ? new URL(url).hostname : url.hostname;
+  const skipUrl = (url: string) => {
+    const hostname = new URL(url).hostname;
 
     if (proxySettings.bypassLocalAddresses && isLocalAddress(hostname)) {
       return true;
@@ -39,7 +38,8 @@ export default async function createCustomProxyAgent(
     dispatch: Dispatcher['dispatch']
   ): Dispatcher['dispatch'] => {
     return (opts, handler) => {
-      return opts.origin && skipUrl(opts.origin)
+      const url = opts.origin?.toString();
+      return url && skipUrl(url)
         ? defaultAgent.dispatch(opts, handler)
         : dispatch(opts, handler);
     };
@@ -60,10 +60,13 @@ export default async function createCustomProxyAgent(
         ':' +
         proxySettings.port,
       token,
+      interceptors: {
+        Client: [noProxyInterceptor],
+      },
       keepAliveTimeout: 5000,
     });
 
-    setGlobalDispatcher(proxyAgent.compose(noProxyInterceptor));
+    setGlobalDispatcher(proxyAgent);
   } catch (e) {
     logger.error('Failed to connect to the proxy: ' + e.message, {
       label: 'Proxy',
@@ -92,11 +95,7 @@ export default async function createCustomProxyAgent(
 }
 
 function isLocalAddress(hostname: string) {
-  if (
-    hostname === 'localhost' ||
-    hostname === '127.0.0.1' ||
-    hostname === '::1'
-  ) {
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
     return true;
   }
 

src/components/AirDateBadge/index.tsx

@@ -14,13 +14,17 @@ type AirDateBadgeProps = {
 const AirDateBadge = ({ airDate }: AirDateBadgeProps) => {
   const WEEK = 1000 * 60 * 60 * 24 * 8;
   const intl = useIntl();
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const dAirDate = new Date(airDate);
   const nowDate = new Date();
   const alreadyAired = dAirDate.getTime() < nowDate.getTime();
+
   const compareWeek = new Date(
     alreadyAired ? Date.now() - WEEK : Date.now() + WEEK
   );
+
   let showRelative = false;
+
   if (
     (alreadyAired && dAirDate.getTime() > compareWeek.getTime()) ||
     (!alreadyAired && dAirDate.getTime() < compareWeek.getTime())
@@ -28,10 +32,6 @@ const AirDateBadge = ({ airDate }: AirDateBadgeProps) => {
     showRelative = true;
   }
 
-  const diffInDays = Math.round(
-    (dAirDate.getTime() - nowDate.getTime()) / (1000 * 60 * 60 * 24)
-  );
-
   return (
     <div className="flex items-center space-x-2">
       <Badge badgeType="light">
@@ -39,7 +39,7 @@ const AirDateBadge = ({ airDate }: AirDateBadgeProps) => {
           year: 'numeric',
           month: 'long',
           day: 'numeric',
-          timeZone: 'UTC',
+          timeZone,
         })}
       </Badge>
       {showRelative && (
@@ -49,9 +49,9 @@ const AirDateBadge = ({ airDate }: AirDateBadgeProps) => {
             {
               relativeTime: (
                 <FormattedRelativeTime
-                  value={diffInDays}
-                  unit="day"
+                  value={(dAirDate.getTime() - Date.now()) / 1000}
                   numeric="auto"
+                  updateIntervalInSeconds={1}
                 />
               ),
             }

src/components/Login/JellyfinLogin.tsx

@@ -161,6 +161,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                         data-form-type="password"
                         data-1pignore="false"
                         data-lpignore="false"
+                        data-bwignore="false"
                       />
                     </div>
                     <div className="flex">

src/components/Login/LocalLogin.tsx

@@ -118,6 +118,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                       className="!bg-gray-700/80 placeholder:text-gray-400"
                       data-1pignore="false"
                       data-lpignore="false"
+                      data-bwignore="false"
                     />
                   </div>
                   <div className="flex">

src/components/MovieDetails/index.tsx

@@ -590,7 +590,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                   buttonSize={'md'}
                   onClick={() => setShowBlacklistModal(true)}
                 >
-                  <EyeSlashIcon />
+                  <EyeSlashIcon className={'h-3'} />
                 </Button>
               </Tooltip>
             )}
@@ -608,9 +608,9 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                       onClick={onClickWatchlistBtn}
                     >
                       {isUpdating ? (
-                        <Spinner />
+                        <Spinner className="h-3" />
                       ) : (
-                        <StarIcon className={'text-amber-300'} />
+                        <StarIcon className={'h-3 text-amber-300'} />
                       )}
                     </Button>
                   </Tooltip>
@@ -623,15 +623,17 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                       buttonSize={'md'}
                       onClick={onClickDeleteWatchlistBtn}
                     >
-                      {isUpdating ? <Spinner /> : <MinusCircleIcon />}
+                      {isUpdating ? (
+                        <Spinner className="h-3" />
+                      ) : (
+                        <MinusCircleIcon className={'h-3'} />
+                      )}
                     </Button>
                   </Tooltip>
                 )}
               </>
             )}
-          <div className="z-20">
-            <PlayButton links={mediaLinks} />
-          </div>
+          <PlayButton links={mediaLinks} />
           <RequestButton
             mediaType="movie"
             media={data.mediaInfo}

src/components/RequestList/RequestItem/index.tsx

@@ -17,10 +17,9 @@ import {
   TrashIcon,
   XMarkIcon,
 } from '@heroicons/react/24/solid';
-import { MediaRequestStatus, MediaType } from '@server/constants/media';
+import { MediaRequestStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { NonFunctionProperties } from '@server/interfaces/api/common';
-import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import Link from 'next/link';
@@ -294,16 +293,9 @@ const RequestItemError = ({
 interface RequestItemProps {
   request: NonFunctionProperties<MediaRequest> & { profileName?: string };
   revalidateList: () => void;
-  radarrData?: RadarrSettings[];
-  sonarrData?: SonarrSettings[];
 }
 
-const RequestItem = ({
-  request,
-  revalidateList,
-  radarrData,
-  sonarrData,
-}: RequestItemProps) => {
+const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
   const settings = useSettings();
   const { ref, inView } = useInView({
     triggerOnce: true,
@@ -398,23 +390,6 @@ const RequestItem = ({
     iOSPlexUrl4k: requestData?.media?.iOSPlexUrl4k,
   });
 
-  const serviceExists = () => {
-    if (title?.mediaInfo) {
-      if (title?.mediaInfo.mediaType === MediaType.MOVIE) {
-        return (
-          radarrData?.find((radarr) => radarr.id === request.serverId) !==
-          undefined
-        );
-      } else {
-        return (
-          sonarrData?.find((sonarr) => sonarr.id === request.serverId) !==
-          undefined
-        );
-      }
-    }
-    return false;
-  };
-
   if (!title && !error) {
     return (
       <div
@@ -722,30 +697,28 @@ const RequestItem = ({
             )}
           {requestData.status !== MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (
-              <ConfirmButton
-                onClick={() => deleteRequest()}
-                confirmText={intl.formatMessage(globalMessages.areyousure)}
-                className="w-full"
-              >
-                <TrashIcon />
-                <span>{intl.formatMessage(messages.deleterequest)}</span>
-              </ConfirmButton>
-            )}
-          {hasPermission(Permission.MANAGE_REQUESTS) &&
-            title?.mediaInfo?.serviceId &&
-            serviceExists() && (
-              <ConfirmButton
-                onClick={() => deleteMediaFile()}
-                confirmText={intl.formatMessage(globalMessages.areyousure)}
-                className="w-full"
-              >
-                <TrashIcon />
-                <span>
-                  {intl.formatMessage(messages.removearr, {
-                    arr: request.type === 'movie' ? 'Radarr' : 'Sonarr',
-                  })}
-                </span>
-              </ConfirmButton>
+              <>
+                <ConfirmButton
+                  onClick={() => deleteRequest()}
+                  confirmText={intl.formatMessage(globalMessages.areyousure)}
+                  className="w-full"
+                >
+                  <TrashIcon />
+                  <span>{intl.formatMessage(messages.deleterequest)}</span>
+                </ConfirmButton>
+                <ConfirmButton
+                  onClick={() => deleteMediaFile()}
+                  confirmText={intl.formatMessage(globalMessages.areyousure)}
+                  className="w-full"
+                >
+                  <TrashIcon />
+                  <span>
+                    {intl.formatMessage(messages.removearr, {
+                      arr: request.type === 'movie' ? 'Radarr' : 'Sonarr',
+                    })}
+                  </span>
+                </ConfirmButton>
+              </>
             )}
           {requestData.status === MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (

src/components/RequestList/index.tsx

@@ -17,8 +17,6 @@ import {
   FunnelIcon,
 } from '@heroicons/react/24/solid';
 import type { RequestResultsResponse } from '@server/interfaces/api/requestInterfaces';
-import { Permission } from '@server/lib/permissions';
-import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -53,7 +51,7 @@ const RequestList = () => {
   const { user } = useUser({
     id: Number(router.query.userId),
   });
-  const { user: currentUser, hasPermission } = useUser();
+  const { user: currentUser } = useUser();
   const [currentFilter, setCurrentFilter] = useState<Filter>(Filter.PENDING);
   const [currentSort, setCurrentSort] = useState<Sort>('added');
   const [currentSortDirection, setCurrentSortDirection] =
@@ -64,13 +62,6 @@ const RequestList = () => {
   const pageIndex = page - 1;
   const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
 
-  const { data: radarrData } = useSWR<RadarrSettings[]>(
-    hasPermission(Permission.ADMIN) ? '/api/v1/settings/radarr' : null
-  );
-  const { data: sonarrData } = useSWR<SonarrSettings[]>(
-    hasPermission(Permission.ADMIN) ? '/api/v1/settings/sonarr' : null
-  );
-
   const {
     data,
     error,
@@ -254,8 +245,6 @@ const RequestList = () => {
             <RequestItem
               request={request}
               revalidateList={() => revalidate()}
-              radarrData={radarrData}
-              sonarrData={sonarrData}
             />
           </div>
         );

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -221,7 +221,6 @@ const NotificationsEmail = () => {
                     requireTls: values.encryption === 'opportunistic',
                     authUser: values.authUser,
                     authPass: values.authPass,
-                    allowSelfSigned: values.allowSelfSigned,
                     senderName: values.senderName,
                     pgpPrivateKey: values.pgpPrivateKey,
                     pgpPassword: values.pgpPassword,

src/components/TitleCard/index.tsx

@@ -373,10 +373,11 @@ const TitleCard = ({
                   : intl.formatMessage(globalMessages.tvshow)}
               </div>
             </div>
-            {showDetail && currentStatus !== MediaStatus.BLACKLISTED && (
-              <div className="flex flex-col gap-1">
-                {user?.userType !== UserType.PLEX &&
-                  (toggleWatchlist ? (
+            {showDetail &&
+              currentStatus !== MediaStatus.BLACKLISTED &&
+              user?.userType !== UserType.PLEX && (
+                <div className="flex flex-col gap-1">
+                  {toggleWatchlist ? (
                     <Button
                       buttonType={'ghost'}
                       className="z-40"
@@ -393,23 +394,23 @@ const TitleCard = ({
                     >
                       <MinusCircleIcon className={'h-3'} />
                     </Button>
-                  ))}
-                {showHideButton &&
-                  currentStatus !== MediaStatus.PROCESSING &&
-                  currentStatus !== MediaStatus.AVAILABLE &&
-                  currentStatus !== MediaStatus.PARTIALLY_AVAILABLE &&
-                  currentStatus !== MediaStatus.PENDING && (
-                    <Button
-                      buttonType={'ghost'}
-                      className="z-40"
-                      buttonSize={'sm'}
-                      onClick={() => setShowBlacklistModal(true)}
-                    >
-                      <EyeSlashIcon className={'h-3'} />
-                    </Button>
                   )}
-              </div>
-            )}
+                  {showHideButton &&
+                    currentStatus !== MediaStatus.PROCESSING &&
+                    currentStatus !== MediaStatus.AVAILABLE &&
+                    currentStatus !== MediaStatus.PARTIALLY_AVAILABLE &&
+                    currentStatus !== MediaStatus.PENDING && (
+                      <Button
+                        buttonType={'ghost'}
+                        className="z-40"
+                        buttonSize={'sm'}
+                        onClick={() => setShowBlacklistModal(true)}
+                      >
+                        <EyeSlashIcon className={'h-3'} />
+                      </Button>
+                    )}
+                </div>
+              )}
             {showDetail &&
               showHideButton &&
               currentStatus == MediaStatus.BLACKLISTED && (

src/components/TvDetails/index.tsx

@@ -632,7 +632,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                   buttonSize={'md'}
                   onClick={() => setShowBlacklistModal(true)}
                 >
-                  <EyeSlashIcon />
+                  <EyeSlashIcon className={'h-3'} />
                 </Button>
               </Tooltip>
             )}
@@ -650,9 +650,9 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                       onClick={onClickWatchlistBtn}
                     >
                       {isUpdating ? (
-                        <Spinner />
+                        <Spinner className="h-3" />
                       ) : (
-                        <StarIcon className={'text-amber-300'} />
+                        <StarIcon className={'h-3 text-amber-300'} />
                       )}
                     </Button>
                   </Tooltip>
@@ -665,15 +665,17 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                       buttonSize={'md'}
                       onClick={onClickDeleteWatchlistBtn}
                     >
-                      {isUpdating ? <Spinner /> : <MinusCircleIcon />}
+                      {isUpdating ? (
+                        <Spinner className="h-3" />
+                      ) : (
+                        <MinusCircleIcon className={'h-3'} />
+                      )}
                     </Button>
                   </Tooltip>
                 )}
               </>
             )}
-          <div className="z-20">
-            <PlayButton links={mediaLinks} />
-          </div>
+          <PlayButton links={mediaLinks} />
           <RequestButton
             mediaType="tv"
             onUpdate={() => revalidate()}

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -415,7 +415,7 @@ const UserGeneralSettings = () => {
                   </span>
                 </label>
                 <div className="form-input-area">
-                  <div className="form-input-field relative z-30">
+                  <div className="form-input-field">
                     <RegionSelector
                       name="discoverRegion"
                       value={values.discoverRegion ?? ''}
@@ -451,7 +451,7 @@ const UserGeneralSettings = () => {
                   </span>
                 </label>
                 <div className="form-input-area">
-                  <div className="form-input-field relative z-20">
+                  <div className="form-input-field">
                     <RegionSelector
                       name="streamingRegion"
                       value={values.streamingRegion || ''}