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

package/src/features/voice/playing/hooks/useVoiceTranscriptionsDropdown.ts

@@ -0,0 +1,54 @@
+import { useEffect } from 'react'
+import { useUnit } from 'effector-react'
+import { useAnimatedStyle, useSharedValue, withTiming, interpolate } from 'react-native-reanimated'
+import { VoiceTranscriptionsDropdownModel } from '../model/VoiceTranscriptionsDropdown.model'
+import { DROPDOWN_MAX_CONTENT_HEIGHT } from '../../constants'
+import { LayoutChangeEvent } from 'react-native'
+
+export const useVoiceTranscriptionsDropdown = (model: VoiceTranscriptionsDropdownModel) => {
+  const isExpanded = useUnit(model.$isExpanded)
+
+  const contentHeight = useSharedValue(0)
+  const animationProgress = useSharedValue(isExpanded ? 1 : 0)
+
+  const onListLayout = (event: LayoutChangeEvent) => {
+    const measuredHeight = event.nativeEvent.layout.height
+    if (measuredHeight > 0) {
+      contentHeight.value = measuredHeight
+    }
+  }
+
+  const listAnimatedStyle = useAnimatedStyle(() => {
+    const height = interpolate(
+      animationProgress.value,
+      [0, 1],
+      [0, contentHeight.value || DROPDOWN_MAX_CONTENT_HEIGHT],
+    )
+
+    const opacity = interpolate(animationProgress.value, [0, 0.3, 1], [0, 0, 1])
+
+    return {
+      height,
+      opacity,
+    }
+  }, [animationProgress, contentHeight])
+
+  const iconAnimatedStyle = useAnimatedStyle(() => {
+    const rotation = interpolate(animationProgress.value, [0, 1], [0, 180])
+
+    return {
+      transform: [{ rotate: `${rotation}deg` }],
+    }
+  }, [animationProgress])
+
+  useEffect(() => {
+    animationProgress.value = withTiming(isExpanded ? 1 : 0, { duration: 300 })
+  }, [isExpanded, animationProgress])
+
+  return {
+    isExpanded,
+    listAnimatedStyle,
+    iconAnimatedStyle,
+    onListLayout,
+  }
+}

package/src/features/voice/playing/hooks/useVoiceTranscriptionsDropdownItemAnimation.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import { LayoutChangeEvent } from 'react-native'
+import {
+  useSharedValue,
+  withTiming,
+  useDerivedValue,
+  useAnimatedStyle,
+  interpolate,
+} from 'react-native-reanimated'
+
+export const useVoiceTranscriptionsDropdownItemAnimation = (isExpanded: boolean) => {
+  const height = useSharedValue(0)
+  const progress = useSharedValue(isExpanded ? 1 : 0)
+
+  useEffect(() => {
+    progress.value = withTiming(isExpanded ? 1 : 0)
+  }, [isExpanded, progress])
+
+  const derivedHeight = useDerivedValue(() => height.value * progress.value, [height, progress])
+
+  const contentAnimatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(progress.value, [0, 0.3, 1], [0, 0, 1])
+
+    return {
+      height: derivedHeight.value,
+      opacity,
+      overflow: 'hidden',
+    }
+  }, [progress, derivedHeight])
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    height.value = event.nativeEvent.layout.height
+  }
+
+  return {
+    contentAnimatedStyle,
+    onLayout,
+    progress,
+  }
+}

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

@@ -0,0 +1,104 @@
+import { createEffect, createEvent, restore } from 'effector'
+import { AudioPlayer, createAudioPlayer, setAudioModeAsync } from 'expo-audio'
+
+export const enum PlayerState {
+  PLAYING = 'playing',
+  PAUSED = 'paused',
+  LOADING = 'loading',
+  IDLE = 'idle',
+}
+
+export class PlayerModel {
+  public player: AudioPlayer | null = createAudioPlayer()
+  private stopped = false
+
+  public readonly reset = createEvent()
+  public readonly setPlayerState = createEvent<PlayerState>()
+  public readonly playbackFinished = createEvent()
+
+  public readonly $playerState = restore(this.setPlayerState, PlayerState.IDLE).reset(this.reset)
+
+  public readonly setupAudioMode = createEffect(async () => {
+    await setAudioModeAsync({
+      playsInSilentMode: true,
+      shouldPlayInBackground: false,
+      interruptionMode: 'doNotMix',
+    })
+  })
+
+  public readonly pause = createEffect(() => {
+    if (this.player) {
+      this.player.pause()
+      this.setPlayerState(PlayerState.PAUSED)
+    } else {
+      console.warn('Cannot pause: audio player not initialized')
+    }
+  })
+
+  public readonly stop = createEffect(() => {
+    this.stopped = true
+    if (this.player) {
+      this.player.replace('')
+      this.setPlayerState(PlayerState.IDLE)
+    } else {
+      console.warn('Cannot stop: audio player not initialized')
+    }
+  })
+
+  public readonly resume = createEffect(() => {
+    if (this.player) {
+      this.player.play()
+      this.setPlayerState(PlayerState.PLAYING)
+    } else {
+      console.warn('Cannot resume: audio player not initialized')
+    }
+  })
+
+  public readonly play = createEffect(async (uri: string) => {
+    if (!this.player) {
+      console.warn('Audio player not initialized')
+      return
+    }
+
+    this.stopped = false
+    this.player.replace(uri)
+
+    const waitForLoad = () => {
+      if (this.stopped) return
+      if (this.player && this.player.isLoaded) {
+        const unsubscribe = this.player.addListener('playbackStatusUpdate', (status) => {
+          if (status.didJustFinish) {
+            this.playbackFinished()
+            unsubscribe?.remove?.()
+            this.setPlayerState(PlayerState.IDLE)
+          }
+        })
+
+        this.player.play()
+        this.setPlayerState(PlayerState.PLAYING)
+      } else {
+        setTimeout(waitForLoad, 10)
+      }
+    }
+
+    waitForLoad()
+  })
+
+  public reinitialize() {
+    if (!this.player) {
+      this.player = createAudioPlayer()
+    }
+  }
+
+  public release() {
+    if (this.player) {
+      try {
+        this.stop()
+        this.player.remove()
+      } catch (error) {}
+      this.player.release()
+      this.player = null
+    }
+    this.reset()
+  }
+}

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

@@ -0,0 +1,80 @@
+import { createEffect, createEvent, restore } from 'effector'
+import { VoiceTranscriptionsCollection } from './VoiceTranscriptionsCollection'
+import { VoicePlayerApi } from '../../types'
+import {
+  NO_AUDIO_BE_MESSAGE,
+  TRANSCRIPT_MAX_RETRIES,
+  TRANSCRIPT_RETRY_INTERVAL_MS,
+} from '../../constants'
+
+export class TranscriptionsDownloaderModel {
+  private readonly collection: VoiceTranscriptionsCollection
+  private readonly api: VoicePlayerApi
+
+  public readonly setTranscriptsLoaded = createEvent<boolean>()
+  public readonly reset = createEvent()
+
+  public readonly $transcriptsLoaded = restore(this.setTranscriptsLoaded, false).reset(this.reset)
+
+  constructor(collection: VoiceTranscriptionsCollection, api: VoicePlayerApi) {
+    this.collection = collection
+    this.api = api
+  }
+
+  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)
+  })
+
+  public getTranscript(attemptNumber: number): string | undefined {
+    return this.collection.get(attemptNumber)?.transcript
+  }
+
+  public isTranscriptLoading(attemptNumber: number): boolean {
+    return this.collection.get(attemptNumber)?.transcriptLoading || false
+  }
+}

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

@@ -0,0 +1,42 @@
+import { createEffect } from 'effector'
+import { VoicePlayerApi, VoiceTranscriptionItem } from '../../types'
+import { downloadAudioFileRequestGenerator } from '../../helpers'
+
+type DownloadParams = {
+  audioFileId: string
+  attemptNumber: number
+}
+
+type DownloadResult = {
+  collectionItem: Partial<VoiceTranscriptionItem>
+  downloadPromise: Promise<any>
+}
+
+export class VoiceFileDownloaderModel {
+  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/VoicePlayer.model.ts

@@ -0,0 +1,255 @@
+import { attach, createEffect, createEvent, restore } from 'effector'
+import { VoiceTranscriptionsCollection } from './VoiceTranscriptionsCollection'
+import { VoiceFileDownloaderModel } from './VoiceFileDownloader.model'
+import { VoiceTranscriptionsDropdownModel } from './VoiceTranscriptionsDropdown.model'
+import { AnswerAudio, VoicePlayerApi, VoiceTranscriptionItem } from '../../types'
+import { PlayerModel, PlayerState } from './Player.model'
+import { TranscriptionsDownloaderModel } from './TranscriptionsDownloaderModel'
+
+type VoiceTranscriptionsPlayerModelParams = {
+  api: VoicePlayerApi
+  audios?: AnswerAudio[]
+}
+type TogglePlayPauseParams = {
+  attemptNumber: number
+  playerState: PlayerState
+}
+
+export class VoicePlayerModel {
+  public readonly collection = new VoiceTranscriptionsCollection()
+  public readonly downloader = new VoiceFileDownloaderModel()
+  public readonly dropdown = new VoiceTranscriptionsDropdownModel()
+  public readonly playerModel = new PlayerModel()
+  public readonly loader: TranscriptionsDownloaderModel
+  public readonly api: VoicePlayerApi
+  private currentPlayingAttempt: number | null = null
+  private shouldPreventPlayback = false
+
+  public readonly setCurrentAttempt = createEvent<number | null>()
+  public readonly reset = createEvent()
+
+  public readonly $currentAttempt = restore(this.setCurrentAttempt, null).reset(this.reset)
+  public readonly $playerState = this.playerModel.$playerState
+
+  public readonly pauseAudio = this.playerModel.pause
+
+  public readonly stopAudio = () => {
+    this.shouldPreventPlayback = true
+    this.abortAllDownloads()
+    this.playerModel.stop()
+    this.currentPlayingAttempt = null
+    this.setCurrentAttempt(null)
+  }
+
+  public readonly resetPlayer = () => {
+    this.shouldPreventPlayback = true
+    this.releaseCollectionResources()
+    this.playerModel.stop()
+    this.currentPlayingAttempt = null
+    this.setCurrentAttempt(null)
+    this.collection.clear()
+  }
+
+  constructor(params: VoiceTranscriptionsPlayerModelParams) {
+    this.api = params.api
+    this.loader = new TranscriptionsDownloaderModel(this.collection, params.api)
+    this.downloader.setApi(params.api)
+
+    this.playerModel.playbackFinished.watch(() => {
+      this.currentPlayingAttempt = null
+      this.setCurrentAttempt(null)
+    })
+
+    if (params.audios) {
+      this.initializeCollectionFromAudios(params.audios)
+    }
+
+    this.playerModel.setupAudioMode()
+  }
+
+  public initializeWithAudios(answerAudio: AnswerAudio[]) {
+    this.loader.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 releaseCollectionResources() {
+    this.collection.getAll().forEach((item) => {
+      if (item.controller) {
+        this.downloader.abortDownload(item.controller)
+      }
+      if (item.audioUri?.startsWith('blob:')) {
+        try {
+          URL.revokeObjectURL(item.audioUri)
+        } catch (e) {}
+      }
+    })
+  }
+
+  private abortAllDownloads() {
+    this.collection.getAll().forEach((item) => {
+      if (item.controller && item.audioLoading) {
+        this.downloader.abortDownload(item.controller)
+        this.collection.update(item.attemptNumber, {
+          audioLoading: false,
+          controller: undefined,
+          audioDownloadPromise: undefined,
+        })
+      }
+    })
+  }
+
+  private readonly handlePlayAttempt = createEffect(async (attemptNumber: number) => {
+    this.shouldPreventPlayback = false
+    const item = this.collection.get(attemptNumber)
+    if (!item) return
+
+    if (this.currentPlayingAttempt !== null && this.currentPlayingAttempt !== attemptNumber) {
+      this.abortAllDownloads()
+    }
+
+    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,
+      })
+
+      if (this.shouldPreventPlayback) {
+        collectionItem.controller?.abort()
+        return
+      }
+
+      this.collection.update(attemptNumber, collectionItem)
+
+      const result = await downloadPromise
+
+      if (this.shouldPreventPlayback) {
+        if (result.uri?.startsWith('blob:')) {
+          URL.revokeObjectURL(result.uri)
+        }
+        return
+      }
+
+      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') {
+        this.playerModel.setPlayerState(PlayerState.IDLE)
+        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) => {
+    if (this.shouldPreventPlayback) return
+
+    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 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.releaseCollectionResources()
+    this.collection.clear()
+    this.currentPlayingAttempt = null
+    this.reset()
+    this.loader.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,40 @@
+import { VoiceTranscriptionItem } from '../../types'
+
+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/VoiceTranscriptionsDropdown.model.ts

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

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

@@ -0,0 +1,2 @@
+export { VoicePlayerModel } from './VoicePlayer.model'
+export { PlayerState } from './Player.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 { VoiceRecordDivider } from './VoiceRecordDivider'
+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}
+          />
+          <VoiceRecordDivider />
+          <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',
+  },
+})