Merge pull request #254 from Alexk2309/hotfix/fixed-bugs-for-new-controls-ui

Bug fixes for controls

components/video-player/controls/BrightnessSlider.tsx

@@ -14,10 +14,11 @@ const BrightnessSlider = () => {
   useEffect(() => {
     const fetchInitialBrightness = async () => {
       const initialBrightness = await Brightness.getBrightnessAsync();
+      console.log("initialBrightness", initialBrightness);
       brightness.value = initialBrightness * 100;
     };
     fetchInitialBrightness();
-  }, [brightness]);
+  }, []);
 
   const handleValueChange = async (value: number) => {
     brightness.value = value;

components/video-player/controls/Controls.tsx

@@ -51,6 +51,7 @@ import * as Haptics from "expo-haptics";
 import DropdownViewDirect from "./dropdown/DropdownViewDirect";
 import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
 import BrightnessSlider from "./BrightnessSlider";
+import SkipButton from "./SkipButton";
 
 interface Props {
   item: BaseItemDto;
@@ -339,59 +340,6 @@ export const Controls: React.FC<Props> = ({
         )}
       </VideoProvider>
 
-      <View
-        style={[
-          {
-            position: "absolute",
-            right: insets.right,
-            bottom: insets.bottom + 50,
-          },
-        ]}
-        className={`z-10 p-4
-            ${showSkipButton ? "opacity-100" : "opacity-0"}
-          `}
-      >
-        <TouchableOpacity
-          onPress={skipIntro}
-          style={{
-            backgroundColor: "rgba(0, 0, 0, 0.75)", // Adjusted background color
-            borderRadius: 5, // Adjusted border radius
-            paddingHorizontal: 10,
-            paddingVertical: 15,
-            borderWidth: 2,
-            borderColor: "#5A5454",
-          }}
-        >
-          <Text className="text-white font-bold">Skip Intro</Text>
-        </TouchableOpacity>
-      </View>
-
-      <View
-        style={{
-          position: "absolute",
-          right: insets.right,
-          bottom: insets.bottom + 50,
-        }}
-        pointerEvents={showSkipCreditButton ? "auto" : "none"}
-        className={`z-10 p-4 ${
-          showSkipCreditButton ? "opacity-100" : "opacity-0"
-        }`}
-      >
-        <TouchableOpacity
-          onPress={skipCredit}
-          style={{
-            backgroundColor: "rgba(0, 0, 0, 0.75)", // Adjusted background color
-            borderRadius: 5, // Adjusted border radius
-            paddingHorizontal: 10,
-            paddingVertical: 15,
-            borderWidth: 2,
-            borderColor: "#5A5454",
-          }}
-        >
-          <Text className="text-white font-bold">Skip Credits</Text>
-        </TouchableOpacity>
-      </View>
-
       <Pressable
         onPressIn={() => {
           toggleControls();
@@ -561,23 +509,54 @@ export const Controls: React.FC<Props> = ({
             opacity: showControls ? 1 : 0,
           },
         ]}
-        pointerEvents={showControls ? "auto" : "none"}
+        pointerEvents={showControls ? "box-none" : "none"}
         className={`flex flex-col p-4`}
       >
-        <View className="shrink flex flex-col justify-center h-full mb-2">
+        <View
-          <Text className="font-bold">{item?.Name}</Text>
+          className="shrink flex flex-col justify-center h-full mb-2"
-          {item?.Type === "Episode" && (
+          style={{
-            <Text className="opacity-50">{item.SeriesName}</Text>
+            flexDirection: "row",
-          )}
+            justifyContent: "space-between",
-          {item?.Type === "Movie" && (
+          }}
-            <Text className="text-xs opacity-50">{item?.ProductionYear}</Text>
+        >
-          )}
+          <View
-          {item?.Type === "Audio" && (
+            style={{
-            <Text className="text-xs opacity-50">{item?.Album}</Text>
+              flexDirection: "column",
-          )}
+              alignSelf: "flex-end", // Shrink height based on content
+            }}
+          >
+            <Text className="font-bold">{item?.Name}</Text>
+            {item?.Type === "Episode" && (
+              <Text className="opacity-50">{item.SeriesName}</Text>
+            )}
+            {item?.Type === "Movie" && (
+              <Text className="text-xs opacity-50">{item?.ProductionYear}</Text>
+            )}
+            {item?.Type === "Audio" && (
+              <Text className="text-xs opacity-50">{item?.Album}</Text>
+            )}
+          </View>
+          <View
+            style={{
+              flexDirection: "column",
+              alignSelf: "flex-end",
+              marginRight: insets.right,
+            }}
+          >
+            <SkipButton
+              showButton={showSkipButton}
+              onPress={skipIntro}
+              buttonText="Skip Intro"
+            />
+            <SkipButton
+              showButton={showSkipCreditButton}
+              onPress={skipCredit}
+              buttonText="Skip Credits"
+            />
+          </View>
         </View>
         <View
-          className={`flex flex-col-reverse py-4 pb-2 px-4 rounded-2xl items-center  bg-neutral-800`}
+          className={`flex flex-col-reverse py-4 pb-1 px-4 rounded-lg items-center  bg-neutral-800`}
         >
           <View className={`flex flex-col w-full shrink`}>
             <Slider

components/video-player/controls/SkipButton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+
+interface SkipButtonProps {
+  onPress: () => void;
+  showButton: boolean;
+  buttonText: string;
+}
+
+const SkipButton: React.FC<SkipButtonProps> = ({
+  onPress,
+  showButton,
+  buttonText,
+}) => {
+  return (
+    <View style={{ display: showButton ? "flex" : "none" }}>
+      <TouchableOpacity onPress={onPress} style={styles.button}>
+        <Text style={styles.text}>{buttonText}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    paddingVertical: 15,
+    borderWidth: 2,
+    borderColor: "#5A5454",
+  },
+  text: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});
+
+export default SkipButton;