@magmamath/students-features 0.9.106 → 0.9.107-rc.10

package/src/features/voiceRecord/components/VoiceRecordTimer.tsx

@@ -0,0 +1,53 @@
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { COLORS, Typography } from '@magmamath/react-native-ui'
+import React from 'react'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useUnit } from 'effector-react'
+import { formatDuration } from '../helpers'
+
+type VoiceRecordTimerProps = {
+  style?: StyleProp<ViewStyle>
+  model: VoiceRecordModel
+  recordingFileDurationMs?: number
+}
+
+export const VoiceRecordTimer = ({
+  style,
+  model,
+  recordingFileDurationMs,
+}: VoiceRecordTimerProps) => {
+  const savedAudioFileDurationMs = useUnit(model.recorderModel.$audioFileDurationMs)
+
+  const displayDurationMs = recordingFileDurationMs
+    ? recordingFileDurationMs
+    : savedAudioFileDurationMs
+
+  return (
+    <View style={[styles.container, style]}>
+      <Typography style={styles.text}>
+        {displayDurationMs ? formatDuration(displayDurationMs) : '0:00'}
+      </Typography>
+    </View>
+  )
+}
+
+export default VoiceRecordTimer
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    alignItems: 'center',
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_4,
+    borderRadius: 18,
+  },
+  text: {
+    color: COLORS.NEUTRAL_10,
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 18,
+    textTransform: 'uppercase',
+  },
+})

package/src/features/voiceRecord/constants.ts

@@ -0,0 +1,10 @@
+export const VOICE_RECORDER_CONTAINER_SIZES = {
+  COLLAPSED: 61,
+  EXPANDED: 152,
+}
+export const VOICE_RECORDER_MAX_DURATION_MS = 300000 // 5 minutes
+export enum VoiceRecorderState {
+  IDLE,
+  RECORDING,
+  PAUSED,
+}

package/src/features/voiceRecord/helpers.ts

@@ -0,0 +1,167 @@
+import { IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
+import {
+  AudioPlayer,
+  AudioRecorder,
+  createAudioPlayer,
+  getRecordingPermissionsAsync,
+  requestRecordingPermissionsAsync,
+} from 'expo-audio'
+import { AudioApi } from './types'
+
+export const formatDuration = (ms: number): string => {
+  const totalSeconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
+
+export const ensureRecordingPermissions = async () => {
+  const { status } = await getRecordingPermissionsAsync()
+
+  if (status !== 'granted') {
+    const { granted } = await requestRecordingPermissionsAsync()
+    return granted
+  }
+
+  return true
+}
+
+const getAvailableInputsWeb = async () => {
+  if (!navigator.mediaDevices?.enumerateDevices) return []
+
+  const devices = await navigator.mediaDevices.enumerateDevices()
+  return devices.filter((d) => d.kind === 'audioinput')
+}
+
+export const getAvailableInputs = async (recorder: AudioRecorder) => {
+  if (IS_WEB) {
+    return await getAvailableInputsWeb()
+  }
+  if (IS_MOBILE) {
+    return await recorder.getAvailableInputs()
+  }
+  return []
+}
+
+export const addAudioInputsListenerWeb = (callback: (devices: MediaDeviceInfo[]) => void) => {
+  if (!IS_WEB || !navigator.mediaDevices?.addEventListener) {
+    return () => {}
+  }
+
+  const handleDeviceChange = async () => {
+    const devices = await getAvailableInputsWeb()
+    callback(devices)
+  }
+
+  handleDeviceChange()
+
+  navigator.mediaDevices.addEventListener('devicechange', handleDeviceChange)
+
+  return () => {
+    navigator.mediaDevices.removeEventListener('devicechange', handleDeviceChange)
+  }
+}
+/**
+ *
+ * @param fileUri
+ * @param externalPlayer - is optional expo-audio player, but should be provided
+ * because creating player is resource consuming operation
+ */
+export const getAudioDurationMs = (
+  fileUri: string,
+  externalPlayer?: AudioPlayer,
+): Promise<number | undefined> => {
+  if (!fileUri) return Promise.resolve(undefined)
+
+  const player = externalPlayer ?? createAudioPlayer()
+  const isInternalPlayer = !externalPlayer
+
+  player.replace(fileUri)
+
+  return new Promise((resolve, reject) => {
+    const subscription = player.addListener('playbackStatusUpdate', () => {
+      if (player.duration !== undefined && player.duration > 0) {
+        subscription.remove()
+
+        // player.duration is in seconds (e.g., 1.234567)
+        const durationMs = Math.round(player.duration * 1000) // convert to milliseconds
+
+        if (isInternalPlayer) {
+          player.remove()
+        }
+
+        resolve(durationMs)
+      }
+    })
+
+    setTimeout(() => {
+      subscription.remove()
+
+      if (isInternalPlayer) {
+        player.remove()
+      }
+
+      reject(new Error('Timeout loading audio metadata'))
+    }, 3000)
+  })
+}
+
+type GenerateAudioFormDataParams = {
+  audioFileUri: string
+  durationMs?: number
+  fileName?: string
+}
+
+export const generateAudioFormData = async ({
+  audioFileUri,
+  durationMs,
+  fileName,
+}: GenerateAudioFormDataParams): Promise<FormData> => {
+  //todo: add web or ios prefix to filename
+
+  const formData = new FormData()
+  const duration = durationMs?.toString() || '0'
+
+  if (IS_WEB) {
+    const response = await fetch(audioFileUri)
+    const blob = await response.blob()
+    const filename = fileName || 'solution_voice_record.webm'
+
+    formData.append('file', blob, filename)
+    formData.append('filename', filename)
+    formData.append('duration', duration)
+
+    return formData
+  }
+
+  const filename = fileName || audioFileUri.split('/').pop() || 'solution_voice_record.m4a'
+  const file = {
+    uri: audioFileUri,
+    type: 'audio/m4a',
+    name: filename,
+  } as any
+
+  formData.append('file', file, filename)
+  formData.append('filename', filename)
+  formData.append('duration', duration)
+
+  return formData
+}
+
+export const uploadAudioFileRequestGenerator = (audioFileFormData: FormData, api: AudioApi) => {
+  const controller = new AbortController()
+
+  return {
+    uploadAudio: () =>
+      api.uploadAudioFile(
+        {
+          audioFileFormData,
+        },
+        //@ts-ignore
+        {
+          signal: controller.signal,
+        },
+      ),
+    controller,
+  }
+}

package/src/features/voiceRecord/hooks/useVoiceRecorder.ts

@@ -0,0 +1,85 @@
+import {
+  RecordingPresets,
+  useAudioPlayer,
+  useAudioRecorder,
+  useAudioRecorderState,
+} from 'expo-audio'
+import { addAudioInputsListenerWeb, getAudioDurationMs, getAvailableInputs } from '../helpers'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useEffect } from 'react'
+import { IS_WEB } from '@magmamath/react-native-ui'
+import { VOICE_RECORDER_MAX_DURATION_MS, VoiceRecorderState } from '../constants'
+import { useUnit } from 'effector-react'
+
+export const useVoiceRecorder = (model: VoiceRecordModel) => {
+  const player = useAudioPlayer()
+  const audioFilePath = useUnit(model.$uri)
+
+  const recorder = useAudioRecorder(RecordingPresets.LOW_QUALITY, (status) => {
+    if (status.error) {
+      model.notification.error(`Recorder error: ${status.error}`)
+      return
+    }
+    if (status.isFinished && status.url) {
+      model.setUri(status.url)
+    }
+  })
+  const recorderState = useAudioRecorderState(recorder)
+
+  useEffect(() => {
+    if (
+      recorderState.durationMillis >= VOICE_RECORDER_MAX_DURATION_MS &&
+      recorderState.isRecording
+    ) {
+      model.recorderModel.stop()
+    }
+  }, [recorderState.durationMillis])
+
+  useEffect(() => {
+    if (!IS_WEB) {
+      //only once for iPad and listener for WEB
+      getAvailableInputs(recorder).then((inputs) => {
+        model.recorderModel.setAvailableInputs(inputs)
+      })
+      return
+    }
+
+    const removeListener = addAudioInputsListenerWeb((devices) => {
+      model.recorderModel.setAvailableInputs(devices)
+    })
+
+    return removeListener
+  }, [])
+
+  useEffect(() => {
+    if (audioFilePath) {
+      const getDuration = async () => {
+        const durationMs = await getAudioDurationMs(audioFilePath, player)
+        model.recorderModel.setAudioFileDurationMs(durationMs || 0)
+      }
+      getDuration()
+    }
+  }, [audioFilePath])
+
+  useEffect(() => {
+    if (recorderState.isRecording) {
+      model.recorderModel.setVoiceRecordState(VoiceRecorderState.RECORDING)
+      return
+    }
+    if (recorderState.durationMillis > 0) {
+      model.recorderModel.setVoiceRecordState(VoiceRecorderState.PAUSED)
+      return
+    }
+    model.recorderModel.setVoiceRecordState(VoiceRecorderState.IDLE)
+
+    return () => {
+      model.recorderModel.reset()
+    }
+  }, [recorderState])
+
+  useEffect(() => {
+    model.recorderModel.recorder = recorder
+  }, [recorder])
+
+  return { recorderState }
+}

package/src/features/voiceRecord/hooks/useVoiceRecorderAnimation.ts

@@ -0,0 +1,19 @@
+import { useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { VOICE_RECORDER_CONTAINER_SIZES } from '../constants'
+
+export const useVoiceRecorderAnimation = (isExpanded: boolean) => {
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      height: withTiming(
+        isExpanded
+          ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED
+          : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED,
+        {
+          duration: 280,
+        },
+      ),
+    }
+  }, [isExpanded])
+
+  return { containerAnimatedStyle }
+}

package/src/features/voiceRecord/index.ts

@@ -0,0 +1,6 @@
+export * from './components/VoiceRecord'
+export * from './model/VoiceRecord.model'
+export * from './modal/VoiceRecordDeleteModal'
+export * from './modal/VoiceRecordUndoModal'
+export * from './constants'
+export * from './types'

package/src/features/voiceRecord/modal/VoiceRecordDeleteModal.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react'
+import {
+  BaseModal,
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { View, StyleSheet } from 'react-native'
+import { useUnit } from 'effector-react'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { VoiceRecorderState } from '../constants'
+import { useText } from '../../../shared/translation'
+
+type VoiceRecordDeleteModalComponentProps = {
+  modal: {
+    closeModal: () => void
+    params: {
+      model: VoiceRecordModel
+    }
+  }
+}
+
+type FooterButtonsProps = {
+  onClose: () => void
+  onDelete: () => void
+}
+
+const FooterButtons = ({ onClose, onDelete }: FooterButtonsProps) => {
+  const t = useText()
+
+  return (
+    <View style={styles.footerContainer}>
+      <Button variant={ButtonVariant.TERTIARY} size={ButtonSize.LARGE} onPress={onClose}>
+        {t('voiceRecorder.cancel')}
+      </Button>
+      <Button
+        colorScheme={ButtonColor.RED}
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.LARGE}
+        onPress={onDelete}
+      >
+        {t('voiceRecorder.delete')}
+      </Button>
+    </View>
+  )
+}
+
+export const VoiceRecordDeleteModal = ({
+  modal: { closeModal, params },
+}: VoiceRecordDeleteModalComponentProps) => {
+  const t = useText()
+  const { model } = params
+
+  const recorderState = useUnit(model.recorderModel.$voiceRecordState)
+  const { durationMillis } = model.recorderModel.recorder.getStatus()
+
+  const isRecordingInProgress =
+    (recorderState === VoiceRecorderState.PAUSED ||
+      recorderState === VoiceRecorderState.RECORDING) &&
+    durationMillis > 0
+
+  const handleDelete = async () => {
+    if (isRecordingInProgress) {
+      await model.recorderModel.recorder.stop()
+    }
+    model.deleteCurrentRecording()
+    closeModal()
+  }
+
+  useEffect(() => {
+    if (recorderState === VoiceRecorderState.RECORDING) {
+      model.recorderModel.recorder.pause()
+    }
+
+    return () => {
+      if (isRecordingInProgress && model.recorderModel.recorder.getStatus().durationMillis > 0) {
+        model.recorderModel.recorder.record()
+      }
+    }
+  }, [])
+
+  return (
+    <BaseModal
+      style={{
+        container: styles.modalContainer,
+      }}
+      header={t('voiceRecorder.deleteRecording')}
+      content={t('voiceRecorder.youWontBeAbleToRecover')}
+      footer={<FooterButtons onClose={closeModal} onDelete={handleDelete} />}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    width: 600,
+    height: 268,
+  },
+  footerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+})

package/src/features/voiceRecord/modal/VoiceRecordUndoModal.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import {
+  BaseModal,
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { StyleSheet, View } from 'react-native'
+import { useText } from '../../../shared/translation'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+
+type VoiceRecordUndoModalProps = {
+  modal: {
+    closeModal: () => void
+    params: {
+      model: VoiceRecordModel
+    }
+  }
+}
+
+type FooterButtonsProps = {
+  onClose: () => void
+  onRedo: () => void
+}
+
+const FooterButtons = ({ onClose, onRedo }: FooterButtonsProps) => {
+  const t = useText()
+
+  return (
+    <View style={styles.footerContainer}>
+      <Button variant={ButtonVariant.TERTIARY} size={ButtonSize.LARGE} onPress={onClose}>
+        {t('voiceRecorder.cancel')}
+      </Button>
+      <Button
+        colorScheme={ButtonColor.BLUE}
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.LARGE}
+        onPress={onRedo}
+      >
+        {t('voiceRecorder.redo')}
+      </Button>
+    </View>
+  )
+}
+
+export const VoiceRecordUndoModal = ({
+  modal: { closeModal, params },
+}: VoiceRecordUndoModalProps) => {
+  const t = useText()
+  const { model } = params
+
+  const handleRedo = () => {
+    model.deleteCurrentRecording({ notification: false })
+    closeModal()
+    model.initializeRecording()
+  }
+
+  return (
+    <BaseModal
+      style={{
+        container: styles.modalStyle,
+      }}
+      header={t('voiceRecorder.redoRecording')}
+      content={t('voiceRecorder.thisWillRemoveRecording')}
+      footer={<FooterButtons onClose={closeModal} onRedo={handleRedo} />}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  modalStyle: {
+    width: 600,
+    height: 268,
+  },
+  footerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+})

package/src/features/voiceRecord/model/Recorder.model.ts

@@ -0,0 +1,40 @@
+import { createEffect, createEvent, restore } from 'effector'
+import { AudioRecorder, setAudioModeAsync } from 'expo-audio'
+import { VoiceRecorderState } from '../constants'
+import { AvailableAudioInputs } from '../types'
+
+const AUDIO_MODE_CONFIG = {
+  playsInSilentMode: true,
+  allowsRecording: true,
+} as const
+
+export class RecorderModel {
+  public recorder!: AudioRecorder
+
+  public readonly reset = createEvent()
+  public readonly setAudioFileDurationMs = createEvent<number>()
+  public readonly setVoiceRecordState = createEvent<VoiceRecorderState>()
+  public readonly setAvailableInputs = createEvent<AvailableAudioInputs>()
+
+  public readonly $audioFileDurationMs = restore(this.setAudioFileDurationMs, 0).reset(this.reset)
+  public readonly $voiceRecordState = restore(
+    this.setVoiceRecordState,
+    VoiceRecorderState.IDLE,
+  ).reset(this.reset)
+  public readonly $availableInputs = restore(this.setAvailableInputs, [])
+
+  public readonly start = createEffect(async () => {
+    try {
+      await setAudioModeAsync(AUDIO_MODE_CONFIG)
+      await this.recorder.prepareToRecordAsync()
+      this.recorder.record()
+    } catch (error) {
+      console.error('Error starting recording:', error)
+      throw error
+    }
+  })
+
+  public readonly stop = createEffect(async () => {
+    return this.recorder.stop()
+  })
+}