movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 16:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix the controls so they don't intefere with bottom controls

Browse Source
This commit is contained in:
Adrian Castro
2024-02-14 21:53:33 +01:00
parent 6ebdb6820a
commit 439ba8c7e5
2 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/expo/src/components/player/ControlsOverlay.tsx
View File

@@ -1,7 +1,6 @@
import { TouchableWithoutFeedback, View } from "react-native"; import { View } from "react-native";
import type { HeaderData } from "./Header"; import type { HeaderData } from "./Header";
import { usePlayerStore } from "~/stores/player/store";
import { BottomControls } from "./BottomControls"; import { BottomControls } from "./BottomControls";
import { Header } from "./Header"; import { Header } from "./Header";
import { MiddleControls } from "./MiddleControls"; import { MiddleControls } from "./MiddleControls";
@@ -11,19 +10,11 @@ interface ControlsOverlayProps {
} }
export const ControlsOverlay = ({ headerData }: ControlsOverlayProps) => { export const ControlsOverlay = ({ headerData }: ControlsOverlayProps) => {
const idle = usePlayerStore((state) => state.interface.isIdle);
const setIsIdle = usePlayerStore((state) => state.setIsIdle);
const handleTouch = () => {
setIsIdle(!idle);
};
return ( return (
<TouchableWithoutFeedback onPress={handleTouch}> <View className="absolute left-0 top-0 flex h-full w-full flex-1">
<View className="absolute left-0 top-0 flex h-full w-full flex-1"> <Header data={headerData} />
<Header data={headerData} /> <MiddleControls />
<MiddleControls /> <BottomControls />
<BottomControls /> </View>
</View>
</TouchableWithoutFeedback>
); );
}; };

34
apps/expo/src/components/player/MiddleControls.tsx
View File

@@ -1,22 +1,32 @@
import { StyleSheet, View } from "react-native"; import { StyleSheet, TouchableWithoutFeedback, View } from "react-native";
import { usePlayerStore } from "~/stores/player/store";
import { Controls } from "./Controls"; import { Controls } from "./Controls";
import { PlayButton } from "./PlayButton"; import { PlayButton } from "./PlayButton";
import { SeekButton } from "./SeekButton"; import { SeekButton } from "./SeekButton";
export const MiddleControls = () => { export const MiddleControls = () => {
const idle = usePlayerStore((state) => state.interface.isIdle);
const setIsIdle = usePlayerStore((state) => state.setIsIdle);
const handleTouch = () => {
setIsIdle(!idle);
};
return ( return (
<View style={styles.container}> <TouchableWithoutFeedback onPress={handleTouch}>
<Controls className="mr-24"> <View style={styles.container}>
<SeekButton type="backward" /> <Controls className="mr-24">
</Controls> <SeekButton type="backward" />
<Controls> </Controls>
<PlayButton /> <Controls>
</Controls> <PlayButton />
<Controls> </Controls>
<SeekButton type="forward" /> <Controls>
</Controls> <SeekButton type="forward" />
</View> </Controls>
</View>
</TouchableWithoutFeedback>
); );
}; };