feat(mobile): enhance player UI with floating tab bar and control improvements

- Added PlayerTabBar component to display active track in the tab bar
- Replaced FloatingBar with PlayerTabBar for consistent player controls
- Improved play/pause button with animated transitions
- Updated progress bar text styling with tabular numbers
- Refined DismissIndicator styling in player screen

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/src/components/ui/carousel/Carousel.tsx renamed to apps/mobile/src/components/ui/carousel/MediaCarousel.tsx

@@ -17,6 +17,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import { SetBottomTabBarHeightContext } from "@/src/components/ui/tabbar/contexts/BottomTabBarHeightContext"
 import { quickSpringPreset, softSpringPreset } from "@/src/constants/spring"
+import { PlayerTabBar } from "@/src/modules/player/PlayerTabBar"
 import { accentColor, useColor } from "@/src/theme/colors"
 
 import { ThemedBlurView } from "../../common/ThemedBlurView"
@@ -42,7 +43,7 @@ export const Tabbar: FC<BottomTabBarProps> = (props) => {
   return (
     <Animated.View
       accessibilityRole="tablist"
-      className="absolute inset-x-0 bottom-0 z-10 flex-row py-[7]"
+      className="absolute inset-x-0 bottom-0 z-10 py-[7]"
       style={{
         paddingBottom: insets.bottom,
         transform: [{ translateY }],
@@ -52,6 +53,7 @@ export const Tabbar: FC<BottomTabBarProps> = (props) => {
       }}
     >
       <TabBarBackground />
+      <PlayerTabBar />
       <Grid columns={routes.length} gap={10}>
         {routes.map((route, index) => {
           const focused = index === state.index

apps/mobile/src/components/ui/tabbar/Tabbar.tsx

@@ -11,7 +11,7 @@ import {
   EntryContentWebView,
   setWebViewEntry,
 } from "@/src/components/native/webview/EntryContentWebView"
-import { MediaCarousel } from "@/src/components/ui/carousel/Carousel"
+import { MediaCarousel } from "@/src/components/ui/carousel/MediaCarousel"
 import { RelativeDateTime } from "@/src/components/ui/datetime/RelativeDateTime"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 import { PreviewImage } from "@/src/components/ui/image/PreviewImage"

apps/mobile/src/modules/entry-list/templates/EntryGridItem.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@follow/utils"
+import { Image } from "expo-image"
+import { router, usePathname } from "expo-router"
+import { Pressable, Text, View } from "react-native"
+import Animated, { SlideInDown, SlideOutDown } from "react-native-reanimated"
+
+import { useActiveTrack } from "@/src/lib/player"
+
+import { PlayPauseButton, SeekButton } from "./control"
+
+const allowedRoutes = new Set(["/", "/subscriptions", "/player"])
+
+export function PlayerTabBar({ className }: { className?: string }) {
+  const activeTrack = useActiveTrack()
+  const pathname = usePathname()
+  if (!activeTrack || !allowedRoutes.has(pathname)) {
+    return null
+  }
+
+  return (
+    <View className="mb-2 overflow-hidden">
+      <Animated.View
+        entering={SlideInDown}
+        exiting={SlideOutDown}
+        className={cn("border-opaque-separator/70 border-b px-2 shadow-md", className)}
+      >
+        <Pressable
+          onPress={() => {
+            router.push("/player")
+          }}
+        >
+          <View className="flex flex-row items-center gap-4 overflow-hidden rounded-2xl p-2">
+            <Image source={activeTrack.artwork} className="size-12 rounded-lg" />
+            <View className="flex-1 overflow-hidden">
+              <Text className="text-label text-lg font-semibold" numberOfLines={1}>
+                {activeTrack.title}
+              </Text>
+            </View>
+            <View className="mr-2 flex flex-row gap-4">
+              <PlayPauseButton />
+              <SeekButton />
+            </View>
+          </View>
+        </Pressable>
+      </Animated.View>
+    </View>
+  )
+}

apps/mobile/src/modules/player/FloatingBar.tsx

@@ -1,10 +1,11 @@
 import { cn } from "@follow/utils"
 import { router } from "expo-router"
-import { Text, TouchableOpacity, View } from "react-native"
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native"
 import { Slider } from "react-native-awesome-slider"
-import { useDerivedValue, useSharedValue } from "react-native-reanimated"
+import { FadeOut, useDerivedValue, useSharedValue, ZoomIn } from "react-native-reanimated"
 import * as DropdownMenu from "zeego/dropdown-menu"
 
+import { ReAnimatedPressable } from "@/src/components/common/AnimatedComponents"
 import { Back2CuteReIcon } from "@/src/icons/back_2_cute_re"
 import { Forward2CuteReIcon } from "@/src/icons/forward_2_cute_re"
 import { PauseCuteFiIcon } from "@/src/icons/pause_cute_fi"
@@ -31,7 +32,10 @@ export function PlayPauseButton({ size = 24, className, color }: ControlButtonPr
   const label = useColor("label")
   return (
     <View className={className}>
-      <TouchableOpacity
+      <ReAnimatedPressable
+        entering={ZoomIn.springify().damping(10).stiffness(200).mass(1)}
+        exiting={FadeOut}
+        key={playing ? "pause" : "play"}
         onPress={() => {
           playing ? player.pause() : player.play()
         }}
@@ -41,7 +45,7 @@ export function PlayPauseButton({ size = 24, className, color }: ControlButtonPr
         ) : (
           <PlayCuteFiIcon color={color ?? label} width={size} height={size} />
         )}
-      </TouchableOpacity>
+      </ReAnimatedPressable>
     </View>
   )
 }
@@ -191,21 +195,24 @@ export function ProgressBar() {
 
       <View className="mt-3 flex-row justify-between">
         <Text
+          style={styles.text}
           className={cn(
-            "font-mono text-xs font-medium tracking-wider opacity-75",
+            "font-mono text-xs font-medium opacity-75",
             isBackgroundLight ? "text-black" : "text-white",
           )}
         >
           {trackElapsedTime}
         </Text>
 
         <Text
+          style={styles.text}
           className={cn(
-            "font-mono text-xs font-medium tracking-wider opacity-75",
+            "font-mono text-xs font-medium opacity-75",
             isBackgroundLight ? "text-black" : "text-white",
           )}
         >
-          {"-"} {trackRemainingTime}
+          {"-"}
+          {trackRemainingTime}
         </Text>
       </View>
     </View>
@@ -250,3 +257,9 @@ export function VolumeBar() {
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  text: {
+    fontVariant: ["tabular-nums"],
+  },
+})

apps/mobile/src/modules/player/PlayerTabBar.tsx

@@ -102,7 +102,7 @@ export default function PlaterScreen() {
 function DismissIndicator() {
   return (
     <View className="absolute inset-x-0 flex items-center justify-center top-safe-offset-2">
-      <View className="h-[5] w-[40] rounded-full bg-white/45" />
+      <View className="bg-tertiary-label h-[5] w-[40] rounded-full" />
     </View>
   )
 }