Merge branch 'main' into fix/ios/framework-static-linkage

Author: maciejmakowski2003

.nvmrc

@@ -1 +1 @@
-v20.11.1
+v22.16.0

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

@@ -0,0 +1,137 @@
+import {
+  Canvas,
+  Group,
+  Path,
+  Skia,
+  useCanvasRef,
+  useCanvasSize,
+} from '@shopify/react-native-skia';
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { AudioBuffer } from 'react-native-audio-api';
+import { SharedValue, useDerivedValue } from 'react-native-reanimated';
+
+interface PlaybackVisualizationProps {
+  buffer: AudioBuffer | null;
+  currentPositionSeconds: SharedValue<number>;
+  durationSeconds: number;
+}
+
+const PlaybackVisualization: React.FC<PlaybackVisualizationProps> = (props) => {
+  const { buffer, currentPositionSeconds, durationSeconds } = props;
+  const canvasRef = useCanvasRef();
+  const { size } = useCanvasSize(canvasRef);
+
+  const bufferWaveform = useMemo(() => {
+    const height = size.height;
+    const width = size.width;
+
+    if (!buffer || width === 0 || height === 0) {
+      return [];
+    }
+
+    const channelData = buffer.getChannelData(0);
+    const barWidth = 2;
+    const barGap = 2;
+
+    const totalBars = Math.floor(width / (barWidth + barGap));
+    const samplesPerBar = Math.floor(channelData.length / totalBars);
+    let maxValue = 0;
+
+    const waveform = new Array(totalBars).fill(0);
+
+    for (let i = 0; i < channelData.length; i++) {
+      maxValue = Math.max(maxValue, Math.abs(channelData[i]));
+    }
+
+    for (let i = 0; i < totalBars; i++) {
+      const startSample = i * samplesPerBar;
+      const endSample = startSample + samplesPerBar;
+      let max = 0;
+
+      for (let j = startSample; j < endSample; j++) {
+        max = Math.max(max, Math.abs(channelData[j]));
+      }
+
+      const barHeight = (max / maxValue) * height * 0.8;
+      const x = i * (barWidth + barGap);
+      const y = (height - barHeight) / 2;
+
+      waveform[i] = { x, y, width: barWidth, height: barHeight };
+    }
+
+    return waveform;
+  }, [buffer, size.height, size.width]);
+
+  const bgPath = useMemo(() => {
+    const path = Skia.Path.Make();
+
+    bufferWaveform.forEach((bar) => {
+      path.moveTo(bar.x, bar.y);
+      path.lineTo(bar.x, bar.y + bar.height);
+    });
+
+    path.close();
+    return path;
+  }, [bufferWaveform]);
+
+  const progressPath = useDerivedValue(() => {
+    const path = Skia.Path.Make();
+
+    const totalBars = bufferWaveform.length;
+    const currentBar = Math.floor(
+      (currentPositionSeconds.value / durationSeconds) * totalBars
+    );
+
+    for (let i = 0; i < currentBar; i++) {
+      const bar = bufferWaveform[i];
+      path.moveTo(bar.x, bar.y);
+      path.lineTo(bar.x, bar.y + bar.height);
+    }
+
+    path.close();
+    return path;
+  }, [bufferWaveform, buffer]);
+
+  if (!buffer) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Canvas ref={canvasRef} style={styles.canvas}>
+        <Group>
+          <Path
+            path={bgPath}
+            color="rgba(255, 255, 255, 0.2)"
+            style="stroke"
+            strokeWidth={2}
+            strokeCap="round"
+          />
+          <Path
+            path={progressPath}
+            color="#00a9f0"
+            style="stroke"
+            strokeWidth={2}
+            strokeCap="round"
+          />
+        </Group>
+      </Canvas>
+    </View>
+  );
+};
+
+export default PlaybackVisualization;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    maxHeight: 250,
+    width: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+    flexDirection: 'column',
+  },
+  canvas: {
+    flex: 1,
+  },
+});

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

@@ -1,11 +1,17 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { AudioManager } from 'react-native-audio-api';
+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';
@@ -20,6 +26,28 @@ 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 updateNotification = (paused: boolean) => {
+    RecordingNotificationManager.show({
+      paused,
+    });
+  };
+
+  const setupNotification = (paused: boolean) => {
+    RecordingNotificationManager.show({
+      title: 'Recording Demo',
+      contentText: paused ? 'Paused recording' : 'Recording...',
+      paused,
+      smallIconResourceName: 'logo',
+      pauseIconResourceName: 'pause',
+      resumeIconResourceName: 'resume',
+      color: 0xff6200,
+    });
+  }
 
   const onStartRecording = useCallback(async () => {
     if (state !== RecordingState.Idle) {
@@ -47,6 +75,7 @@ const Record: FC = () => {
     }
 
     const result = Recorder.start();
+    setupNotification(false);
 
     if (result.status === 'success') {
       console.log('Recording started, file path:', result.path);
@@ -61,26 +90,61 @@ const Record: FC = () => {
 
   const onPauseRecording = useCallback(() => {
     Recorder.pause();
+    updateNotification(true);
     setState(RecordingState.Paused);
   }, []);
 
   const onResumeRecording = useCallback(() => {
     Recorder.resume();
+    updateNotification(false);
     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) => {
@@ -139,21 +203,60 @@ const Record: FC = () => {
     })();
   }, []);
 
+  useEffect(() => {
+    const pauseListener = RecordingNotificationManager.addEventListener(
+      'recordingNotificationPause',
+      () => {
+        console.log('Notification pause action received');
+        onPauseRecording();
+      }
+    );
+
+    const resumeListener = RecordingNotificationManager.addEventListener(
+      'recordingNotificationResume',
+      () => {
+        console.log('Notification resume action received');
+        onResumeRecording();
+      }
+    );
+
+    return () => {
+      pauseListener.remove();
+      resumeListener.remove();
+      RecordingNotificationManager.hide();
+    };
+  }, [onPauseRecording, onResumeRecording]);
+
   useEffect(() => {
     Recorder.enableFileOutput();
 
     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>