chore: in list + hidden stop button + extract wave form on play

Author: dprevost-LMI

example/src/App.tsx

@@ -127,10 +127,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);
@@ -225,6 +225,8 @@ const AppContainer = () => {
   const [list, setList] = useState<ListItem[]>([]);
   const [currentPlaybackSpeed, setCurrentPlaybackSpeed] =
     useState<PlaybackSpeedType>(1.0);
+  const [showAdvancedOptions, setShowAdvancedOptions] =
+    useState<boolean>(false);
 
   const { top, bottom } = useSafeAreaInsets();
   const styles = stylesheet({ top, bottom });
@@ -247,6 +249,10 @@ const AppContainer = () => {
     );
   };
 
+  const toggleAdvancedOptions = () => {
+    setShowAdvancedOptions(!showAdvancedOptions);
+  };
+
   const handleStopPlayersAndExtractors = async () => {
     const { stopPlayersAndExtractors } = useAudioPlayer();
     const hasStoppedAll: boolean[] = await stopPlayersAndExtractors();
@@ -277,23 +283,31 @@ const AppContainer = () => {
       <GestureHandlerRootView style={styles.appContainer}>
         <View style={styles.screenBackground}>
           <View style={styles.container}>
-            <View style={styles.simformImageContainer}>
+            <Pressable
+              style={styles.simformImageContainer}
+              onPress={toggleAdvancedOptions}>
               <Image
                 source={Icons.simform}
                 style={styles.simformImage}
                 resizeMode="contain"
               />
-              <Pressable
-                style={styles.playBackControlPressable}
-                onPress={handleStopPlayersAndExtractors}>
-                <FastImage
-                  source={Icons.stop}
-                  style={styles.stopAllButton}
-                  resizeMode="contain"
-                  tintColor={Colors.pink}
-                />
-              </Pressable>
-            </View>
+            </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>
+              </>
+            )}
             <ScrollView scrollEnabled={shouldScroll}>
               {list.map(item => (
                 <RenderListItem

example/src/styles.ts

@@ -54,7 +54,7 @@ const styles = (params: StyleSheetParams = {}) =>
       tintColor: Colors.white,
       alignSelf: 'flex-end',
     },
-    stopAllButton: {
+    pinkButtonImage: {
       height: scale(22),
       width: scale(22),
       tintColor: Colors.pink,
@@ -101,6 +101,17 @@ const styles = (params: StyleSheetParams = {}) =>
       justifyContent: 'space-around',
       flexDirection: 'row',
     },
+    stopAllRecordingContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+    },
+    stopAllRecordingTitle: {
+      fontSize: scale(20),
+      fontWeight: 'bold',
+      color: Colors.pink,
+      paddingLeft: scale(8),
+    },
     loadingText: {
       color: Colors.black,
     },

src/components/Waveform/Waveform.tsx

@@ -74,6 +74,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;
 
@@ -188,6 +189,7 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
           if (!isNil(waveforms) && !isEmpty(waveforms)) {
             setWaveform(waveforms);
             await preparePlayerAndGetDuration();
+            setWaveformExtracted(true);
           }
         }
       } catch (err) {
@@ -230,7 +232,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({