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

fix: player controls touch events on iOS

Browse Source
This commit is contained in:
Adrian Castro
2024-02-13 12:10:56 +01:00
parent 6e33e0efea
commit e5dc36cd6d
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/expo/src/components/player/Controls.tsx
View File

@@ -9,15 +9,9 @@ interface ControlsProps extends React.ComponentProps<typeof TouchableOpacity> {
export const Controls = ({ children, className }: ControlsProps) => { export const Controls = ({ children, className }: ControlsProps) => {
const idle = usePlayerStore((state) => state.interface.isIdle); const idle = usePlayerStore((state) => state.interface.isIdle);
const setIsIdle = usePlayerStore((state) => state.setIsIdle);
return ( return (
<TouchableOpacity <TouchableOpacity className={className}>
onPress={() => {
setIsIdle(false);
}}
className={className}
>
{!idle && children} {!idle && children}
</TouchableOpacity> </TouchableOpacity>
); );

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

@@ -1,21 +1,31 @@
import { View } from "react-native"; import { 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 className="absolute flex h-full w-full flex-1 flex-row items-center justify-center gap-24"> <TouchableWithoutFeedback onPress={handleTouch}>
<Controls> <View className="absolute flex h-full w-full flex-1 flex-row items-center justify-center gap-24">
<SeekButton type="backward" /> <Controls>
</Controls> <SeekButton type="backward" />
<Controls> </Controls>
<PlayButton /> <Controls>
</Controls> <PlayButton />
<Controls> </Controls>
<SeekButton type="forward" /> <Controls>
</Controls> <SeekButton type="forward" />
</View> </Controls>
</View>
</TouchableWithoutFeedback>
); );
}; };