feat: show playback % in play button

components/PlayButton.tsx

@@ -2,13 +2,18 @@ import { usePlayback } from "@/providers/PlaybackProvider";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  PlaybackInfoResponse,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { View } from "react-native";
 import CastContext, {
   PlayServicesState,
   useRemoteMediaClient,
 } from "react-native-google-cast";
 import { Button } from "./Button";
+import { Text } from "./common/Text";
+import { useMemo } from "react";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item?: BaseItemDto | null;
@@ -68,18 +73,44 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
     );
   };
 
+  const playbackPercent = useMemo(() => {
+    if (!item || !item.RunTimeTicks) return 0;
+    const userData = item.UserData;
+    if (!userData) return 0;
+    const PlaybackPositionTicks = userData.PlaybackPositionTicks;
+    if (!PlaybackPositionTicks) return 0;
+    return (PlaybackPositionTicks / item.RunTimeTicks) * 100;
+  }, [item]);
+
   return (
-    <Button
-      onPress={onPress}
-      iconRight={
+    <View className="relative">
+      <View
+        style={{
+          width:
+            playbackPercent === 0
+              ? "100%"
+              : `${Math.max(playbackPercent, 15)}%`,
+          height: "100%",
+        }}
+        className="absolute w-full h-full top-0 left-0 rounded-xl bg-purple-600 z-10"
+      ></View>
+      <View
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+        className="absolute w-full h-full top-0 left-0 rounded-xl bg-purple-500 opacity-40"
+      ></View>
+      <View className="absolute top-0 left-0 w-full h-full flex flex-row items-center justify-center bg-transparent rounded-xl z-10">
         <View className="flex flex-row items-center space-x-2">
+          <Text className="font-bold">
+            {runtimeTicksToMinutes(item?.RunTimeTicks)}
+          </Text>
           <Ionicons name="play-circle" size={24} color="white" />
           {client && <Feather name="cast" size={22} color="white" />}
         </View>
-      }
-      {...props}
-    >
-      {runtimeTicksToMinutes(item?.RunTimeTicks)}
-    </Button>
+      </View>
+      <Button onPress={onPress} {...props} color="transparent"></Button>
+    </View>
   );
 };