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

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

@@ -0,0 +1,171 @@
+import { useUnit } from 'effector-react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { NO_AUDIO_BE_MESSAGE } from '../../constants'
+import { getActiveAttempt } from '../../helpers'
+import { AnswerAudio } from '../../types'
+import { resolveGoogleLanguageCode } from '../../../translation/providers/google/supportedLanguages'
+import { useText } from '../../../../i18n/i18n'
+import { VoicePlayerModel } from '../model'
+import { PlayerState } from '../model/Player.model'
+
+type Params = {
+  model: VoicePlayerModel
+  answers: AnswerAudio[]
+  attemptOffset: number
+  attemptsCount: number
+  problemId: string
+}
+
+export type VoiceTranscriptionController = ReturnType<typeof useVoiceTranscriptionController>
+
+export const useVoiceTranscriptionController = ({
+  model,
+  answers,
+  attemptOffset,
+  attemptsCount,
+  problemId,
+}: Params) => {
+  const t = useText()
+  const { i18n } = useTranslation()
+
+  const [playerState, isLoadingTranscripts, isTranslationActive, translations, isTranslating] =
+    useUnit([
+      model.$playerState,
+      model.loader.loadTranscriptForAttempt.pending,
+      model.translation.$isActive,
+      model.translation.$translations,
+      model.translation.translate.pending,
+    ])
+
+  const activeAttempt = getActiveAttempt(attemptOffset, attemptsCount)
+
+  const answersKey = useMemo(
+    () => answers.map((a) => `${a._id}:${a.audioFileId ?? ''}`).join(','),
+    [answers],
+  )
+
+  const activeAudioFileId =
+    activeAttempt !== null ? answers?.[activeAttempt - 1]?.audioFileId : undefined
+  const hasActiveAudio = activeAudioFileId !== undefined
+  const anyAttemptHasAudio = useMemo(() => answers.some((a) => !!a.audioFileId), [answers])
+
+  const cachedEntry = activeAudioFileId
+    ? model.loader.getCachedTranscript(activeAudioFileId)
+    : undefined
+  const activeTranscript = cachedEntry?.text ?? null
+  const hasTranscriptText = !!activeTranscript && activeTranscript !== NO_AUDIO_BE_MESSAGE
+  const isActiveTranscriptLoading = isLoadingTranscripts && hasActiveAudio && !activeTranscript
+
+  const isSourceSameAsTarget =
+    !!cachedEntry?.language &&
+    resolveGoogleLanguageCode(cachedEntry.language) === resolveGoogleLanguageCode(i18n.language)
+
+  const canTranslate = hasTranscriptText && !isSourceSameAsTarget
+
+  const cachedTranslation = activeAttempt !== null ? translations[activeAttempt] : undefined
+  const showTranslation = isTranslationActive && canTranslate
+  const isTranslationLoading = showTranslation && !cachedTranslation && isTranslating
+
+  const displayText = showTranslation
+    ? (cachedTranslation ?? activeTranscript!)
+    : hasTranscriptText
+      ? activeTranscript!
+      : t('voice.transcriptNotAvailable')
+
+  // Lifecycle effects
+  const answersRef = useRef(answers)
+  answersRef.current = answers
+
+  useEffect(() => {
+    model.reinitializePlayer()
+    return () => {
+      model.stopAudio()
+      model.dropdown.setExpanded(false)
+    }
+  }, [model])
+
+  useEffect(() => {
+    model.dropdown.setExpanded(false)
+    model.resetPlayer()
+  }, [problemId])
+
+  useEffect(() => {
+    if (answersRef.current.some((a) => a.audioFileId)) {
+      model.initializeWithAudios(answersRef.current)
+    }
+  }, [model, answersKey])
+
+  useEffect(() => {
+    model.stopAudio()
+    model.setCurrentAttempt(activeAttempt)
+    if (activeAttempt !== null) {
+      model.loader.loadTranscriptForAttempt(activeAttempt)
+    }
+  }, [model, activeAttempt, answersKey])
+
+  // Auto-activate translation once per (problemId, activeAttempt) when translatable
+  const autoActivatedAttempts = useRef(new Set<number>())
+  useEffect(() => {
+    autoActivatedAttempts.current.clear()
+  }, [problemId])
+  useEffect(() => {
+    if (
+      canTranslate &&
+      activeAttempt !== null &&
+      !autoActivatedAttempts.current.has(activeAttempt)
+    ) {
+      autoActivatedAttempts.current.add(activeAttempt)
+      model.translation.setActive(true)
+    }
+  }, [canTranslate, activeAttempt, model])
+
+  // Trigger translate when we should show translation but don't have it cached
+  useEffect(() => {
+    if (showTranslation && activeAttempt !== null && !cachedTranslation && !isTranslating) {
+      model.translation.translate({
+        attemptNumber: activeAttempt,
+        targetLanguage: i18n.language,
+      })
+    }
+  }, [showTranslation, activeAttempt, cachedTranslation, isTranslating, i18n.language, model])
+
+  // Auto-open dropdown when a translation successfully completes
+  useEffect(() => {
+    return model.translation.translate.doneData.watch((result) => {
+      if (result) {
+        model.dropdown.setExpanded(true)
+      }
+    })
+  }, [model])
+
+  const onPlayPress = useCallback(() => {
+    if (activeAttempt) {
+      model.translation.setActive(false)
+      model.togglePlayPause(activeAttempt)
+    }
+  }, [model, activeAttempt])
+
+  const onTranslationToggle = useCallback(() => {
+    model.translation.toggle()
+    model.dropdown.setExpanded(true)
+  }, [model])
+
+  return {
+    display: {
+      text: displayText,
+      isLoading: isActiveTranscriptLoading || isTranslationLoading,
+    },
+    flags: {
+      playerState: playerState as PlayerState,
+      hasActiveAudio,
+      anyAttemptHasAudio,
+      canTranslate,
+      isTranslationActive,
+    },
+    actions: {
+      onPlayPress,
+      onTranslationToggle,
+    },
+  }
+}

package/src/features/voice/playing/model/{VoiceTranscriptionsDropdown.model.ts → Dropdown.model.ts}

@@ -1,6 +1,6 @@
-import { createEvent, createStore, restore } from 'effector'
+import { createEvent, restore } from 'effector'
 
-export class VoiceTranscriptionsDropdownModel {
+export class DropdownModel {
   public readonly toggleExpand = createEvent()
   public readonly setExpanded = createEvent<boolean>()
   public readonly reset = createEvent()

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

@@ -0,0 +1,213 @@
+import { createEffect } from 'effector'
+import { PlayerModel, PlayerState } from './Player.model'
+import { TranscriptionsCollection } from './TranscriptionsCollection'
+import { VoiceFileDownloaderModel } from './VoiceFileDownloader.model'
+
+type PlaybackControllerDeps = {
+  collection: TranscriptionsCollection
+  player: PlayerModel
+  downloader: VoiceFileDownloaderModel
+}
+
+export class PlaybackController {
+  private readonly collection: TranscriptionsCollection
+  private readonly player: PlayerModel
+  private readonly downloader: VoiceFileDownloaderModel
+  private currentPlayingAttempt: number | null = null
+  private shouldPreventPlayback = false
+
+  constructor(deps: PlaybackControllerDeps) {
+    this.collection = deps.collection
+    this.player = deps.player
+    this.downloader = deps.downloader
+    this.player.playbackFinished.watch(() => this.clearCurrentAttempt())
+  }
+
+  public readonly togglePlayPause = (attemptNumber: number) => {
+    const playerState = this.player.$playerState.getState()
+    if (this.currentPlayingAttempt === attemptNumber && playerState === PlayerState.PLAYING) {
+      this.player.pause()
+    } else {
+      this.handlePlayAttempt(attemptNumber)
+    }
+  }
+
+  public readonly preloadAudio = createEffect(async (attemptNumber: number) => {
+    const item = this.collection.get(attemptNumber)
+    if (!item) return
+    if (this.collection.hasAudio(attemptNumber)) {
+      this.primePlayerIfIdle(attemptNumber)
+      return
+    }
+    if (item.audioDownloadPromise) {
+      try {
+        await item.audioDownloadPromise
+      } catch {}
+      this.primePlayerIfIdle(attemptNumber)
+      return
+    }
+    try {
+      await this.downloadAudio(attemptNumber)
+      this.primePlayerIfIdle(attemptNumber)
+    } catch (error) {
+      if (error instanceof Error && error.name === 'AbortError') return
+      console.error('Audio preload error:', error)
+    }
+  })
+
+  private primePlayerIfIdle(attemptNumber: number) {
+    if (this.player.$playerState.getState() !== PlayerState.IDLE) return
+    if (this.currentPlayingAttempt !== null) return
+    const audioUri = this.collection.get(attemptNumber)?.audioUri
+    if (!audioUri) return
+    this.player.prime(audioUri)
+  }
+
+  public halt() {
+    this.shouldPreventPlayback = true
+    this.abortAllDownloads()
+    this.player.stop()
+    this.clearCurrentAttempt()
+  }
+
+  public releaseResources() {
+    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 clearCurrentAttempt() {
+    this.currentPlayingAttempt = null
+  }
+
+  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 async downloadAudio(attemptNumber: number): Promise<void> {
+    const item = this.collection.get(attemptNumber)
+    if (!item) return
+
+    const { collectionItem, downloadPromise } = await this.downloader.download({
+      audioFileId: item.audioFileId,
+      attemptNumber,
+    })
+    this.collection.update(attemptNumber, collectionItem)
+
+    try {
+      const result = await downloadPromise
+      this.collection.update(attemptNumber, {
+        audioUri: result.uri,
+        audioLoading: false,
+        audioError: undefined,
+        controller: undefined,
+        audioDownloadPromise: undefined,
+      })
+    } catch (error) {
+      const isAbort = error instanceof Error && error.name === 'AbortError'
+      this.collection.update(attemptNumber, {
+        audioLoading: false,
+        audioError: isAbort
+          ? undefined
+          : error instanceof Error
+            ? error.message
+            : 'Failed to download audio',
+        controller: undefined,
+        audioDownloadPromise: undefined,
+      })
+      throw error
+    }
+  }
+
+  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.player.setPlayerState(PlayerState.LOADING)
+
+      if (item.audioDownloadPromise) {
+        await item.audioDownloadPromise
+      } else {
+        await this.downloadAudio(attemptNumber)
+      }
+
+      if (this.shouldPreventPlayback) {
+        this.player.setPlayerState(PlayerState.IDLE)
+        return
+      }
+
+      this.player.setPlayerState(PlayerState.IDLE)
+      this.playAudioFx(attemptNumber)
+    } catch (error) {
+      if (error instanceof Error && error.name === 'AbortError') {
+        this.player.setPlayerState(PlayerState.IDLE)
+        return
+      }
+      console.error('Audio download error:', error)
+      this.player.setPlayerState(PlayerState.IDLE)
+    }
+  })
+
+  private readonly 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.player.player?.remove()
+      }
+
+      if (this.currentPlayingAttempt === attemptNumber && this.player.player?.playing) {
+        this.player.pause()
+        return
+      }
+
+      if (this.currentPlayingAttempt === attemptNumber && !this.player.player?.playing) {
+        this.player.resume()
+        return
+      }
+
+      this.currentPlayingAttempt = attemptNumber
+      await this.player.play(item.audioUri)
+    } catch (error) {
+      console.error('Error playing audio:', error)
+      this.player.setPlayerState(PlayerState.IDLE)
+
+      this.collection.update(attemptNumber, {
+        audioError: error instanceof Error ? error.message : 'Failed to play audio',
+      })
+    }
+  })
+}

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

@@ -11,6 +11,7 @@ export const enum PlayerState {
 export class PlayerModel {
   public player: AudioPlayer | null = createAudioPlayer()
   private stopped = false
+  private primedUri: string | null = null
 
   public readonly reset = createEvent()
   public readonly setPlayerState = createEvent<PlayerState>()
@@ -39,12 +40,32 @@ export class PlayerModel {
     this.stopped = true
     if (this.player) {
       this.player.replace('')
+      this.primedUri = null
       this.setPlayerState(PlayerState.IDLE)
     } else {
       console.warn('Cannot stop: audio player not initialized')
     }
   })
 
+  public readonly prime = createEffect((uri: string) => {
+    if (!this.player) return
+    if (this.primedUri === uri) return
+    this.primedUri = uri
+    this.player.replace(uri)
+  })
+
+  public readonly seek = createEffect(async (seconds: number) => {
+    if (!this.player) {
+      console.warn('Cannot seek: audio player not initialized')
+      return
+    }
+    if (!this.player.isLoaded) {
+      console.warn('Cannot seek: audio player not loaded')
+      return
+    }
+    await this.player.seekTo(seconds)
+  })
+
   public readonly resume = createEffect(() => {
     if (this.player) {
       this.player.play()
@@ -61,7 +82,10 @@ export class PlayerModel {
     }
 
     this.stopped = false
-    this.player.replace(uri)
+    if (this.primedUri !== uri) {
+      this.player.replace(uri)
+      this.primedUri = uri
+    }
 
     const waitForLoad = () => {
       if (this.stopped) return
@@ -99,6 +123,7 @@ export class PlayerModel {
       this.player.release()
       this.player = null
     }
+    this.primedUri = null
     this.reset()
   }
 }

package/src/features/voice/playing/model/{VoiceTranscriptionsCollection.ts → TranscriptionsCollection.ts}

@@ -1,6 +1,6 @@
 import { VoiceTranscriptionItem } from '../../types'
 
-export class VoiceTranscriptionsCollection {
+export class TranscriptionsCollection {
   public readonly collection: Map<number, VoiceTranscriptionItem> = new Map()
 
   public add(attemptNumber: number, item: VoiceTranscriptionItem) {

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

@@ -0,0 +1,88 @@
+import { createEffect } from 'effector'
+import { TranscriptionsCollection } from './TranscriptionsCollection'
+import { VoicePlayerApi } from '../../types'
+import {
+  NO_AUDIO_BE_MESSAGE,
+  TRANSCRIPT_MAX_RETRIES,
+  TRANSCRIPT_RETRY_INTERVAL_MS,
+} from '../../constants'
+
+type TranscriptResult = { text: string; language?: string }
+
+export class TranscriptionsDownloaderModel {
+  private readonly collection: TranscriptionsCollection
+  private readonly api: VoicePlayerApi
+  private readonly inflightFetches = new Map<string, Promise<TranscriptResult>>()
+  private readonly transcriptCache = new Map<string, TranscriptResult>()
+
+  constructor(collection: TranscriptionsCollection, api: VoicePlayerApi) {
+    this.collection = collection
+    this.api = api
+  }
+
+  private fetchTranscriptWithRetry(audioFileId: string): Promise<TranscriptResult> {
+    const cached = this.transcriptCache.get(audioFileId)
+    if (cached) return Promise.resolve(cached)
+
+    const existing = this.inflightFetches.get(audioFileId)
+    if (existing) return existing
+
+    const promise = this.runFetchWithRetry(audioFileId)
+      .then((result) => {
+        this.transcriptCache.set(audioFileId, result)
+        return result
+      })
+      .finally(() => {
+        this.inflightFetches.delete(audioFileId)
+      })
+    this.inflightFetches.set(audioFileId, promise)
+    return promise
+  }
+
+  private async runFetchWithRetry(audioFileId: string): Promise<TranscriptResult> {
+    for (let attempt = 0; attempt < TRANSCRIPT_MAX_RETRIES; attempt++) {
+      const response = await this.api.getAudioFileTranscript(audioFileId)
+
+      if (response.status === 'completed') {
+        return { text: response.text, language: response.language }
+      }
+
+      if (response.status === 'failed') {
+        return { text: NO_AUDIO_BE_MESSAGE }
+      }
+
+      if (attempt < TRANSCRIPT_MAX_RETRIES - 1) {
+        await new Promise((resolve) => setTimeout(resolve, TRANSCRIPT_RETRY_INTERVAL_MS))
+      }
+    }
+    return { text: NO_AUDIO_BE_MESSAGE }
+  }
+
+  public readonly loadTranscriptForAttempt = createEffect(async (attemptNumber: number) => {
+    const item = this.collection.get(attemptNumber)
+    if (!item?.audioFileId) return
+    if (item.transcript || item.transcriptLoading) return
+
+    this.collection.update(attemptNumber, { transcriptLoading: true })
+
+    try {
+      const { text, language } = await this.fetchTranscriptWithRetry(item.audioFileId)
+
+      this.collection.update(attemptNumber, {
+        transcript: text,
+        transcriptLanguage: language,
+        transcriptLoading: false,
+        transcriptError: undefined,
+      })
+    } catch (error) {
+      this.collection.update(attemptNumber, {
+        transcriptLoading: false,
+        transcriptError: error instanceof Error ? error.message : 'Failed to load transcript',
+      })
+    }
+  })
+
+  public getCachedTranscript(audioFileId: string): TranscriptResult | undefined {
+    return this.transcriptCache.get(audioFileId)
+  }
+}

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

@@ -0,0 +1,75 @@
+import { createEffect, createEvent, createStore, restore } from 'effector'
+import { TranscriptionsCollection } from './TranscriptionsCollection'
+import { VoicePlayerApi } from '../../types'
+import { TranslationService } from '../../../translation/model/TranslationService'
+import { GoogleTranslationProvider } from '../../../translation/providers/google/GoogleTranslationProvider'
+import {
+  preservedWordsReplacers,
+  wordsToPreserve,
+} from '../../../translation/preserve/wordsToPreserve'
+
+type TranslateParams = {
+  attemptNumber: number
+  targetLanguage: string
+}
+
+type TranslateResult = {
+  attemptNumber: number
+  text: string
+}
+
+export class TranslationModel {
+  private readonly collection: TranscriptionsCollection
+  private readonly service: TranslationService
+
+  public readonly toggle = createEvent()
+  public readonly setActive = createEvent<boolean>()
+  public readonly clearCache = createEvent()
+  public readonly reset = createEvent()
+
+  public readonly $isActive = restore(this.setActive, false)
+    .on(this.toggle, (state) => !state)
+    .reset(this.reset)
+
+  public readonly translate = createEffect<TranslateParams, TranslateResult | null>(
+    async ({ attemptNumber, targetLanguage }) => {
+      const item = this.collection.get(attemptNumber)
+      if (!item?.transcript) return null
+
+      const text = await this.service.translate(item.transcript, {
+        targetLang: targetLanguage,
+        sourceLang: item.transcriptLanguage,
+        cacheKey: `voice::${attemptNumber}::${targetLanguage}`,
+      })
+
+      if (!text) return null
+
+      return { attemptNumber, text }
+    },
+  )
+
+  public readonly $translations = createStore<Record<number, string>>({})
+    .on(this.translate.doneData, (state, result) => {
+      if (!result) return state
+      return { ...state, [result.attemptNumber]: result.text }
+    })
+    .reset(this.reset, this.clearCache)
+
+  constructor(collection: TranscriptionsCollection, api: VoicePlayerApi) {
+    this.collection = collection
+    this.service = new TranslationService({
+      preserve: {
+        map: wordsToPreserve,
+        replacers: preservedWordsReplacers,
+      },
+      providers: [new GoogleTranslationProvider({ api: { translateRequest: api.translateText } })],
+    })
+
+    this.clearCache.watch(() => this.service.reset())
+    this.reset.watch(() => this.service.reset())
+  }
+
+  public getTranslation(attemptNumber: number): string | undefined {
+    return this.$translations.getState()[attemptNumber]
+  }
+}

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

@@ -13,9 +13,9 @@ type DownloadResult = {
 }
 
 export class VoiceFileDownloaderModel {
-  private api!: VoicePlayerApi
+  private readonly api: VoicePlayerApi
 
-  public readonly setApi = (api: VoicePlayerApi) => {
+  constructor(api: VoicePlayerApi) {
     this.api = api
   }