@magmamath/students-features 0.9.113 → 0.9.114-rc.1

package/src/features/voice/recording/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/voice/recording/modal/ModalFooterButtons.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Button, ButtonColor, ButtonSize, ButtonVariant, SPACING } from '@magmamath/react-native-ui'
+import { StyleSheet, View } from 'react-native'
+import { useText } from '../../../../shared/translation'
+import { TranslationKeys } from '../../../../shared/translation/types'
+
+type ModalFooterButtonsProps = {
+  onCancel: () => void
+  onConfirm: () => void
+  confirmLabel: TranslationKeys
+  confirmColor?: ButtonColor
+}
+
+export const ModalFooterButtons = ({
+  onCancel,
+  onConfirm,
+  confirmLabel,
+  confirmColor = ButtonColor.BLUE,
+}: ModalFooterButtonsProps) => {
+  const t = useText()
+
+  return (
+    <View style={styles.container}>
+      <Button
+        style={{ text: styles.buttonLabel }}
+        variant={ButtonVariant.TERTIARY}
+        size={ButtonSize.LARGE}
+        onPress={onCancel}
+      >
+        {t('voice.cancel')}
+      </Button>
+      <Button
+        colorScheme={confirmColor}
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.LARGE}
+        onPress={onConfirm}
+        style={{ text: styles.buttonLabel }}
+      >
+        {t(confirmLabel)}
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  buttonLabel: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/voice/recording/modal/VoiceRecordDeleteModal.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect } from 'react'
+import { BaseModal, ButtonColor } from '@magmamath/react-native-ui'
+import { StyleSheet } from 'react-native'
+import { useUnit } from 'effector-react'
+import { VoiceRecorderState } from '../../constants'
+import { useText } from '../../../../shared/translation'
+import { ModalFooterButtons } from './ModalFooterButtons'
+import { VoiceRecordModalParams } from '../../types'
+
+type VoiceRecordDeleteModalComponentProps = {
+  modal: {
+    closeModal: () => void
+    params: VoiceRecordModalParams
+  }
+}
+
+export const VoiceRecordDeleteModal = ({
+  modal: { closeModal, params },
+}: VoiceRecordDeleteModalComponentProps) => {
+  const t = useText()
+  const { model } = params
+
+  const recorderState = useUnit(model.recorderModel.$voiceRecordState)
+
+  const handleDelete = () => {
+    if (recorderState === VoiceRecorderState.PAUSED) {
+      // if recording is paused, we need to start it again to ensure the recorder is in a consistent state before deletion
+      // without .record() browser still will use microphone
+      model.recorderModel.recorder.record()
+      setTimeout(() => {
+        model.stop()
+        model.deleteCurrentRecording()
+      }, 50)
+      closeModal()
+      return
+    }
+
+    model.deleteCurrentRecording()
+    closeModal()
+  }
+
+  useEffect(() => {
+    if (recorderState === VoiceRecorderState.RECORDING) {
+      model.recorderModel.recorder.pause()
+    }
+
+    return () => {
+      if (model.recorderModel.$voiceRecordState.getState() === VoiceRecorderState.PAUSED) {
+        try {
+          model.recorderModel.recorder.record()
+        } catch (error) {
+          console.error(`Failed to resume recording: ${error}`)
+        }
+      }
+    }
+  }, [])
+
+  return (
+    <BaseModal
+      style={{
+        container: styles.modalContainer,
+      }}
+      header={t('voice.deleteRecording')}
+      content={t('voice.youWontBeAbleToRecover')}
+      footer={
+        <ModalFooterButtons
+          onCancel={closeModal}
+          onConfirm={handleDelete}
+          confirmLabel="voice.delete"
+          confirmColor={ButtonColor.RED}
+        />
+      }
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    width: 600,
+    height: 268,
+  },
+})

package/src/features/voice/recording/modal/VoiceRecordUndoModal.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { BaseModal } from '@magmamath/react-native-ui'
+import { StyleSheet } from 'react-native'
+import { useText } from '../../../../shared/translation'
+import { ModalFooterButtons } from './ModalFooterButtons'
+import { VoiceRecordModalParams } from '../../types'
+
+type VoiceRecordUndoModalProps = {
+  modal: {
+    closeModal: () => void
+    params: VoiceRecordModalParams
+  }
+}
+
+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('voice.redoRecording')}
+      content={t('voice.thisWillRemoveRecording')}
+      footer={
+        <ModalFooterButtons
+          onCancel={closeModal}
+          onConfirm={handleRedo}
+          confirmLabel="voice.redo"
+        />
+      }
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  modalStyle: {
+    width: 600,
+    height: 268,
+  },
+})

package/src/features/voice/recording/model/Recorder.model.ts

@@ -0,0 +1,62 @@
+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
+
+type StopResolver<T> = (result: T) => void
+
+export class RecorderModel<T = unknown> {
+  public recorder!: AudioRecorder
+  private stopResolver: StopResolver<T> | null = null
+
+  public readonly reset = createEvent()
+  public readonly setVoiceRecordState = createEvent<VoiceRecorderState>()
+  public readonly setAvailableInputs = createEvent<AvailableAudioInputs>()
+  public readonly setLastKnownDurationMs = createEvent<number>()
+
+  public readonly $voiceRecordState = restore(
+    this.setVoiceRecordState,
+    VoiceRecorderState.IDLE,
+  ).reset(this.reset)
+  public readonly $availableInputs = restore(this.setAvailableInputs, [])
+  public readonly $lastKnownDurationMs = restore(this.setLastKnownDurationMs, 0).reset(this.reset)
+
+  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(() => {
+    if (!this.recorder.getStatus().isRecording) return
+    return this.recorder.stop()
+  })
+
+  public stopAndAwaitResult(): Promise<T> {
+    return new Promise((resolve) => {
+      this.stopResolver = resolve
+      this.recorder.getStatus().isRecording && this.recorder.stop()
+    })
+  }
+
+  public resolveRecord(result: T): void {
+    if (this.stopResolver) {
+      this.stopResolver(result)
+      this.stopResolver = null
+    }
+  }
+
+  public clearStopResolver(): void {
+    this.stopResolver = null
+  }
+}

package/src/features/voice/recording/model/Uploader.model.ts

@@ -0,0 +1,48 @@
+import { createEffect } from 'effector'
+import { VoiceRecordCollectionItem, VoiceRecorderApi } from '../../types'
+import { generateAudioFormData, uploadAudioFileRequestGenerator } from '../../helpers'
+
+type UploadParams = {
+  uri: string
+  fileName: string
+  durationMs: number
+}
+
+type UploadResult = {
+  collectionItem: VoiceRecordCollectionItem
+  uploadPromise: Promise<any>
+}
+
+export class UploaderModel {
+  private api!: VoiceRecorderApi
+
+  public readonly setApi = (api: VoiceRecorderApi) => {
+    this.api = api
+  }
+
+  public readonly upload = createEffect(
+    async ({ uri, fileName, durationMs }: UploadParams): Promise<UploadResult> => {
+      const formData = await generateAudioFormData({
+        audioFileUri: uri,
+        durationMs,
+        fileName,
+      })
+
+      const { uploadAudio, controller } = uploadAudioFileRequestGenerator(formData, this.api)
+      const uploadPromise = uploadAudio()
+
+      const collectionItem: VoiceRecordCollectionItem = {
+        durationMs,
+        audioUploadPromise: uploadPromise,
+        controller,
+        uri,
+      }
+
+      return { collectionItem, uploadPromise }
+    },
+  )
+
+  public readonly abortUpload = (controller?: AbortController) => {
+    controller?.abort()
+  }
+}

package/src/features/voice/recording/model/VoiceRecord.model.ts

@@ -0,0 +1,278 @@
+import { attach, combine, createEffect, createEvent, restore, sample, StoreValue } from 'effector'
+import { RecorderModel } from './Recorder.model'
+import { VoiceRecordsCollection } from './VoiceRecordCollection'
+import { UploaderModel } from './Uploader.model'
+import { VoiceRecorderState } from '../../constants'
+import {
+  VoiceRecordCollectionItem,
+  VoiceRecorderApi,
+  VoiceRecordNotificationTypes,
+} from '../../types'
+import { ensureRecordingPermissions, getAvailableInputs } from '../../helpers'
+import { t } from '../../../../shared/translation'
+
+type VoiceRecordModelParams = {
+  api: VoiceRecorderApi
+  notification: VoiceRecordNotificationTypes
+  events: VoiceRecordEvents
+}
+
+type UploadParams = {
+  uri: string
+  currentKey: string
+  durationMs: number
+}
+type GetRecordingItemParams = {
+  key: string
+  recorderState: VoiceRecorderState
+}
+
+type VoiceRecordEvents = {
+  deleteRecord: () => void
+  undoRecord: () => void
+}
+
+type DeleteCurrentRecordingProps = {
+  notification?: boolean
+}
+type DeleteCurrentRecordingValues = {
+  currentKey: string
+  notification?: boolean
+}
+type RecorderButtonHandlerParams = {
+  currentKey: StoreValue<typeof VoiceRecordModel.prototype.$currentKey>
+  recorderState: StoreValue<typeof VoiceRecordModel.prototype.recorderModel.$voiceRecordState>
+}
+
+export class VoiceRecordModel {
+  public readonly recorderModel = new RecorderModel<VoiceRecordCollectionItem>()
+  public readonly collection = new VoiceRecordsCollection()
+  public readonly uploader = new UploaderModel()
+  public readonly api: VoiceRecorderApi
+  public readonly notification: VoiceRecordNotificationTypes
+  public readonly events: VoiceRecordEvents
+  private shouldDiscardRecording = false
+
+  public readonly setCurrentKey = createEvent<string>()
+  public readonly setCurrentRecord = createEvent<any>()
+  public readonly reset = createEvent()
+  public readonly setIsButtonDisabled = createEvent<boolean>()
+  public readonly startAudioUpload = createEvent<string>()
+
+  public readonly $currentKey = restore(this.setCurrentKey, '')
+  public readonly $currentRecord = restore(this.setCurrentRecord, null).reset(this.reset)
+
+  public readonly $isButtonDisabled = restore(this.setIsButtonDisabled, false)
+
+  public readonly $isExpanded = combine(
+    this.recorderModel.$voiceRecordState,
+    this.$currentRecord,
+    (recorderState, currentRecord) => {
+      if (recorderState !== VoiceRecorderState.IDLE || currentRecord) return true
+      return false
+    },
+  )
+
+  public readonly deleteAudioRecord = createEffect(async (audioFileId: string) => {
+    await this.api.deleteAudioFile(audioFileId)
+  })
+
+  public readonly deleteCurrentRecording = attach({
+    source: this.$currentKey,
+    mapParams: (props: DeleteCurrentRecordingProps | void, currentKey) => ({
+      notification: true,
+      ...props,
+      currentKey,
+    }),
+    effect: createEffect(({ currentKey, notification }: DeleteCurrentRecordingValues) => {
+      const recordingItem = this.collection.get(currentKey)
+
+      if (recordingItem?.id) {
+        this.deleteAudioRecord(recordingItem.id)
+      }
+
+      this.abortUploadIfInProgress(recordingItem)
+      this.resetRecordingState(currentKey)
+
+      if (notification) {
+        this.notification.success(t('voice.recordingDeleted'))
+      }
+    }),
+  })
+
+  public readonly initializeRecording = attach({
+    source: this.$currentRecord,
+    effect: createEffect(async (currentRecord: StoreValue<typeof this.$currentRecord>) => {
+      if (currentRecord) {
+        this.deleteCurrentRecording({ notification: false })
+      }
+
+      const hasPermissions = await ensureRecordingPermissions()
+      if (!hasPermissions) {
+        this.notification.error(t('voice.noMicrophoneAccess'))
+        return
+      }
+
+      const inputs = await getAvailableInputs(this.recorderModel.recorder)
+      this.recorderModel.setAvailableInputs(inputs)
+
+      if (inputs.length === 0) {
+        this.notification.error(t('voice.noMicrophoneFound'))
+        return
+      }
+
+      return this.recorderModel.start().catch((error) => {
+        if (error.name === 'NotAllowedError') {
+          this.notification.error(t('voice.noMicrophoneAccessBySystem'))
+        }
+      })
+    }),
+  })
+
+  public readonly stop = createEffect(async () => {
+    this.shouldDiscardRecording = true
+    await this.recorderModel.stop()
+    this.recorderModel.clearStopResolver()
+    this.recorderModel.reset()
+  })
+
+  public readonly cleanup = async () => {
+    if (this.recorderModel.recorder.getStatus().isRecording) {
+      await this.recorderModel.recorder.stop()
+    }
+    this.recorderModel.reset()
+  }
+
+  public readonly recordingStatusUpdate = (status: any) => {
+    if (status.error) {
+      this.notification.error(`Recorder error: ${status.error}`)
+      this.recorderModel.clearStopResolver()
+      this.shouldDiscardRecording = false
+      return
+    }
+    if (status.isFinished && status.url) {
+      if (!this.shouldDiscardRecording) {
+        this.startAudioUpload(status.url)
+      }
+      this.shouldDiscardRecording = false
+    }
+  }
+
+  public readonly getRecordingItem = attach({
+    source: this.recorderModel.$voiceRecordState,
+    mapParams: (key: string, recorderState) => ({ key, recorderState }),
+    effect: createEffect(async ({ key, recorderState }: GetRecordingItemParams) => {
+      try {
+        const isRecording = recorderState === VoiceRecorderState.RECORDING
+
+        if (isRecording) {
+          return await this.recorderModel.stopAndAwaitResult()
+        }
+
+        return this.collection.get(key)
+      } catch (error) {
+        console.error(`Failed to get recording item: ${error}`)
+        this.notification.error(t('voice.uploadFailed'))
+        return undefined
+      }
+    }),
+  })
+
+  private abortUploadIfInProgress(recordingItem: ReturnType<VoiceRecordsCollection['get']>) {
+    if (!recordingItem?.id && recordingItem?.controller) {
+      this.uploader.abortUpload(recordingItem.controller)
+    }
+  }
+
+  private resetRecordingState(currentKey: string) {
+    this.recorderModel.reset()
+    this.reset()
+    this.collection.delete(currentKey)
+  }
+
+  private handleAudioUpload = createEffect(
+    async ({ uri, currentKey, durationMs }: UploadParams) => {
+      const { collectionItem, uploadPromise } = await this.uploader.upload({
+        uri,
+        fileName: currentKey,
+        durationMs,
+      })
+
+      this.collection.add(currentKey, collectionItem)
+      this.setCurrentRecord(collectionItem)
+      this.recorderModel.resolveRecord(collectionItem)
+
+      uploadPromise
+        .then((data) => {
+          if (this.collection.get(currentKey)) {
+            this.collection.update(currentKey, { id: data.id })
+          }
+        })
+        .catch((error) => {
+          if (error.name === 'CanceledError') return
+          this.collection.delete(currentKey)
+          this.reset()
+          this.notification.error(t('voice.uploadFailed'))
+        })
+
+      return uploadPromise
+    },
+  )
+
+  private setupUploadHandler() {
+    sample({
+      clock: this.startAudioUpload,
+      source: {
+        currentKey: this.$currentKey,
+        durationMs: this.recorderModel.$lastKnownDurationMs,
+      },
+      filter: ({ currentKey }, uri) => !!uri && !!currentKey,
+      fn: ({ currentKey, durationMs }, uri) => ({ currentKey, durationMs, uri }),
+      target: this.handleAudioUpload,
+    })
+  }
+
+  private setupCurrentRecordSync() {
+    sample({
+      source: this.$currentKey,
+      fn: (currentKey) => this.collection.get(currentKey),
+      target: createEffect((recordingItem?: VoiceRecordCollectionItem) => {
+        if (!recordingItem) {
+          this.reset()
+          return
+        }
+
+        this.setCurrentRecord(recordingItem)
+      }),
+    })
+  }
+
+  public readonly recorderButtonHandler = attach({
+    source: {
+      currentKey: this.$currentKey,
+      recorderState: this.recorderModel.$voiceRecordState,
+    },
+    effect: createEffect(({ currentKey, recorderState }: RecorderButtonHandlerParams) => {
+      if (recorderState === VoiceRecorderState.RECORDING) {
+        this.recorderModel.stop()
+        return
+      }
+      if (this.collection.get(currentKey)) {
+        this.events.undoRecord()
+        return
+      }
+
+      this.initializeRecording()
+    }),
+  })
+
+  constructor({ api, notification, events }: VoiceRecordModelParams) {
+    this.api = api
+    this.notification = notification
+    this.events = events
+    this.uploader.setApi(api)
+
+    this.setupUploadHandler()
+    this.setupCurrentRecordSync()
+  }
+}

package/src/features/voice/recording/model/VoiceRecordCollection.ts

@@ -0,0 +1,26 @@
+import { VoiceRecordCollectionItem } from '../../types'
+
+export class VoiceRecordsCollection {
+  public readonly collection: Map<string, VoiceRecordCollectionItem> = new Map()
+
+  public add(key: string, item: VoiceRecordCollectionItem) {
+    this.collection.set(key, item)
+  }
+
+  public update(key: string, item: Partial<VoiceRecordCollectionItem>) {
+    const existingItem = this.collection.get(key) || {}
+    this.collection.set(key, { ...existingItem, ...item })
+  }
+
+  public delete(key: string) {
+    this.collection.delete(key)
+  }
+
+  public get(key: string) {
+    return this.collection.get(key)
+  }
+
+  public clear() {
+    this.collection.clear()
+  }
+}

package/src/features/voice/recording/model/index.ts

@@ -0,0 +1,4 @@
+export { VoiceRecordModel } from './VoiceRecord.model'
+export { VoiceRecordsCollection } from './VoiceRecordCollection'
+export { RecorderModel } from './Recorder.model'
+export { UploaderModel } from './Uploader.model'

package/src/features/voice/types.ts

@@ -0,0 +1,69 @@
+import { WithAbortSignal } from 'src/types/common.types'
+import { getAvailableInputs } from './helpers'
+import { VoiceRecordModel } from './recording/model/VoiceRecord.model'
+import { AxiosResponse } from 'axios'
+
+export type VoiceRecordNotificationTypes = {
+  success: (message: string) => void
+  info: (message: string) => void
+  error: (message: string) => void
+  warning: (message: string) => void
+}
+
+export type UploadAudioPayload = WithAbortSignal<{
+  audioFileFormData: FormData
+}>
+
+type UploadAudioResponse = {
+  id: string
+  fileName: string
+  fileType: string
+}
+
+export type VoiceRecordCollectionItem = {
+  solutionId?: string
+  id?: string //it exists after upload to server
+  durationMs?: number
+  uri?: string
+  audioUploadPromise?: Promise<void | UploadAudioResponse>
+  controller?: AbortController
+}
+
+export type VoiceRecordStack = {
+  [problemId: string]: VoiceRecordCollectionItem
+}
+
+export type AvailableAudioInputs = Awaited<ReturnType<typeof getAvailableInputs>>
+
+export type VoiceRecordModalParams = {
+  model: VoiceRecordModel
+}
+
+export type AnswerAudio = {
+  drawing: string
+  _id: string
+  audioFileId?: string
+}
+
+export type DownloadAudioPayload = {
+  audioFileId: string
+}
+
+export type VoiceRecorderApi = {
+  uploadAudioFile: (data: UploadAudioPayload) => Promise<UploadAudioResponse>
+  deleteAudioFile: (audioFileId: string) => Promise<void>
+}
+
+type TranscriptionStatus = 'pending' | 'completed' | 'failed'
+export type AudioTranscriptResponse = {
+  text: string
+  status: TranscriptionStatus
+}
+
+export type VoicePlayerApi = {
+  getAudioFileTranscript: (audioFileId: string) => Promise<AudioTranscriptResponse>
+  downloadAudioFile: (
+    audioFileId: string,
+    options?: { signal?: AbortSignal },
+  ) => Promise<AxiosResponse<Blob>>
+}

package/src/index.ts

@@ -11,3 +11,4 @@ export * from './features/exampleSolution'
 export * from './features/keyboard'
 export * from './features/openEnded'
 export * from './shared/icons'
+export * from './features/voice'