feat: Create new progress slider from scratch

src/components/App.tsx

@@ -12,6 +12,7 @@ import {
 import { useColorScheme } from 'react-native';
 import { ColorSchemeContext, themes } from './Colors';
 import DownloadManager from './DownloadManager';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 // import ErrorReportingAlert from 'utility/ErrorReportingAlert';
 
 export default function App(): JSX.Element {
@@ -30,7 +31,8 @@ export default function App(): JSX.Element {
                     Capability.SkipToPrevious,
                     Capability.Stop,
                     Capability.SeekTo,
-                ]
+                ],
+                stopWithApp: true
             });
         }
         setupTrackPlayer();
@@ -41,8 +43,10 @@ export default function App(): JSX.Element {
             <PersistGate loading={null} persistor={persistedStore}>
                 <ColorSchemeContext.Provider value={theme}>
                     <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-                        <Routes />
-                        <DownloadManager />
+                        <GestureHandlerRootView style={{ flex: 1 }}>
+                            <Routes />
+                            <DownloadManager />
+                        </GestureHandlerRootView>
                     </NavigationContainer>
                 </ColorSchemeContext.Provider>
             </PersistGate>

src/components/Progresstrack.tsx

@@ -0,0 +1,52 @@
+import { THEME_COLOR } from 'CONSTANTS';
+import styled from 'styled-components/native';
+import Animated from 'react-native-reanimated';
+
+export function getSeconds(seconds: number): string {
+    'worklet';
+    return Math.floor(seconds % 60).toString().padStart(2, '0');
+}
+
+export function getMinutes(seconds: number): number {
+    'worklet';
+    return Math.floor(seconds / 60);
+}
+
+export function calculateProgressTranslation(
+    position: number,
+    reference: number,
+    width: number,
+) {
+    'worklet';
+    const completion = position / reference;
+    const output = (1 - (completion || 0)) * -1 * width;
+    return output;
+}
+
+export const ProgressTrackContainer = styled.View`
+    overflow: hidden;
+    height: 5px;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    border-radius: 6px;
+`;
+
+export interface ProgressTrackProps {
+    opacity?: number;
+    stroke?: number;
+}
+
+const ProgressTrack = styled(Animated.View)<ProgressTrackProps>`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: ${(props) => props.stroke ? props.stroke + 'px' : '100%'};
+    background-color: ${THEME_COLOR};
+    opacity: ${(props) => props.opacity || 1};
+    border-radius: 99px;
+`;
+
+export default ProgressTrack;

src/components/ReText.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { TextProps as RNTextProps } from 'react-native';
+import { StyleSheet, TextInput } from 'react-native';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+
+const styles = StyleSheet.create({
+    baseStyle: {
+        color: 'black',
+    },
+});
+Animated.addWhitelistedNativeProps({ text: true });
+
+interface TextProps {
+    text: Animated.SharedValue<string>;
+    style?: Animated.AnimateProps<RNTextProps>['style'];
+}
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+const ReText = (props: TextProps) => {
+    const { text, style } = { style: {}, ...props };
+    const animatedProps = useAnimatedProps(() => {
+        return {
+            text: text.value,
+            // Here we use any because the text prop is not available in the type
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any;
+    });
+    return (
+        <AnimatedTextInput
+            underlineColorAndroid="transparent"
+            editable={false}
+            value={text.value}
+            style={[styles.baseStyle, style]}
+            {...{ animatedProps }}
+        />
+    );
+};
+
+export default ReText;

src/components/Typography.ts

@@ -3,12 +3,12 @@ import Text from './Text';
 
 export const Header = styled(Text)`
     margin: 0 0 6px 0;
-    font-size: 24px;
+    font-size: 28px;
     font-weight: 400;
 `;
 
 export const SubHeader = styled(Text)`
-    font-size: 14px;
+    font-size: 16px;
     margin: 0 0 6px 0;
     font-weight: 400;
     opacity: 0.5;