feat: recorder optimizations

Author: AlirezaHadjar

example/app/import-modal.tsx

@@ -14,6 +14,18 @@ import { useRecorder } from '../src/contexts/RecorderContext';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
 import { recordedHapticSchema } from '../src/schemas/recordingSchema';
 import { ZodError } from 'zod';
+import { hapticEventsToRecordingEvents } from '../src/utils/hapticPlayback';
+import type { HapticEvent } from 'react-native-ahaps';
+
+const getDuration = (events: HapticEvent[]) => {
+  return events.reduce((maxTime, event) => {
+    const eventEnd =
+      event.type === 'continuous'
+        ? event.relativeTime + event.duration
+        : event.relativeTime;
+    return Math.max(maxTime, eventEnd);
+  }, 0);
+};
 
 export default function ImportModal() {
   const insets = useSafeAreaInsets();
@@ -48,12 +60,20 @@ export default function ImportModal() {
         return;
       }
 
-      // Create the recording object with the new title
+      const { events, curves } = validationResult.data;
+
+      const duration = getDuration(events);
+
+      const recordingEvents = hapticEventsToRecordingEvents(events, curves);
+
       const recording: RecordedHaptic = {
-        ...validationResult.data,
+        id: Date.now().toString(),
         name: title,
-        id: Date.now().toString(), // Generate new ID
-        createdAt: Date.now(), // Update timestamp
+        createdAt: Date.now(),
+        duration,
+        events,
+        curves,
+        recordingEvents,
       };
 
       // Import the recording

example/src/components/RecordingItem.tsx

@@ -53,7 +53,12 @@ export default function RecordingItem({
 
   const handleExport = async () => {
     try {
-      const jsonData = JSON.stringify(recording, null, 2);
+      // Only export the essential haptic data
+      const exportData = {
+        events: recording.events,
+        curves: recording.curves,
+      };
+      const jsonData = JSON.stringify(exportData, null, 2);
 
       await Share.share({
         message: jsonData,

example/src/components/RecordingsList.tsx

@@ -5,16 +5,19 @@ import {
   FlatList,
   TouchableOpacity,
 } from 'react-native';
+import { useAnimatedReaction, type SharedValue } from 'react-native-reanimated';
 import type { RecordedHaptic } from '../types/recording';
 import RecordingItem from './RecordingItem';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Link } from 'expo-router';
 import { KeyboardStickyView } from 'react-native-keyboard-controller';
+import { useState } from 'react';
+import { scheduleOnRN } from 'react-native-worklets';
 
 interface RecordingsListProps {
   recordings: RecordedHaptic[];
   selectedId: string | null;
-  playingId: string | null;
+  isPlaying: SharedValue<boolean>;
   onSelect: (id: string | null) => void;
   onPlay: (id: string) => void;
   onPause: (id: string) => void;
@@ -25,15 +28,27 @@ interface RecordingsListProps {
 export default function RecordingsList({
   recordings,
   selectedId,
-  playingId,
+  isPlaying,
   onSelect,
   onPlay,
   onPause,
   onDelete,
   onNameChange,
 }: RecordingsListProps) {
+  const [playingId, setPlayingId] = useState<string | null>(null);
   const insets = useSafeAreaInsets();
 
+  useAnimatedReaction(
+    () => isPlaying.get(),
+    (isPlaying) => {
+      if (isPlaying && selectedId) {
+        scheduleOnRN(setPlayingId, selectedId);
+      } else {
+        scheduleOnRN(setPlayingId, null);
+      }
+    }
+  );
+
   const handleSelect = (id: string) => {
     if (selectedId === id) {
       onSelect(null);

example/src/contexts/RecorderContext.tsx

@@ -7,14 +7,8 @@ import {
 } from 'react-native-reanimated';
 import type { RecordedHaptic, RecordingEvent } from '../types/recording';
 import type { HapticEvent, HapticCurve } from 'react-native-ahaps';
-import {
-  startHaptic,
-  stopAllHaptics,
-} from 'react-native-ahaps';
-import {
-  trimHapticDataFromSeekTime,
-  hapticEventsToRecordingEvents,
-} from '../utils/hapticPlayback';
+import { startHaptic, stopAllHaptics } from 'react-native-ahaps';
+import { trimHapticDataFromSeekTime } from '../utils/hapticPlayback';
 import { PIXELS_PER_MILLISECOND } from '../components/RecordingTimeline';
 import { scheduleOnRN } from 'react-native-worklets';
 import { storage, STORAGE_KEYS } from '../utils/storage';
@@ -60,7 +54,6 @@ const RecorderContext = createContext<RecorderContextValue | null>(null);
 
 export function RecorderProvider({ children }: { children: ReactNode }) {
   const [recordings, _setRecordings] = useState<RecordedHaptic[]>(() => {
-    // Load recordings from MMKV on initial mount
     try {
       const stored = storage.getString(STORAGE_KEYS.RECORDINGS);
       if (stored) {
@@ -172,9 +165,6 @@ export function RecorderProvider({ children }: { children: ReactNode }) {
 
     isRecording.set(false);
 
-    // Note: The continuous player is managed by MiniContinuousPalette
-    // and will be stopped automatically when the gesture ends
-
     let events = recordingEvents.get();
 
     if (wasContinuousActive) {
@@ -204,14 +194,13 @@ export function RecorderProvider({ children }: { children: ReactNode }) {
       duration,
       events: hapticEvents,
       curves: hapticCurves,
+      recordingEvents: events,
     };
 
     scheduleOnRN(addRecordingAndSelect, newRecording);
 
     mode.set('playback');
-    playbackEvents.set(
-      hapticEventsToRecordingEvents(hapticEvents, hapticCurves)
-    );
+    playbackEvents.set(events);
     playbackTotalDuration.set(duration);
     playbackTime.set(0);
     playbackStartTime.set(0);
@@ -293,9 +282,7 @@ export function RecorderProvider({ children }: { children: ReactNode }) {
       const recording = recordings.find((r) => r.id === id);
       if (recording) {
         mode.set('playback');
-        playbackEvents.set(
-          hapticEventsToRecordingEvents(recording.events, recording.curves)
-        );
+        playbackEvents.set(recording.recordingEvents);
         playbackTotalDuration.set(recording.duration);
         playbackTime.set(0);
         playbackStartTime.set(0);

example/src/schemas/recordingSchema.ts

@@ -1,52 +1,41 @@
 import { z } from 'zod';
 
-// Schema for haptic event parameters
 const hapticEventParameterSchema = z.object({
   type: z.enum(['intensity', 'sharpness']),
   value: z.number().min(0).max(1),
 });
 
-// Schema for transient haptic event
 const transientHapticEventSchema = z.object({
   type: z.literal('transient'),
   parameters: z.array(hapticEventParameterSchema),
   relativeTime: z.number().min(0),
 });
 
-// Schema for continuous haptic event
 const continuousHapticEventSchema = z.object({
   type: z.literal('continuous'),
   parameters: z.array(hapticEventParameterSchema),
   relativeTime: z.number().min(0),
   duration: z.number().min(0),
 });
 
-// Discriminated union for haptic events
 const hapticEventSchema = z.discriminatedUnion('type', [
   transientHapticEventSchema,
   continuousHapticEventSchema,
 ]);
 
-// Schema for haptic curve control points
 const hapticCurveControlPointSchema = z.object({
   relativeTime: z.number().min(0),
   value: z.number().min(0).max(1),
 });
 
-// Schema for haptic curves
 const hapticCurveSchema = z.object({
   type: z.enum(['intensity', 'sharpness']),
   controlPoints: z.array(hapticCurveControlPointSchema),
   relativeTime: z.number().min(0),
 });
 
-// Schema for recorded haptic
 export const recordedHapticSchema = z.object({
-  id: z.string().min(1),
-  name: z.string().min(1),
-  createdAt: z.number().positive(),
-  duration: z.number().min(0),
-  events: z.array(hapticEventSchema).min(0),
+  events: z.array(hapticEventSchema).min(1),
   curves: z.array(hapticCurveSchema).min(0),
 });
 

example/src/screens/Recorder.tsx

@@ -1,7 +1,6 @@
 import { View, StyleSheet, Text, Dimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDerivedValue } from 'react-native-reanimated';
-import { useState, useEffect } from 'react';
 import MiniTransientPalette from '../components/MiniTransientPalette';
 import MiniContinuousPalette from '../components/MiniContinuousPalette';
 import RecordingTimeline from '../components/RecordingTimeline';
@@ -50,19 +49,6 @@ function RecorderContent() {
     renameRecording,
   } = useRecorder();
 
-  const [playingId, setPlayingId] = useState<string | null>(null);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (isPlaying.get() && selectedRecordingId) {
-        setPlayingId(selectedRecordingId);
-      } else {
-        setPlayingId(null);
-      }
-    }, 50);
-    return () => clearInterval(interval);
-  }, [isPlaying, selectedRecordingId]);
-
   const currentTime = useDerivedValue(() => {
     const m = mode.get();
     if (m === 'recording') return recordingTime.get();
@@ -208,7 +194,7 @@ function RecorderContent() {
       <RecordingsList
         recordings={recordings}
         selectedId={selectedRecordingId}
-        playingId={playingId}
+        isPlaying={isPlaying}
         onSelect={selectRecording}
         onPlay={handlePlayRecording}
         onPause={handlePauseRecording}

example/src/types/recording.ts

@@ -7,6 +7,7 @@ export interface RecordedHaptic {
   duration: number;
   events: HapticEvent[];
   curves: HapticCurve[];
+  recordingEvents: RecordingEvent[];
 }
 
 export interface RecordingEvent {