Update

components/PlayerControls.tsx

@@ -0,0 +1,233 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Pressable,
+} from "react-native";
+import { useRouter } from "expo-router";
+import { AVPlaybackStatus } from "expo-av";
+import {
+  ArrowLeft,
+  Pause,
+  Play,
+  SkipForward,
+  List,
+  ChevronsRight,
+  ChevronsLeft,
+} from "lucide-react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { MediaButton } from "@/components/MediaButton";
+
+interface PlayerControlsProps {
+  videoTitle: string;
+  currentEpisodeTitle?: string;
+  status: AVPlaybackStatus | null;
+  isSeeking: boolean;
+  seekPosition: number;
+  progressPosition: number;
+  currentFocus: string | null;
+  hasNextEpisode: boolean;
+  onSeekStart: () => void;
+  onSeekMove: (event: { nativeEvent: { locationX: number } }) => void;
+  onSeekRelease: (event: { nativeEvent: { locationX: number } }) => void;
+  onSeek: (forward: boolean) => void;
+  onTogglePlayPause: () => void;
+  onPlayNextEpisode: () => void;
+  onShowEpisodes: () => void;
+  formatTime: (time: number) => string;
+}
+
+export const PlayerControls: React.FC<PlayerControlsProps> = ({
+  videoTitle,
+  currentEpisodeTitle,
+  status,
+  isSeeking,
+  seekPosition,
+  progressPosition,
+  currentFocus,
+  hasNextEpisode,
+  onSeekStart,
+  onSeekMove,
+  onSeekRelease,
+  onSeek,
+  onTogglePlayPause,
+  onPlayNextEpisode,
+  onShowEpisodes,
+  formatTime,
+}) => {
+  const router = useRouter();
+
+  return (
+    <View style={styles.controlsOverlay}>
+      <View style={styles.topControls}>
+        <TouchableOpacity
+          style={styles.controlButton}
+          onPress={() => router.back()}
+        >
+          <ArrowLeft color="white" size={24} />
+        </TouchableOpacity>
+
+        <Text style={styles.controlTitle}>
+          {videoTitle} {currentEpisodeTitle ? `- ${currentEpisodeTitle}` : ""}
+        </Text>
+      </View>
+
+      <View style={styles.bottomControlsContainer}>
+        <View style={styles.progressBarContainer}>
+          <View style={styles.progressBarBackground} />
+          <View
+            style={[
+              styles.progressBarFilled,
+              {
+                width: `${
+                  (isSeeking ? seekPosition : progressPosition) * 100
+                }%`,
+              },
+            ]}
+          />
+          <Pressable
+            style={styles.progressBarTouchable}
+            onPressIn={onSeekStart}
+            onTouchMove={onSeekMove}
+            onTouchEnd={onSeekRelease}
+          />
+        </View>
+
+        <ThemedText style={{ color: "white", marginTop: 5 }}>
+          {status?.isLoaded
+            ? `${formatTime(status.positionMillis)} / ${formatTime(
+                status.durationMillis || 0
+              )}`
+            : "00:00 / 00:00"}
+        </ThemedText>
+
+        <View style={styles.bottomControls}>
+          <MediaButton
+            onPress={() => onSeek(false)}
+            isFocused={currentFocus === "skipBack"}
+          >
+            <ChevronsLeft color="white" size={24} />
+          </MediaButton>
+
+          <MediaButton
+            onPress={onTogglePlayPause}
+            isFocused={currentFocus === "playPause"}
+          >
+            {status?.isLoaded && status.isPlaying ? (
+              <Pause color="white" size={24} />
+            ) : (
+              <Play color="white" size={24} />
+            )}
+          </MediaButton>
+
+          <MediaButton
+            onPress={onPlayNextEpisode}
+            isFocused={currentFocus === "nextEpisode"}
+            isDisabled={!hasNextEpisode}
+          >
+            <SkipForward color={hasNextEpisode ? "white" : "#666"} size={24} />
+          </MediaButton>
+
+          <MediaButton
+            onPress={() => onSeek(true)}
+            isFocused={currentFocus === "skipForward"}
+          >
+            <ChevronsRight color="white" size={24} />
+          </MediaButton>
+
+          <MediaButton
+            onPress={onShowEpisodes}
+            isFocused={currentFocus === "episodes"}
+          >
+            <List color="white" size={24} />
+          </MediaButton>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  controlsOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    justifyContent: "space-between",
+    padding: 20,
+  },
+  topControls: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  controlTitle: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+    flex: 1,
+    textAlign: "center",
+    marginHorizontal: 10,
+  },
+  bottomControlsContainer: {
+    width: "100%",
+    alignItems: "center",
+  },
+  bottomControls: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 10,
+    flexWrap: "wrap",
+    marginTop: 15,
+  },
+  progressBarContainer: {
+    width: "100%",
+    height: 8,
+    position: "relative",
+    marginTop: 10,
+  },
+  progressBarBackground: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: 8,
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+    borderRadius: 4,
+  },
+  progressBarFilled: {
+    position: "absolute",
+    left: 0,
+    height: 8,
+    backgroundColor: "#ff0000",
+    borderRadius: 4,
+  },
+  progressBarTouchable: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: 30,
+    top: -10,
+    zIndex: 10,
+  },
+  controlButton: {
+    padding: 10,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  topRightContainer: {
+    padding: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 44, // Match TouchableOpacity default size for alignment
+  },
+  resolutionText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+    backgroundColor: "rgba(0,0,0,0.5)",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+});