From 02a48fd95849e7e074eeb0017c9f6c45ddfa5cfe Mon Sep 17 00:00:00 2001
From: Alex Kim <alexkim5682@gmail.com>
Date: Fri, 6 Dec 2024 16:42:58 +1100
Subject: [PATCH] Refactored code, so that way the skip intro button is not
 using absolute positioning

---
 components/video-player/controls/Controls.tsx | 103 +++++++-----------
 .../video-player/controls/SkipButton.tsx      |  39 +++++++
 2 files changed, 77 insertions(+), 65 deletions(-)
 create mode 100644 components/video-player/controls/SkipButton.tsx

diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx
index f42600e3..d814e3c5 100644
--- a/components/video-player/controls/Controls.tsx
+++ b/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,60 +340,6 @@ export const Controls: React.FC<Props> = ({
         )}
       </VideoProvider>
 
-      <View
-        style={[
-          {
-            position: "absolute",
-            right: insets.right,
-            bottom: insets.bottom + 55,
-          },
-        ]}
-        pointerEvents={showSkipButton ? "auto" : "none"}
-        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();
@@ -568,19 +515,45 @@ export const Controls: React.FC<Props> = ({
         <View
           className="shrink flex flex-col justify-center h-full mb-2"
           style={{
-            alignSelf: "flex-start",
+            flexDirection: "row",
+            justifyContent: "space-between",
           }}
         >
-          <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
+            style={{
+              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-1 px-4 rounded-lg items-center  bg-neutral-800`}
diff --git a/components/video-player/controls/SkipButton.tsx b/components/video-player/controls/SkipButton.tsx
new file mode 100644
index 00000000..aa5df7ec
--- /dev/null
+++ b/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;