chore: Apply linting rules and add git hok (#611)

Co-authored-by: Fredrik Burmester <fredrik.burmester@gmail.com>
2026-05-31 19:18:26 +01:00 · 2025-03-16 18:01:12 +01:00
parent 2688e1b981
commit 92513e234f
268 changed files with 9197 additions and 8394 deletions
--- a/components/series/CastAndCrew.tsx
+++ b/components/series/CastAndCrew.tsx
@@ -1,18 +1,19 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import {
+import type {
  BaseItemDto,
  BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { router, useSegments } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useMemo } from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import type React from "react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
-import Poster from "../posters/Poster";
 import { itemRouter } from "../common/TouchableItemRouter";
-import { useTranslation } from "react-i18next";
+import Poster from "../posters/Poster";

 interface Props extends ViewProps {
  item?: BaseItemDto | null;
@@ -41,8 +42,10 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
  if (!from) return null;

  return (
-    <View {...props} className="flex flex-col">
-      <Text className="text-lg font-bold mb-2 px-4">{t("item_card.cast_and_crew")}</Text>
+    <View {...props} className='flex flex-col'>
+      <Text className='text-lg font-bold mb-2 px-4'>
+        {t("item_card.cast_and_crew")}
+      </Text>
      <HorizontalScroll
        loading={loading}
        keyExtractor={(i, idx) => i.Id.toString()}
@@ -55,11 +58,11 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
              // @ts-ignore
              router.push(url);
            }}
-            className="flex flex-col w-28"
+            className='flex flex-col w-28'
          >
            <Poster id={i.id} url={getPrimaryImageUrl({ api, item: i })} />
-            <Text className="mt-2">{i.Name}</Text>
-            <Text className="text-xs opacity-50">{i.Role}</Text>
+            <Text className='mt-2'>{i.Name}</Text>
+            <Text className='text-xs opacity-50'>{i.Role}</Text>
          </TouchableOpacity>
        )}
      />
--- a/components/series/CurrentSeries.tsx
+++ b/components/series/CurrentSeries.tsx
@@ -1,14 +1,14 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import React from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import Poster from "../posters/Poster";
+import type React from "react";
+import { useTranslation } from "react-i18next";
+import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
-import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
-import { useTranslation } from "react-i18next";
+import Poster from "../posters/Poster";

 interface Props extends ViewProps {
  item?: BaseItemDto | null;
@@ -20,7 +20,9 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {

  return (
    <View {...props}>
-      <Text className="text-lg font-bold mb-2 px-4">{t("item_card.series")}</Text>
+      <Text className='text-lg font-bold mb-2 px-4'>
+        {t("item_card.series")}
+      </Text>
      <HorizontalScroll
        data={[item]}
        height={247}
@@ -28,7 +30,7 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
          <TouchableOpacity
            key={item.Id}
            onPress={() => router.push(`/series/${item.SeriesId}`)}
-            className="flex flex-col space-y-2 w-28"
+            className='flex flex-col space-y-2 w-28'
          >
            <Poster
              id={item.id}
--- a/components/series/EpisodeTitleHeader.tsx
+++ b/components/series/EpisodeTitleHeader.tsx
@@ -1,7 +1,7 @@
 import { Text } from "@/components/common/Text";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useRouter } from "expo-router";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import { TouchableOpacity, View, type ViewProps } from "react-native";

 interface Props extends ViewProps {
  item: BaseItemDto;
@@ -12,25 +12,25 @@ export const EpisodeTitleHeader: React.FC<Props> = ({ item, ...props }) => {

  return (
    <View {...props}>
-      <Text uiTextView className="font-bold text-2xl" selectable>
+      <Text uiTextView className='font-bold text-2xl' selectable>
        {item?.Name}
      </Text>
-      <View className="flex flex-row items-center mb-1">
+      <View className='flex flex-row items-center mb-1'>
        <TouchableOpacity
          onPress={() => {
            router.push(
              // @ts-ignore
-              `/(auth)/series/${item.SeriesId}?seasonIndex=${item?.ParentIndexNumber}`
+              `/(auth)/series/${item.SeriesId}?seasonIndex=${item?.ParentIndexNumber}`,
            );
          }}
        >
-          <Text className="opacity-50">{item?.SeasonName}</Text>
+          <Text className='opacity-50'>{item?.SeasonName}</Text>
        </TouchableOpacity>

-        <Text className="opacity-50 mx-2">{"—"}</Text>
-        <Text className="opacity-50">{`Episode ${item.IndexNumber}`}</Text>
+        <Text className='opacity-50 mx-2'>{"—"}</Text>
+        <Text className='opacity-50'>{`Episode ${item.IndexNumber}`}</Text>
      </View>
-      <Text className="opacity-50">{item?.ProductionYear}</Text>
+      <Text className='opacity-50'>{item?.ProductionYear}</Text>
    </View>
  );
 };
--- a/components/series/JellyseerrSeasons.tsx
+++ b/components/series/JellyseerrSeasons.tsx
@@ -1,30 +1,35 @@
-import { Text } from "@/components/common/Text";
-import React, { useCallback, useMemo, useState } from "react";
-import { Alert, TouchableOpacity, View } from "react-native";
-import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
-import { FlashList } from "@shopify/flash-list";
-import { orderBy } from "lodash";
 import { Tags } from "@/components/GenreTags";
+import { RoundButton } from "@/components/RoundButton";
+import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
+import { Text } from "@/components/common/Text";
+import { dateOpts } from "@/components/jellyseerr/DetailFacts";
 import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
-import Season from "@/utils/jellyseerr/server/entity/Season";
+import { textShadowStyle } from "@/components/jellyseerr/discover/GenericSlideCard";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
 import {
  MediaStatus,
  MediaType,
 } from "@/utils/jellyseerr/server/constants/media";
-import { Ionicons } from "@expo/vector-icons";
-import { RoundButton } from "@/components/RoundButton";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import type MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import type Season from "@/utils/jellyseerr/server/entity/Season";
+import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import { TvResult } from "@/utils/jellyseerr/server/models/Search";
-import {QueryObserverResult, RefetchOptions, useQuery} from "@tanstack/react-query";
-import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
+import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import { Ionicons } from "@expo/vector-icons";
+import { FlashList } from "@shopify/flash-list";
+import {
+  type QueryObserverResult,
+  type RefetchOptions,
+  useQuery,
+} from "@tanstack/react-query";
 import { Image } from "expo-image";
-import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
-import { Loader } from "../Loader";
 import { t } from "i18next";
-import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
-import {MediaRequestBody} from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import {textShadowStyle} from "@/components/jellyseerr/discover/GenericSlideCard";
-import {dateOpts} from "@/components/jellyseerr/DetailFacts";
+import { orderBy } from "lodash";
+import type React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { Alert, TouchableOpacity, View } from "react-native";
+import { Loader } from "../Loader";

 const JellyseerrSeasonEpisodes: React.FC<{
  details: TvDetails;
@@ -54,26 +59,27 @@ const JellyseerrSeasonEpisodes: React.FC<{
 };

 const RenderItem = ({ item, index }: any) => {
-  const { jellyseerrApi, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
+  const {
+    jellyseerrApi,
+    jellyseerrRegion: region,
+    jellyseerrLocale: locale,
+  } = useJellyseerr();
  const [imageError, setImageError] = useState(false);

  const upcomingAirDate = useMemo(() => {
    const airDate = item.airDate;
    if (airDate) {
-      let airDateObj = new Date(airDate);
+      const airDateObj = new Date(airDate);

      if (new Date() < airDateObj) {
-        return airDateObj.toLocaleDateString(
-          `${locale}-${region}`,
-          dateOpts
-        );
+        return airDateObj.toLocaleDateString(`${locale}-${region}`, dateOpts);
      }
    }
  }, [item]);

  return (
-    <View className="flex flex-col w-44 mt-2">
-      <View className="relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
+    <View className='flex flex-col w-44 mt-2'>
+      <View className='relative aspect-video rounded-lg overflow-hidden border border-neutral-800'>
        {!imageError ? (
          <>
            <Image
@@ -83,16 +89,19 @@ const RenderItem = ({ item, index }: any) => {
                uri: jellyseerrApi?.imageProxy(item.stillPath),
              }}
              cachePolicy={"memory-disk"}
-              contentFit="cover"
-              className="w-full h-full"
+              contentFit='cover'
+              className='w-full h-full'
              onError={(e) => {
                setImageError(true);
              }}
            />
            {upcomingAirDate && (
-              <View className="absolute justify-center bottom-0 right-0.5 items-center">
-                <View className="rounded-full bg-purple-600/30 p-1">
-                  <Text className="text-center text-xs" style={textShadowStyle.shadow}>
+              <View className='absolute justify-center bottom-0 right-0.5 items-center'>
+                <View className='rounded-full bg-purple-600/30 p-1'>
+                  <Text
+                    className='text-center text-xs'
+                    style={textShadowStyle.shadow}
+                  >
                    {upcomingAirDate}
                  </Text>
                </View>
@@ -100,26 +109,26 @@ const RenderItem = ({ item, index }: any) => {
            )}
          </>
        ) : (
-          <View className="flex flex-col w-full h-full items-center justify-center border border-neutral-800 bg-neutral-900">
+          <View className='flex flex-col w-full h-full items-center justify-center border border-neutral-800 bg-neutral-900'>
            <Ionicons
-              name="image-outline"
+              name='image-outline'
              size={24}
-              color="white"
+              color='white'
              style={{ opacity: 0.4 }}
            />
          </View>
        )}
      </View>
-      <View className="shrink mt-1">
-        <Text numberOfLines={2} className="">
+      <View className='shrink mt-1'>
+        <Text numberOfLines={2} className=''>
          {item.name}
        </Text>
-        <Text numberOfLines={1} className="text-xs text-neutral-500">
+        <Text numberOfLines={1} className='text-xs text-neutral-500'>
          {`S${item.seasonNumber}:E${item.episodeNumber}`}
        </Text>
      </View>

-      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
+      <Text numberOfLines={3} className='text-xs text-neutral-500 shrink'>
        {item.overview}
      </Text>
    </View>
@@ -129,9 +138,13 @@ const RenderItem = ({ item, index }: any) => {
 const JellyseerrSeasons: React.FC<{
  isLoading: boolean;
  details?: TvDetails;
-  hasAdvancedRequest?: boolean,
+  hasAdvancedRequest?: boolean;
  onAdvancedRequest?: (data: MediaRequestBody) => void;
-  refetch:  (options?: (RefetchOptions | undefined)) => Promise<QueryObserverResult<TvDetails | MovieDetails | undefined, Error>>;
+  refetch: (
+    options?: RefetchOptions | undefined,
+  ) => Promise<
+    QueryObserverResult<TvDetails | MovieDetails | undefined, Error>
+  >;
 }> = ({
  isLoading,
  details,
@@ -147,10 +160,10 @@ const JellyseerrSeasons: React.FC<{
  }>();
  const seasons = useMemo(() => {
    const mediaInfoSeasons = details?.mediaInfo?.seasons?.filter(
-      (s: Season) => s.seasonNumber !== 0
+      (s: Season) => s.seasonNumber !== 0,
    );
    const requestedSeasons = details?.mediaInfo?.requests?.flatMap(
-      (r: MediaRequest) => r.seasons
+      (r: MediaRequest) => r.seasons,
    );
    return details.seasons?.map((season) => {
      return {
@@ -159,11 +172,11 @@ const JellyseerrSeasons: React.FC<{
          // What our library status is
          mediaInfoSeasons?.find(
            (mediaSeason: Season) =>
-              mediaSeason.seasonNumber === season.seasonNumber
+              mediaSeason.seasonNumber === season.seasonNumber,
          )?.status ??
          // What our request status is
          requestedSeasons?.find(
-            (s: Season) => s.seasonNumber === season.seasonNumber
+            (s: Season) => s.seasonNumber === season.seasonNumber,
          )?.status ??
          // Otherwise set it as unknown
          MediaStatus.UNKNOWN,
@@ -173,7 +186,7 @@ const JellyseerrSeasons: React.FC<{

  const allSeasonsAvailable = useMemo(
    () => seasons?.every((season) => season.status === MediaStatus.AVAILABLE),
-    [seasons]
+    [seasons],
  );

  const requestAll = useCallback(() => {
@@ -184,13 +197,13 @@ const JellyseerrSeasons: React.FC<{
        tvdbId: details.externalIds?.tvdbId,
        seasons: seasons
          .filter(
-            (s) => s.status === MediaStatus.UNKNOWN && s.seasonNumber !== 0
+            (s) => s.status === MediaStatus.UNKNOWN && s.seasonNumber !== 0,
          )
          .map((s) => s.seasonNumber),
-      }
+      };

      if (hasAdvancedRequest) {
-        return onAdvancedRequest?.(body)
+        return onAdvancedRequest?.(body);
      }

      requestMedia(details.name, body, refetch);
@@ -199,44 +212,53 @@ const JellyseerrSeasons: React.FC<{

  const promptRequestAll = useCallback(
    () =>
-      Alert.alert(t("jellyseerr.confirm"), t("jellyseerr.are_you_sure_you_want_to_request_all_seasons"), [
-        {
-          text: t("jellyseerr.cancel"),
-          style: "cancel",
-        },
-        {
-          text: t("jellyseerr.yes"),
-          onPress: requestAll,
-        },
-      ]),
-    [requestAll]
+      Alert.alert(
+        t("jellyseerr.confirm"),
+        t("jellyseerr.are_you_sure_you_want_to_request_all_seasons"),
+        [
+          {
+            text: t("jellyseerr.cancel"),
+            style: "cancel",
+          },
+          {
+            text: t("jellyseerr.yes"),
+            onPress: requestAll,
+          },
+        ],
+      ),
+    [requestAll],
  );

-  const requestSeason = useCallback(async (canRequest: Boolean, seasonNumber: number) => {
-    if (canRequest) {
-      const body: MediaRequestBody = {
-        mediaId: details.id,
-        mediaType: MediaType.TV,
-        tvdbId: details.externalIds?.tvdbId,
-        seasons: [seasonNumber],
-      }
+  const requestSeason = useCallback(
+    async (canRequest: boolean, seasonNumber: number) => {
+      if (canRequest) {
+        const body: MediaRequestBody = {
+          mediaId: details.id,
+          mediaType: MediaType.TV,
+          tvdbId: details.externalIds?.tvdbId,
+          seasons: [seasonNumber],
+        };

-      if (hasAdvancedRequest) {
-        return onAdvancedRequest?.(body)
-      }
+        if (hasAdvancedRequest) {
+          return onAdvancedRequest?.(body);
+        }

-      requestMedia(`${details.name}, Season ${seasonNumber}`, body, refetch);
-    }
-  }, [requestMedia, hasAdvancedRequest, onAdvancedRequest]);
+        requestMedia(`${details.name}, Season ${seasonNumber}`, body, refetch);
+      }
+    },
+    [requestMedia, hasAdvancedRequest, onAdvancedRequest],
+  );

  if (isLoading)
    return (
      <View>
-        <View className="flex flex-row justify-between items-end px-4">
-          <Text className="text-lg font-bold mb-2">{t("item_card.seasons")}</Text>
+        <View className='flex flex-row justify-between items-end px-4'>
+          <Text className='text-lg font-bold mb-2'>
+            {t("item_card.seasons")}
+          </Text>
          {!allSeasonsAvailable && (
-            <RoundButton className="mb-2 pa-2" onPress={promptRequestAll}>
-              <Ionicons name="bag-add" color="white" size={26} />
+            <RoundButton className='mb-2 pa-2' onPress={promptRequestAll}>
+              <Ionicons name='bag-add' color='white' size={26} />
            </RoundButton>
          )}
        </View>
@@ -249,19 +271,21 @@ const JellyseerrSeasons: React.FC<{
      data={orderBy(
        details.seasons.filter((s) => s.seasonNumber !== 0),
        "seasonNumber",
-        "desc"
+        "desc",
      )}
      ListHeaderComponent={() => (
-        <View className="flex flex-row justify-between items-end px-4">
-          <Text className="text-lg font-bold mb-2">{t("item_card.seasons")}</Text>
+        <View className='flex flex-row justify-between items-end px-4'>
+          <Text className='text-lg font-bold mb-2'>
+            {t("item_card.seasons")}
+          </Text>
          {!allSeasonsAvailable && (
-            <RoundButton className="mb-2 pa-2" onPress={promptRequestAll}>
-              <Ionicons name="bag-add" color="white" size={26} />
+            <RoundButton className='mb-2 pa-2' onPress={promptRequestAll}>
+              <Ionicons name='bag-add' color='white' size={26} />
            </RoundButton>
          )}
        </View>
      )}
-      ItemSeparatorComponent={() => <View className="h-2" />}
+      ItemSeparatorComponent={() => <View className='h-2' />}
      estimatedItemSize={250}
      renderItem={({ item: season }) => (
        <>
@@ -272,17 +296,21 @@ const JellyseerrSeasons: React.FC<{
                [season.seasonNumber]: !prevState?.[season.seasonNumber],
              }))
            }
-            className="px-4"
+            className='px-4'
          >
            <View
-              className="flex flex-row justify-between items-center bg-gray-100/10 rounded-xl z-20 h-12 w-full px-4"
+              className='flex flex-row justify-between items-center bg-gray-100/10 rounded-xl z-20 h-12 w-full px-4'
              key={season.id}
            >
              <Tags
-                textClass=""
+                textClass=''
                tags={[
-                  t("jellyseerr.season_number", {season_number: season.seasonNumber}),
-                  t("jellyseerr.number_episodes", {episode_number: season.episodeCount}),
+                  t("jellyseerr.season_number", {
+                    season_number: season.seasonNumber,
+                  }),
+                  t("jellyseerr.number_episodes", {
+                    episode_number: season.episodeCount,
+                  }),
                ]}
              />
              {[0].map(() => {
@@ -292,11 +320,13 @@ const JellyseerrSeasons: React.FC<{
                return (
                  <JellyseerrStatusIcon
                    key={0}
-                    onPress={() => requestSeason(canRequest, season.seasonNumber)}
+                    onPress={() =>
+                      requestSeason(canRequest, season.seasonNumber)
+                    }
                    className={canRequest ? "bg-gray-700/40" : undefined}
                    mediaStatus={
                      seasons?.find(
-                        (s) => s.seasonNumber === season.seasonNumber
+                        (s) => s.seasonNumber === season.seasonNumber,
                      )?.status
                    }
                    showRequestIcon={canRequest}
--- a/components/series/NextItemButton.tsx
+++ b/components/series/NextItemButton.tsx
@@ -1,12 +1,12 @@
-import { Ionicons } from "@expo/vector-icons";
-import { Button } from "../Button";
-import { useRouter } from "expo-router";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
+import { useAtom } from "jotai";
 import { useMemo } from "react";
+import { Button } from "../Button";

 interface Props extends React.ComponentProps<typeof Button> {
  item: BaseItemDto;
@@ -62,9 +62,9 @@ export const NextItemButton: React.FC<Props> = ({
      {...props}
    >
      {type === "next" ? (
-        <Ionicons name="chevron-forward" size={24} color="white" />
+        <Ionicons name='chevron-forward' size={24} color='white' />
      ) : (
-        <Ionicons name="chevron-back" size={24} color="white" />
+        <Ionicons name='chevron-back' size={24} color='white' />
      )}
    </Button>
  );
--- a/components/series/NextUp.tsx
+++ b/components/series/NextUp.tsx
@@ -1,18 +1,18 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
 import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import React from "react";
+import type React from "react";
+import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View } from "react-native";
-import { HorizontalScroll } from "../common/HorrizontalScroll";
-import { Text } from "../common/Text";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
+import { HorizontalScroll } from "../common/HorrizontalScroll";
+import { Text } from "../common/Text";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import { FlashList } from "@shopify/flash-list";
-import { useTranslation } from "react-i18next";

 export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
  const [user] = useAtom(userAtom);
@@ -38,15 +38,17 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {

  if (!items?.length)
    return (
-      <View className="px-4">
-        <Text className="text-lg font-bold mb-2">{t("item_card.next_up")}</Text>
-        <Text className="opacity-50">{t("item_card.no_items_to_display")}</Text>
+      <View className='px-4'>
+        <Text className='text-lg font-bold mb-2'>{t("item_card.next_up")}</Text>
+        <Text className='opacity-50'>{t("item_card.no_items_to_display")}</Text>
      </View>
    );

  return (
    <View>
-      <Text className="text-lg font-bold px-4 mb-2">{t("item_card.next_up")}</Text>
+      <Text className='text-lg font-bold px-4 mb-2'>
+        {t("item_card.next_up")}
+      </Text>
      <FlashList
        contentContainerStyle={{ paddingLeft: 16 }}
        horizontal
@@ -57,7 +59,7 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
          <TouchableItemRouter
            item={item}
            key={index}
-            className="flex flex-col w-44"
+            className='flex flex-col w-44'
          >
            <ContinueWatchingPoster item={item} useEpisodePoster />
            <ItemCardText item={item} />
--- a/components/series/SeasonDropdown.tsx
+++ b/components/series/SeasonDropdown.tsx
@@ -1,9 +1,9 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { Text } from "../common/Text";
 import { t } from "i18next";
+import { Text } from "../common/Text";

 type Props = {
  item: BaseItemDto;
@@ -45,12 +45,12 @@ export const SeasonDropdown: React.FC<Props> = ({
            title: "Name",
            index: "IndexNumber",
          },
-    [item]
+    [item],
  );

  const seasonIndex = useMemo(
    () => state[(item[keys.id] as string) ?? ""],
-    [state]
+    [state],
  );

  useEffect(() => {
@@ -60,7 +60,7 @@ export const SeasonDropdown: React.FC<Props> = ({
      if (initialSeasonIndex !== undefined) {
        // Use the provided initialSeasonIndex if it exists in the seasons
        const seasonExists = seasons.some(
-          (season: any) => season[keys.index] === initialSeasonIndex
+          (season: any) => season[keys.index] === initialSeasonIndex,
        );
        if (seasonExists) {
          initialIndex = initialSeasonIndex;
@@ -77,7 +77,7 @@ export const SeasonDropdown: React.FC<Props> = ({

      if (initialIndex !== undefined) {
        const initialSeason = seasons.find(
-          (season: any) => season[keys.index] === initialIndex
+          (season: any) => season[keys.index] === initialIndex,
        );

        if (initialSeason) onSelect(initialSeason!);
@@ -92,8 +92,8 @@ export const SeasonDropdown: React.FC<Props> = ({
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
-        <View className="flex flex-row">
-          <TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+        <View className='flex flex-row'>
+          <TouchableOpacity className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
            <Text>
              {t("item_card.season")} {seasonIndex}
            </Text>
@@ -102,8 +102,8 @@ export const SeasonDropdown: React.FC<Props> = ({
      </DropdownMenu.Trigger>
      <DropdownMenu.Content
        loop={true}
-        side="bottom"
-        align="start"
+        side='bottom'
+        align='start'
        alignOffset={0}
        avoidCollisions={true}
        collisionPadding={8}
--- a/components/series/SeasonEpisodesCarousel.tsx
+++ b/components/series/SeasonEpisodesCarousel.tsx
@@ -1,17 +1,17 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import {
-  HorizontalScroll,
-  HorizontalScrollRef,
-} from "../common/HorrizontalScroll";
+import { TouchableOpacity, View, type ViewProps } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
+import {
+  HorizontalScroll,
+  type HorizontalScrollRef,
+} from "../common/HorrizontalScroll";

 interface Props extends ViewProps {
  item?: BaseItemDto | null;
@@ -56,7 +56,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
          headers: {
            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
          },
-        }
+        },
      );

      return response.data.Items as BaseItemDto[];
@@ -74,7 +74,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
    }

    const previousId = episodes?.find(
-      (ep) => ep.IndexNumber === item.IndexNumber! - 1
+      (ep) => ep.IndexNumber === item.IndexNumber! - 1,
    )?.Id;
    if (previousId) {
      queryClient.prefetchQuery({
@@ -90,7 +90,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
    }

    const nextId = episodes?.find(
-      (ep) => ep.IndexNumber === item.IndexNumber! + 1
+      (ep) => ep.IndexNumber === item.IndexNumber! + 1,
    )?.Id;
    if (nextId) {
      queryClient.prefetchQuery({
--- a/components/series/SeasonPicker.tsx
+++ b/components/series/SeasonPicker.tsx
@@ -1,24 +1,24 @@
+import {
+  SeasonDropdown,
+  type SeasonIndexState,
+} from "@/components/series/SeasonDropdown";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { runtimeTicksToSeconds } from "@/utils/time";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { DownloadItems, DownloadSingleItem } from "../DownloadItem";
 import { Loader } from "../Loader";
-import { Text } from "../common/Text";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import {
-  SeasonDropdown,
-  SeasonIndexState,
-} from "@/components/series/SeasonDropdown";
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { PlayedStatus } from "../PlayedStatus";
-import { useTranslation } from "react-i18next";
+import { Text } from "../common/Text";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";

 type Props = {
  item: BaseItemDto;
@@ -35,7 +35,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {

  const seasonIndex = useMemo(
    () => seasonIndexState[item.Id ?? ""],
-    [item, seasonIndexState]
+    [item, seasonIndexState],
  );

  const { data: seasons } = useQuery({
@@ -54,7 +54,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
          headers: {
            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
          },
-        }
+        },
      );

      return response.data.Items;
@@ -66,7 +66,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
  const selectedSeasonId: string | null = useMemo(() => {
    const season: BaseItemDto = seasons?.find(
      (s: BaseItemDto) =>
-        s.IndexNumber === seasonIndex || s.Name === seasonIndex
+        s.IndexNumber === seasonIndex || s.Name === seasonIndex,
    );

    if (!season?.Id) return null;
@@ -92,7 +92,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
      if (res.data.TotalRecordCount === 0)
        console.warn(
          "No episodes found for season with ID ~",
-          selectedSeasonId
+          selectedSeasonId,
        );

      return res.data.Items;
@@ -102,7 +102,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {

  const queryClient = useQueryClient();
  useEffect(() => {
-    for (let e of episodes || []) {
+    for (const e of episodes || []) {
      queryClient.prefetchQuery({
        queryKey: ["item", e.Id],
        queryFn: async () => {
@@ -133,7 +133,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
        minHeight: 144 * nrOfEpisodes,
      }}
    >
-      <View className="flex flex-row justify-start items-center px-4">
+      <View className='flex flex-row justify-start items-center px-4'>
        <SeasonDropdown
          item={item}
          seasons={seasons}
@@ -147,29 +147,29 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
          }}
        />
        {episodes?.length || 0 > 0 ? (
-          <View className="flex flex-row items-center space-x-2">
+          <View className='flex flex-row items-center space-x-2'>
            <DownloadItems
              title={t("item_card.download.download_season")}
-              className="ml-2"
+              className='ml-2'
              items={episodes || []}
              MissingDownloadIconComponent={() => (
-                <Ionicons name="download" size={20} color="white" />
+                <Ionicons name='download' size={20} color='white' />
              )}
              DownloadedIconComponent={() => (
-                <Ionicons name="download" size={20} color="#9333ea" />
+                <Ionicons name='download' size={20} color='#9333ea' />
              )}
            />
            <PlayedStatus items={episodes || []} />
          </View>
        ) : null}
      </View>
-      <View className="px-4 flex flex-col mt-4">
+      <View className='px-4 flex flex-col mt-4'>
        {isFetching ? (
          <View
            style={{
              minHeight: 144 * nrOfEpisodes,
            }}
-            className="flex flex-col items-center justify-center"
+            className='flex flex-col items-center justify-center'
          >
            <Loader />
          </View>
@@ -178,35 +178,35 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
            <TouchableItemRouter
              item={e}
              key={e.Id}
-              className="flex flex-col mb-4"
+              className='flex flex-col mb-4'
            >
-              <View className="flex flex-row items-start mb-2">
-                <View className="mr-2">
+              <View className='flex flex-row items-start mb-2'>
+                <View className='mr-2'>
                  <ContinueWatchingPoster
-                    size="small"
+                    size='small'
                    item={e}
                    useEpisodePoster
                  />
                </View>
-                <View className="shrink">
-                  <Text numberOfLines={2} className="">
+                <View className='shrink'>
+                  <Text numberOfLines={2} className=''>
                    {e.Name}
                  </Text>
-                  <Text numberOfLines={1} className="text-xs text-neutral-500">
+                  <Text numberOfLines={1} className='text-xs text-neutral-500'>
                    {`S${e.ParentIndexNumber?.toString()}:E${e.IndexNumber?.toString()}`}
                  </Text>
-                  <Text className="text-xs text-neutral-500">
+                  <Text className='text-xs text-neutral-500'>
                    {runtimeTicksToSeconds(e.RunTimeTicks)}
                  </Text>
                </View>
-                <View className="self-start ml-auto -mt-0.5">
+                <View className='self-start ml-auto -mt-0.5'>
                  <DownloadSingleItem item={e} />
                </View>
              </View>

              <Text
                numberOfLines={3}
-                className="text-xs text-neutral-500 shrink"
+                className='text-xs text-neutral-500 shrink'
              >
                {e.Overview}
              </Text>
@@ -214,8 +214,8 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
          ))
        )}
        {(episodes?.length || 0) === 0 ? (
-          <View className="flex flex-col">
-            <Text className="text-neutral-500">
+          <View className='flex flex-col'>
+            <Text className='text-neutral-500'>
              {t("item_card.no_episodes_for_this_season")}
            </Text>
          </View>
--- a/components/series/SeriesActions.tsx
+++ b/components/series/SeriesActions.tsx
@@ -1,14 +1,14 @@
-import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
-import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useCallback, useMemo } from "react";
 import {
  Alert,
  Linking,
  TouchableOpacity,
  View,
-  ViewProps,
+  type ViewProps,
 } from "react-native";

 interface Props extends ViewProps {
@@ -42,10 +42,10 @@ export const ItemActions = ({ item, ...props }: Props) => {
  }, [trailerLink]);

  return (
-    <View className="" {...props}>
+    <View className='' {...props}>
      {trailerLink && (
        <TouchableOpacity onPress={openTrailer}>
-          <Ionicons name="film-outline" size={24} color="white" />
+          <Ionicons name='film-outline' size={24} color='white' />
        </TouchableOpacity>
      )}
    </View>
--- a/components/series/SeriesHeader.tsx
+++ b/components/series/SeriesHeader.tsx
@@ -1,8 +1,8 @@
-import { View } from "react-native";
-import { Text } from "../common/Text";
-import { Ratings } from "../Ratings";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo } from "react";
+import { View } from "react-native";
+import { Ratings } from "../Ratings";
+import { Text } from "../common/Text";
 import { ItemActions } from "./SeriesActions";

 interface Props {
@@ -51,14 +51,14 @@ export const SeriesHeader = ({ item }: Props) => {
  }, [startYear, endYear]);

  return (
-    <View className="px-4 py-4">
-      <Text className="text-3xl font-bold">{item?.Name}</Text>
-      <Text className="">{yearString}</Text>
-      <View className="flex flex-row items-center justify-between">
-        <Ratings item={item} className="mb-2" />
+    <View className='px-4 py-4'>
+      <Text className='text-3xl font-bold'>{item?.Name}</Text>
+      <Text className=''>{yearString}</Text>
+      <View className='flex flex-row items-center justify-between'>
+        <Ratings item={item} className='mb-2' />
        <ItemActions item={item} />
      </View>
-      <Text className="">{item?.Overview}</Text>
+      <Text className=''>{item?.Overview}</Text>
    </View>
  );
 };