From c0f4eabfae06a7c1f258dd3f1f146d91ca8c15df Mon Sep 17 00:00:00 2001
From: David Prevost <david.prevost@goto.com>
Date: Sat, 9 Nov 2024 08:58:38 -0500
Subject: [PATCH] chore: in list + hidden stop button + extract wave form on
 play

---
 example/src/App.tsx                  | 35 ++++++++++++++++++++++++----
 example/src/styles.ts                | 11 +++++++++
 src/components/Waveform/Waveform.tsx |  8 ++++++-
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index c1d2f02..27be895 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -154,10 +154,10 @@ const RenderListItem = React.memo(
               onError={error => {
                 console.log('Error in static player:', error);
               }}
-              onCurrentProgressChange={(currentProgress, songDuration) => {
-                console.log(
-                  `currentProgress ${currentProgress}, songDuration ${songDuration}`
-                );
+              onCurrentProgressChange={(_currentProgress, _songDuration) => {
+                // console.log(
+                //   `currentProgress ${currentProgress}, songDuration ${songDuration}`
+                // );
               }}
               onChangeWaveformLoadState={state => {
                 setIsLoading(state);
@@ -253,6 +253,8 @@ const AppContainer = () => {
   const [nbOfRecording, setNumberOfRecording] = useState<number>(0);
   const [currentPlaybackSpeed, setCurrentPlaybackSpeed] =
     useState<PlaybackSpeedType>(1.0);
+  const [showAdvancedOptions, setShowAdvancedOptions] =
+    useState<boolean>(false);
 
   const { top, bottom } = useSafeAreaInsets();
   const styles = stylesheet({ top, bottom });
@@ -310,6 +312,10 @@ const AppContainer = () => {
     );
   };
 
+  const toggleAdvancedOptions = () => {
+    setShowAdvancedOptions(!showAdvancedOptions);
+  };
+
   const handleStopPlayersAndExtractors = async () => {
     const { stopPlayersAndExtractors } = useAudioPlayer();
     const hasStoppedAll: boolean[] = await stopPlayersAndExtractors();
@@ -340,12 +346,31 @@ const AppContainer = () => {
       <GestureHandlerRootView style={styles.appContainer}>
         <View style={styles.screenBackground}>
           <View style={styles.container}>
-            <View style={styles.headerContainer}>
+            <Pressable
+              style={styles.simformImageContainer}
+              onPress={toggleAdvancedOptions}>
               <Image
                 source={Icons.simform}
                 style={styles.simformImage}
                 resizeMode="contain"
               />
+            </Pressable>
+            {showAdvancedOptions && (
+              <>
+                <Pressable
+                  style={styles.stopAllRecordingContainer}
+                  onPress={handleStopPlayersAndExtractors}>
+                  <Image
+                    source={Icons.stop}
+                    style={styles.pinkButtonImage}
+                    resizeMode="contain"
+                  />
+                  <Text style={styles.stopAllRecordingTitle}>
+                    {'Stop all players and extractors'}
+                  </Text>
+                </Pressable>
+              </>
+            )}
               <Pressable
                 style={[
                   styles.deleteRecordingContainer,
diff --git a/example/src/styles.ts b/example/src/styles.ts
index 9d275e6..af3d92a 100644
--- a/example/src/styles.ts
+++ b/example/src/styles.ts
@@ -120,6 +120,17 @@ const styles = (params: StyleSheetParams = {}) =>
       color: Colors.pink,
       paddingLeft: scale(8),
     },
+    stopAllRecordingContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+    },
+    stopAllRecordingTitle: {
+      fontSize: scale(20),
+      fontWeight: 'bold',
+      color: Colors.pink,
+      paddingLeft: scale(8),
+    },
     loadingText: {
       color: Colors.black,
     },
diff --git a/src/components/Waveform/Waveform.tsx b/src/components/Waveform/Waveform.tsx
index cdc5b44..73e02cd 100644
--- a/src/components/Waveform/Waveform.tsx
+++ b/src/components/Waveform/Waveform.tsx
@@ -79,6 +79,7 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
   const [panMoving, setPanMoving] = useState(false);
   const [playerState, setPlayerState] = useState(PlayerState.stopped);
   const [recorderState, setRecorderState] = useState(RecorderState.stopped);
+  const [isWaveformExtracted, setWaveformExtracted] = useState(false);
   const audioSpeed: number =
     playbackSpeed > playbackSpeedThreshold ? 1.0 : playbackSpeed;
 
@@ -193,6 +194,7 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
           if (!isNil(waveforms) && !isEmpty(waveforms)) {
             setWaveform(waveforms);
             await preparePlayerAndGetDuration();
+            setWaveformExtracted(true);
           }
         }
       } catch (err) {
@@ -235,7 +237,11 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
     if (mode === 'static') {
       try {
         if (playerState === PlayerState.stopped) {
-          await preparePlayerForPath(currentProgress);
+          if (isWaveformExtracted) {
+            await preparePlayerForPath(currentProgress);
+          } else {
+            await getAudioWaveFormForPath(noOfSamples);
+          }
         }
 
         const play = await playPlayer({