Enhance responsive design and update dependencies

- Added expo-screen-orientation package to manage screen orientation.
- Updated react-native-gesture-handler to version 2.27.1 for improved gesture handling.
- Implemented responsive design features across multiple screens using the new useResponsive hook.
- Refactored DetailScreen, HomeScreen, SearchScreen, and PlayScreen to adapt layouts based on screen size.
- Introduced PlayerControlsMobile for optimized playback controls on mobile devices.
- Adjusted button styles in StyledButton for better responsiveness.

components/PlayerControls.mobile.tsx

@@ -0,0 +1,179 @@
+import React from "react";
+import { View, Text, StyleSheet, Pressable } from "react-native";
+import { Pause, Play, SkipForward, List, Tv } from "lucide-react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { MediaButton } from "@/components/MediaButton";
+import usePlayerStore from "@/stores/playerStore";
+
+interface PlayerControlsProps {
+  showControls: boolean;
+}
+
+export const PlayerControlsMobile: React.FC<PlayerControlsProps> = ({ showControls }) => {
+  const {
+    detail,
+    currentEpisodeIndex,
+    currentSourceIndex,
+    status,
+    isSeeking,
+    seekPosition,
+    progressPosition,
+    togglePlayPause,
+    playEpisode,
+    setShowEpisodeModal,
+    setShowSourceModal,
+  } = usePlayerStore();
+
+  const videoTitle = detail?.videoInfo?.title || "";
+  const currentEpisode = detail?.episodes[currentEpisodeIndex];
+  const currentEpisodeTitle = currentEpisode?.title;
+  const hasNextEpisode = currentEpisodeIndex < (detail?.episodes.length || 0) - 1;
+
+  const formatTime = (milliseconds: number) => {
+    if (!milliseconds) return "00:00";
+    const totalSeconds = Math.floor(milliseconds / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  };
+
+  const onPlayNextEpisode = () => {
+    if (hasNextEpisode) {
+      playEpisode(currentEpisodeIndex + 1);
+    }
+  };
+
+  return (
+    <View style={styles.controlsOverlay}>
+      <View style={styles.topControls}>
+        <Text style={styles.controlTitle} numberOfLines={2}>
+          {videoTitle} {currentEpisodeTitle ? `- ${currentEpisodeTitle}` : ""}
+        </Text>
+      </View>
+
+      <View style={styles.middleControls}>
+        {/* This area can be used for gesture-based seeking indicators in the future */}
+      </View>
+
+      <View style={styles.bottomControlsContainer}>
+        <View style={styles.timeAndActions}>
+          <ThemedText style={styles.timeText}>
+            {status?.isLoaded
+              ? `${formatTime(status.positionMillis)} / ${formatTime(status.durationMillis || 0)}`
+              : "00:00 / 00:00"}
+          </ThemedText>
+          <View style={styles.actions}>
+            <MediaButton onPress={() => setShowEpisodeModal(true)}>
+              <List color="white" size={22} />
+            </MediaButton>
+            <MediaButton onPress={() => setShowSourceModal(true)}>
+              <Tv color="white" size={22} />
+            </MediaButton>
+          </View>
+        </View>
+
+        <View style={styles.progressBarContainer}>
+          <View style={styles.progressBarBackground} />
+          <View
+            style={[
+              styles.progressBarFilled,
+              {
+                width: `${(isSeeking ? seekPosition : progressPosition) * 100}%`,
+              },
+            ]}
+          />
+          <Pressable style={styles.progressBarTouchable} />
+        </View>
+
+        <View style={styles.mainControls}>
+          <View style={styles.placeholder} />
+          <MediaButton onPress={togglePlayPause}>
+            {status?.isLoaded && status.isPlaying ? (
+              <Pause color="white" size={36} />
+            ) : (
+              <Play color="white" size={36} />
+            )}
+          </MediaButton>
+          <MediaButton onPress={onPlayNextEpisode} disabled={!hasNextEpisode}>
+            <SkipForward color={hasNextEpisode ? "white" : "#666"} size={28} />
+          </MediaButton>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  controlsOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    justifyContent: "space-between",
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+  },
+  topControls: {
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  controlTitle: {
+    color: "white",
+    fontSize: 14,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  middleControls: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  bottomControlsContainer: {
+    width: "100%",
+  },
+  timeAndActions: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 5,
+  },
+  timeText: {
+    color: "white",
+    fontSize: 12,
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 15,
+  },
+  progressBarContainer: {
+    width: "100%",
+    height: 4,
+    position: "relative",
+    marginVertical: 10,
+  },
+  progressBarBackground: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+    borderRadius: 2,
+  },
+  progressBarFilled: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#ff0000",
+    borderRadius: 2,
+  },
+  progressBarTouchable: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: 20,
+    top: -8,
+    zIndex: 10,
+  },
+  mainControls: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    marginTop: 5,
+  },
+  placeholder: {
+    width: 28, // to balance the skip forward button
+  },
+});

components/StyledButton.tsx

@@ -3,6 +3,7 @@ import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps,
 import { ThemedText } from "./ThemedText";
 import { Colors } from "@/constants/Colors";
 import { useButtonAnimation } from "@/hooks/useButtonAnimation";
+import { useResponsive } from "@/hooks/useResponsive";
 
 interface StyledButtonProps extends PressableProps {
   children?: React.ReactNode;
@@ -26,6 +27,7 @@ export const StyledButton: React.FC<StyledButtonProps> = ({
   const colors = Colors[colorScheme];
   const [isFocused, setIsFocused] = React.useState(false);
   const animationStyle = useButtonAnimation(isFocused);
+  const { isMobile } = useResponsive();
 
   const variantStyles = {
     default: StyleSheet.create({
@@ -81,8 +83,8 @@ export const StyledButton: React.FC<StyledButtonProps> = ({
 
   const styles = StyleSheet.create({
     button: {
-      paddingHorizontal: 16,
-      paddingVertical: 10,
+      paddingHorizontal: isMobile ? 12 : 16,
+      paddingVertical: isMobile ? 8 : 10,
       borderRadius: 8,
       borderWidth: 2,
       borderColor: "transparent",
@@ -103,7 +105,7 @@ export const StyledButton: React.FC<StyledButtonProps> = ({
       backgroundColor: colors.tint,
     },
     text: {
-      fontSize: 16,
+      fontSize: isMobile ? 14 : 16,
       fontWeight: "500",
       color: colors.text,
     },

components/ThemedView.tsx

@@ -1,22 +1,14 @@
-import {View, type ViewProps} from 'react-native';
+import { View, type ViewProps } from "react-native";
 
-import {useThemeColor} from '@/hooks/useThemeColor';
+import { useThemeColor } from "@/hooks/useThemeColor";
 
 export type ThemedViewProps = ViewProps & {
   lightColor?: string;
   darkColor?: string;
 };
 
-export function ThemedView({
-  style,
-  lightColor,
-  darkColor,
-  ...otherProps
-}: ThemedViewProps) {
-  const backgroundColor = useThemeColor(
-    {light: lightColor, dark: darkColor},
-    'background',
-  );
+export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "background");
 
-  return <View style={[{backgroundColor}, style]} {...otherProps} />;
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
 }