1070 sound progress (#1396)

* Refactor format function

* Missing dependency

* Rename function

* Add a slider to set playback position

* Use theme instead of RGB string

* Remove log

src/components/ObsDetails/SoundContainer.js

@@ -2,6 +2,7 @@ import {
   refresh as refreshNetInfo,
   useNetInfo
 } from "@react-native-community/netinfo";
+import Slider from "@react-native-community/slider";
 import { useFocusEffect } from "@react-navigation/native";
 import { Body1, INatIconButton, OfflineNotice } from "components/SharedComponents";
 import { View } from "components/styledComponents";
@@ -12,11 +13,32 @@ import React, {
   useState
 } from "react";
 import AudioRecorderPlayer from "react-native-audio-recorder-player";
+import { useTheme } from "react-native-paper";
 import { log } from "sharedHelpers/logger";
 import { useTranslation } from "sharedHooks";
 
 const logger = log.extend( "SoundContainer" );
 
+const SoundSlider = ( { playBackState, onSlidingComplete } ) => {
+  const theme = useTheme( );
+  const sliderStyle = {
+    width: "100%"
+  };
+  return (
+    <Slider
+      style={sliderStyle}
+      minimumValue={0}
+      maximumValue={playBackState.duration}
+      minimumTrackTintColor="#FFFFFF"
+      maximumTrackTintColor="#FFFFFF"
+      thumbTintColor={theme.colors.inatGreen}
+      tapToSeek
+      value={playBackState.currentPosition}
+      onSlidingComplete={onSlidingComplete}
+    />
+  );
+};
+
 const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
   const { isInternetReachable } = useNetInfo( );
   const playerRef = useRef( new AudioRecorderPlayer( ) );
@@ -38,6 +60,10 @@ const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
     formattedDuration: "00:00"
   } );
 
+  const mmss = useCallback( ( value: number ) => player.mmss(
+    Math.floor( value / 1000 )
+  ), [player] );
+
   const playSound = useCallback( position => {
     async function playSoundAsync( ) {
       await player.startPlayer( sound.file_url );
@@ -48,10 +74,8 @@ const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
         setPlayBackState( {
           currentPosition: playBackEvent.currentPosition,
           duration: playBackEvent.duration,
-          formattedCurrentPosition: player.mmss(
-            Math.floor( playBackEvent.currentPosition / 1000 )
-          ),
-          formattedDuration: player.mmss( Math.floor( playBackEvent.duration / 1000 ) )
+          formattedCurrentPosition: mmss( playBackEvent.currentPosition ),
+          formattedDuration: mmss( playBackEvent.duration )
         } );
         // Update UI when playback is complete
         if ( playBackEvent.currentPosition >= playBackEvent.duration ) {
@@ -67,7 +91,8 @@ const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
     };
   }, [
     player,
-    sound.file_url
+    sound.file_url,
+    mmss
   ] );
 
   const stopSound = useCallback( async ( ) => {
@@ -142,8 +167,6 @@ const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
     await stopSound( );
   }, [stopSound] ) );
 
-  const playBackPercent = ( playBackState.currentPosition / ( playBackState.duration || 1 ) ) * 100;
-
   if ( isInternetReachable === false ) {
     return (
       <OfflineNotice
@@ -180,11 +203,17 @@ const SoundContainer = ( { sizeClass, isVisible, sound } ) => {
           {playBackState.formattedDuration}
         </Body1>
       </View>
-      <View className="relative w-3/4 h-10 justify-center">
-        <View className="w-full h-1 bg-white" />
-        <View
-          className="absolute w-[18px] h-[18px] rounded-full bg-inatGreen"
-          style={{ left: `${playBackPercent}%` }}
+      <View className="relative w-3/4 h-4 justify-center">
+        <SoundSlider
+          playBackState={playBackState}
+          onSlidingComplete={value => {
+            setPlayBackState( {
+              ...playBackState,
+              currentPosition: value,
+              formattedCurrentPosition: mmss( value )
+            } );
+            player.seekToPlayer( value );
+          }}
         />
       </View>
     </View>

src/components/SharedComponents/Map.js

@@ -505,7 +505,7 @@ const Map = ( {
               }}
               radius={positionalAccuracy}
               strokeWidth={2}
-              strokeColor="#74AC00"
+              strokeColor={theme.colors.inatGreen}
               fillColor="rgba( 116, 172, 0, 0.2 )"
             />
             <Marker