@magmamath/students-features 0.9.107-rc.2 → 0.9.107-rc.21

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

@@ -0,0 +1,105 @@
+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 handleDelete = async () => {
+    if (recorderState === VoiceRecorderState.RECORDING) {
+      await model.stopAndDiscard()
+    }
+    await 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('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,62 @@
+import { createEffect, createEvent, restore } from 'effector'
+import { AudioRecorder, setAudioModeAsync } from 'expo-audio'
+import { VoiceRecorderState } from '../constants'
+import { AvailableAudioInputs, VoiceRecordCollectionItem } from '../types'
+
+const AUDIO_MODE_CONFIG = {
+  playsInSilentMode: true,
+  allowsRecording: true,
+} as const
+
+type StopResolver = (item: VoiceRecordCollectionItem) => void
+
+export class RecorderModel {
+  public recorder!: AudioRecorder
+  private stopResolver: StopResolver | null = null
+
+  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(() => {
+    if (!this.recorder.isRecording) return Promise.resolve()
+    return this.recorder.stop()
+  })
+
+  public stopAndGetCollectionItem(): Promise<VoiceRecordCollectionItem> {
+    return new Promise((resolve) => {
+      this.stopResolver = resolve
+      this.recorder.isRecording && this.recorder.stop()
+    })
+  }
+
+  public resolveStopWithCollectionItem(item: VoiceRecordCollectionItem): void {
+    if (this.stopResolver) {
+      this.stopResolver(item)
+      this.stopResolver = null
+    }
+  }
+
+  public clearStopResolver(): void {
+    this.stopResolver = null
+  }
+}

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

@@ -1,51 +1,212 @@
-import { createEffect, createEvent, createStore, restore, sample } from 'effector'
-import { getAvailableInputs } from '../helpers'
-import { RecordingInput } from 'expo-audio'
-
-type ShowToastVariants = {
-  info: (message: string) => void
-  error: (message: string) => void
-  warning: (message: string) => void
-}
+import { attach, createEffect, createEvent, createStore, restore, sample } from 'effector'
+import {
+  ensureRecordingPermissions,
+  generateAudioFormData,
+  getAudioDurationMs,
+  getAvailableInputs,
+  uploadAudioFileRequestGenerator,
+} from '../helpers'
+import { AudioApi, VoiceRecordNotificationTypes, VoiceRecordCollectionItem } from '../types'
+import { t } from '../../../shared/translation'
+import { RecorderModel } from './Recorder.model'
+import { VoiceRecordsCollection } from './VoiceRecordCollection'
+import { VoiceRecorderState } from '../constants'
 
 type VoiceRecordModelParams = {
-  showToast: ShowToastVariants
+  api: AudioApi
+  notification: VoiceRecordNotificationTypes
+  events: VoiceRecordEvents
+}
+
+type UploadParams = {
+  uri: string
+  currentKey: string
+}
+
+type VoiceRecordEvents = {
+  deleteRecord: () => void
+  undoRecord: () => void
+}
+
+type DeleteCurrentRecordingProps = {
+  notification?: boolean
+}
+type DeleteCurrentRecordingValues = {
+  currentKey: string
+  notification?: boolean
 }
 
 export class VoiceRecordModel {
-  public readonly startRecord = createEvent()
-  public readonly stop = createEvent()
+  public readonly recorderModel: RecorderModel
+  public readonly collection: VoiceRecordsCollection
+  public readonly api: AudioApi
+  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 setIsDisabled = 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 deleteFile = createEvent()
+  public readonly $isDisabled = restore(this.setIsDisabled, false)
 
-  public readonly setAudioFilePath = createEvent<string>()
-  public readonly clearAudioFilePath = createEvent()
-  public readonly $audioFilePath = restore(this.setAudioFilePath, '').reset(this.clearAudioFilePath)
+  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)
 
-  public readonly showToast: ShowToastVariants
+      this.abortUploadIfInProgress(recordingItem)
+      this.resetRecordingState(currentKey)
 
-  public readonly resetIsRecording = createEvent()
-  public readonly setIsRecording = createEvent<boolean>()
-  public readonly $isRecording = restore(this.setIsRecording, false).reset(this.resetIsRecording)
+      if (notification) {
+        this.notification.info(t('voiceRecorder.recordingDeleted'))
+      }
+    }),
+  })
 
-  public readonly setAvailableInputs = createEvent<Awaited<ReturnType<typeof getAvailableInputs>>>()
-  public readonly $availableInputs = restore(this.setAvailableInputs, [])
+  public readonly initializeRecording = createEffect(async () => {
+    this.deleteCurrentRecording({ notification: false })
 
-  constructor({ showToast }: VoiceRecordModelParams) {
-    this.showToast = showToast
+    const hasPermissions = await ensureRecordingPermissions()
+    if (!hasPermissions) {
+      this.notification.error(t('voiceRecorder.noMicrophoneAccess'))
+      return
+    }
+
+    const inputs = await getAvailableInputs(this.recorderModel.recorder)
+    this.recorderModel.setAvailableInputs(inputs)
+
+    if (inputs.length === 0) {
+      this.notification.error(t('voiceRecorder.noMicrophoneFound'))
+      return
+    }
+
+    return this.recorderModel.start()
+  })
+
+  public readonly stopAndDiscard = createEffect(async () => {
+    this.shouldDiscardRecording = true
+    await this.recorderModel.stop()
+    this.recorderModel.clearStopResolver()
+    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
+    }
+  }
+
+  constructor({ api, notification, events }: VoiceRecordModelParams) {
+    this.api = api
+    this.notification = notification
+    this.events = events
+    this.recorderModel = new RecorderModel()
+    this.collection = new VoiceRecordsCollection()
+
+    this.setupUploadHandler()
+    this.setupCurrentRecordSync()
+    this.setupUriSync()
+  }
 
+  private abortUploadIfInProgress(recordingItem: ReturnType<VoiceRecordsCollection['get']>) {
+    if (!recordingItem?.id && recordingItem?.controller) {
+      recordingItem.controller.abort()
+    }
+  }
+
+  private resetRecordingState(currentKey: string) {
+    this.recorderModel.reset()
+    this.reset()
+    this.collection.delete(currentKey)
+  }
+
+  private async handleAudioUpload({ uri, currentKey }: UploadParams) {
+    const durationMs = await getAudioDurationMs(uri)
+    const formData = await generateAudioFormData({ audioFileUri: uri, durationMs })
+    const { uploadAudio, controller } = uploadAudioFileRequestGenerator(formData, this.api)
+
+    const audioUploadPromise = uploadAudio()
+      .then((data) => {
+        // Check if the item still exists (wasn't deleted during upload)
+        if (this.collection.get(currentKey)) {
+          this.collection.update(currentKey, { id: data.id })
+        }
+        return data
+      })
+      .catch((error) => {
+        if (error.name === 'CanceledError') return
+        this.notification.error(t('voiceRecorder.uploadFailed'))
+      })
+
+    const collectionItem: VoiceRecordCollectionItem = {
+      durationMs,
+      audioUploadPromise,
+      controller,
+      uri,
+    }
+
+    this.collection.add(currentKey, collectionItem)
+    this.setCurrentRecord(collectionItem)
+    this.recorderModel.resolveStopWithCollectionItem(collectionItem)
+
+    return audioUploadPromise
+  }
+
+  private setupUploadHandler() {
     sample({
-      clock: this.deleteFile,
-      target: createEffect(() => {
-        this.clearAudioFilePath()
-        showToast.info('Recording deleted')
-      }),
+      clock: this.startAudioUpload,
+      source: this.$currentKey,
+      filter: (currentKey, uri) => !!uri && !!currentKey,
+      fn: (currentKey, uri) => ({ currentKey, uri }),
+      target: createEffect(({ uri, currentKey }: UploadParams) =>
+        this.handleAudioUpload({ uri, currentKey }),
+      ),
     })
+  }
 
+  private setupUriSync() {
     sample({
-      clock: this.startRecord,
-      target: createEffect(async () => {
-        showToast.info('Recording started')
+      source: this.$currentRecord,
+      fn: (record) => record?.uri || '',
+      target: createStore<string>('').reset(this.reset),
+    })
+  }
+
+  private setupCurrentRecordSync() {
+    sample({
+      source: this.$currentKey,
+      fn: (currentKey) => this.collection.get(currentKey),
+      target: createEffect((recordingItem?: VoiceRecordCollectionItem) => {
+        if (!recordingItem) {
+          this.reset()
+          return
+        }
+
+        this.setCurrentRecord(recordingItem)
+
+        if (recordingItem.durationMs) {
+          this.recorderModel.setAudioFileDurationMs(recordingItem.durationMs)
+        }
       }),
     })
   }

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

@@ -1 +1,25 @@
-export class VoiceRecordApi {}
+import { createEffect } from 'effector'
+import { AudioApi } from '../types'
+import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
+
+export class VoiceRecordApi {
+  // public readonly uploadAudioFileFx
+
+  // public readonly abortUpload = createEffect(() => {
+  //   if (this.uploadAudioFileFx.pending.getState()) {
+  //     this.uploadAudioFileFx.controller.abort()
+  //   }
+  // })
+
+  constructor(api: AudioApi) {
+    // this.uploadAudioFileFx = createControllerEffect((audioFileFormData: FormData, config) =>
+    //   api.uploadAudioFile(
+    //     { audioFileFormData },
+    //     //@ts-ignore
+    //     {
+    //       signal: config?.signal,
+    //     },
+    //   ),
+    // )
+  }
+}

package/src/features/voiceRecord/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/voiceRecord/types.ts

@@ -0,0 +1,49 @@
+import { WithAbortSignal } from 'src/types/common.types'
+import { getAvailableInputs } from './helpers'
+import { VoiceRecordModel } from './model/VoiceRecord.model'
+
+export type VoiceRecordNotificationTypes = {
+  info: (message: string) => void
+  error: (message: string) => void
+  warning: (message: string) => void
+}
+
+export type UploadAudioPayload = WithAbortSignal<{
+  audioFileFormData: FormData
+}>
+
+type AudioTranscriptResponse = {
+  text: string
+}
+type UploadAudioResponse = {
+  id: string
+  fileName: string
+  fileType: string
+}
+
+export type AudioApi = {
+  uploadAudioFile: (data: UploadAudioPayload) => Promise<UploadAudioResponse>
+  getAudioFileTranscript: (audioFileId: string) => Promise<AudioTranscriptResponse>
+}
+
+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 VoiceRecordDeleteModalParams = {
+  model: VoiceRecordModel
+}
+export type VoiceRecordUndoModalParams = {
+  model: VoiceRecordModel
+}

package/src/lib/components/ConditionalWrapper.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentType, PropsWithChildren, ReactNode } from 'react'
+
+type ConditionalWrapperProps = {
+  children: ReactNode
+  withWrapper?: boolean
+  Wrapper?: ComponentType<PropsWithChildren>
+}
+
+export const ConditionalWrapper = ({ withWrapper, Wrapper, children }: ConditionalWrapperProps) => {
+  if (withWrapper && Wrapper) {
+    return <Wrapper>{children}</Wrapper>
+  }
+
+  return children
+}

package/src/shared/translation/localization/ca.json

@@ -39,5 +39,18 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Delete recording?",
+    "youWontBeAbleToRecover": "You won't be able to recover this file once it's gone.",
+    "recordingDeleted": "Recording successfully deleted",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "noMicrophoneAccess": "No microphone access",
+    "noMicrophoneFound": "No microphone found",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }

package/src/shared/translation/localization/de.json

@@ -39,5 +39,18 @@
     "volume": "Volumen",
     "weight": "Gewicht",
     "time": "Zeit"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Aufnahme löschen?",
+    "youWontBeAbleToRecover": "Du kannst die Datei nicht wiederherstellen, wenn sie einmal gelöscht ist.",
+    "recordingDeleted": "Aufnahme gelöscht.",
+    "delete": "Löschen",
+    "cancel": "Abbrechen",
+    "noMicrophoneAccess": "Kein Mikrofon-Zugriff.",
+    "noMicrophoneFound": "Kein Mikrofon gefunden.",
+    "uploadFailed": "Hochladen fehlgeschlagen. Bitte versuche es erneut.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }

package/src/shared/translation/localization/en.json

@@ -39,5 +39,18 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Delete recording?",
+    "youWontBeAbleToRecover": "You won't be able to recover this file once it's gone.",
+    "recordingDeleted": "Recording successfully deleted",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "noMicrophoneAccess": "No microphone access",
+    "noMicrophoneFound": "No microphone found",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }