Merge pull request #449 from software-mansion/main

Docs update

Author: michalsek

apps/common-app/src/examples/AudioFile/AudioFile.tsx

@@ -75,8 +75,8 @@ const AudioFile: FC = () => {
       });
       bufferSourceRef.current.buffer = audioBuffer;
       bufferSourceRef.current.loop = true;
-      bufferSourceRef.current.onended = (stopTime?: number) => {
-        setOffset((_prev) => stopTime || 0);
+      bufferSourceRef.current.onended = (event) => {
+        setOffset((_prev) => event.value || 0);
       };
       bufferSourceRef.current.loopStart = LOOP_START;
       bufferSourceRef.current.loopEnd = LOOP_END;
@@ -123,18 +123,44 @@ const AudioFile: FC = () => {
       duration: 10,
     });
 
-    AudioManager.enableRemoteCommand('play');
-    AudioManager.enableRemoteCommand('pause');
-    AudioManager.enableRemoteCommand('stop');
+    const remotePlaySubscription = AudioManager.enableSystemEvent(
+      'remotePlay',
+      (event) => {
+        console.log('remotePlay event:', event);
+      }
+    );
+
+    const remotePauseSubscription = AudioManager.enableSystemEvent(
+      'remotePause',
+      (event) => {
+        console.log('remotePause event:', event);
+      }
+    );
+
+    const remoteChangePlaybackPositionSubscription =
+      AudioManager.enableSystemEvent(
+        'remoteChangePlaybackPosition',
+        (event) => {
+          console.log('remoteChangePlaybackPosition event:', event);
+        }
+      );
+
+    const interruptionSubscription = AudioManager.enableSystemEvent(
+      'interruption',
+      (event) => {
+        console.log('Interruption event:', event);
+      }
+    );
 
-    AudioManager.enableRemoteEvent('interruption', (event) => {
-      console.log('Interruption event:', event);
-    });
     AudioManager.observeAudioInterruptions(true);
 
     fetchAudioBuffer();
 
     return () => {
+      remotePlaySubscription?.remove();
+      remotePauseSubscription?.remove();
+      remoteChangePlaybackPositionSubscription?.remove();
+      interruptionSubscription?.remove();
       audioContextRef.current?.close();
     };
   }, [fetchAudioBuffer]);

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

@@ -71,7 +71,9 @@ const Record: FC = () => {
       return;
     }
 
-    recorderRef.current.onAudioReady((buffer, numFrames, when) => {
+    recorderRef.current.onAudioReady((event) => {
+      const { buffer, numFrames, when } = event;
+
       console.log(
         'Audio recorder buffer ready:',
         buffer.duration,
@@ -81,14 +83,6 @@ const Record: FC = () => {
       audioBuffersRef.current.push(buffer);
     });
 
-    recorderRef.current.onError((error) => {
-      console.log('Audio recorder error:', error);
-    });
-
-    recorderRef.current.onStatusChange((status, previousStatus) => {
-      console.log('Audio recorder status changed:', status, previousStatus);
-    });
-
     recorderRef.current.start();
 
     setTimeout(() => {

apps/fabric-example/ios/Podfile.lock

@@ -1609,7 +1609,7 @@ PODS:
     - React-logger (= 0.77.1)
     - React-perflogger (= 0.77.1)
     - React-utils (= 0.77.1)
-  - RNAudioAPI (0.6.0-rc.5):
+  - RNAudioAPI (0.6.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1629,9 +1629,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNAudioAPI/audioapi (= 0.6.0-rc.5)
+    - RNAudioAPI/audioapi (= 0.6.0)
     - Yoga
-  - RNAudioAPI/audioapi (0.6.0-rc.5):
+  - RNAudioAPI/audioapi (0.6.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1651,9 +1651,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNAudioAPI/audioapi/ios (= 0.6.0-rc.5)
+    - RNAudioAPI/audioapi/ios (= 0.6.0)
     - Yoga
-  - RNAudioAPI/audioapi/ios (0.6.0-rc.5):
+  - RNAudioAPI/audioapi/ios (0.6.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2161,7 +2161,7 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: 41e9fb63606c32cce924653d2d410cb01ec81286
   ReactCodegen: 8cae67dac8144aa8d9d5bee12e55ead0fb73537f
   ReactCommon: 08f4808f02ff115884e870e5cfea689703ff759a
-  RNAudioAPI: 872637460cd5f7d8cafe5ab44a51b659b8a868f2
+  RNAudioAPI: a360b6e9626f23e8960baf015b3264dacaf28b1b
   RNGestureHandler: 8b1080a6db0be82dbca18550d6212b885bfab6b2
   RNReanimated: afed763d6c0b1916bfef1dbde4271ec0947dd376
   RNScreens: 0d4cb9afe052607ad0aa71f645a88bb7c7f2e64c

packages/audiodocs/docs/guides/lets-make-some-noise.mdx

@@ -108,7 +108,7 @@ import LetsMakeSomeNoiseSrc from '!!raw-loader!@site/src/examples/LetsMakeSomeNo
 In this guide, we have learned how to create a simple audio player using [`AudioContext`](/core/audio-context) and [``AudioBufferSourceNode``](/sources/audio-buffer-source-node) as well as how we can load audio data from a remote source. To sum up:
 
 - `AudioContext` is the main object that controls the audio graph.
-- the [`decodeAudioData`](/core/base-audio-context#decodeaudiodata) method can be used to load audio data from a remote resource in the form of an [`AudioBuffer`](sources/audio-buffer).
+- the [`decodeAudioData`](/core/base-audio-context#decodeaudiodata) method can be used to load audio data from a remote resource in the form of an [`AudioBuffer`](/sources/audio-buffer).
 - `AudioBufferSourceNode` can be used with any `AudioBuffer`.
 - In order to hear the sounds, we need to connect the source node to the destination node exposed by `AudioContext`.
 - We can control the playback of the sound using [`start`](/sources/audio-buffer-source-node#start) and [`stop`](/sources/audio-scheduled-source-node#stop) methods of the `AudioBufferSourceNode` (and other source nodes, which we will show later).

packages/audiodocs/docs/guides/noise-generation.mdx

@@ -89,6 +89,7 @@ The last noise type I would like to describe is brownian noise (also known as Br
 
 Brownian noise, similarly to pink one, decreases in power by $\dfrac{12dB}{octave}$ and sounds similar to waterfall. The implementation is taken from article by Zach Denton, [How to Generate Noise with the Web Audio API](https://noisehack.com/generate-noise-web-audio-api/):
 
+
 ```tsx
   const createBrownianNoise = () => {
     const aCtx = new AudioContext();

packages/audiodocs/docs/sources/audio-buffer.mdx

@@ -13,7 +13,7 @@ specific sample rate which is the quantity of frames that will play in one secon
 ![](/img/audioBuffer.png)
 
 It can be created from audio file using `decodeAudioData`, `decodeAudioDataSource` or from raw data using `constructor`.
-Once you have data in `AudioBuffer`, audio can be played by passing it to [`AudioBufferSourceNode`](/sources/audio-buffer-source-node).
+Once you have data in `AudioBuffer`, audio can be played by passing it to [`AudioBufferSourceNode`](audio-buffer-source-node).
 
 ## Constructor
 

packages/audiodocs/docusaurus.config.js

@@ -3,8 +3,8 @@
 
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
-const math = require('remark-math');
-const katex = require('rehype-katex');
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const webpack = require('webpack');
@@ -44,8 +44,8 @@ const config = {
           breadcrumbs: false,
           sidebarCollapsible: false,
           sidebarPath: require.resolve('./sidebars.js'),
-          remarkPlugins: [math],
-          rehypePlugins: [katex],
+          remarkPlugins: [remarkMath],
+          rehypePlugins: [rehypeKatex],
           editUrl:
             'https://github.com/software-mansion/react-native-audio-api/edit/main/packages/audiodocs/docs',
         },
@@ -109,6 +109,7 @@ const config = {
       copyright: `All trademarks and copyrights belong to their respective owners.`,
     },
     prism: {
+      additionalLanguages: ['bash'],
       theme: lightCodeTheme,
       darkTheme: darkCodeTheme,
     },
@@ -127,26 +128,26 @@ const config = {
 
           const raf = require('raf');
           raf.polyfill();
-
+        
           return {
             mergeStrategy: {
               'resolve.extensions': 'prepend',
             },
             plugins: [
               new webpack.DefinePlugin({
-                ...processMock,
-                __DEV__: 'false',
-                setImmediate: () => {},
+              ...processMock,
+              __DEV__: 'false',
               }),
             ],
             module: {
               rules: [
                 {
-                  test: /\.txt/,
+                  test: /\.txt$/,
                   type: 'asset/source',
                 },
                 {
                   test: /\.tsx?$/,
+                  use: 'babel-loader',
                 },
               ],
             },

packages/audiodocs/package.json

@@ -21,47 +21,48 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@docusaurus/core": "^2.4.3",
-    "@docusaurus/plugin-debug": "^2.4.3",
-    "@docusaurus/preset-classic": "^2.4.3",
-    "@docusaurus/theme-mermaid": "^2.4.3",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@mdx-js/react": "^1.6.22",
-    "@mui/material": "^5.12.0",
-    "@swmansion/t-rex-ui": "^0.0.13",
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/plugin-debug": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/theme-mermaid": "3.7.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mdx-js/react": "^3.0.0",
+    "@mui/material": "^7.1.0",
     "@shopify/react-native-skia": "1.10.2",
+    "@swmansion/t-rex-ui": "1.0.0",
     "@vercel/og": "^0.6.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-expo": "^9.2.2",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.0",
     "hast-util-is-element": "1.1.0",
+    "prism-react-renderer": "^2.1.0",
     "raf": "^3.4.1",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-colorful": "^5.6.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-native": "^0.71.4",
     "react-native-audio-api": "0.5.6",
     "react-native-gesture-handler": "^2.16.0",
     "react-native-reanimated": "^3.8.1",
     "react-native-web": "^0.18.12",
-    "rehype-katex": "5",
-    "remark-math": "3",
+    "rehype-katex": "7",
+    "remark-math": "6",
     "source-map": "^0.7.4",
     "source-map-loader": "^4.0.1",
     "usehooks-ts": "^2.9.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.3",
-    "@tsconfig/docusaurus": "^1.0.7",
+    "@docusaurus/module-type-aliases": "^3.7.0",
+    "@docusaurus/tsconfig": "3.7.0",
     "copy-webpack-plugin": "^11.0.0",
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
     "eslint-plugin-mdx": "^2.2.0",
     "prettier": "^2.8.4",
-    "typescript": "^4.7.4",
+    "typescript": "~5.2.2",
     "typescript-eslint": "^8.18.0",
     "webpack-cli": "^5.0.1"
   },