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.

hooks/useResponsive.ts

@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+import { Dimensions, Platform } from "react-native";
+
+const isMobile = Platform.OS === "android" || Platform.OS === "ios";
+
+interface ResponsiveInfo {
+  isMobile: boolean;
+  screenWidth: number;
+  numColumns: (itemWidth: number, gap?: number) => number;
+}
+
+export function useResponsive(): ResponsiveInfo {
+  const [screenWidth, setScreenWidth] = useState(Dimensions.get("window").width);
+
+  useEffect(() => {
+    const onChange = (result: { window: { width: number } }) => {
+      setScreenWidth(result.window.width);
+    };
+
+    const subscription = Dimensions.addEventListener("change", onChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  const calculateNumColumns = (itemWidth: number, gap: number = 16) => {
+    if (!isMobile) {
+      // For TV, you might want a fixed number or a different logic
+      return 5;
+    }
+    const containerPadding = 16; // Horizontal padding of the container
+    const availableWidth = screenWidth - containerPadding * 2;
+    const num = Math.floor(availableWidth / (itemWidth + gap));
+    return Math.max(1, num); // Ensure at least one column
+  };
+
+  return {
+    isMobile,
+    screenWidth,
+    numColumns: calculateNumColumns,
+  };
+}