style: recorder colors

lodev09 · May 13, 2024 · 526ad0d · 526ad0d
1 parent 7d8fb3e
commit 526ad0d
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 89 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Audio recorder sheet for your React Native apps ⏺️
 ## Installation
 
 ```sh
-npx expo install @lodev09/expo-recorder expo-av @lodev09/react-native-true-sheet react-native-reanimated react-native-gesture-handler
+npx expo install @lodev09/expo-recorder react-native-reanimated react-native-gesture-handler
 ```
 
 ## Usage

diff --git a/example/components/ThemedRecorderSheet.tsx b/example/components/ThemedRecorderSheet.tsx
@@ -37,6 +37,12 @@ export const ThemedRecorderSheet = forwardRef(
 
     const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'recorderSheet')
     const iconColor = useThemeColor({}, 'recorderIcon')
+    const tintColor = useThemeColor({}, 'recorderTint')
+    const timelineColor = useThemeColor({}, 'recorderTimeline')
+    const textColor = useThemeColor({}, 'text')
+    const recordBorderColor = useThemeColor({ light: 'rgba(0,0,0,0.3)' }, 'text')
+    const recorderBackgroundColor = useThemeColor({}, 'recorderBackground')
+
     const scale = useSharedValue(1)
 
     const toggleRecording = async () => {}
@@ -62,15 +68,21 @@ export const ThemedRecorderSheet = forwardRef(
         contentContainerStyle={[$sheetContent, { paddingBottom: insets.bottom + Spacing.md }]}
         {...rest}
       >
-        <Recorder ref={recorderRef} />
-        <Box row justify="space-between" align="center">
+        <Recorder
+          ref={recorderRef}
+          tintColor={tintColor}
+          timelineColor={timelineColor}
+          textColor={textColor}
+          backgroundColor={recorderBackgroundColor}
+        />
+        <Box row justify="space-between" align="center" mt={Spacing.lg}>
           <Box>
             <TouchableOpacity activeOpacity={0.8} style={$recordControl} onPress={() => undefined}>
               <Ionicons name="refresh" size={Spacing.xl} style={{ color: iconColor }} />
             </TouchableOpacity>
           </Box>
           <Box justify="center" align="center" mx={Spacing.xxl}>
-            <View style={$recordButtonBackground} />
+            <View style={[$recordButtonBackground, { borderColor: recordBorderColor }]} />
             <Pressable style={$recordButton} onPress={toggleRecording}>
               <Animated.View style={$recordIndicatorStyles} />
             </Pressable>

diff --git a/example/constants/Colors.ts b/example/constants/Colors.ts
@@ -15,6 +15,9 @@ export const Colors = {
     icon: '#687076',
     tabIconDefault: '#687076',
     tabIconSelected: tintColorLight,
+    recorderBackground: 'rgba(121, 135, 160, 0.2)',
+    recorderTimeline: 'rgba(0, 0, 0, 0.5)',
+    recorderTint: tintColorLight,
     recorderSheet: '#f9f9f9',
     recorderIcon: tintColorLight,
   },
@@ -26,6 +29,9 @@ export const Colors = {
     icon: '#9BA1A6',
     tabIconDefault: '#9BA1A6',
     tabIconSelected: tintColorDark,
+    recorderBackground: 'rgba(13, 14, 17, 0.5)',
+    recorderTimeline: 'rgba(255, 255, 255, 0.5)',
+    recorderTint: tintColorLight,
     recorderSheet: '#282e37',
     recorderIcon: tintColorDark,
   },

diff --git a/package.json b/package.json
@@ -56,9 +56,7 @@
   },
   "dependencies": {
     "date-fns": "*",
-    "expo-av": "*",
-    "react-native-gesture-handler": "^2",
-    "react-native-reanimated": "^3"
+    "expo-av": "*"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
@@ -78,6 +76,8 @@
     "react": "18.2.0",
     "react-native": "0.74.1",
     "react-native-builder-bob": "^0.20.0",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
     "release-it": "^15.0.0",
     "typescript": "~5.2.0"
   },
@@ -86,7 +86,9 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-gesture-handler": "^2",
+    "react-native-reanimated": "^3"
   },
   "workspaces": [
     "example"

diff --git a/src/Recorder.tsx b/src/Recorder.tsx
@@ -32,7 +32,7 @@ import {
 } from './helpers'
 
 export const Recorder = forwardRef((props: RecorderProps, ref: Ref<RecorderRef>) => {
-  const { ...rest } = props
+  const { backgroundColor, tintColor, timelineColor, textColor, ...rest } = props
 
   const recording = useRef<Audio.Recording>()
   const sound = useRef<Audio.Sound>()
@@ -267,17 +267,22 @@ export const Recorder = forwardRef((props: RecorderProps, ref: Ref<RecorderRef>)
         waveformMaxWidth={waveformMaxWidth}
         recording={isRecording}
         playing={isPlaying}
+        backgroundColor={backgroundColor}
+        tintColor={tintColor}
+        timelineColor={timelineColor}
         scrollX={scrollX}
       />
       <View style={{ padding: spacing.md, marginTop: spacing.xxl }}>
-        <Text style={$positionText}>{formatTimer(Math.round(position / 100) * 100, true)}</Text>
+        <Text style={[$positionText, { color: textColor ?? '#333333' }]}>
+          {formatTimer(Math.round(position / 100) * 100, true)}
+        </Text>
       </View>
     </View>
   )
 })
 
 const $positionText: TextStyle = {
   fontWeight: 'medium',
-  fontSize: spacing.xxl,
+  fontSize: 28,
   textAlign: 'center',
 }
diff --git a/src/Recorder.types.ts b/src/Recorder.types.ts
@@ -1,6 +1,11 @@
-import type { ViewProps } from 'react-native'
+import type { ColorValue, ViewProps } from 'react-native'
 
-export interface RecorderProps extends Omit<ViewProps, 'children'> {}
+export interface RecorderProps extends Omit<ViewProps, 'children'> {
+  backgroundColor?: ColorValue
+  tintColor?: ColorValue
+  timelineColor?: ColorValue
+  textColor?: ColorValue
+}
 
 export interface RecorderRef {
   startRecording: () => Promise<void>

diff --git a/src/RecorderProvider.tsx b/src/RecorderProvider.tsx
diff --git a/src/components/TimeIndicator.tsx b/src/components/TimeIndicator.tsx
@@ -1,13 +1,18 @@
 import React, { memo } from 'react'
-import { View, type ViewStyle } from 'react-native'
+import { View, type ColorValue, type ViewStyle } from 'react-native'
 
 import { TIMELINE_POSITION_INDICATOR_WIDTH, WAVEFORM_CONTAINER_HEIGHT, spacing } from '../helpers'
 
-export const TimeIndicator = memo(() => {
+interface TimeIndicatorProps {
+  color?: ColorValue
+}
+
+export const TimeIndicator = memo(({ color }: TimeIndicatorProps) => {
+  const backgroundColor = color ?? 'white'
   return (
-    <View style={$lineIndicator}>
-      <View style={[$dot, $top]} />
-      <View style={[$dot, $bottom]} />
+    <View style={[$lineIndicator, { backgroundColor }]}>
+      <View style={[$dot, { backgroundColor }, $top]} />
+      <View style={[$dot, { backgroundColor }, $bottom]} />
     </View>
   )
 })
@@ -16,17 +21,16 @@ const $lineIndicator: ViewStyle = {
   position: 'absolute',
   height: WAVEFORM_CONTAINER_HEIGHT,
   width: TIMELINE_POSITION_INDICATOR_WIDTH,
-  backgroundColor: 'blue',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
 }
 
 const $dot: ViewStyle = {
+  position: 'absolute',
   alignSelf: 'center',
   height: spacing.xs,
   width: spacing.xs,
-  backgroundColor: 'blue',
   borderRadius: spacing.xs / 2,
 }
 

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { View, type TextStyle, type ViewStyle, Text } from 'react-native'
+import { View, type TextStyle, type ViewStyle, Text, type ColorValue } from 'react-native'
 
 import {
   TIMELINES,
@@ -10,16 +10,28 @@ import {
   spacing,
 } from '../helpers'
 
-export const Timeline = memo(() => {
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0.5)'
+
+interface TimelineProps {
+  color?: ColorValue
+}
+
+export const Timeline = memo(({ color }: TimelineProps) => {
+  const timelineColor = color ?? DEFAULT_COLOR
+
   return (
     <View style={$container}>
       {TIMELINES.map((lineMs) => {
         const isSeconds = lineMs % 4 === 0
         const height = isSeconds ? spacing.sm : spacing.xs
         return (
           <View key={String(lineMs)}>
-            <View style={{ height, width: WAVEFORM_LINE_WIDTH, backgroundColor: 'gray' }} />
-            {isSeconds && <Text style={$timelineSeconds}>{formatTimer((lineMs / 4) * 1000)}</Text>}
+            <View style={{ height, width: WAVEFORM_LINE_WIDTH, backgroundColor: timelineColor }} />
+            {isSeconds && (
+              <Text style={[$timelineSeconds, { color: timelineColor }]}>
+                {formatTimer((lineMs / 4) * 1000)}
+              </Text>
+            )}
           </View>
         )
       })}
@@ -30,8 +42,7 @@ export const Timeline = memo(() => {
 const $timelineSeconds: TextStyle = {
   position: 'absolute',
   width: spacing.xxl,
-  fontSize: spacing.xs,
-  color: 'yellow',
+  fontSize: 14,
   bottom: 0,
 }
 

diff --git a/src/components/Waveform.tsx b/src/components/Waveform.tsx
@@ -31,7 +31,12 @@ import {
 import { TimeIndicator } from './TimeIndicator'
 import { Timeline } from './Timeline'
 
+const DEFAULT_BACKGROUND_COLOR = 'rgba(0, 0, 0, 0.2)'
+
 interface WaveformProps {
+  backgroundColor?: ColorValue
+  tintColor?: ColorValue
+  timelineColor?: ColorValue
   meterings: Metering[]
   recording: boolean
   playing: boolean
@@ -46,7 +51,16 @@ interface WaveformLineProps {
 }
 
 export const Waveform = (props: WaveformProps) => {
-  const { scrollX, waveformMaxWidth, meterings = [], recording, playing } = props
+  const {
+    backgroundColor,
+    tintColor,
+    timelineColor,
+    scrollX,
+    waveformMaxWidth,
+    meterings = [],
+    recording,
+    playing,
+  } = props
 
   const dimensions = useWindowDimensions()
 
@@ -98,7 +112,9 @@ export const Waveform = (props: WaveformProps) => {
     <GestureHandlerRootView style={$gestureHandler}>
       <GestureDetector gesture={pan}>
         <View>
-          <View style={$background} />
+          <View
+            style={[$background, { backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR }]}
+          />
           <Animated.View style={$waveformWrapper}>
             <View style={$waveformLineStyles}>
               {meterings.map(({ position, key, db }, index, arr) => (
@@ -112,9 +128,9 @@ export const Waveform = (props: WaveformProps) => {
                 />
               ))}
             </View>
-            <Timeline />
+            <Timeline color={timelineColor} />
           </Animated.View>
-          <TimeIndicator />
+          <TimeIndicator color={tintColor} />
         </View>
       </GestureDetector>
     </GestureHandlerRootView>
@@ -160,7 +176,6 @@ const $waveformLine: ViewStyle = {
 
 const $background: ViewStyle = {
   position: 'absolute',
-  backgroundColor: 'red',
   left: 0,
   right: 0,
   height: WAVEFORM_CONTAINER_HEIGHT,

diff --git a/src/helpers/constants.ts b/src/helpers/constants.ts
@@ -24,9 +24,12 @@ export const TIMELINE_POSITION_INDICATOR_WIDTH = 2
 export const WAVEFORM_LINE_WIDTH = 1
 
 export const TIMELINE_TOTAL_WIDTH_PER_250_MS = TIMELINE_GAP_PER_250_MS + WAVEFORM_LINE_WIDTH
-export const TIMELINES = Array.from<number>({
-  length: MAX_RECORDING_TIME / TIMELINE_MS_PER_LINE + 1,
-}).map((i) => i)
+export const TIMELINES = Array.from(
+  {
+    length: MAX_RECORDING_TIME / TIMELINE_MS_PER_LINE + 1,
+  },
+  (_, k) => k
+).map((i) => i)
 
 export const SPRING_SHORT_CONFIG: WithSpringConfig = {
   stiffness: 120,