feat(tv): add long-press mark as watched action using alert dialog

components/tv/TVFocusablePoster.tsx

@@ -10,6 +10,7 @@ import {
 export interface TVFocusablePosterProps {
   children: React.ReactNode;
   onPress: () => void;
+  onLongPress?: () => void;
   hasTVPreferredFocus?: boolean;
   glowColor?: "white" | "purple";
   scaleAmount?: number;
@@ -26,6 +27,7 @@ export interface TVFocusablePosterProps {
 export const TVFocusablePoster: React.FC<TVFocusablePosterProps> = ({
   children,
   onPress,
+  onLongPress,
   hasTVPreferredFocus = false,
   glowColor = "white",
   scaleAmount = 1.05,
@@ -53,6 +55,7 @@ export const TVFocusablePoster: React.FC<TVFocusablePosterProps> = ({
     <Pressable
       ref={refSetter}
       onPress={onPress}
+      onLongPress={onLongPress}
       onFocus={() => {
         setFocused(true);
         animateTo(scaleAmount);

components/tv/TVPlayedButton.tsx

@@ -0,0 +1,33 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import React from "react";
+import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
+import { TVButton } from "./TVButton";
+
+export interface TVPlayedButtonProps {
+  item: BaseItemDto;
+  disabled?: boolean;
+}
+
+export const TVPlayedButton: React.FC<TVPlayedButtonProps> = ({
+  item,
+  disabled,
+}) => {
+  const isPlayed = item.UserData?.Played ?? false;
+  const toggle = useMarkAsPlayed([item]);
+
+  return (
+    <TVButton
+      onPress={() => toggle(!isPlayed)}
+      variant='glass'
+      square
+      disabled={disabled}
+    >
+      <Ionicons
+        name={isPlayed ? "checkmark-circle" : "checkmark-circle-outline"}
+        size={28}
+        color='#FFFFFF'
+      />
+    </TVButton>
+  );
+};

components/tv/index.ts

@@ -43,6 +43,8 @@ export type { TVOptionCardProps } from "./TVOptionCard";
 export { TVOptionCard } from "./TVOptionCard";
 export type { TVOptionItem, TVOptionSelectorProps } from "./TVOptionSelector";
 export { TVOptionSelector } from "./TVOptionSelector";
+export type { TVPlayedButtonProps } from "./TVPlayedButton";
+export { TVPlayedButton } from "./TVPlayedButton";
 export type { TVProgressBarProps } from "./TVProgressBar";
 export { TVProgressBar } from "./TVProgressBar";
 export type { TVRefreshButtonProps } from "./TVRefreshButton";