@magmamath/students-features 1.7.9 → 1.7.10-rc.1

package/src/features/voice/helpers.ts

@@ -8,7 +8,12 @@ import {
 } from 'expo-audio'
 import * as FileSystem from 'expo-file-system'
 import { VoicePlayerApi, VoiceRecorderApi } from './types'
-import { VOICE_RECORDER_MAX_DURATION_MS } from './constants'
+import {
+  METERING_UPDATE_INTERVAL_MS,
+  VOICE_RECORDER_MAX_DURATION_MS,
+  VOICE_WAVEFORM,
+  WEB_METERING_FFT_SIZE,
+} from './constants'
 import { PlayerState } from './playing/model'
 import { AudioStatus } from '../chatbot'
 import { AxiosResponse } from 'axios'
@@ -20,6 +25,85 @@ export const formatDuration = (ms: number): string => {
   return `${minutes}:${seconds.toString().padStart(2, '0')}`
 }
 
+// Maps a metering value (dBFS, roughly -160..0) to a 0..1 bar level.
+// Anything at or below the floor reads as silence (MIN_LEVEL dots).
+export const normalizeMetering = (metering: number | null | undefined): number => {
+  if (metering === null || metering === undefined || Number.isNaN(metering)) {
+    return VOICE_WAVEFORM.MIN_LEVEL
+  }
+
+  const range = -VOICE_WAVEFORM.METERING_FLOOR_DB
+  const ratio = (metering - VOICE_WAVEFORM.METERING_FLOOR_DB) / range
+  return Math.max(VOICE_WAVEFORM.MIN_LEVEL, Math.min(1, ratio))
+}
+
+type WebMediaRecorderHolder = { mediaRecorder: MediaRecorder }
+
+// expo-audio's web AudioRecorder keeps its MediaRecorder on a public (but
+// untyped) field. Reach for it defensively — if the internals change after an
+// upgrade, we fall back to our own getUserMedia stream.
+const hasWebMediaRecorder = (value: unknown): value is WebMediaRecorderHolder => {
+  if (typeof value !== 'object' || value === null) return false
+  if (typeof MediaRecorder === 'undefined') return false
+  return 'mediaRecorder' in value && value.mediaRecorder instanceof MediaRecorder
+}
+
+type MeteringCallback = (decibels: number | null) => void
+
+const computeStreamDecibels = (analyser: AnalyserNode, samples: Float32Array): number => {
+  analyser.getFloatTimeDomainData(samples)
+  const sumOfSquares = samples.reduce((acc, value) => acc + value * value, 0)
+  const rms = Math.sqrt(sumOfSquares / samples.length)
+  return rms > 0 ? 20 * Math.log10(rms) : VOICE_WAVEFORM.METERING_FLOOR_DB
+}
+
+// expo-audio does not implement metering on web, so we measure the input level
+// ourselves with the Web Audio API. Prefers the recorder's own MediaStream;
+// falls back to a dedicated getUserMedia capture (permission is already
+// granted at this point because recording is in progress).
+export const createWebMeteringMonitor = (
+  recorder: AudioRecorder,
+  onMetering: MeteringCallback,
+): (() => void) => {
+  if (!IS_WEB || typeof AudioContext === 'undefined') return () => {}
+
+  let isDisposed = false
+  let context: AudioContext | null = null
+  let ownedStream: MediaStream | null = null
+  let intervalId: ReturnType<typeof setInterval> | null = null
+
+  const start = async () => {
+    const recorderStream = hasWebMediaRecorder(recorder) ? recorder.mediaRecorder.stream : null
+    const stream = recorderStream ?? (await navigator.mediaDevices.getUserMedia({ audio: true }))
+
+    if (isDisposed) {
+      if (!recorderStream) stream.getTracks().forEach((track) => track.stop())
+      return
+    }
+    if (!recorderStream) ownedStream = stream
+
+    context = new AudioContext()
+    const analyser = context.createAnalyser()
+    analyser.fftSize = WEB_METERING_FFT_SIZE
+    context.createMediaStreamSource(stream).connect(analyser)
+
+    const samples = new Float32Array(analyser.fftSize)
+    intervalId = setInterval(() => {
+      onMetering(computeStreamDecibels(analyser, samples))
+    }, METERING_UPDATE_INTERVAL_MS)
+  }
+
+  start().catch(() => onMetering(null))
+
+  return () => {
+    isDisposed = true
+    if (intervalId) clearInterval(intervalId)
+    ownedStream?.getTracks().forEach((track) => track.stop())
+    context?.close().catch(() => {})
+    onMetering(null)
+  }
+}
+
 export const ensureRecordingPermissions = async () => {
   const { status } = await getRecordingPermissionsAsync()
 

package/src/features/voice/index.ts

@@ -1,7 +1,14 @@
 export * from './recording/components/VoiceRecord'
+export * from './recording/components/VoiceRecordWithTranscript'
+export * from './recording/components/VoiceWaveform'
+export * from './recording/components/VoiceTranscriptPanel'
+export * from './recording/hooks/useVoiceWaveform'
 export * from './recording/model/VoiceRecord.model'
+export * from './recording/model/VoiceRecordWithTranscript.model'
+export * from './recording/model/VoiceTranscriptPanel.model'
 export * from './recording/modal/VoiceRecordDeleteModal'
 export * from './recording/modal/VoiceRecordUndoModal'
+export * from './transcript.helpers'
 
 export * from './playing/model/VoicePlayer.model'
 export * from './playing/components/VoiceTranscription'

package/src/features/voice/playing/components/VoiceTranscriptContent.tsx

@@ -8,33 +8,41 @@ import {
 } from '@magmamath/react-native-ui'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import Animated, { FadeIn } from 'react-native-reanimated'
 
 type VoiceTranscriptContentProps = {
   text: string
   isLoading: boolean
+  numberOfLines?: number
 }
 
-export const VoiceTranscriptContent = ({ text, isLoading }: VoiceTranscriptContentProps) => {
+export const VoiceTranscriptContent = ({
+  text,
+  isLoading,
+  numberOfLines,
+}: VoiceTranscriptContentProps) => {
   if (isLoading) {
     return (
       <View style={styles.loaderContainer}>
-        <Loader size={LoaderSize.SMALL} color={LoaderColor.BLUE} />
+        <Loader size={LoaderSize.SMALL} color={LoaderColor.GRAY} />
       </View>
     )
   }
 
   return (
-    <Typography variant="h8" style={styles.text}>
-      {text}
-    </Typography>
+    <Animated.View entering={FadeIn.duration(400)}>
+      <Typography variant="h8" style={styles.text} numberOfLines={numberOfLines}>
+        {text}
+      </Typography>
+    </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
   text: {
-    color: COLORS.NEUTRAL_7,
-    paddingHorizontal: SPACING[200],
-    paddingVertical: SPACING[200],
+    color: COLORS.NEUTRAL_9,
+    paddingVertical: SPACING[100],
+    marginRight: SPACING[200],
   },
   loaderContainer: {
     justifyContent: 'center',

package/src/features/voice/playing/model/TranscriptionsDownloader.model.ts

@@ -1,13 +1,7 @@
 import { createEffect } from 'effector'
 import { TranscriptionsCollection } from './TranscriptionsCollection'
-import { TranscriptionStatus, VoicePlayerApi } from '../../types'
-import {
-  NO_AUDIO_BE_MESSAGE,
-  TRANSCRIPT_MAX_RETRIES,
-  TRANSCRIPT_RETRY_INTERVAL_MS,
-} from '../../constants'
-
-type TranscriptResult = { text: string; language?: string }
+import { VoicePlayerApi } from '../../types'
+import { fetchTranscriptWithRetry, TranscriptResult } from '../../transcript.helpers'
 
 export class TranscriptionsDownloaderModel {
   private readonly collection: TranscriptionsCollection
@@ -20,14 +14,17 @@ export class TranscriptionsDownloaderModel {
     this.api = api
   }
 
-  private async fetchTranscriptWithRetry(audioFileId: string): Promise<TranscriptResult> {
+  private async fetchTranscript(audioFileId: string): Promise<TranscriptResult> {
     const cached = this.transcriptCache.get(audioFileId)
     if (cached) return cached
 
     const existing = this.inflightFetches.get(audioFileId)
     if (existing) return existing
 
-    const promise = this.runFetchWithRetry(audioFileId)
+    const promise = fetchTranscriptWithRetry(
+      (id) => this.api.getAudioFileTranscript(id),
+      audioFileId,
+    )
       .then((result) => {
         this.transcriptCache.set(audioFileId, result)
         return result
@@ -39,25 +36,6 @@ export class TranscriptionsDownloaderModel {
     return promise
   }
 
-  private async runFetchWithRetry(audioFileId: string): Promise<TranscriptResult> {
-    for (let attempt = 0; attempt < TRANSCRIPT_MAX_RETRIES; attempt++) {
-      const response = await this.api.getAudioFileTranscript(audioFileId)
-
-      if (response.status === TranscriptionStatus.COMPLETED) {
-        return { text: response.text, language: response.language }
-      }
-
-      if (response.status === TranscriptionStatus.FAILED) {
-        return { text: NO_AUDIO_BE_MESSAGE }
-      }
-
-      if (attempt < TRANSCRIPT_MAX_RETRIES - 1) {
-        await new Promise((resolve) => setTimeout(resolve, TRANSCRIPT_RETRY_INTERVAL_MS))
-      }
-    }
-    return { text: NO_AUDIO_BE_MESSAGE }
-  }
-
   public readonly loadTranscriptForAttempt = createEffect(async (attemptNumber: number) => {
     const item = this.collection.get(attemptNumber)
     if (!item?.audioFileId) return
@@ -66,7 +44,7 @@ export class TranscriptionsDownloaderModel {
     this.collection.update(attemptNumber, { transcriptLoading: true })
 
     try {
-      const { text, language } = await this.fetchTranscriptWithRetry(item.audioFileId)
+      const { text, language } = await this.fetchTranscript(item.audioFileId)
 
       this.collection.update(attemptNumber, {
         transcript: text,

package/src/features/voice/recording/components/VoiceRecordWithTranscript.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+import { SPACING } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+
+import { RecordButtonVariant } from '../../types'
+import { VoiceRecordWithTranscriptModel } from '../model/VoiceRecordWithTranscript.model'
+import { VoiceRecord } from './VoiceRecord'
+import { VoiceTranscriptPanel } from './VoiceTranscriptPanel'
+
+type VoiceRecordWithTranscriptProps = {
+  model: VoiceRecordWithTranscriptModel
+  buttonVariant: RecordButtonVariant
+  style?: StyleProp<ViewStyle>
+  panelStyle?: StyleProp<ViewStyle>
+}
+
+// Drop-in replacement for VoiceRecord that opens the waveform/transcript panel
+// to the right of the record control (per the "Voice on Drawboard" design).
+export const VoiceRecordWithTranscript = ({
+  model,
+  buttonVariant,
+  style,
+  panelStyle,
+}: VoiceRecordWithTranscriptProps) => {
+  const metering = useUnit(model.record.recorderModel.$metering)
+
+  return (
+    <View style={[styles.container, style]}>
+      <VoiceRecord model={model.record} buttonVariant={buttonVariant} />
+      <VoiceTranscriptPanel
+        model={model.panel}
+        metering={metering}
+        style={[styles.panel, panelStyle]}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  // Hug the record control so the panel's `left: 100%` lands right next to it
+  container: {
+    alignSelf: 'flex-start',
+  },
+  panel: {
+    position: 'absolute',
+    left: '100%',
+    top: 0,
+    marginLeft: SPACING[200],
+  },
+})

package/src/features/voice/recording/components/VoiceTranscriptPanel.tsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useState } from 'react'
+import {
+  LayoutChangeEvent,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+import {
+  BORDER_RADIUS,
+  CaretDownIcon,
+  COLORS,
+  Loader,
+  LoaderColor,
+  LoaderSize,
+  ScrollableListScrollView,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import Animated, {
+  Easing,
+  FadeIn,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated'
+
+import { useText } from '../../../../i18n/i18n'
+import { VOICE_TRANSCRIPT_PANEL } from '../../constants'
+import { VoiceTranscriptContent } from '../../playing/components/VoiceTranscriptContent'
+import { useTranscriptPanelAnimation } from '../hooks/useTranscriptPanelAnimation'
+import { useVoiceWaveform } from '../hooks/useVoiceWaveform'
+import { VoiceTranscriptPanelModel } from '../model/VoiceTranscriptPanel.model'
+import { VoiceWaveform } from './VoiceWaveform'
+
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)
+
+const RECORDING_DOT_SIZE = 8
+const BLINK_DURATION_MS = 700
+const RECORDING_DOT_MIN_OPACITY = 0.2
+const CARET_SIZE = 22
+
+const PREVIEW_LINE_COUNT = 3
+// Cosmetic only (fade overlay height) — roughly the Typography h8 line height
+const PREVIEW_LINE_HEIGHT = 19.6
+const PREVIEW_FADE_WIDTH = 72
+const PREVIEW_FADE_STRIPES_COUNT = 12
+// Rounding slack when comparing the two measured text heights
+const PREVIEW_HEIGHT_TOLERANCE = 2
+
+const WAVEFORM_WIDTH =
+  VOICE_TRANSCRIPT_PANEL.WIDTH - SPACING[200] * 2 - RECORDING_DOT_SIZE - SPACING[200]
+
+const RecordingDot = () => {
+  const opacity = useSharedValue(1)
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withTiming(RECORDING_DOT_MIN_OPACITY, {
+        duration: BLINK_DURATION_MS,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      -1,
+      true,
+    )
+  }, [opacity])
+
+  // Explicit deps: consumers compile this library without the Reanimated Babel plugin
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }), [opacity])
+
+  return <Animated.View style={[styles.recordingDot, animatedStyle]} />
+}
+
+// Stripes of the panel background with rising opacity imitate the text
+// dissolving at the end of the last preview line (no gradient dependency)
+const PreviewLineFade = () => (
+  <View style={styles.previewFade} pointerEvents="none">
+    {Array.from({ length: PREVIEW_FADE_STRIPES_COUNT }, (_, index) => (
+      <View
+        key={index}
+        style={[styles.previewFadeStripe, { opacity: (index + 1) / PREVIEW_FADE_STRIPES_COUNT }]}
+      />
+    ))}
+  </View>
+)
+
+type VoiceTranscriptPanelProps = {
+  model: VoiceTranscriptPanelModel
+  metering: number | null
+  style?: StyleProp<ViewStyle>
+}
+
+export const VoiceTranscriptPanel = ({ model, metering, style }: VoiceTranscriptPanelProps) => {
+  const t = useText()
+  const { flags, transcript, hasError, isExpanded } = useUnit({
+    flags: model.$flags,
+    transcript: model.$transcript,
+    hasError: model.$hasError,
+    isExpanded: model.dropdown.$isExpanded,
+  })
+
+  const [fullTextHeight, setFullTextHeight] = useState(0)
+  const [previewHeight, setPreviewHeight] = useState(0)
+
+  const levels = useVoiceWaveform({ metering, isActive: flags.isRecording })
+  const panelAnimation = useTranscriptPanelAnimation(isExpanded)
+
+  if (!flags.isOpen) return null
+
+  const transcriptText = hasError ? t('voice.transcriptNotAvailable') : transcript
+
+  // Both heights are measured, so the comparison stays correct regardless of
+  // the text's font metrics or paddings
+  const isTruncated =
+    fullTextHeight > 0 &&
+    previewHeight > 0 &&
+    fullTextHeight > previewHeight + PREVIEW_HEIGHT_TOLERANCE
+
+  const measureFullText = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout
+    if (height > 0) setFullTextHeight(height)
+  }
+
+  const measurePreview = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout
+    // Expanded shows the full text — only the collapsed (3-line) layout counts
+    if (height > 0 && !isExpanded) setPreviewHeight(height)
+  }
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      style={[styles.container, panelAnimation.containerAnimatedStyle, style]}
+    >
+      {flags.isRecording && (
+        <View style={styles.recordingRow}>
+          <RecordingDot />
+          <VoiceWaveform levels={levels} width={WAVEFORM_WIDTH} />
+        </View>
+      )}
+
+      {flags.isProcessing && (
+        <View style={styles.processing}>
+          <Loader size={LoaderSize.SMALL} color={LoaderColor.BLUE} />
+          <Typography variant="h8" style={styles.processingText}>
+            {`${t('voice.preparingTranscript')}...`}
+          </Typography>
+        </View>
+      )}
+
+      {flags.isDone && (
+        <View>
+          {/* Invisible twin at the preview width measures the untruncated
+              text height — onTextLayout is not implemented on web */}
+          <View
+            style={[styles.contentCollapsed, styles.fullTextMeasure]}
+            pointerEvents="none"
+            onLayout={measureFullText}
+          >
+            <VoiceTranscriptContent text={transcriptText} isLoading={false} />
+          </View>
+          <Typography variant="h5" style={styles.title}>
+            {t('voice.transcriptions')}
+          </Typography>
+          {/* The text stays mounted across toggles and snaps to its final
+              fixed width; the panel frame catches up with explicit
+              width/height animations, clipping via overflow: hidden. */}
+          <Animated.View style={[styles.transcriptBody, panelAnimation.bodyAnimatedStyle]}>
+            <View
+              style={[
+                styles.transcriptBodyInner,
+                isExpanded ? styles.contentExpanded : styles.contentCollapsed,
+              ]}
+              onLayout={panelAnimation.onContentLayout}
+            >
+              <ScrollableListScrollView
+                style={styles.transcriptScroll}
+                scrollbarWidth={VOICE_TRANSCRIPT_PANEL.SCROLLBAR_WIDTH}
+                scrollEnabled={isExpanded}
+                hideShadow
+              >
+                <View onLayout={measurePreview}>
+                  <VoiceTranscriptContent
+                    text={transcriptText}
+                    isLoading={false}
+                    numberOfLines={isExpanded ? undefined : PREVIEW_LINE_COUNT}
+                  />
+                </View>
+              </ScrollableListScrollView>
+              {!isExpanded && isTruncated && <PreviewLineFade />}
+            </View>
+          </Animated.View>
+          {isTruncated && (
+            <AnimatedTouchableOpacity
+              style={[styles.expandButton, panelAnimation.caretAnimatedStyle]}
+              onPress={() => model.dropdown.toggleExpand()}
+            >
+              <CaretDownIcon size={CARET_SIZE} />
+            </AnimatedTouchableOpacity>
+          )}
+        </View>
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: SPACING[200],
+    borderRadius: BORDER_RADIUS[300],
+    backgroundColor: COLORS.NEUTRAL_1,
+    overflow: 'hidden',
+    ...SHADOWS['4'],
+  },
+  recordingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  recordingDot: {
+    width: RECORDING_DOT_SIZE,
+    height: RECORDING_DOT_SIZE,
+    borderRadius: RECORDING_DOT_SIZE / 2,
+    backgroundColor: COLORS.PRIMARY_RED,
+  },
+  title: {
+    color: COLORS.NEUTRAL_10,
+    marginLeft: SPACING[100],
+  },
+  transcriptBody: {
+    overflow: 'hidden',
+  },
+  // Absolute so its measured height stays the content's natural height,
+  // independent of the animated wrapper height around it
+  transcriptBodyInner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  // Fixed per-state widths: the text snaps to its final layout once while the
+  // panel frame animates around it
+  contentCollapsed: {
+    width: VOICE_TRANSCRIPT_PANEL.WIDTH - SPACING[200] * 2,
+  },
+  fullTextMeasure: {
+    position: 'absolute',
+    opacity: 0,
+  },
+  contentExpanded: {
+    width: VOICE_TRANSCRIPT_PANEL.WIDTH_DONE - SPACING[200] * 2,
+  },
+  transcriptScroll: {
+    maxHeight: VOICE_TRANSCRIPT_PANEL.TRANSCRIPT_MAX_HEIGHT,
+  },
+  previewFade: {
+    position: 'absolute',
+    right: SPACING[200],
+    bottom: SPACING[100],
+    width: PREVIEW_FADE_WIDTH,
+    height: PREVIEW_LINE_HEIGHT,
+    flexDirection: 'row',
+  },
+  previewFadeStripe: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  expandButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  processing: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: SPACING[200],
+    paddingVertical: SPACING[200],
+  },
+  processingText: {
+    color: COLORS.NEUTRAL_7,
+  },
+})

package/src/features/voice/recording/components/VoiceWaveform.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { COLORS } from '@magmamath/react-native-ui'
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+
+import { VOICE_WAVEFORM } from '../../constants'
+
+type VoiceWaveformProps = {
+  levels: number[]
+  width: number
+}
+
+const BAR_STEP = VOICE_WAVEFORM.BAR_WIDTH + VOICE_WAVEFORM.BAR_GAP
+// One extra bar is rendered off-screen on the right and slides in as the row
+// shifts — that is what makes the scroll continuous instead of stepping
+const OFFSCREEN_BARS = 1
+
+const getVisibleBarsCount = (width: number) => {
+  const barsForWidth = Math.floor(width / BAR_STEP)
+  return Math.max(VOICE_WAVEFORM.MIN_BARS, barsForWidth)
+}
+
+const getBarHeight = (level: number) =>
+  Math.max(
+    VOICE_WAVEFORM.MIN_BAR_HEIGHT,
+    Math.round(level * (VOICE_WAVEFORM.HEIGHT - VOICE_WAVEFORM.AMPLITUDE_PADDING)),
+  )
+
+// Older bars (toward the left) fade out, mirroring the dotted lead-in in the
+// design. Opacity ramps from 0 up to full across the first FADE_RATIO of bars.
+const getBarOpacity = (index: number, count: number) => {
+  const fadeBars = count * VOICE_WAVEFORM.FADE_RATIO
+  return Math.min(1, index / fadeBars)
+}
+
+export const VoiceWaveform = ({ levels, width }: VoiceWaveformProps) => {
+  const count = getVisibleBarsCount(width)
+  const visibleLevels = levels.slice(-(count + OFFSCREEN_BARS))
+
+  // Conveyor-belt motion: each new sample shifts the buffer one slot left and
+  // snaps the row back, then the row glides left by one step until the next
+  // sample lands — the two cancel out into continuous movement.
+  const shift = useSharedValue(0)
+
+  useEffect(() => {
+    shift.value = 0
+    shift.value = withTiming(-BAR_STEP, {
+      duration: VOICE_WAVEFORM.SAMPLE_INTERVAL_MS,
+      easing: Easing.linear,
+    })
+  }, [levels, shift])
+
+  // Explicit deps: consumers compile this library without the Reanimated Babel plugin
+  const rowAnimatedStyle = useAnimatedStyle(
+    () => ({ transform: [{ translateX: shift.value }] }),
+    [shift],
+  )
+
+  return (
+    <View style={[styles.container, { width }]}>
+      <Animated.View style={[styles.row, rowAnimatedStyle]}>
+        {visibleLevels.map((level, index) => (
+          <View
+            key={index}
+            style={[
+              styles.bar,
+              { height: getBarHeight(level), opacity: getBarOpacity(index, visibleLevels.length) },
+            ]}
+          />
+        ))}
+      </Animated.View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: VOICE_WAVEFORM.HEIGHT,
+    overflow: 'hidden',
+  },
+  // Hangs one step past the right edge so the newest bar starts hidden
+  row: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: -BAR_STEP,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: VOICE_WAVEFORM.BAR_GAP,
+  },
+  bar: {
+    width: VOICE_WAVEFORM.BAR_WIDTH,
+    borderRadius: VOICE_WAVEFORM.BAR_WIDTH / 2,
+    backgroundColor: COLORS.NEUTRAL_7,
+  },
+})