@magmamath/students-features 0.11.0-rc.9 → 1.0.0

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

@@ -0,0 +1,302 @@
+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 { VOICE_RECORDER_MIN_DURATION_MS } from '../../constants'
+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>
+  isInitializing: boolean
+  lastKnownDurationMs: StoreValue<
+    typeof VoiceRecordModel.prototype.recorderModel.$lastKnownDurationMs
+  >
+}
+
+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,
+      isInitializing: this.initializeRecording.pending,
+      lastKnownDurationMs: this.recorderModel.$lastKnownDurationMs,
+    },
+    effect: createEffect(
+      ({
+        currentKey,
+        recorderState,
+        isInitializing,
+        lastKnownDurationMs,
+      }: RecorderButtonHandlerParams) => {
+        if (isInitializing) return
+
+        if (
+          recorderState === VoiceRecorderState.RECORDING &&
+          lastKnownDurationMs < VOICE_RECORDER_MIN_DURATION_MS
+        ) {
+          console.warn(`Voice record is too short to upload`)
+          return
+        }
+
+        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/types.ts

@@ -0,0 +1,84 @@
+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>>
+}
+
+export type VoiceTranscriptionItem = {
+  attemptNumber: number
+  audioFileId: string
+  _id: string
+  transcript?: string
+  transcriptLoading?: boolean
+  transcriptError?: string
+  audioUri?: string
+  audioLoading?: boolean
+  audioError?: string
+  audioDownloadPromise?: Promise<any>
+  controller?: AbortController
+  hasDrawing?: boolean
+}

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'

package/src/shared/components/PlayButton.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { ActivityIndicator } from 'react-native'
+import { Button, COLORS } from '@magmamath/react-native-ui'
+
+import { SpeakerIcon } from '../icons/SpeakerIcon'
+import { PlayIcon } from '../icons/PlayIcon'
+import { PauseIcon } from '../icons/PauseIcon'
+import { AudioStatus } from '../../features/chatbot/types/t2s.types'
+import { CONTROLS_COLORS_MAP } from '../../features/chatbot/constants'
+import { ColorScheme } from '../../features/chatbot/types/style.types'
+
+type TextToSpeechIconProps = {
+  status?: AudioStatus
+  isLoading?: boolean
+  isActive?: boolean
+  colorScheme?: ColorScheme
+  activityIndicatorColor?: string
+}
+
+const TextToSpeechIcon = ({
+  status,
+  isActive,
+  isLoading,
+  colorScheme = ColorScheme.Blue,
+  activityIndicatorColor,
+}: TextToSpeechIconProps) => {
+  if (isLoading && isActive) {
+    return (
+      <ActivityIndicator
+        color={activityIndicatorColor || CONTROLS_COLORS_MAP[colorScheme].background}
+      />
+    )
+  }
+
+  if (!isActive) {
+    return <SpeakerIcon />
+  }
+
+  if (status === 'playing') return <PauseIcon color={COLORS.NEUTRAL_1} />
+  if (status === 'paused') return <PlayIcon color={COLORS.NEUTRAL_1} />
+  return <SpeakerIcon />
+}
+
+type MessageTextToSpeechProps = {
+  state: {
+    status?: AudioStatus
+    isActive?: boolean
+    isLoading?: boolean
+    disabled?: boolean
+    isEnabled?: boolean
+  }
+  activityIndicatorColor?: string
+  colorScheme?: ColorScheme
+  onPress?: () => void
+}
+
+export const PlayButton = ({
+  state: { status, disabled, isActive, isLoading },
+  colorScheme = ColorScheme.Blue,
+  onPress,
+  activityIndicatorColor,
+  ...props
+}: MessageTextToSpeechProps) => {
+  return (
+    <Button
+      disabled={disabled}
+      isActive={isActive}
+      variant={'secondary'}
+      colorScheme={colorScheme}
+      size={'small'}
+      onPress={onPress}
+      icon={
+        <TextToSpeechIcon
+          isActive={isActive}
+          isLoading={isLoading}
+          status={status}
+          colorScheme={colorScheme}
+          activityIndicatorColor={activityIndicatorColor}
+        />
+      }
+      {...props}
+    />
+  )
+}

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

@@ -20,8 +20,7 @@
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error",
-    "inputPlaceholder": "Type...",
-    "wantHelp": "Want some help?"
+    "inputPlaceholder": "Type..."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",
@@ -40,5 +39,22 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voice": {
+    "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.",
+    "noMicrophoneAccessBySystem": "Microphone access denied by system settings.",
+    "noMicrophoneFound": "No microphone found.",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording.",
+    "transcriptions": "Transcriptions",
+    "attempt": "Attempt {{number}}",
+    "transcriptNotAvailable": "Transcript not available"
   }
 }

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

@@ -20,8 +20,7 @@
     "errorMessage": "Etwas ist schiefgelaufen! Versuch es erneut",
     "howCanIHelp": "Hi! Möchtest du Hilfe?",
     "showError": "Fehler anzeigen",
-    "inputPlaceholder": "Tippe...",
-    "wantHelp": "Brauchst du Hilfe?"
+    "inputPlaceholder": "Tippe..."
   },
   "gifCelebrations": {
     "greatStart": "Toller Start!",
@@ -40,5 +39,22 @@
     "volume": "Volumen",
     "weight": "Gewicht",
     "time": "Zeit"
+  },
+  "voice": {
+    "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.",
+    "noMicrophoneAccessBySystem": "Mikrofonzugriff durch Systemeinstellungen verweigert.",
+    "noMicrophoneFound": "Kein Mikrofon gefunden.",
+    "uploadFailed": "Hochladen fehlgeschlagen. Bitte versuche es erneut.",
+    "redoRecording": "Aufnahme erneut aufnehmen?",
+    "redo": "Wiederholen",
+    "thisWillRemoveRecording": "Dadurch wird die Aufnahme entfernt.",
+    "transcriptions": "Transkriptionen",
+    "attempt": "Versuch {{number}}",
+    "transcriptNotAvailable": "Transkript nicht verfügbar"
   }
 }

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

@@ -20,8 +20,7 @@
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error",
-    "inputPlaceholder": "Type...",
-    "wantHelp": "Want some help?"
+    "inputPlaceholder": "Type..."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",
@@ -40,5 +39,22 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voice": {
+    "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.",
+    "noMicrophoneAccessBySystem": "Microphone access denied by system settings.",
+    "noMicrophoneFound": "No microphone found.",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording.",
+    "transcriptions": "Transcriptions",
+    "attempt": "Attempt {{number}}",
+    "transcriptNotAvailable": "Transcript not available"
   }
 }

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

@@ -20,8 +20,7 @@
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error",
-    "inputPlaceholder": "Type...",
-    "wantHelp": "Want some help?"
+    "inputPlaceholder": "Type..."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",
@@ -40,5 +39,22 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voice": {
+    "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.",
+    "noMicrophoneAccessBySystem": "Microphone access denied by system settings.",
+    "noMicrophoneFound": "No microphone found.",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording.",
+    "transcriptions": "Transcriptions",
+    "attempt": "Attempt {{number}}",
+    "transcriptNotAvailable": "Transcript not available"
   }
 }

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

@@ -20,8 +20,7 @@
     "errorMessage": "Something went wrong! Try again",
     "howCanIHelp": "Hi! Do you want help?",
     "showError": "Show error",
-    "inputPlaceholder": "Type...",
-    "wantHelp": "Want some help?"
+    "inputPlaceholder": "Type..."
   },
   "gifCelebrations": {
     "greatStart": "Great start!",
@@ -40,5 +39,22 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voice": {
+    "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.",
+    "noMicrophoneAccessBySystem": "Microphone access denied by system settings.",
+    "noMicrophoneFound": "No microphone found.",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording.",
+    "transcriptions": "Transcriptions",
+    "attempt": "Attempt {{number}}",
+    "transcriptNotAvailable": "Transcript not available"
   }
 }