-
-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
227 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| import { useAtom, useAtomValue } from 'jotai/react'; | ||
| import { MinusIcon, PlusIcon } from 'lucide-react-native'; | ||
| import React, { memo, useState } from 'react'; | ||
| import { Gesture, GestureDetector } from 'react-native-gesture-handler'; | ||
| import Animated, { | ||
| runOnJS, | ||
| useAnimatedStyle, | ||
| useSharedValue, | ||
| } from 'react-native-reanimated'; | ||
|
|
||
| import { Button, Text, View } from '@/ui'; | ||
| import Switch from '@/ui/core/switch'; | ||
|
|
||
| import { | ||
| shouldAskForSyncingAtom, | ||
| shouldSyncAdultAtom, | ||
| syncPercentageAtom, | ||
| } from '../store'; | ||
|
|
||
| const PlayerSettings = () => { | ||
| const [shouldAskForSyncing, setShouldAskForSyncing] = useAtom( | ||
| shouldAskForSyncingAtom | ||
| ); | ||
| const [shouldSyncAdult, setShouldSyncAdult] = useAtom(shouldSyncAdultAtom); | ||
| const syncPercentage = useAtomValue(syncPercentageAtom); | ||
|
|
||
| return ( | ||
| <View> | ||
| <Text className="mb-2 text-xl" weight="medium"> | ||
| Player | ||
| </Text> | ||
|
|
||
| <View className="space-y-1"> | ||
| <View className="flex flex-row items-center justify-between"> | ||
| <Text weight="normal">Should ask for syncing</Text> | ||
|
|
||
| <Switch | ||
| value={shouldAskForSyncing} | ||
| onValueChange={setShouldAskForSyncing} | ||
| /> | ||
| </View> | ||
| <View className="flex flex-row items-center justify-between"> | ||
| <Text weight="normal">Should sync adult</Text> | ||
|
|
||
| <Switch value={shouldSyncAdult} onValueChange={setShouldSyncAdult} /> | ||
| </View> | ||
| <View> | ||
| <Text weight="normal" className="mb-1"> | ||
| Sync percentage ({Math.floor(syncPercentage * 100)}%) | ||
| </Text> | ||
|
|
||
| <SyncPercentageSlider /> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const AnimatedView = Animated.createAnimatedComponent(View); | ||
|
|
||
| const clamp = (value: number, lowerBound: number, upperBound: number) => { | ||
| 'worklet'; | ||
|
|
||
| return Math.min(Math.max(lowerBound, value), upperBound); | ||
| }; | ||
|
|
||
| export const SyncPercentageSlider = memo(() => { | ||
| const [syncPercentage, setSyncPercentage] = useAtom(syncPercentageAtom); | ||
| const animateValue = useSharedValue(syncPercentage); | ||
| const [containerWidth, setContainerWidth] = useState(0); | ||
|
|
||
| const gesture = Gesture.Pan() | ||
| .onStart((e) => { | ||
| const x = e.x; | ||
|
|
||
| animateValue.value = clamp(x / containerWidth, 0, 1); | ||
| }) | ||
| .onUpdate((e) => { | ||
| const x = e.x; | ||
|
|
||
| animateValue.value = clamp(x / containerWidth, 0, 1); | ||
| }) | ||
| .onFinalize((e) => { | ||
| const x = e.x; | ||
|
|
||
| const value = x / containerWidth; | ||
|
|
||
| runOnJS(setSyncPercentage)(clamp(value, 0, 1)); | ||
| }); | ||
|
|
||
| const styles = useAnimatedStyle(() => { | ||
| return { | ||
| width: `${animateValue.value * 100}%`, | ||
| }; | ||
| }); | ||
|
|
||
| return ( | ||
| <View className="flex flex-row"> | ||
| <GestureDetector gesture={gesture}> | ||
| <View | ||
| onLayout={(event) => { | ||
| setContainerWidth(event.nativeEvent.layout.width); | ||
| }} | ||
| className="relative flex h-10 grow flex-row items-center rounded-md border border-neutral-400" | ||
| > | ||
| <AnimatedView | ||
| className="absolute left-0 h-full overflow-hidden rounded-md bg-primary-500" | ||
| style={styles} | ||
| /> | ||
| <Text className="absolute left-4 z-10 text-gray-300">0%</Text> | ||
| <Text className="absolute right-4 z-10 text-gray-300">100%</Text> | ||
| </View> | ||
| </GestureDetector> | ||
|
|
||
| <Button | ||
| variant="outline" | ||
| onPress={() => { | ||
| setSyncPercentage(syncPercentage + 0.01); | ||
| }} | ||
| className="mx-1 p-1" | ||
| > | ||
| <PlusIcon size={24} color="white" /> | ||
| </Button> | ||
|
|
||
| <Button | ||
| variant="outline" | ||
| className="p-1" | ||
| onPress={() => { | ||
| setSyncPercentage(syncPercentage - 0.01); | ||
| }} | ||
| > | ||
| <MinusIcon size={24} color="white" /> | ||
| </Button> | ||
| </View> | ||
| ); | ||
| }); | ||
|
|
||
| export default PlayerSettings; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { atomWithMMKV } from '@/core/storage'; | ||
|
|
||
| export const shouldAskForSyncingAtom = atomWithMMKV( | ||
| 'player_settings__should-ask-for-syncing', | ||
| true | ||
| ); | ||
| export const shouldSyncAdultAtom = atomWithMMKV( | ||
| 'player_settings__should-sync-adult', | ||
| false | ||
| ); | ||
| export const syncPercentageAtom = atomWithMMKV( | ||
| 'player_settings__sync-percentage', | ||
| 0.75 | ||
| ); |
Oops, something went wrong.