fix: move cast button + ask user which device to play on

components/PlayButton.tsx

@@ -2,10 +2,12 @@ import { Button } from "./Button";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { runtimeTicksToMinutes } from "@/utils/time";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import { View } from "react-native";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
-  onPress: () => void;
+  onPress: (type?: "cast" | "device") => void;
   chromecastReady: boolean;
 }
 
@@ -15,15 +17,45 @@ export const PlayButton: React.FC<Props> = ({
   chromecastReady,
   ...props
 }) => {
+  const { showActionSheetWithOptions } = useActionSheet();
+
+  const _onPress = () => {
+    if (!chromecastReady) {
+      onPress("device");
+      return;
+    }
+
+    const options = ["Chromecast", "Device", "Cancel"];
+    const cancelButtonIndex = 2;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      (selectedIndex: number | undefined) => {
+        switch (selectedIndex) {
+          case 0:
+            onPress("cast");
+            break;
+          case 1:
+            onPress("device");
+            break;
+          case cancelButtonIndex:
+            console.log("calcel");
+        }
+      },
+    );
+  };
+
   return (
     <Button
-      onPress={onPress}
+      onPress={_onPress}
       iconRight={
-        chromecastReady ? (
-          <Feather name="cast" size={20} color="white" />
-        ) : (
+        <View className="flex flex-row items-center space-x-2">
           <Ionicons name="play-circle" size={24} color="white" />
-        )
+          {chromecastReady && <Feather name="cast" size={22} color="white" />}
+        </View>
       }
       {...props}
     >