wip: working small + full with transition

components/CurrentlyPlayingBar.tsx

@@ -1,27 +1,39 @@
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { usePlayback } from "@/providers/PlaybackProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
+import { runtimeTicksToMinutes, runtimeTicksToSeconds } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
 import { BlurView } from "expo-blur";
 import { useRouter, useSegments } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Alert, Platform, TouchableOpacity, View } from "react-native";
+import {
+  Alert,
+  Dimensions,
+  Pressable,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import "react-native-gesture-handler";
 import Animated, {
+  interpolate,
+  interpolateColor,
   useAnimatedStyle,
   useSharedValue,
-  withDecay,
   withTiming,
 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Video from "react-native-video";
 import { Text } from "./common/Text";
 import { Loader } from "./Loader";
-import { Dimensions } from "react-native";
+
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+const PADDING = 8;
-import { Bubble, Slider } from "react-native-awesome-slider";
+const BAR_HEIGHT = 70;
-import { runtimeTicksToMinutes } from "@/utils/time";
+const CONTENT_HEIGHT = BAR_HEIGHT - PADDING * 2;
+const COLORS = ["#262626", "#000000"];
 
 export const CurrentlyPlayingBar: React.FC = () => {
   const segments = useSegments();
@@ -43,67 +55,147 @@ export const CurrentlyPlayingBar: React.FC = () => {
   const [api] = useAtom(apiAtom);
 
   const [size, setSize] = useState<"full" | "small">("small");
+  const animationProgress = useSharedValue(0);
+  const controlsOpacity = useSharedValue(1);
 
   const screenHeight = Dimensions.get("window").height;
   const screenWiidth = Dimensions.get("window").width;
 
+  const BOTTOM_HEIGHT = useMemo(() => insets.bottom + 48, [insets.bottom]);
   const from = useMemo(() => segments[2], [segments]);
 
-  const backgroundValues = useSharedValue({
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
-    bottom: 70,
+    const progress = animationProgress.value;
-    height: 80,
+    return {
-    padding: 0,
+      bottom: interpolate(progress, [0, 1], [BOTTOM_HEIGHT, 0]),
-    width: screenWiidth - 100,
+      width: interpolate(
-    left: 50,
+        progress,
-  });
+        [0, 1],
-
+        [screenWiidth - PADDING * 2 - insets.left - insets.right, screenWiidth]
-  const videoValues = useSharedValue({
+      ),
-    bottom: 90,
+      height: interpolate(progress, [0, 1], [BAR_HEIGHT, screenHeight]),
-    height: 70,
+      padding: interpolate(progress, [0, 1], [PADDING, 0]),
-    width: 125,
+      left: interpolate(progress, [0, 1], [insets.left + PADDING, 0]),
-    left: 16,
+    };
-  });
-
-  const buttonsValues = useSharedValue({
-    bottom: 90,
-    opacity: 1,
-    right: 16,
-  });
-
-  const textValues = useSharedValue({
-    height: 70,
-    bottom: 90,
-    left: 149,
-    width: 140,
   });
 
   const animatedTextStyle = useAnimatedStyle(() => {
+    const progress = animationProgress.value;
     return {
-      bottom: withTiming(textValues.value.bottom, { duration: 500 }),
+      bottom: interpolate(
-      left: withTiming(textValues.value.left, { duration: 500 }),
+        progress,
-      height: withTiming(textValues.value.height, { duration: 500 }),
+        [0, 1],
-      width: withTiming(textValues.value.width, { duration: 500 }),
+        [BOTTOM_HEIGHT, insets.bottom + PADDING * 5]
+      ),
+      left: interpolate(
+        progress,
+        [0, 1],
+        [
+          (CONTENT_HEIGHT * 16) / 9 + 16 + 8 + insets.left,
+          PADDING * 4 + insets.left,
+        ]
+      ),
+      height: interpolate(progress, [0, 1], [BAR_HEIGHT, 64]),
+      width: interpolate(progress, [0, 1], [140, 140]),
     };
   });
 
   const animatedButtonStyle = useAnimatedStyle(() => {
+    const progress = animationProgress.value;
     return {
-      bottom: withTiming(buttonsValues.value.bottom, { duration: 500 }),
+      bottom: interpolate(
-      opacity: withTiming(buttonsValues.value.opacity, { duration: 500 }),
+        progress,
-      right: withTiming(buttonsValues.value.right, { duration: 500 }),
+        [0, 1],
+        [BOTTOM_HEIGHT, screenHeight - insets.top - insets.bottom - PADDING * 5]
+      ),
+      right: interpolate(
+        progress,
+        [0, 1],
+        [16 + insets.right, 16 + insets.right + PADDING]
+      ),
+      height: interpolate(progress, [0, 1], [BAR_HEIGHT, BAR_HEIGHT]),
     };
   });
 
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
+  const animatedVideoStyle = useAnimatedStyle(() => {
+    const progress = animationProgress.value;
     return {
-      bottom: withTiming(backgroundValues.value.bottom, { duration: 500 }),
+      bottom: interpolate(progress, [0, 1], [BOTTOM_HEIGHT + PADDING, 0]),
-      width: withTiming(backgroundValues.value.width, { duration: 500 }),
+      height: interpolate(progress, [0, 1], [CONTENT_HEIGHT, screenHeight]),
-      height: withTiming(backgroundValues.value.height, { duration: 500 }),
+      width: interpolate(
-      padding: withTiming(backgroundValues.value.padding, { duration: 500 }),
+        progress,
-      left: withTiming(backgroundValues.value.left, { duration: 500 }),
+        [0, 1],
+        [(CONTENT_HEIGHT * 16) / 9, screenWiidth - insets.right - insets.left]
+      ),
+      left: interpolate(
+        progress,
+        [0, 1],
+        [PADDING * 2 + insets.left, insets.left]
+      ),
+      opacity:
+        size === "small"
+          ? 1
+          : interpolate(
+              controlsOpacity.value,
+              [0, 1],
+              [1, 0.5] // 100% opacity when controls are hidden, 50% when visible
+            ),
     };
   });
 
+  const animatedColorStyle = useAnimatedStyle(() => {
+    const progress = animationProgress.value;
+    return {
+      backgroundColor: interpolateColor(
+        progress,
+        [0, 1],
+        [COLORS[0], COLORS[1]]
+      ),
+    };
+  });
+
+  const animatedSliderStyle = useAnimatedStyle(() => {
+    const progress = animationProgress.value;
+    return {
+      opacity: interpolate(progress, [0, 0.1], [0, 1]),
+      display: progress > 0 ? "flex" : "none",
+    };
+  });
+
+  const showControls = () => {
+    controlsOpacity.value = withTiming(1, { duration: 300 });
+  };
+
+  const hideControls = () => {
+    controlsOpacity.value = withTiming(0, { duration: 300 });
+  };
+
+  const animatedControlsStyle = useAnimatedStyle(() => {
+    return {
+      opacity: controlsOpacity.value,
+    };
+  });
+
+  // const PAN_GESTURE_EXTENT = screenHeight * 4; // Adjust this value as needed
+  // const panGesture = Gesture.Pan()
+  //   .onStart(() => {
+  //     animationProgress.value = size === "small" ? 0 : 1;
+  //   })
+  //   .onUpdate((event) => {
+  //     const delta = -event.translationY / PAN_GESTURE_EXTENT;
+  //     const newProgress = animationProgress.value + delta;
+  //     animationProgress.value = Math.max(0, Math.min(1, newProgress));
+  //   })
+  //   .onEnd(() => {
+  //     if (animationProgress.value > 0.5) {
+  //       animationProgress.value = withTiming(1, { duration: 300 });
+  //       size = "full";
+  //     } else {
+  //       animationProgress.value = withTiming(0, { duration: 300 });
+  //       size = "small";
+  //     }
+  //   });
+
   const poster = useMemo(() => {
     if (currentlyPlaying?.item.Type === "Audio")
       return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`;
@@ -149,68 +241,90 @@ export const CurrentlyPlayingBar: React.FC = () => {
     };
   }, [currentlyPlaying, startPosition, api, poster]);
 
-  const animatedVideoStyle = useAnimatedStyle(() => {
+  // useEffect(() => {
-    return {
+  //   const BOTTOM_HEIGHT = insets.bottom + 48;
-      height: withTiming(videoValues.value.height, { duration: 500 }),
-      width: withTiming(videoValues.value.width, { duration: 500 }),
-      bottom: withTiming(videoValues.value.bottom, { duration: 500 }),
-      left: withTiming(videoValues.value.left, { duration: 500 }),
-    };
-  });
 
-  useEffect(() => {
+  //   backgroundValues.value = {
-    if (size === "full") {
+  //     bottom: interpolate(animationProgress.value, [0, 1], [BOTTOM_HEIGHT, 0]),
-      backgroundValues.value = {
+  //     height: interpolate(
-        bottom: 0,
+  //       animationProgress.value,
-        height: screenHeight,
+  //       [0, 1],
-        padding: 0,
+  //       [BAR_HEIGHT, screenHeight]
-        width: screenWiidth,
+  //     ),
-        left: 0,
+  //     padding: interpolate(animationProgress.value, [0, 1], [PADDING, 0]),
-      };
+  //     width: interpolate(
-      buttonsValues.value = {
+  //       animationProgress.value,
-        bottom: screenHeight - insets.top - 38,
+  //       [0, 1],
-        opacity: 1,
+  //       [screenWiidth - PADDING * 2, screenWiidth]
-        right: 16,
+  //     ),
-      };
+  //     left: interpolate(animationProgress.value, [0, 1], [8, 0]),
-      videoValues.value = {
+  //   };
-        bottom: 0,
+
-        height: screenHeight,
+  //   buttonsValues.value = {
-        width: screenWiidth,
+  //     bottom: interpolate(
-        left: 0,
+  //       animationProgress.value,
-      };
+  //       [0, 1],
-      textValues.value = {
+  //       [BOTTOM_HEIGHT, screenHeight - insets.top - 48]
-        bottom: 78,
+  //     ),
-        height: 64,
+  //     right: interpolate(
-        left: 16,
+  //       animationProgress.value,
-        width: 140,
+  //       [0, 1],
-      };
+  //       [16, 16 + insets.right]
-    } else {
+  //     ),
-      backgroundValues.value = {
+  //     height: interpolate(
-        bottom: 70,
+  //       animationProgress.value,
-        height: 80,
+  //       [0, 1],
-        padding: 0,
+  //       [BAR_HEIGHT, BAR_HEIGHT]
-        width: screenWiidth - 16,
+  //     ),
-        left: 8,
+  //   };
-      };
+
-      buttonsValues.value = {
+  //   videoValues.value = {
-        bottom: 90,
+  //     bottom: interpolate(
-        opacity: 1,
+  //       animationProgress.value,
-        right: 16,
+  //       [0, 1],
-      };
+  //       [BOTTOM_HEIGHT + PADDING, 0]
-      videoValues.value = {
+  //     ),
-        bottom: 78,
+  //     height: interpolate(
-        height: 64,
+  //       animationProgress.value,
-        width: 113,
+  //       [0, 1],
-        left: 16,
+  //       [CONTENT_HEIGHT, screenHeight]
-      };
+  //     ),
-      textValues.value = {
+  //     width: interpolate(
-        bottom: 78,
+  //       animationProgress.value,
-        height: 64,
+  //       [0, 1],
-        left: 141,
+  //       [(CONTENT_HEIGHT * 16) / 9, screenWiidth - insets.right - insets.left]
-        width: 140,
+  //     ),
-      };
+  //     left: interpolate(animationProgress.value, [0, 1], [16, insets.left]),
-    }
+  //   };
-  }, [size, screenHeight, insets]);
+
+  //   textValues.value = {
+  //     bottom: interpolate(
+  //       animationProgress.value,
+  //       [0, 1],
+  //       [BOTTOM_HEIGHT, BOTTOM_HEIGHT]
+  //     ),
+  //     height: interpolate(animationProgress.value, [0, 1], [BAR_HEIGHT, 64]),
+  //     left: interpolate(
+  //       animationProgress.value,
+  //       [0, 1],
+  //       [(CONTENT_HEIGHT * 16) / 9 + 16 + 8, PADDING * 2 + insets.left]
+  //     ),
+  //     width: interpolate(animationProgress.value, [0, 1], [140, 140]),
+  //   };
+
+  //   colorProgress.value = withTiming(animationProgress.value, {
+  //     duration: 500,
+  //   });
+  // }, [
+  //   animationProgress.value,
+  //   screenHeight,
+  //   screenWiidth,
+  //   insets.bottom,
+  //   insets.top,
+  //   insets.right,
+  //   insets.left,
+  //   controlsVisible,
+  // ]);
 
   const progress = useSharedValue(0);
   const min = useSharedValue(0);
@@ -221,229 +335,333 @@ export const CurrentlyPlayingBar: React.FC = () => {
     max.value = currentlyPlaying?.item.RunTimeTicks || 0;
   }, [currentlyPlaying?.item.RunTimeTicks]);
 
+  const hideControlsTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const showControlsAndResetTimer = () => {
+    showControls();
+    if (size === "full") {
+      resetHideControlsTimer();
+    }
+  };
+
+  const resetHideControlsTimer = () => {
+    if (hideControlsTimerRef.current) {
+      clearTimeout(hideControlsTimerRef.current);
+    }
+    hideControlsTimerRef.current = setTimeout(() => {
+      hideControls();
+    }, 3000);
+  };
+
+  useEffect(() => {
+    if (size === "full" && controlsOpacity.value > 0) {
+      resetHideControlsTimer();
+    }
+
+    return () => {
+      if (hideControlsTimerRef.current) {
+        clearTimeout(hideControlsTimerRef.current);
+      }
+    };
+  }, [controlsOpacity.value, size]);
+
   if (!api || !currentlyPlaying) return null;
 
   return (
-    <>
+    <View>
-      <Animated.View
+      <View>
-        className={`bg-neutral-800 rounded-lg absolute`}
+        <Animated.View
-        style={[animatedBackgroundStyle]}
+          className={`rounded-lg absolute`}
-      ></Animated.View>
+          style={[animatedBackgroundStyle, animatedColorStyle]}
+        ></Animated.View>
 
-      <Animated.View className={` absolute`} style={[animatedTextStyle]}>
+        <Animated.View
-        <View className="shrink text-xs flex flex-col justify-center h-full">
+          className={`absolute z-10`}
-          <TouchableOpacity
+          style={[animatedTextStyle, animatedControlsStyle]}
-            onPress={() => {
+        >
-              if (currentlyPlaying.item?.Type === "Audio") {
+          <View className="shrink flex flex-col justify-center h-full">
-                router.push(
-                  // @ts-ignore
-                  `/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}`
-                );
-              } else {
-                router.push(
-                  // @ts-ignore
-                  `/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}`
-                );
-              }
-            }}
-          >
-            <Text>{currentlyPlaying.item?.Name}</Text>
-          </TouchableOpacity>
-          {currentlyPlaying.item?.Type === "Episode" && (
             <TouchableOpacity
               onPress={() => {
-                router.push(
+                if (currentlyPlaying.item?.Type === "Audio") {
-                  // @ts-ignore
+                  router.push(
-                  `/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}`
+                    // @ts-ignore
-                );
+                    `/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}`
+                  );
+                } else {
+                  router.push(
+                    // @ts-ignore
+                    `/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}`
+                  );
+                }
               }}
-              className="text-xs opacity-50"
             >
-              <Text>{currentlyPlaying.item.SeriesName}</Text>
+              <Text className="text-xs">{currentlyPlaying.item?.Name}</Text>
             </TouchableOpacity>
-          )}
+            {currentlyPlaying.item?.Type === "Episode" && (
-          {currentlyPlaying.item?.Type === "Movie" && (
+              <TouchableOpacity
-            <View>
+                onPress={() => {
+                  router.push(
+                    // @ts-ignore
+                    `/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}`
+                  );
+                }}
+              >
+                <Text className="text-xs opacity-50">
+                  {currentlyPlaying.item.SeriesName}
+                </Text>
+              </TouchableOpacity>
+            )}
+            {currentlyPlaying.item?.Type === "Movie" && (
               <Text className="text-xs opacity-50">
                 {currentlyPlaying.item?.ProductionYear}
               </Text>
-            </View>
+            )}
-          )}
+            {currentlyPlaying.item?.Type === "Audio" && (
-          {currentlyPlaying.item?.Type === "Audio" && (
+              <TouchableOpacity
+                onPress={() => {
+                  router.push(`/albums/${currentlyPlaying.item?.AlbumId}`);
+                }}
+              >
+                <Text className="text-xs opacity-50">
+                  {currentlyPlaying.item?.Album}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </Animated.View>
+
+        <Animated.View
+          className={`absolute z-10`}
+          style={[animatedButtonStyle, animatedControlsStyle]}
+        >
+          <View className="flex flex-row items-center h-full">
             <TouchableOpacity
               onPress={() => {
-                router.push(`/albums/${currentlyPlaying.item?.AlbumId}`);
+                if (size === "small") {
+                  animationProgress.value = withTiming(1, { duration: 300 });
+                  setSize("full");
+                  hideControls();
+                } else {
+                  animationProgress.value = withTiming(0, { duration: 300 });
+                  setSize("small");
+                  showControls();
+                }
               }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
             >
-              <Text className="text-xs opacity-50">
+              <Ionicons name="expand" size={20} color="white" />
-                {currentlyPlaying.item?.Album}
-              </Text>
             </TouchableOpacity>
-          )}
+            <TouchableOpacity
-        </View>
+              onPress={() => {
-      </Animated.View>
+                if (isPlaying) {
+                  pauseVideo();
+                } else {
+                  playVideo();
+                }
+              }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
+            >
+              <Ionicons
+                name={isPlaying ? "pause" : "play"}
+                size={24}
+                color="white"
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                stopPlayback();
+              }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
+            >
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
+          </View>
+        </Animated.View>
 
-      <Animated.View
+        <Animated.View
-        className={`flex flex-row items-center z-10`}
+          style={[animatedVideoStyle]}
-        style={[
+          className={` rounded-md absolute overflow-hidden flex flex-col items-center justify-center pointer-events-none z-0 object-contain`}
-          { position: "absolute", borderWidth: 1, borderColor: "blue" },
-          animatedButtonStyle,
-        ]}
-      >
-        <TouchableOpacity
-          onPress={() => {
-            if (size === "small") setSize("full");
-            else setSize("small");
-          }}
-          className="aspect-square rounded flex flex-col items-center justify-center p-2"
         >
-          <Ionicons name="expand" size={24} color="white" />
+          <Pressable
-        </TouchableOpacity>
+            onPress={() => {
-        <TouchableOpacity
+              if (size === "small") return;
-          onPress={() => {
+              if (controlsOpacity.value > 0) {
-            stopPlayback();
+                hideControls();
-          }}
+              } else {
-          className="aspect-square rounded flex flex-col items-center justify-center p-2"
+                showControlsAndResetTimer();
-        >
-          <Ionicons name="close" size={24} color="white" />
-        </TouchableOpacity>
-      </Animated.View>
-
-      <Animated.View
-        style={[animatedVideoStyle]}
-        className={` rounded-md absolute overflow-hidden flex flex-col items-center justify-center pointer-events-none z-0 object-contain`}
-      >
-        {videoSource && (
-          <Video
-            ref={videoRef}
-            allowsExternalPlayback
-            style={{
-              width: "100%",
-              height: "100%",
-            }}
-            resizeMode="contain"
-            playWhenInactive={true}
-            playInBackground={true}
-            showNotificationControls={true}
-            ignoreSilentSwitch="ignore"
-            controls={false}
-            pictureInPicture={true}
-            debug={{
-              enable: true,
-              thread: true,
-            }}
-            onProgress={(e) => {
-              if (sliding.current === true) return;
-              onProgress(e);
-              progress.value = e.currentTime * 10000000;
-            }}
-            subtitleStyle={{
-              fontSize: 16,
-            }}
-            source={videoSource}
-            onRestoreUserInterfaceForPictureInPictureStop={() => {
-              setTimeout(() => {
-                presentFullscreenPlayer();
-              }, 300);
-            }}
-            onFullscreenPlayerDidDismiss={() => {}}
-            onFullscreenPlayerDidPresent={() => {}}
-            onPlaybackStateChanged={(e) => {
-              if (e.isPlaying === true) {
-                playVideo(false);
-              } else if (e.isPlaying === false) {
-                pauseVideo(false);
               }
             }}
-            onVolumeChange={(e) => {
+            className="w-full h-full"
-              setVolume(e.volume);
+          >
-            }}
+            {videoSource && (
-            progressUpdateInterval={4000}
+              <Video
-            onError={(e) => {
+                ref={videoRef}
-              console.log(e);
+                allowsExternalPlayback
-              writeToLog("ERROR", "Video playback error: " + JSON.stringify(e));
+                style={{
-              Alert.alert("Error", "Cannot play this video file.");
+                  width: "100%",
-              setIsPlaying(false);
+                  height: "100%",
-              // setCurrentlyPlaying(null);
+                }}
-            }}
+                resizeMode="contain"
-            renderLoader={
+                playWhenInactive={true}
-              currentlyPlaying.item?.Type !== "Audio" && (
+                playInBackground={true}
-                <View className="flex flex-col items-center justify-center h-full">
+                showNotificationControls={true}
-                  <Loader />
+                ignoreSilentSwitch="ignore"
-                </View>
+                controls={false}
-              )
+                pictureInPicture={true}
-            }
+                debug={{
-          />
+                  enable: true,
-        )}
+                  thread: true,
-      </Animated.View>
+                }}
-      {size === "full" && (
+                onProgress={(e) => {
-        <View
+                  if (sliding.current === true) return;
-          style={{
+                  onProgress(e);
-            borderRadius: 100,
+                  progress.value = e.currentTime * 10000000;
-            position: "absolute",
+                }}
-            bottom: insets.bottom + 16,
+                subtitleStyle={{
-            left: 16,
+                  fontSize: 16,
-            width: screenWiidth - 32,
+                }}
-          }}
+                source={videoSource}
-        >
+                onRestoreUserInterfaceForPictureInPictureStop={() => {
-          <Slider
+                  setTimeout(() => {
-            theme={{
+                    presentFullscreenPlayer();
-              maximumTrackTintColor: "rgba(1,1,1,0.2)",
+                  }, 300);
-              minimumTrackTintColor: "#fff",
+                }}
-              cacheTrackTintColor: "#333",
+                onFullscreenPlayerDidDismiss={() => {}}
-              bubbleBackgroundColor: "#fff",
+                onFullscreenPlayerDidPresent={() => {}}
-              bubbleTextColor: "#000",
+                onPlaybackStateChanged={(e) => {
-              heartbeatColor: "#999",
+                  if (e.isPlaying === true) {
-            }}
+                    playVideo(false);
-            onSlidingStart={() => {
+                  } else if (e.isPlaying === false) {
-              sliding.current = true;
+                    pauseVideo(false);
-            }}
+                  }
-            onSlidingComplete={(val) => {
+                }}
-              const tick = Math.floor(val);
+                onVolumeChange={(e) => {
-              videoRef.current?.seek(tick / 10000000);
+                  setVolume(e.volume);
-              sliding.current = false;
+                }}
-            }}
+                progressUpdateInterval={4000}
-            onValueChange={(val) => {
+                onError={(e) => {
-              const tick = Math.floor(val);
+                  console.log(e);
-              progress.value = tick;
+                  writeToLog(
-            }}
+                    "ERROR",
-            containerStyle={{
+                    "Video playback error: " + JSON.stringify(e)
+                  );
+                  Alert.alert("Error", "Cannot play this video file.");
+                  setIsPlaying(false);
+                  // setCurrentlyPlaying(null);
+                }}
+                renderLoader={
+                  currentlyPlaying.item?.Type !== "Audio" && (
+                    <View className="flex flex-col items-center justify-center h-full">
+                      <Loader />
+                    </View>
+                  )
+                }
+              />
+            )}
+          </Pressable>
+        </Animated.View>
+
+        <Animated.View
+          style={[
+            {
               borderRadius: 100,
-            }}
+              position: "absolute",
-            bubble={(s) => runtimeTicksToMinutes(s)}
+              bottom: insets.bottom + 8,
-            sliderHeight={12}
+              left: insets.left + PADDING * 4,
-            thumbWidth={0}
+              width: screenWiidth - insets.left - insets.right - PADDING * 8,
-            progress={progress}
+            },
-            minimumValue={min}
+            animatedSliderStyle,
-            maximumValue={max}
+            animatedControlsStyle,
-          />
+          ]}
-          <Text className="mt-2 text-xs text-neutral-500">
-            {runtimeTicksToMinutes(progress.value)}
-          </Text>
-        </View>
-      )}
-
-      {/* <Animated.View
-        style={[
-          {
-            height: "100%",
-            width: "100%",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            overflow: "hidden",
-          },
-          animatedInnerStyle,
-        ]}
-      >
-        
-        <View
-          className={`flex flex-row w-full h-full items-center space-x-4 shrink bg-neutral-800 rounded-lg p-2`}
         >
-         
+          <BlurView
-        </View>
+            intensity={100}
-      </Animated.View> */}
+            className="flex flex-row bg-neutral-800 items-center space-x-6 rounded-full py-1.5 pl-4 pr-4 z-10 overflow-hidden"
-    </>
+          >
+            <View className="flex flex-row items-center space-x-2">
+              <Ionicons name="play-skip-back" size={18} color="white" />
+              <TouchableOpacity
+                onPress={async () => {
+                  const curr = await videoRef.current?.getCurrentPosition();
+                  if (!curr) return;
+                  videoRef.current?.seek(Math.max(0, curr - 15));
+                  resetHideControlsTimer();
+                }}
+              >
+                <Ionicons
+                  name="refresh-outline"
+                  size={22}
+                  color="white"
+                  style={{
+                    transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+                  }}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => {
+                  if (isPlaying) pauseVideo();
+                  else playVideo();
+                  resetHideControlsTimer();
+                }}
+              >
+                <Ionicons
+                  name={isPlaying ? "pause" : "play"}
+                  size={24}
+                  color="white"
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={async () => {
+                  const curr = await videoRef.current?.getCurrentPosition();
+                  if (!curr) return;
+                  videoRef.current?.seek(Math.max(0, curr + 15));
+                  resetHideControlsTimer();
+                }}
+              >
+                <Ionicons name="refresh-outline" size={22} color="white" />
+              </TouchableOpacity>
+              <Ionicons name="play-skip-forward" size={18} color="white" />
+            </View>
+            <View className="flex flex-col w-full shrink">
+              <Slider
+                theme={{
+                  maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                  minimumTrackTintColor: "#fff",
+                  cacheTrackTintColor: "#333",
+                  bubbleBackgroundColor: "#fff",
+                  bubbleTextColor: "#000",
+                  heartbeatColor: "#999",
+                }}
+                onSlidingStart={() => {
+                  sliding.current = true;
+                }}
+                onSlidingComplete={(val) => {
+                  const tick = Math.floor(val);
+                  videoRef.current?.seek(tick / 10000000);
+                  sliding.current = false;
+                }}
+                onValueChange={(val) => {
+                  const tick = Math.floor(val);
+                  progress.value = tick;
+                  resetHideControlsTimer();
+                }}
+                containerStyle={{
+                  borderRadius: 100,
+                }}
+                bubble={(s) => runtimeTicksToMinutes(s)}
+                sliderHeight={8}
+                thumbWidth={0}
+                progress={progress}
+                minimumValue={min}
+                maximumValue={max}
+              />
+              <Text className="text-[10px] text-neutral-500">
+                {runtimeTicksToSeconds(progress.value)}
+              </Text>
+            </View>
+          </BlurView>
+        </Animated.View>
+      </View>
+    </View>
   );
 };