feat: refactor time to be in millisecond

Author: AlirezaHadjar

README.md

@@ -71,7 +71,7 @@ startHaptic(
     {
       type: 'continuous',
       relativeTime: 0,
-      duration: 1.2,
+      duration: 1200,
       parameters: [
         { type: 'intensity', value: 0.2 },
         { type: 'sharpness', value: 0.5 },
@@ -83,9 +83,9 @@ startHaptic(
       type: 'intensity',
       relativeTime: 0,
       controlPoints: [
-        { relativeTime: 0.0, value: 0.2 },
-        { relativeTime: 0.6, value: 1.0 },
-        { relativeTime: 1.2, value: 0.2 },
+        { relativeTime: 0, value: 0.2 },
+        { relativeTime: 600, value: 1.0 },
+        { relativeTime: 1200, value: 0.2 },
       ],
     },
   ]
@@ -109,8 +109,8 @@ startHaptic(
     },
     {
       type: 'continuous',
-      relativeTime: 0.05,
-      duration: 0.8,
+      relativeTime: 50,
+      duration: 800,
       parameters: [
         { type: 'intensity', value: 0.2 },
         { type: 'sharpness', value: 0.4 },

example/src/components/RecordingTimeline.tsx

@@ -38,7 +38,8 @@ const TRANSIENT_INTENSITY_COLOR = '#00E5FF';
 const TRANSIENT_SHARPNESS_COLOR = '#FFB366';
 
 export const TIMELINE_WIDTH = SCREEN_WIDTH - 32;
-export const PIXELS_PER_SECOND = 100;
+export const PIXELS_PER_MILLISECOND = 0.1;
+const PIXELS_PER_SECOND = PIXELS_PER_MILLISECOND * 1000;
 export const PLAYHEAD_OFFSET = TIMELINE_WIDTH / 2;
 
 const DOWNSAMPLE_INTERVAL_PX = 1;
@@ -61,7 +62,7 @@ const LANE_GAP = 4;
 const LANE_PADDING = 6;
 
 const MAX_CONTENT_WIDTH =
-  PLAYHEAD_OFFSET + 120 * PIXELS_PER_SECOND + PLAYHEAD_OFFSET;
+  PLAYHEAD_OFFSET + 120000 * PIXELS_PER_MILLISECOND + PLAYHEAD_OFFSET; // 120 seconds in ms
 
 export default function RecordingTimeline({
   mode,
@@ -128,7 +129,7 @@ export default function RecordingTimeline({
       const userScrolling = isDragging.get() || isMomentumScrolling.get();
       if (!userScrolling) return;
 
-      const maxScroll = totalDuration.get() * PIXELS_PER_SECOND;
+      const maxScroll = totalDuration.get() * PIXELS_PER_MILLISECOND;
       const rawX = event.contentOffset.x;
       const clampedX = Math.min(Math.max(0, rawX), maxScroll);
 
@@ -143,8 +144,8 @@ export default function RecordingTimeline({
       scrollX.set(clampedX);
 
       // Haptic feedback at timeline marks
-      const currentTimeSeconds = clampedX / PIXELS_PER_SECOND;
-      const currentMark = Math.floor(currentTimeSeconds * 10); // 0.1s precision
+      const currentTimeMs = clampedX / PIXELS_PER_MILLISECOND;
+      const currentMark = Math.floor(currentTimeMs / 100); // 100ms precision
       const lastMark = lastHapticMark.get();
 
       if (currentMark !== lastMark) {
@@ -158,15 +159,15 @@ export default function RecordingTimeline({
         }
       }
 
-      onSeek(clampedX / PIXELS_PER_SECOND);
+      onSeek(clampedX / PIXELS_PER_MILLISECOND); // Already in milliseconds
     },
 
     onEndDrag: (event) => {
       isDragging.set(false);
 
       const m = mode.get();
       if (m === 'playback') {
-        const maxScroll = totalDuration.get() * PIXELS_PER_SECOND;
+        const maxScroll = totalDuration.get() * PIXELS_PER_MILLISECOND;
         if (event.contentOffset.x > maxScroll) {
           scrollX.set(maxScroll);
           scrollTo(scrollViewRef, maxScroll, 0, true);
@@ -191,12 +192,12 @@ export default function RecordingTimeline({
 
       const m = mode.get();
       if (m === 'playback') {
-        const maxScroll = totalDuration.get() * PIXELS_PER_SECOND;
+        const maxScroll = totalDuration.get() * PIXELS_PER_MILLISECOND;
         const currentScroll = scrollX.get();
         if (currentScroll > maxScroll) {
           scrollX.set(maxScroll);
           scrollTo(scrollViewRef, maxScroll, 0, true);
-          onSeek(totalDuration.get());
+          onSeek(totalDuration.get()); // Already in milliseconds
         }
       }
 
@@ -211,7 +212,7 @@ export default function RecordingTimeline({
       .get()
       .filter((e) => e.type === 'transient')
       .map((e) => ({
-        x: PLAYHEAD_OFFSET + e.timestamp * PIXELS_PER_SECOND,
+        x: PLAYHEAD_OFFSET + e.timestamp * PIXELS_PER_MILLISECOND,
         intensity: e.intensity,
         sharpness: e.sharpness,
       }));
@@ -224,7 +225,7 @@ export default function RecordingTimeline({
 
     for (const event of events.get()) {
       if (event.type === 'continuous_start') {
-        const x = PLAYHEAD_OFFSET + event.timestamp * PIXELS_PER_SECOND;
+        const x = PLAYHEAD_OFFSET + event.timestamp * PIXELS_PER_MILLISECOND;
         currentSegment = {
           points: [
             { x, intensity: event.intensity, sharpness: event.sharpness },
@@ -238,7 +239,7 @@ export default function RecordingTimeline({
           event.type === 'continuous_end') &&
         currentSegment
       ) {
-        const x = PLAYHEAD_OFFSET + event.timestamp * PIXELS_PER_SECOND;
+        const x = PLAYHEAD_OFFSET + event.timestamp * PIXELS_PER_MILLISECOND;
         currentSegment.endX = x;
 
         if (

example/src/contexts/RecorderContext.tsx

@@ -16,7 +16,7 @@ import {
   trimHapticDataFromSeekTime,
   hapticEventsToRecordingEvents,
 } from '../utils/hapticPlayback';
-import { PIXELS_PER_SECOND } from '../components/RecordingTimeline';
+import { PIXELS_PER_MILLISECOND } from '../components/RecordingTimeline';
 import { scheduleOnRN } from 'react-native-worklets';
 import { storage, STORAGE_KEYS } from '../utils/storage';
 
@@ -111,21 +111,21 @@ export function RecorderProvider({ children }: { children: ReactNode }) {
     const now = Date.now();
 
     if (mode.get() === 'recording' && isRecording.get()) {
-      const elapsed = (now - recordingStartTimestamp.get()) / 1000;
+      const elapsed = now - recordingStartTimestamp.get();
       recordingTime.set(elapsed);
-      scrollX.set(elapsed * PIXELS_PER_SECOND);
+      scrollX.set(elapsed * PIXELS_PER_MILLISECOND);
     } else if (mode.get() === 'playback' && isPlaying.get()) {
-      const elapsed = (now - playbackStartTimestamp.get()) / 1000;
+      const elapsed = now - playbackStartTimestamp.get();
       const newTime = playbackStartTime.get() + elapsed;
       const maxTime = playbackTotalDuration.get();
 
       if (newTime >= maxTime) {
         playbackTime.set(maxTime);
         isPlaying.set(false);
-        scrollX.set(maxTime * PIXELS_PER_SECOND);
+        scrollX.set(maxTime * PIXELS_PER_MILLISECOND);
       } else {
         playbackTime.set(newTime);
-        scrollX.set(newTime * PIXELS_PER_SECOND);
+        scrollX.set(newTime * PIXELS_PER_MILLISECOND);
       }
     }
   }, false);
@@ -379,7 +379,7 @@ export function RecorderProvider({ children }: { children: ReactNode }) {
     'worklet';
     isUserScrolling.set(false);
     const time = playbackTime.get();
-    scrollX.set(time * PIXELS_PER_SECOND);
+    scrollX.set(time * PIXELS_PER_MILLISECOND);
   };
 
   const deleteRecording = (id: string) => {

example/src/screens/Recorder.tsx

@@ -80,11 +80,11 @@ function RecorderContent() {
   const durationText = useDerivedValue(() => {
     const m = mode.get();
     if (m === 'recording') {
-      return `${recordingTime.get().toFixed(1)}s`;
+      return `${(recordingTime.get() / 1000).toFixed(1)}s`;
     }
     if (m === 'playback') {
-      const current = playbackTime.get();
-      const total = playbackTotalDuration.get();
+      const current = playbackTime.get() / 1000;
+      const total = playbackTotalDuration.get() / 1000;
       return `${current.toFixed(1)}s / ${total.toFixed(1)}s`;
     }
     return '';

example/src/utils/hapticPlayback.ts

@@ -76,13 +76,11 @@ export function hapticEventsToRecordingEvents(
       if (curves) {
         const intensityCurve = curves.find(
           (c) =>
-            c.type === 'intensity' &&
-            Math.abs(c.relativeTime - eventStart) < 0.001
+            c.type === 'intensity' && Math.abs(c.relativeTime - eventStart) < 1
         );
         const sharpnessCurve = curves.find(
           (c) =>
-            c.type === 'sharpness' &&
-            Math.abs(c.relativeTime - eventStart) < 0.001
+            c.type === 'sharpness' && Math.abs(c.relativeTime - eventStart) < 1
         );
 
         const intensityPoints = intensityCurve?.controlPoints ?? [];
@@ -106,7 +104,7 @@ export function hapticEventsToRecordingEvents(
           let intensityValue = intensity;
           if (intensityPoints.length > 0) {
             const exactPoint = intensityPoints.find(
-              (p) => Math.abs(p.relativeTime - t) < 0.001
+              (p) => Math.abs(p.relativeTime - t) < 1
             );
             if (exactPoint) {
               intensityValue = exactPoint.value;
@@ -134,7 +132,7 @@ export function hapticEventsToRecordingEvents(
           let sharpnessValue = sharpness;
           if (sharpnessPoints.length > 0) {
             const exactPoint = sharpnessPoints.find(
-              (p) => Math.abs(p.relativeTime - t) < 0.001
+              (p) => Math.abs(p.relativeTime - t) < 1
             );
             if (exactPoint) {
               sharpnessValue = exactPoint.value;

ios/Ahap.swift

@@ -53,20 +53,20 @@ class Ahap: HybridAhapSpec {
     return CHHapticEvent(
     eventType: eventType,
     parameters: parameters,
-    relativeTime: event.relativeTime,
-    duration: event.type == .continuous ? event.duration ?? 1.0 : 0
+    relativeTime: event.relativeTime / 1000.0,
+    duration: event.type == .continuous ? (event.duration ?? 1000.0) / 1000.0 : 0
     )
 }
 
 let hapticCurves = curves.map { curve -> CHHapticParameterCurve in
     let parameterID: CHHapticDynamicParameter.ID = (curve.type == .intensity) ? .hapticIntensityControl : .hapticSharpnessControl
     let controlPoints = curve.controlPoints.map { controlPoint -> CHHapticParameterCurve.ControlPoint in
-        return CHHapticParameterCurve.ControlPoint(relativeTime: controlPoint.relativeTime, value: Float(controlPoint.value))
+        return CHHapticParameterCurve.ControlPoint(relativeTime: controlPoint.relativeTime / 1000.0, value: Float(controlPoint.value))
     }
     return CHHapticParameterCurve(
         parameterID: parameterID,
         controlPoints: controlPoints,
-        relativeTime: curve.relativeTime
+        relativeTime: curve.relativeTime / 1000.0
     )
 }