scrubber enhancements

components/Player/component.config.ts

@@ -5,4 +5,15 @@ export const TextTickerConfig : TextTickerProps = {
     loop: true,
     repeatSpacer: 20,
     marqueeDelay: 1000
-}
+}
+
+/**
+ * RNTP (React Native Track Player) holds a high significant figure
+ * number for the progress.
+ * 
+ * Tamagui Sliders only support whole integers
+ * 
+ * We're going to move the decimal place over so that Tamagui's slider
+ * can be more precise
+ */
+export const ProgressMultiplier = 10 ^ 2

components/Player/screens/index.tsx

@@ -12,12 +12,14 @@ import Icon from "../../../components/Global/helpers/icon";
 import FavoriteButton from "../../Global/components/favorite-button";
 import BlurhashedImage from "../../Global/components/blurhashed-image";
 import TextTicker from "react-native-text-ticker";
-import { TextTickerConfig } from "../component.config";
+import { ProgressMultiplier, TextTickerConfig } from "../component.config";
 import IconButton from "../../../components/Global/helpers/icon-button";
 import { toUpper } from "lodash";
 
 export default function PlayerScreen({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}): React.JSX.Element {
 
+
+
     const { 
         useTogglePlayback, 
         nowPlayingIsFavorite,
@@ -31,21 +33,30 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
     } = usePlayerContext();
     
     const [seeking, setSeeking] = useState<boolean>(false);
-    const [progressState, setProgressState] = useState<number>(progress?.position ?? 0);
+
+    /**
+     * TrackPlayer.getProgress() returns a high sig-fig number. We're going to apply
+     * a multiplier so that the scrubber bar can take advantage of those extra numbers
+     */
+    const [progressState, setProgressState] = useState<number>(
+        progress && progress.position 
+        ? Math.ceil(progress.position * ProgressMultiplier)
+        : 0
+    );
 
     const { width } = useSafeAreaFrame();
 
     // Prevent gesture event to close player if we're seeking
-    useEffect(() => {
-        navigation.getParent()!.setOptions({ gestureEnabled: !seeking });
-    }, [
-        navigation,
-        seeking
-    ])
+    navigation.setOptions({ gestureEnabled: !seeking });
 
     useEffect(() => {
         if (!seeking)
-            setProgressState(Math.round(progress?.position ?? 0))
+            progress && progress.position
+            ? setProgressState(
+                Math.ceil(
+                    progress.position * ProgressMultiplier
+                )
+            ) : 0;
     }, [
         progress
     ]);
@@ -167,7 +178,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
                                 // If user swipes off of the slider we should seek to the spot
                                 onPressOut: () => {
                                     setSeeking(false);
-                                    useSeekTo.mutate(progressState);
+                                    useSeekTo.mutate(Math.round(progressState / ProgressMultiplier));
                                 },
                                 onSlideStart: () => {
                                     setSeeking(true);
@@ -178,11 +189,10 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
                                 },
                                 onSlideEnd: (event, value) => {
                                     setSeeking(false);
-                                    useSeekTo.mutate(value);
+                                    useSeekTo.mutate(Math.round(value / ProgressMultiplier));
                                 }
                             }}
-                            />
-
+                        />
                     </XStack>
 
                     <XStack marginHorizontal={20} marginTop={"$4"} marginBottom={"$3"}>

components/types.d.ts

@@ -75,4 +75,6 @@ export type DetailsProps = NativeStackScreenProps<StackParamList, "Details">;
 
 export type AccountDetailsProps = NativeStackScreenProps<StackParamList, "AccountDetails">;
 
-export type DevToolsProps = NativeStackScreenProps<StackParamList, 'DevTools'>;
+export type DevToolsProps = NativeStackScreenProps<StackParamList, 'DevTools'>;
+
+export type useState<T> = [T, React.Dispatch<T>];