@magmamath/students-features 1.4.6 → 1.5.0-rc.10

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

@@ -0,0 +1,221 @@
+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()
+      return
+    }
+    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)
+  }
+
+  // Non-destructive halt: pause + IDLE, keep audio loaded so a subsequent
+  // play() can resume the same uri without re-fetch. Previously this called
+  // player.stop() which did replace('') and set stopped=true — that corrupted
+  // the AudioPlayer (isLoaded stuck false) and aborted any in-flight play()'s
+  // waitForLoad, when the lifecycle hook re-fired stopAudio mid-play.
+  public halt() {
+    this.shouldPreventPlayback = true
+    this.abortAllDownloads()
+    if (this.player.player && this.player.$playerState.getState() !== PlayerState.IDLE) {
+      this.player.player.pause()
+      this.player.setPlayerState(PlayerState.IDLE)
+    }
+    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

@@ -8,9 +8,23 @@ export const enum PlayerState {
   IDLE = 'idle',
 }
 
+// audio.play() returns a promise that rejects with AbortError when a subsequent
+// pause() interrupts it. That's expected during pause/resume cycles; suppress noise.
+const safePlay = (audio: AudioPlayer) => {
+  const result = audio.play() as unknown
+  if (result && typeof (result as Promise<unknown>).catch === 'function') {
+    ;(result as Promise<unknown>).catch((err: unknown) => {
+      if ((err as { name?: string })?.name === 'AbortError') return
+      throw err
+    })
+  }
+}
+
 export class PlayerModel {
   public player: AudioPlayer | null = createAudioPlayer()
   private stopped = false
+  private primedUri: string | null = null
+  private pendingSeek: number | null = null
 
   public readonly reset = createEvent()
   public readonly setPlayerState = createEvent<PlayerState>()
@@ -39,15 +53,36 @@ export class PlayerModel {
     this.stopped = true
     if (this.player) {
       this.player.replace('')
+      this.primedUri = null
+      this.pendingSeek = 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) => {
+    // When not loaded, defer the seek so play()'s waitForLoad can apply it
+    // before starting playback — otherwise the requested offset is lost and
+    // audio starts from 0 after a scrub-across-attempt that halted the player.
+    if (!this.player?.isLoaded) {
+      this.pendingSeek = seconds
+      return
+    }
+    this.pendingSeek = null
+    await this.player.seekTo(seconds)
+  })
+
   public readonly resume = createEffect(() => {
     if (this.player) {
-      this.player.play()
+      safePlay(this.player)
       this.setPlayerState(PlayerState.PLAYING)
     } else {
       console.warn('Cannot resume: audio player not initialized')
@@ -61,11 +96,22 @@ export class PlayerModel {
     }
 
     this.stopped = false
-    this.player.replace(uri)
+    if (this.primedUri !== uri || !this.player.isLoaded) {
+      this.player.replace(uri)
+      this.primedUri = uri
+    }
 
-    const waitForLoad = () => {
+    const waitForLoad = async () => {
       if (this.stopped) return
       if (this.player && this.player.isLoaded) {
+        if (this.pendingSeek !== null) {
+          const target = this.pendingSeek
+          this.pendingSeek = null
+          try {
+            await this.player.seekTo(target)
+          } catch {}
+          if (this.stopped) return
+        }
         const unsubscribe = this.player.addListener('playbackStatusUpdate', (status) => {
           if (status.didJustFinish) {
             this.playbackFinished()
@@ -74,7 +120,7 @@ export class PlayerModel {
           }
         })
 
-        this.player.play()
+        safePlay(this.player)
         this.setPlayerState(PlayerState.PLAYING)
       } else {
         setTimeout(waitForLoad, 10)
@@ -99,6 +145,8 @@ export class PlayerModel {
       this.player.release()
       this.player = null
     }
+    this.primedUri = null
+    this.pendingSeek = 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 { TranscriptionStatus, 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 async fetchTranscriptWithRetry(audioFileId: string): Promise<TranscriptResult> {
+    const cached = this.transcriptCache.get(audioFileId)
+    if (cached) return 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 === TranscriptionStatus.COMPLETED) {
+        return { text: response.text, language: response.language }
+      }
+
+      if (response.status === TranscriptionStatus.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
   }