From 72859b4ae30f2edffe49550241c078ac1cdf5005 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Wed, 11 Dec 2024 08:28:11 +0100
Subject: [PATCH] fix: make the next episode button work with skip credits
 button

---
 components/video-player/controls/Controls.tsx |  7 +----
 .../controls/NextEpisodeCountDownButton.tsx   |  4 +--
 .../video-player/controls/SkipButton.tsx      | 29 ++++++-------------
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx
index b65ce578..a695473d 100644
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -689,12 +689,7 @@ export const Controls: React.FC<Props> = ({
                   <Text className="text-xs opacity-50">{item?.Album}</Text>
                 )}
               </View>
-              <View
-                style={{
-                  flexDirection: "column",
-                  alignSelf: "flex-end",
-                }}
-              >
+              <View className="flex flex-row space-x-2">
                 <SkipButton
                   showButton={showSkipButton}
                   onPress={skipIntro}
diff --git a/components/video-player/controls/NextEpisodeCountDownButton.tsx b/components/video-player/controls/NextEpisodeCountDownButton.tsx
index e5aec4dd..74160b91 100644
--- a/components/video-player/controls/NextEpisodeCountDownButton.tsx
+++ b/components/video-player/controls/NextEpisodeCountDownButton.tsx
@@ -66,12 +66,12 @@ const NextEpisodeCountDownButton: React.FC<NextEpisodeCountDownButtonProps> = ({
 
   return (
     <TouchableOpacity
-      className="w-32 overflow-hidden rounded-md bg-neutral-900"
+      className="w-32 overflow-hidden rounded-md bg-black/60 border border-neutral-900"
       {...props}
       onPress={handlePress}
     >
       <Animated.View style={animatedStyle} />
-      <View className="px-2 py-3">
+      <View className="px-3 py-3">
         <Text className="text-center font-bold">Next Episode</Text>
       </View>
     </TouchableOpacity>
diff --git a/components/video-player/controls/SkipButton.tsx b/components/video-player/controls/SkipButton.tsx
index aa5df7ec..15bd5fa6 100644
--- a/components/video-player/controls/SkipButton.tsx
+++ b/components/video-player/controls/SkipButton.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { View, TouchableOpacity, Text, ViewProps } from "react-native";
 
-interface SkipButtonProps {
+interface SkipButtonProps extends ViewProps {
   onPress: () => void;
   showButton: boolean;
   buttonText: string;
@@ -11,29 +11,18 @@ const SkipButton: React.FC<SkipButtonProps> = ({
   onPress,
   showButton,
   buttonText,
+  ...props
 }) => {
   return (
-    <View style={{ display: showButton ? "flex" : "none" }}>
-      <TouchableOpacity onPress={onPress} style={styles.button}>
-        <Text style={styles.text}>{buttonText}</Text>
+    <View className={showButton ? "flex" : "hidden"} {...props}>
+      <TouchableOpacity
+        onPress={onPress}
+        className="bg-black/60 rounded-md px-3 py-3 border border-neutral-900"
+      >
+        <Text className="text-white font-bold">{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;