diff --git a/src/components/ObsDetails/SoundContainer.js b/src/components/ObsDetails/SoundContainer.js
index bd37d8e20..555f40fac 100644
--- a/src/components/ObsDetails/SoundContainer.js
+++ b/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 (
+
+ );
+};
+
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 (
{
{playBackState.formattedDuration}
-
-
-
+ {
+ setPlayBackState( {
+ ...playBackState,
+ currentPosition: value,
+ formattedCurrentPosition: mmss( value )
+ } );
+ player.seekToPlayer( value );
+ }}
/>
diff --git a/src/components/SharedComponents/Map.js b/src/components/SharedComponents/Map.js
index 7a441517f..4753854e0 100644
--- a/src/components/SharedComponents/Map.js
+++ b/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 )"
/>