chore: cleanup

apps/common-app/src/examples/DrumMachine/BGGradient.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { vec, Rect, Canvas, RadialGradient } from '@shopify/react-native-skia';
+
+const BGGradient = () => {
+  const canvasSize = useSharedValue({ width: 0, height: 0 });
+
+  const gradientRadius = useDerivedValue(() => canvasSize.value.width);
+  const gradientC = useDerivedValue(() => vec(canvasSize.value.width / 2, 0));
+
+  return (
+    <Canvas style={styles.canvas} onSize={canvasSize}>
+      <Rect
+        x={0}
+        y={0}
+        width={canvasSize.value.width}
+        height={canvasSize.value.height}
+      >
+        <RadialGradient
+          c={gradientC}
+          r={gradientRadius}
+          colors={['#333', '#222']}
+        />
+      </Rect>
+    </Canvas>
+  );
+};
+
+export default BGGradient;
+
+const styles = StyleSheet.create({
+  canvas: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});

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

@@ -1,5 +1,6 @@
 import { Canvas } from '@shopify/react-native-skia';
 import React, { useState, useCallback } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { GestureDetector } from 'react-native-gesture-handler';
 import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
@@ -11,6 +12,7 @@ import { size, initialBpm } from './constants';
 import NotesHighlight from './NotesHighlight';
 import PatternShape from './PatternShape';
 import useGestures from './useGestures';
+import BGGradient from './BGGradient';
 import PlayButton from './PlayButton';
 import usePlayer from './usePlayer';
 import presets from './presets';
@@ -95,7 +97,8 @@ const DrumMachine: React.FC = () => {
   const gesture = useGestures({ canvasRect, onPatternChange });
 
   return (
-    <View style={styles.screen}>
+    <SafeAreaView style={styles.screen}>
+      <BGGradient />
       <View style={styles.uiContainer}>
         <Select
           value={preset}
@@ -126,7 +129,10 @@ const DrumMachine: React.FC = () => {
               <PatternShape key={pattern.instrumentName} pattern={pattern} />
             ))}
             {player.isPlaying && (
-              <NotesHighlight progressSV={player.progressSV} />
+              <NotesHighlight
+                progressSV={player.progressSV}
+                playingNotes={player.playingNotes}
+              />
             )}
           </Canvas>
           <PlayButton
@@ -138,7 +144,7 @@ const DrumMachine: React.FC = () => {
         </View>
       </GestureDetector>
       <View style={styles.uiContainer} />
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -148,6 +154,7 @@ const styles = StyleSheet.create({
   screen: {
     backgroundColor: colors.background,
     flex: 1,
+    position: 'relative',
   },
   uiContainer: {
     padding: 24,

apps/common-app/src/examples/DrumMachine/NotesHighlight.tsx

@@ -1,39 +1,63 @@
 import React, { memo } from 'react';
-import { Circle } from '@shopify/react-native-skia';
+import { Circle, Paint } from '@shopify/react-native-skia';
 import { SharedValue, useDerivedValue } from 'react-native-reanimated';
 
 import { cPoint, buttonRadius } from './constants';
 import { getPointCX, getPointCY } from './utils';
 import instruments from './instruments';
+import { Instrument } from './types';
 
 interface NotesHighlightProps {
   progressSV: SharedValue<number>;
+  playingNotes: SharedValue<boolean[]>;
 }
 
 interface NoteHighlightProps {
-  radius: number;
+  index: number;
+  instrument: Instrument;
   progressSV: SharedValue<number>;
+  playingNotes: SharedValue<boolean[]>;
 }
 
 const NoteHighlight: React.FC<NoteHighlightProps> = (props) => {
-  const { radius, progressSV } = props;
+  const { instrument, progressSV, playingNotes } = props;
 
   const angle = useDerivedValue(
     () => progressSV.value * Math.PI * 2 - Math.PI / 2
   );
 
-  const cX = useDerivedValue(() => getPointCX(angle.value, radius, cPoint.x));
-  const cY = useDerivedValue(() => getPointCY(angle.value, radius, cPoint.y));
+  const cX = useDerivedValue(() =>
+    getPointCX(angle.value, instrument.radius, cPoint.x)
+  );
+  const cY = useDerivedValue(() =>
+    getPointCY(angle.value, instrument.radius, cPoint.y)
+  );
+
+  const r = useDerivedValue(() =>
+    playingNotes.value[props.index] ? buttonRadius * 1.5 : buttonRadius
+  );
 
-  return <Circle cx={cX} cy={cY} r={buttonRadius} color="#e5e5e5" />;
+  const color = useDerivedValue(() =>
+    playingNotes.value[props.index]
+      ? `${instrument.color}55`
+      : `${instrument.color}00`
+  );
+
+  return (
+    <Circle cx={cX} cy={cY} r={r}>
+      <Paint color="#e5e5e5" />
+      <Paint color={color} />
+    </Circle>
+  );
 };
 
 const NotesHighlight: React.FC<NotesHighlightProps> = (props) => (
   <>
-    {instruments.map((instrument) => (
+    {instruments.map((instrument, index) => (
       <NoteHighlight
+        index={index}
         key={instrument.name}
-        radius={instrument.radius}
+        instrument={instrument}
         {...props}
       />
     ))}

apps/common-app/src/examples/DrumMachine/PlayButton.tsx

@@ -27,8 +27,7 @@ interface PlayButtonInnerProps {
 }
 
 const timingOptions = {
-  duration: 10,
-  // easing: Easing.out(Easing.cubic),
+  duration: 25,
 };
 
 const PlayButtonInner: React.FC<PlayButtonInnerProps> = (props) => {

apps/common-app/src/examples/DrumMachine/usePlayer.tsx

@@ -96,7 +96,7 @@ export default function usePlayer(options: PlayerOptions) {
 
       progressSV.value = (timeDiff % totalLoopTime) / totalLoopTime;
 
-      if (currentTime - (nextNoteTime - timePerNote) > 0.15) {
+      if (currentTime - (nextNoteTime - timePerNote) > 0.05) {
         playingNotes.value = Array(r(patternsRef).length).fill(false);
       }
       if (currentTime + averageFrameTime >= nextNoteTime) {

packages/react-native-audio-api/common/cpp/core/AudioDestinationNode.cpp

@@ -24,7 +24,7 @@ bool AudioDestinationNode::processAudio(float *audioData, int32_t numFrames) {
   memset(audioData, 0.0f, sizeof(float) * numSamples);
 
   for (auto &node : inputNodes_) {
-    if (node->processAudio(mixingBuffer.get(), numFrames)) {
+    if (node && node->processAudio(mixingBuffer.get(), numFrames)) {
       VectorMath::add(audioData, mixingBuffer.get(), audioData, numSamples);
     }
   }

yarn.lock

@@ -6164,6 +6164,7 @@ __metadata:
     "@react-navigation/native-stack": "*"
     "@react-navigation/stack": "*"
     "@shopify/react-native-skia": "*"
+    "@swmansion/icons": "*"
     react: "*"
     react-dom: "*"
     react-native: "*"