alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-01-15 23:59:08 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Refactored code, so that way the skip intro button is not using absolute positioning

Browse Source
This commit is contained in:
Alex Kim
2024-12-06 16:42:58 +11:00
parent 04c4dfd13a
commit 02a48fd958
2 changed files with 77 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
components/video-player/controls/Controls.tsx
View File

@@ -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`}

39
components/video-player/controls/SkipButton.tsx Normal file
View File

@@ -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;