feat: Mark entire seasons of a show as played (#445)

components/ItemContent.tsx

@@ -90,7 +90,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
               {item.Type !== "Program" && (
                 <View className="flex flex-row items-center space-x-2">
                   <DownloadSingleItem item={item} size="large" />
-                  <PlayedStatus item={item} />
+                  <PlayedStatus items={[item]} size="large" />
                   <AddToFavorites item={item} type="item" />
                 </View>
               )}

components/PlayedStatus.tsx

@@ -6,16 +6,19 @@ import { View, ViewProps } from "react-native";
 import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
-  item: BaseItemDto;
+  items: BaseItemDto[];
+  size?: "default" | "large";
 }
 
-export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
+export const PlayedStatus: React.FC<Props> = ({ items, ...props }) => {
   const queryClient = useQueryClient();
 
   const invalidateQueries = () => {
-    queryClient.invalidateQueries({
-      queryKey: ["item", item.Id],
-    });
+    items.forEach((item) => {
+      queryClient.invalidateQueries({
+        queryKey: ["item", item.Id],
+      });
+    })
     queryClient.invalidateQueries({
       queryKey: ["resumeItems"],
     });
@@ -39,15 +42,20 @@ export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
     });
   };
 
-  const markAsPlayedStatus = useMarkAsPlayed(item);
+  const allPlayed = items.every((item) => item.UserData?.Played);
+
+  const markAsPlayedStatus = useMarkAsPlayed(items);
 
   return (
     <View {...props}>
       <RoundButton
-        fillColor={item.UserData?.Played ? "primary" : undefined}
-        icon={item.UserData?.Played ? "checkmark" : "checkmark"}
-        onPress={() => markAsPlayedStatus(!item.UserData?.Played)}
-        size="large"
+        fillColor={allPlayed ? "primary" : undefined}
+        icon={allPlayed ? "checkmark" : "checkmark"}
+        onPress={async () => {    
+          console.log(allPlayed);
+          await markAsPlayedStatus(!allPlayed)
+        }}
+        size={props.size}
       />
     </View>
   );

components/common/TouchableItemRouter.tsx

@@ -57,7 +57,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   const router = useRouter();
   const segments = useSegments();
   const { showActionSheetWithOptions } = useActionSheet();
-  const markAsPlayedStatus = useMarkAsPlayed(item);
+  const markAsPlayedStatus = useMarkAsPlayed([item]);
 
   const from = segments[2];
 

components/series/SeasonPicker.tsx

@@ -17,7 +17,9 @@ import {
   SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { PlayedStatus } from "../PlayedStatus";
 import { useTranslation } from "react-i18next";
+
 type Props = {
   item: BaseItemDto;
   initialSeasonIndex?: number;
@@ -145,17 +147,20 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
           }}
         />
         {episodes?.length || 0 > 0 ? (
-          <DownloadItems
-            title={t("item_card.download.download_season")}
-            className="ml-2"
-            items={episodes || []}
-            MissingDownloadIconComponent={() => (
-              <Ionicons name="download" size={20} color="white" />
-            )}
-            DownloadedIconComponent={() => (
-              <Ionicons name="download" size={20} color="#9333ea" />
-            )}
-          />
+          <View className="flex flex-row items-center space-x-2">
+            <DownloadItems
+              title={t("item_card.download.download_season")}
+              className="ml-2"
+              items={episodes || []}
+              MissingDownloadIconComponent={() => (
+                <Ionicons name="download" size={20} color="white" />
+              )}
+              DownloadedIconComponent={() => (
+                <Ionicons name="download" size={20} color="#9333ea" />
+              )}
+            />
+            <PlayedStatus items={episodes || []} />
+          </View>
         ) : null}
       </View>
       <View className="px-4 flex flex-col mt-4">