flash text while its in progress

apps/expo/src/app/(tabs)/downloads.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { Alert, Platform } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
 import { useFocusEffect, useRouter } from "expo-router";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { isDevelopmentProvisioningProfile } from "modules/check-ios-certificate";
-import { useTheme, YStack } from "tamagui";
+import { ScrollView, useTheme, YStack } from "tamagui";
 
 import type { ScrapeMedia } from "@movie-web/provider-utils";
 
@@ -114,7 +113,11 @@ const DownloadsScreen: React.FC = () => {
           test download (hls)
         </MWButton>
       </YStack>
-      <ScrollView>
+      <ScrollView
+        contentContainerStyle={{
+          gap: "$4",
+        }}
+      >
         {downloads.map((item) => (
           <DownloadItem
             key={item.id}

apps/expo/src/components/DownloadItem.tsx

@@ -8,6 +8,7 @@ import { Image, Text, View, XStack, YStack } from "tamagui";
 import type { Download } from "~/contexts/DownloadManagerContext";
 import { useDownloadManager } from "~/contexts/DownloadManagerContext";
 import { MWProgress } from "./ui/Progress";
+import { FlashingText } from "./ui/Text";
 
 export interface DownloadItemProps {
   item: Download;
@@ -62,6 +63,12 @@ export function DownloadItem(props: DownloadItemProps) {
     }
   };
 
+  const isInProgress = !(
+    props.item.status === "finished" ||
+    props.item.status === "error" ||
+    props.item.status === "cancelled"
+  );
+
   return (
     <ContextMenu
       actions={contextMenuActions}
@@ -112,9 +119,15 @@ export function DownloadItem(props: DownloadItemProps) {
                   : `${percentage.toFixed()}% - ${formattedDownloaded} of ${formattedFileSize}`}
               </Text>
               <View style={{ flexDirection: "row", alignItems: "center" }}>
-                <Text fontSize="$2" color="gray">
+                <FlashingText
+                  isInProgress={isInProgress}
+                  style={{
+                    fontSize: 12,
+                    color: "gray",
+                  }}
+                >
                   {statusToTextMap[props.item.status]}
-                </Text>
+                </FlashingText>
               </View>
             </XStack>
           </YStack>

apps/expo/src/components/player/Header.tsx

@@ -23,7 +23,7 @@ export const Header = () => {
         height={64}
         paddingHorizontal="$8"
       >
-        <View width={144}>
+        <View width={150}>
           <Controls>
             <BackButton />
           </Controls>
@@ -39,7 +39,7 @@ export const Header = () => {
               : ""}
           </Text>
         )}
-        <View alignItems="center" justifyContent="center" width={130}>
+        <View alignItems="center" justifyContent="center" width={150}>
           <BrandPill />
         </View>
       </View>

apps/expo/src/components/ui/Text.tsx

@@ -0,0 +1,36 @@
+import type { TextProps } from "react-native";
+import type { AnimatedProps } from "react-native-reanimated";
+import { useEffect } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+
+export const FlashingText = (
+  props: AnimatedProps<TextProps> & {
+    isInProgress: boolean;
+  },
+) => {
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (props.isInProgress) {
+      opacity.value = withRepeat(
+        withTiming(1, { duration: 1000, easing: Easing.ease }),
+        -1,
+        true,
+      );
+    } else {
+      opacity.value = 1;
+    }
+  }, [props.isInProgress, opacity]);
+
+  const style = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return <Animated.Text {...props} style={[props.style, style]} />;
+};