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

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

@@ -0,0 +1,282 @@
+import { attach, createEffect, createEvent, restore } from 'effector'
+import {
+  VoiceTranscriptionsCollection,
+  VoiceTranscriptionItem,
+} from './VoiceTranscriptionsCollection'
+import { VoiceTranscriptionsDownloaderModel } from './VoiceTranscriptionsDownloader.model'
+import { VoiceTranscriptionsDropdownModel } from './VoiceTranscriptionsDropdown.model'
+import { AnswerAudio, VoicePlayerApi } from '../../types'
+import { PlayerModel, PlayerState } from './Player.model'
+import {
+  NO_AUDIO_BE_MESSAGE,
+  TRANSCRIPT_MAX_RETRIES,
+  TRANSCRIPT_RETRY_INTERVAL_MS,
+} from '../../constants'
+
+type VoiceTranscriptionsPlayerModelParams = {
+  api: VoicePlayerApi
+  audios?: AnswerAudio[]
+}
+type TogglePlayPauseParams = {
+  attemptNumber: number
+  playerState: PlayerState
+}
+
+export { PlayerState }
+
+export class VoicePlayerModel {
+  public readonly collection = new VoiceTranscriptionsCollection()
+  public readonly downloader = new VoiceTranscriptionsDownloaderModel()
+  public readonly dropdown = new VoiceTranscriptionsDropdownModel()
+  public readonly playerModel = new PlayerModel()
+  public readonly api: VoicePlayerApi
+  private currentPlayingAttempt: number | null = null
+
+  public readonly setCurrentAttempt = createEvent<number | null>()
+  public readonly setTranscriptsLoaded = createEvent<boolean>()
+  public readonly reset = createEvent()
+
+  public readonly $currentAttempt = restore(this.setCurrentAttempt, null).reset(this.reset)
+  public readonly $transcriptsLoaded = restore(this.setTranscriptsLoaded, false).reset(this.reset)
+  public readonly $playerState = this.playerModel.$playerState
+
+  public readonly pauseAudio = this.playerModel.pause
+
+  public readonly stopAudio = createEffect(() => {
+    this.playerModel.stop()
+    this.currentPlayingAttempt = null
+    this.setCurrentAttempt(null)
+  })
+
+  constructor(params: VoiceTranscriptionsPlayerModelParams) {
+    this.api = params.api
+    this.downloader.setApi(params.api)
+
+    this.playerModel.playbackFinished.watch(() => {
+      this.currentPlayingAttempt = null
+      this.setCurrentAttempt(null)
+    })
+
+    if (params.audios) {
+      this.initializeCollectionFromAudios(params.audios)
+    }
+  }
+
+  public initializeWithAudios(answerAudio: AnswerAudio[]) {
+    this.setTranscriptsLoaded(false)
+    this.collection.clear()
+    this.initializeCollectionFromAudios(answerAudio)
+  }
+
+  private initializeCollectionFromAudios(audios: AnswerAudio[]) {
+    if (!audios) {
+      console.warn('VoicePlayerModel: audios is not provided')
+      return
+    }
+    audios.forEach((audio, index) => {
+      const attemptNumber = index + 1
+      if (!audio.audioFileId) {
+        console.warn('VoicePlayerModel: audioFileId is missing for audio', audio)
+        return
+      }
+      this.collection.add(attemptNumber, {
+        attemptNumber,
+        audioFileId: audio.audioFileId,
+        _id: audio._id,
+        hasDrawing: !!audio.drawing,
+      })
+    })
+  }
+
+  private async fetchTranscriptWithRetry(audioFileId: string): Promise<string> {
+    for (let attempt = 0; attempt < TRANSCRIPT_MAX_RETRIES; attempt++) {
+      const response = await this.api.getAudioFileTranscript(audioFileId)
+
+      if (response.status === 'completed') {
+        return response.text
+      }
+
+      if (response.status === 'failed') {
+        return NO_AUDIO_BE_MESSAGE
+      }
+
+      if (attempt < TRANSCRIPT_MAX_RETRIES - 1) {
+        await new Promise((resolve) => setTimeout(resolve, TRANSCRIPT_RETRY_INTERVAL_MS))
+      }
+    }
+    return NO_AUDIO_BE_MESSAGE
+  }
+
+  public readonly loadAllTranscripts = createEffect(async () => {
+    const attempts = this.collection.getAll()
+
+    const transcriptPromises = attempts.map(async (item) => {
+      if (this.collection.hasTranscript(item.attemptNumber)) {
+        return
+      }
+
+      this.collection.update(item.attemptNumber, { transcriptLoading: true })
+
+      try {
+        const text = await this.fetchTranscriptWithRetry(item.audioFileId)
+
+        this.collection.update(item.attemptNumber, {
+          transcript: text,
+          transcriptLoading: false,
+          transcriptError: undefined,
+        })
+      } catch (error) {
+        this.collection.update(item.attemptNumber, {
+          transcriptLoading: false,
+          transcriptError: error instanceof Error ? error.message : 'Failed to load transcript',
+        })
+      }
+    })
+
+    await Promise.all(transcriptPromises)
+    this.setTranscriptsLoaded(true)
+  })
+
+  private readonly handlePlayAttempt = createEffect(async (attemptNumber: number) => {
+    const item = this.collection.get(attemptNumber)
+    if (!item) return
+
+    if (this.currentPlayingAttempt !== null && this.currentPlayingAttempt !== attemptNumber) {
+      const previousItem = this.collection.get(this.currentPlayingAttempt)
+      if (previousItem?.controller && previousItem?.audioLoading) {
+        this.downloader.abortDownload(previousItem.controller)
+        this.collection.update(this.currentPlayingAttempt, {
+          audioLoading: false,
+          controller: undefined,
+          audioDownloadPromise: undefined,
+        })
+      }
+    }
+
+    if (this.collection.hasAudio(attemptNumber)) {
+      this.playAudioFx(attemptNumber)
+      return
+    }
+
+    try {
+      this.playerModel.setPlayerState(PlayerState.LOADING)
+      const { collectionItem, downloadPromise } = await this.downloader.download({
+        audioFileId: item.audioFileId,
+        attemptNumber,
+      })
+
+      this.collection.update(attemptNumber, collectionItem)
+
+      const result = await downloadPromise
+
+      this.collection.update(attemptNumber, {
+        audioUri: result.uri,
+        audioLoading: false,
+        audioError: undefined,
+        controller: undefined,
+        audioDownloadPromise: undefined,
+      })
+
+      this.playerModel.setPlayerState(PlayerState.IDLE)
+      this.playAudioFx(attemptNumber)
+    } catch (error) {
+      console.error('Audio download error:', error)
+      if (error instanceof Error && error.name === 'AbortError') {
+        return
+      }
+
+      this.collection.update(attemptNumber, {
+        audioLoading: false,
+        audioError: error instanceof Error ? error.message : 'Failed to download audio',
+        controller: undefined,
+        audioDownloadPromise: undefined,
+      })
+    }
+  })
+
+  private playAudioFx = createEffect(async (attemptNumber: number) => {
+    const item = this.collection.get(attemptNumber)
+    if (!item?.audioUri) {
+      console.warn('No audio URI available for attempt:', attemptNumber)
+      return
+    }
+
+    try {
+      if (this.currentPlayingAttempt !== null && this.currentPlayingAttempt !== attemptNumber) {
+        this.playerModel.player?.remove()
+      }
+
+      if (this.currentPlayingAttempt === attemptNumber && this.playerModel.player?.playing) {
+        this.playerModel.pause()
+        return
+      }
+
+      if (this.currentPlayingAttempt === attemptNumber && !this.playerModel.player?.playing) {
+        this.playerModel.resume()
+        return
+      }
+
+      this.currentPlayingAttempt = attemptNumber
+      this.setCurrentAttempt(attemptNumber)
+      await this.playerModel.play(item.audioUri)
+    } catch (error) {
+      console.error('Error playing audio:', error)
+      this.playerModel.setPlayerState(PlayerState.IDLE)
+
+      this.collection.update(attemptNumber, {
+        audioError: error instanceof Error ? error.message : 'Failed to play audio',
+      })
+    }
+  })
+
+  public getTranscript(attemptNumber: number): string | undefined {
+    return this.collection.get(attemptNumber)?.transcript
+  }
+
+  public isTranscriptLoading(attemptNumber: number): boolean {
+    return this.collection.get(attemptNumber)?.transcriptLoading || false
+  }
+
+  public isAudioLoading(attemptNumber: number): boolean {
+    return this.collection.get(attemptNumber)?.audioLoading || false
+  }
+
+  public getAllAttempts(): VoiceTranscriptionItem[] {
+    return this.collection.getAll()
+  }
+
+  public reinitializePlayer() {
+    this.playerModel.reinitialize()
+  }
+
+  public cleanup() {
+    this.collection.getAll().forEach((item) => {
+      if (item.audioUri && item.audioUri.startsWith('blob:')) {
+        try {
+          URL.revokeObjectURL(item.audioUri)
+        } catch (e) {}
+      }
+      if (item.controller) {
+        this.downloader.abortDownload(item.controller)
+      }
+    })
+
+    this.collection.clear()
+    this.currentPlayingAttempt = null
+    this.reset()
+    this.dropdown.reset()
+    this.playerModel.release()
+  }
+
+  public togglePlayPause = attach({
+    source: this.playerModel.$playerState,
+    mapParams: (attemptNumber: number, playerState) => ({ attemptNumber, playerState }),
+    effect: createEffect(({ attemptNumber, playerState }: TogglePlayPauseParams) => {
+      if (this.currentPlayingAttempt === attemptNumber && playerState === PlayerState.PLAYING) {
+        this.pauseAudio()
+      } else {
+        this.handlePlayAttempt(attemptNumber)
+      }
+    }),
+  })
+}

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

@@ -0,0 +1,53 @@
+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
+}
+
+export class VoiceTranscriptionsCollection {
+  public readonly collection: Map<number, VoiceTranscriptionItem> = new Map()
+
+  public add(attemptNumber: number, item: VoiceTranscriptionItem) {
+    this.collection.set(attemptNumber, item)
+  }
+
+  public update(attemptNumber: number, item: Partial<VoiceTranscriptionItem>) {
+    const existingItem = this.collection.get(attemptNumber) || ({} as VoiceTranscriptionItem)
+    this.collection.set(attemptNumber, { ...existingItem, ...item })
+  }
+
+  public delete(attemptNumber: number) {
+    this.collection.delete(attemptNumber)
+  }
+
+  public get(attemptNumber: number) {
+    return this.collection.get(attemptNumber)
+  }
+
+  public getAll() {
+    return Array.from(this.collection.values())
+  }
+
+  public clear() {
+    this.collection.clear()
+  }
+
+  public hasTranscript(attemptNumber: number) {
+    const item = this.collection.get(attemptNumber)
+    return !!item?.transcript
+  }
+
+  public hasAudio(attemptNumber: number) {
+    const item = this.collection.get(attemptNumber)
+    return !!item?.audioUri
+  }
+}

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

@@ -0,0 +1,43 @@
+import { createEffect } from 'effector'
+import { VoiceTranscriptionItem } from './VoiceTranscriptionsCollection'
+import { VoicePlayerApi } from '../../types'
+import { downloadAudioFileRequestGenerator } from '../../helpers'
+
+type DownloadParams = {
+  audioFileId: string
+  attemptNumber: number
+}
+
+type DownloadResult = {
+  collectionItem: Partial<VoiceTranscriptionItem>
+  downloadPromise: Promise<any>
+}
+
+export class VoiceTranscriptionsDownloaderModel {
+  private api!: VoicePlayerApi
+
+  public readonly setApi = (api: VoicePlayerApi) => {
+    this.api = api
+  }
+
+  public readonly download = createEffect(
+    async ({ audioFileId, attemptNumber }: DownloadParams): Promise<DownloadResult> => {
+      const { downloadAudio, controller } = downloadAudioFileRequestGenerator(audioFileId, this.api)
+      const downloadPromise = downloadAudio()
+
+      const collectionItem: Partial<VoiceTranscriptionItem> = {
+        attemptNumber,
+        audioFileId,
+        audioLoading: true,
+        audioDownloadPromise: downloadPromise,
+        controller,
+      }
+
+      return { collectionItem, downloadPromise }
+    },
+  )
+
+  public readonly abortDownload = (controller?: AbortController) => {
+    controller?.abort()
+  }
+}

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

@@ -0,0 +1,12 @@
+import { createEvent, createStore } from 'effector'
+
+export class VoiceTranscriptionsDropdownModel {
+  public readonly toggleExpand = createEvent()
+  public readonly setExpanded = createEvent<boolean>()
+  public readonly reset = createEvent()
+
+  public readonly $isExpanded = createStore(false)
+    .on(this.setExpanded, (_, value) => value)
+    .on(this.toggleExpand, (state) => !state)
+    .reset(this.reset)
+}

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

@@ -0,0 +1,6 @@
+export { VoicePlayerModel } from './VoicePlayer.model'
+export { PlayerModel, PlayerState } from './Player.model'
+export { VoiceTranscriptionsCollection } from './VoiceTranscriptionsCollection'
+export type { VoiceTranscriptionItem } from './VoiceTranscriptionsCollection'
+export { VoiceTranscriptionsDownloaderModel } from './VoiceTranscriptionsDownloader.model'
+export { VoiceTranscriptionsDropdownModel } from './VoiceTranscriptionsDropdown.model'

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

@@ -0,0 +1,65 @@
+import { StyleProp, ViewStyle, StyleSheet } from 'react-native'
+import { VoiceRecordButton } from './VoiceRecordButton'
+import React, { useEffect } from 'react'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { VoiceRecordDeleteButton } from './VoiceRecordDeleteButton'
+import { VoiceRecordDevider } from './VoiceRecordDevider'
+import { VoiceRecordTimer } from './VoiceRecordTimer'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useVoiceRecorder } from '../hooks/useVoiceRecorder'
+import { useVoiceRecorderAnimation } from '../hooks/useVoiceRecorderAnimation'
+import { useUnit } from 'effector-react'
+
+type VoiceRecordProps = {
+  style?: StyleProp<ViewStyle>
+  model: VoiceRecordModel
+}
+
+export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
+  const { recorderState } = useVoiceRecorder(model)
+  const [isExpanded, isDisabled] = useUnit([model.$isExpanded, model.$isButtonDisabled])
+
+  const { containerAnimatedStyle } = useVoiceRecorderAnimation(isExpanded)
+
+  useEffect(() => {
+    return () => {
+      model.cleanup()
+    }
+  }, [model])
+
+  return (
+    <Animated.View style={[styles.container, style, containerAnimatedStyle]}>
+      <VoiceRecordButton model={model} />
+      {isExpanded && (
+        <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.expendedContainer}>
+          <VoiceRecordTimer
+            style={styles.timer}
+            model={model}
+            recordingFileDurationMs={recorderState.durationMillis}
+          />
+          <VoiceRecordDevider />
+          <VoiceRecordDeleteButton isDisabled={isDisabled} onPress={model.events.deleteRecord} />
+        </Animated.View>
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    padding: 3,
+    paddingBottom: 6,
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderRadius: 32,
+    boxShadow: '0 1px 3px 0 rgba(51, 51, 51, 0.10), 0 0 1px 0 rgba(51, 51, 51, 0.40)',
+    overflow: 'hidden',
+  },
+  timer: {
+    marginTop: SPACING[400],
+  },
+  expendedContainer: {
+    alignItems: 'center',
+  },
+})

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

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonStyle,
+  ButtonVariant,
+  IS_WEB,
+} from '@magmamath/react-native-ui'
+import { Pressable } from 'react-native'
+import { MicrophoneIcon, CheckIcon } from '@magmamath/react-native-ui'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useUnit } from 'effector-react'
+import { VoiceRecorderState } from '../../constants'
+import { useText } from '../../../../shared/translation'
+
+type VoiceRecordButtonProps = {
+  style?: ButtonStyle
+  model: VoiceRecordModel
+}
+
+export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
+  const t = useText()
+
+  const availableInputs = useUnit(model.recorderModel.$availableInputs)
+  const voiceRecordState = useUnit(model.recorderModel.$voiceRecordState)
+  const isButtonDisabled = useUnit(model.$isButtonDisabled)
+
+  const combinedStyles = useMemo((): ButtonStyle => {
+    return {
+      button: [{ width: 50 }, style?.button],
+      container: [style?.container],
+      text: [style?.text],
+    }
+  }, [style])
+
+  return (
+    <Pressable
+      onPressIn={(e) => {
+        if (availableInputs.length) return
+        e.preventDefault()
+        model.notification.warning(t('voice.noMicrophoneFound'))
+      }}
+      pointerEvents={!availableInputs.length ? 'box-only' : 'auto'}
+    >
+      <Button
+        disabled={isButtonDisabled || !availableInputs.length}
+        onPressIn={() => model.recorderButtonHandler()}
+        style={combinedStyles}
+        size={ButtonSize.LARGE}
+        variant={ButtonVariant.SECONDARY}
+        colorScheme={ButtonColor.WHITE}
+        icon={
+          voiceRecordState === VoiceRecorderState.RECORDING ? (
+            <CheckIcon size={25} />
+          ) : (
+            <MicrophoneIcon style={IS_WEB ? { width: 21 } : { minWidth: 23, minHeight: 23 }} />
+          )
+        }
+      />
+    </Pressable>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import { COLORS, TrashcanIcon } from '@magmamath/react-native-ui'
+import React from 'react'
+
+type VoiceRecordDeleteProps = {
+  onPress?: () => void
+  isDisabled?: boolean
+}
+
+export const VoiceRecordDeleteButton = ({ onPress, isDisabled }: VoiceRecordDeleteProps) => {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress} disabled={isDisabled}>
+      <TrashcanIcon size={20} color={isDisabled ? COLORS.NEUTRAL_5 : COLORS.NEUTRAL_9} />
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

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

@@ -0,0 +1,17 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const VoiceRecordDevider = () => {
+  return <View style={styles.container} />
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 1,
+    borderRadius: 1,
+    width: 28,
+    margin: 8,
+    backgroundColor: COLORS.NEUTRAL_6,
+  },
+})

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

@@ -0,0 +1,49 @@
+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.$currentRecord)?.durationMs || 0
+  const displayDurationMs = recordingFileDurationMs || savedAudioFileDurationMs
+
+  return (
+    <View style={[styles.container, style]}>
+      <Typography variant="h9" style={styles.text}>
+        {displayDurationMs ? formatDuration(displayDurationMs) : '0:00'}
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    alignItems: 'center',
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_4,
+    borderRadius: 18,
+    minWidth: 45,
+  },
+  text: {
+    color: COLORS.NEUTRAL_10,
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 18,
+    textTransform: 'uppercase',
+  },
+})

package/src/features/voice/recording/hooks/useVoiceRecorder.ts

@@ -0,0 +1,62 @@
+import { RecordingPresets, useAudioRecorder, useAudioRecorderState } from 'expo-audio'
+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 { addAudioInputsListenerWeb, getAvailableInputs } from '../../helpers'
+
+export const useVoiceRecorder = (model: VoiceRecordModel) => {
+  const recorder = useAudioRecorder(RecordingPresets.LOW_QUALITY, model.recordingStatusUpdate)
+  const recorderState = useAudioRecorderState(recorder)
+
+  useEffect(() => {
+    if (
+      recorderState.durationMillis >= VOICE_RECORDER_MAX_DURATION_MS &&
+      recorderState.isRecording
+    ) {
+      model.recorderModel.stop()
+    }
+    // Track the last known duration while recording (for old browsers where getAudioDurationMs returns Infinity)
+    if (recorderState.isRecording && recorderState.durationMillis > 0) {
+      model.recorderModel.setLastKnownDurationMs(recorderState.durationMillis)
+    }
+  }, [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
+  }, [recorder, model.recorderModel])
+
+  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, model.recorderModel])
+
+  useEffect(() => {
+    model.recorderModel.recorder = recorder
+  }, [recorder])
+
+  return { recorderState }
+}