fix: bring back demo recorder playback ui

apps/common-app/src/demos/Record/Record.tsx

@@ -1,14 +1,17 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import {
+  AudioBuffer,
   AudioManager,
   RecordingNotificationManager,
 } from 'react-native-audio-api';
 
 import { Alert, StyleSheet, View } from 'react-native';
 import { Container } from '../../components';
 
-import { audioRecorder as Recorder } from '../../singletons';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+import { audioRecorder as Recorder, audioContext } from '../../singletons';
 import ControlPanel from './ControlPanel';
+import PlaybackVisualization from './PlaybackVisualization';
 import RecordingTime from './RecordingTime';
 import RecordingVisualization from './RecordingVisualization';
 import Status from './Status';
@@ -23,6 +26,10 @@ AudioManager.setAudioSessionOptions({
 const Record: FC = () => {
   const [state, setState] = useState<RecordingState>(RecordingState.Idle);
   const [hasPermissions, setHasPermissions] = useState<boolean>(false);
+  const [recordedBuffer, setRecordedBuffer] = useState<AudioBuffer | null>(
+    null
+  );
+  const currentPositionSV = useSharedValue(0);
 
   const setNotification = (paused: boolean) => {
     RecordingNotificationManager.show({
@@ -87,19 +94,51 @@ const Record: FC = () => {
     setState(RecordingState.Recording);
   }, []);
 
-  const onStopRecording = useCallback(() => {
-    Recorder.stop();
+  const onStopRecording = useCallback(async () => {
+    const info = Recorder.stop();
     RecordingNotificationManager.hide();
     setState(RecordingState.ReadyToPlay);
+
+    if (info.status !== 'success') {
+      Alert.alert('Error', `Failed to stop recording: ${info.message}`);
+      setRecordedBuffer(null);
+      return;
+    }
+
+    const audioBuffer = await audioContext.decodeAudioData(info.path);
+    setRecordedBuffer(audioBuffer);
   }, []);
 
   const onPlayRecording = useCallback(() => {
     if (state !== RecordingState.ReadyToPlay) {
       return;
     }
 
+    if (!recordedBuffer) {
+      Alert.alert('Error', 'No recorded audio to play.');
+      return;
+    }
+
+    const source = audioContext.createBufferSource();
+    source.buffer = recordedBuffer;
+    source.connect(audioContext.destination);
+    source.start(audioContext.currentTime + 0.1);
+
+    source.onEnded = () => {
+      setState(RecordingState.Idle);
+    };
+
+    setTimeout(() => {
+      currentPositionSV.value = 0;
+
+      withTiming(recordedBuffer.duration, {
+        duration: recordedBuffer.duration * 1000,
+        easing: Easing.linear,
+      });
+    }, 100);
+
     setState(RecordingState.Playing);
-  }, [state]);
+  }, [state, recordedBuffer, currentPositionSV]);
 
   const onToggleState = useCallback(
     (action: RecordingState) => {
@@ -187,16 +226,31 @@ const Record: FC = () => {
 
     return () => {
       Recorder.disableFileOutput();
+      Recorder.stop();
+      AudioManager.setAudioSessionActivity(false);
+      RecordingNotificationManager.hide();
     };
   }, []);
 
   return (
     <Container disablePadding>
       <Status state={state} />
       <View style={styles.spacerM} />
-      <RecordingTime state={state} />
-      <View style={styles.spacerS} />
-      <RecordingVisualization state={state} />
+      {[RecordingState.Playing, RecordingState.ReadyToPlay].includes(state) ? (
+        <>
+          <PlaybackVisualization
+            buffer={recordedBuffer}
+            currentPositionSeconds={currentPositionSV}
+            durationSeconds={recordedBuffer?.duration || 0}
+          />
+        </>
+      ) : (
+        <>
+          <RecordingTime state={state} />
+          <View style={styles.spacerS} />
+          <RecordingVisualization state={state} />
+        </>
+      )}
       <View style={styles.spacerM} />
       <ControlPanel state={state} onToggleState={onToggleState} />
     </Container>

apps/common-app/src/demos/Record/RecordingVisualization.tsx

@@ -257,7 +257,7 @@ const RecordingVisualization: React.FC<RecordingVisualizationProps> = ({
     if (barHeights.value.length !== numBars) {
       barHeights.value = new Array(numBars).fill(-1);
     }
-  }, [numBars]);
+  }, [numBars, barHeights]);
 
   useEffect(() => {
     if (numBars <= 0) {