@magmamath/students-features 1.6.4 → 1.7.0-rc.0

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

@@ -1,148 +0,0 @@
-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,
-    ])
-  // Auto-activate translation once per (problemId, activeAttempt) when translatable
-  const autoActivatedAttempts = useRef(new Set<number>())
-
-  const activeAttempt = getActiveAttempt(attemptOffset, attemptsCount)
-
-  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')
-
-  // UI-only lifecycle: collapse the dropdown on mount/unmount and on problem
-  // change. Playback engine mutations (init/reset/setCurrentAttempt/stopAudio)
-  // are owned by useVoicePlayerLifecycle, called by the page-level consumer.
-  useEffect(() => {
-    return () => {
-      model.dropdown.setExpanded(false)
-    }
-  }, [model])
-
-  useEffect(() => {
-    model.dropdown.setExpanded(false)
-  }, [problemId])
-
-  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/PlaybackController.ts

@@ -1,221 +0,0 @@
-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/TranscriptionsDownloader.model.ts

@@ -1,88 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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/lib/components/GradientView.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import { View, Platform, ColorValue } from 'react-native'
-import { LinearGradient } from 'expo-linear-gradient'
-import type { StyleProp, ViewStyle } from 'react-native'
-
-type Point = { x: number; y: number }
-
-type GradientViewProps = {
-  colors: string[]
-  start?: Point
-  end?: Point
-  locations?: number[]
-  style?: StyleProp<ViewStyle>
-  pointerEvents?: 'none' | 'box-none' | 'box-only' | 'auto'
-  children?: React.ReactNode
-}
-
-const buildCssGradient = (
-  colors: string[],
-  start: Point,
-  end: Point,
-  locations?: number[],
-): string => {
-  const angle = Math.round(Math.atan2(end.x - start.x, -(end.y - start.y)) * (180 / Math.PI))
-  const stops = colors
-    .map((color, i) => {
-      const pct = locations
-        ? `${Math.round(locations[i] * 100)}%`
-        : `${Math.round((i / (colors.length - 1)) * 100)}%`
-      return `${color} ${pct}`
-    })
-    .join(', ')
-  return `linear-gradient(${angle}deg, ${stops})`
-}
-
-export const GradientView = ({
-  colors,
-  start = { x: 0, y: 0 },
-  end = { x: 0, y: 1 },
-  locations,
-  style,
-  pointerEvents,
-  children,
-}: GradientViewProps) => {
-  if (Platform.OS === 'web') {
-    return (
-      <View
-        pointerEvents={pointerEvents}
-        style={[
-          style,
-          { backgroundImage: buildCssGradient(colors, start, end, locations) } as ViewStyle,
-        ]}
-      >
-        {children}
-      </View>
-    )
-  }
-
-  return (
-    <LinearGradient
-      colors={colors as [ColorValue, ColorValue]}
-      start={start}
-      end={end}
-      locations={locations as [number, number]}
-      style={style}
-      pointerEvents={pointerEvents}
-    >
-      {children}
-    </LinearGradient>
-  )
-}