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

package/src/features/translation/providers/translation.interface.ts

@@ -0,0 +1,63 @@
+import { replaceMappedTokens } from '../helpers'
+
+export type LanguageGlossary = {
+  [languageCode: string]: Record<string, string>
+}
+
+type TranslationProviderProps = {
+  supportedLanguages: string[]
+  glossaries?: LanguageGlossary
+}
+
+export abstract class TranslationProvider {
+  protected readonly supportedLanguages: ReadonlySet<string>
+  protected readonly glossaries: LanguageGlossary = {}
+
+  protected constructor({ supportedLanguages, glossaries = {} }: TranslationProviderProps) {
+    this.supportedLanguages = new Set(supportedLanguages)
+    this.glossaries = glossaries
+  }
+
+  public abstract request(
+    text: string,
+    targetLanguage: string,
+    sourceLanguage?: string,
+  ): Promise<string>
+  public abstract requestBatch(
+    text: string[],
+    targetLanguage: string,
+    sourceLanguage?: string,
+  ): Promise<string[]>
+
+  public isTargetSupported(language: string) {
+    return this.resolveLanguage(language) !== null
+  }
+
+  /**
+   * Returns the provider-supported variant of `language`, falling back to the base
+   * language part (e.g. "en-SE" → "en") when the exact locale is not listed.
+   * Subclasses may override to add their own resolution (e.g. language names).
+   * Returns null when the language cannot be resolved.
+   */
+  public resolveLanguage(language: string): string | null {
+    if (!language) return null
+    if (this.supportedLanguages.has(language)) return language
+    const base = language.split('-')[0]
+    if (base !== language && this.supportedLanguages.has(base)) return base
+    return null
+  }
+
+  public getSupportedLanguages() {
+    return this.supportedLanguages.values()
+  }
+
+  /**
+   * Replaces full standalone words in text using a custom glossary for the target language,
+   * matching words like "Hello", or "Hej" regardless of case, but not when they appear inside other words.
+   */
+  public applyGlossary(text: string, targetLanguage: string): string {
+    const glossary = this.glossaries[targetLanguage]
+    if (!glossary) return text
+    return replaceMappedTokens(text, glossary)
+  }
+}

package/src/features/translation/types.ts

@@ -0,0 +1,30 @@
+export type TranslatableProblem = {
+  description: string
+  richDescription?: string
+  answerVariants: string[]
+}
+
+export type TranslateAllFxParams<TProblem extends TranslatableProblem = TranslatableProblem> = {
+  problem: TProblem | null
+  translationLanguageCode?: string | null
+}
+
+export type TranslateFxParams = {
+  cacheKey: string
+  text: string
+}
+
+export type Replacement = {
+  placeholder: string
+  original: string
+  leftPad?: boolean
+  rightPad?: boolean
+}
+
+export type MaskSegmentParams = {
+  text: string
+  regex: RegExp
+  placeholder: string
+  replacements: Replacement[]
+  shouldSkip?: (match: string) => boolean
+}

package/src/features/voice/index.ts

@@ -4,8 +4,10 @@ export * from './recording/modal/VoiceRecordDeleteModal'
 export * from './recording/modal/VoiceRecordUndoModal'
 
 export * from './playing/model/VoicePlayer.model'
-export * from './playing/components/VoiceTranscriptionsDropdown'
+export * from './playing/components/VoiceTranscription'
+export * from './playing/hooks/useVoicePlayerLifecycle'
 
 export * from './playing/components/VoiceIcon'
 export * from './constants'
 export * from './types'
+export type { WithAbortSignal } from '../../types/common.types'

package/src/features/voice/playing/components/VoiceIcon.tsx

@@ -1,6 +1,6 @@
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import React from 'react'
-import { COLORS, MicrophoneIcon } from '@magmamath/react-native-ui'
+import { COLORS, MicrophoneIcon, SPACING } from '@magmamath/react-native-ui'
 import Animated, { FadeIn } from 'react-native-reanimated'
 
 type VoiceIconProps = {
@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
     height: '80%',
     aspectRatio: 1,
     alignSelf: 'center',
-    padding: 24,
+    padding: SPACING[600],
     borderWidth: 4,
     borderColor: COLORS.NEUTRAL_5,
     borderRadius: 400,

package/src/features/voice/playing/components/VoiceTranscriptContent.tsx

@@ -0,0 +1,44 @@
+import {
+  COLORS,
+  Loader,
+  LoaderColor,
+  LoaderSize,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+type VoiceTranscriptContentProps = {
+  text: string
+  isLoading: boolean
+}
+
+export const VoiceTranscriptContent = ({ text, isLoading }: VoiceTranscriptContentProps) => {
+  if (isLoading) {
+    return (
+      <View style={styles.loaderContainer}>
+        <Loader size={LoaderSize.SMALL} color={LoaderColor.BLUE} />
+      </View>
+    )
+  }
+
+  return (
+    <Typography variant="h8" style={styles.text}>
+      {text}
+    </Typography>
+  )
+}
+
+const styles = StyleSheet.create({
+  text: {
+    color: COLORS.NEUTRAL_7,
+    paddingHorizontal: SPACING[200],
+    paddingVertical: SPACING[200],
+  },
+  loaderContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: SPACING[200],
+  },
+})

package/src/features/voice/playing/components/VoiceTranscription.tsx

@@ -0,0 +1,117 @@
+import { Typography, COLORS, SPACING } from '@magmamath/react-native-ui'
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { AnswerAudio, VoiceTranscriptionVariant } from '../../types'
+import { useText } from '../../../../i18n/i18n'
+import { useVoiceTranscriptionController } from '../hooks/useVoiceTranscriptionController'
+import { VoicePlayerModel } from '../model'
+import { VoiceTranscriptContent } from './VoiceTranscriptContent'
+import { VoiceTranscriptionCollapsible } from './VoiceTranscriptionCollapsible'
+import { VoiceTranscriptionHeaderActions } from './VoiceTranscriptionHeaderActions'
+
+type VoiceTranscriptionProps = {
+  style?: StyleProp<ViewStyle>
+  model: VoicePlayerModel
+  answers: AnswerAudio[]
+  attemptOffset: number
+  attemptsCount: number
+  problemId: string
+  variant?: VoiceTranscriptionVariant
+}
+
+export const VoiceTranscription = ({
+  style,
+  model,
+  answers,
+  attemptOffset,
+  attemptsCount,
+  problemId,
+  variant = VoiceTranscriptionVariant.SMALL,
+}: VoiceTranscriptionProps) => {
+  const t = useText()
+  const { display, flags, actions } = useVoiceTranscriptionController({
+    model,
+    answers,
+    attemptOffset,
+    attemptsCount,
+    problemId,
+  })
+  const isLargeVariant = variant === VoiceTranscriptionVariant.LARGE
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        isLargeVariant ? styles.largeContainer : styles.smallContainer,
+        style,
+      ]}
+    >
+      <View style={styles.header}>
+        <Typography style={styles.title} variant="h7">
+          {t('voice.transcriptions')}
+        </Typography>
+        {flags.anyAttemptHasAudio && (
+          <VoiceTranscriptionHeaderActions
+            playerState={flags.playerState}
+            isTranslationActive={flags.isTranslationActive}
+            canTranslate={flags.canTranslate}
+            onPlayPress={actions.onPlayPress}
+            onTranslationPress={actions.onTranslationToggle}
+          />
+        )}
+      </View>
+
+      {isLargeVariant ? (
+        <VoiceTranscriptContent text={display.text} isLoading={display.isLoading} />
+      ) : (
+        <VoiceTranscriptionCollapsible
+          text={display.text}
+          isLoading={display.isLoading}
+          dropdown={model.dropdown}
+        />
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: SPACING[100],
+    boxShadow: '0px 1px 3px 0px rgba(51, 51, 51, 0.25)',
+    borderRadius: 12,
+    backgroundColor: COLORS.NEUTRAL_1,
+    overflow: 'hidden',
+  },
+  // SMALL: floats over the drawing area; consumer-positioned siblings sit
+  // beneath it. Absolute positioning is intentional here.
+  smallContainer: {
+    position: 'absolute',
+    top: 56,
+    left: SPACING[200],
+    width: 222,
+    maxHeight: 405,
+    minHeight: 51,
+  },
+  // LARGE: rendered as a flex child of the SolutionCard's column flow,
+  // between the header and footer. Auto-sizes to whatever space the footer
+  // (with or without the playable timeline) leaves — no magic numbers.
+  largeContainer: {
+    flex: 1,
+    marginHorizontal: SPACING[200],
+    marginTop: SPACING[200],
+    marginBottom: SPACING[200],
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: SPACING[100],
+    marginBottom: SPACING[100],
+    height: 32,
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+    marginLeft: SPACING[100],
+  },
+})

package/src/features/voice/playing/components/VoiceTranscriptionCollapsible.tsx

@@ -0,0 +1,59 @@
+import { CaretDownIcon } from '@magmamath/react-native-ui'
+import React, { useCallback } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { useDropdownAnimation } from '../hooks/useDropdownAnimation'
+import { DropdownModel } from '../model/Dropdown.model'
+import { VoiceTranscriptContent } from './VoiceTranscriptContent'
+
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)
+
+type VoiceTranscriptionCollapsibleProps = {
+  text: string
+  isLoading: boolean
+  dropdown: DropdownModel
+}
+
+export const VoiceTranscriptionCollapsible = ({
+  text,
+  isLoading,
+  dropdown,
+}: VoiceTranscriptionCollapsibleProps) => {
+  const { listAnimatedStyle, iconAnimatedStyle, onListLayout } =
+    useDropdownAnimation(dropdown)
+
+  const handleToggle = useCallback(() => {
+    dropdown.toggleExpand()
+  }, [dropdown])
+
+  return (
+    <>
+      <Animated.View style={[listAnimatedStyle, styles.collapsibleContent]}>
+        <View onLayout={onListLayout} style={styles.transcriptContainer}>
+          <VoiceTranscriptContent text={text} isLoading={isLoading} />
+        </View>
+      </Animated.View>
+      <AnimatedTouchableOpacity
+        style={[styles.expandButton, iconAnimatedStyle]}
+        onPress={handleToggle}
+      >
+        <CaretDownIcon size={22} />
+      </AnimatedTouchableOpacity>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  collapsibleContent: {
+    overflow: 'hidden',
+  },
+  transcriptContainer: {
+    position: 'absolute',
+    width: '100%',
+    paddingHorizontal: 4,
+  },
+  expandButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/features/voice/playing/components/VoiceTranscriptionHeaderActions.tsx

@@ -0,0 +1,61 @@
+import { Button, COLORS, GlobeIcon, SPACING } from '@magmamath/react-native-ui'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { ColorScheme } from '../../../chatbot/types/style.types'
+import { PlayButton } from '../../../../shared/components/PlayButton'
+import { PlayerState } from '../model'
+import { getAudioStatus } from '../../helpers'
+
+type VoiceTranscriptionsHeaderActionsProps = {
+  playerState: PlayerState
+  isTranslationActive: boolean
+  canTranslate: boolean
+  onPlayPress: () => void
+  onTranslationPress: () => void
+}
+
+export const VoiceTranscriptionHeaderActions = ({
+  playerState,
+  isTranslationActive,
+  canTranslate,
+  onPlayPress,
+  onTranslationPress,
+}: VoiceTranscriptionsHeaderActionsProps) => {
+  const playButtonState = {
+    isActive: playerState !== PlayerState.IDLE,
+    isLoading: playerState === PlayerState.LOADING,
+    status: getAudioStatus(playerState),
+  }
+
+  return (
+    <View style={styles.container}>
+      <PlayButton
+        state={playButtonState}
+        onPress={onPlayPress}
+        activityIndicatorColor={COLORS.NEUTRAL_1}
+        colorScheme={ColorScheme.Yellow}
+      />
+      {canTranslate && (
+        <Button
+          variant="secondary"
+          size="small"
+          colorScheme={ColorScheme.Yellow}
+          isActive={isTranslationActive}
+          onPress={onTranslationPress}
+          icon={<GlobeIcon color={isTranslationActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} />}
+        />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  hidden: {
+    opacity: 0,
+  },
+})

package/src/features/voice/playing/hooks/{useVoiceTranscriptionsDropdown.ts → useDropdownAnimation.ts}

@@ -1,11 +1,11 @@
 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 { DropdownModel } from '../model/Dropdown.model'
 import { DROPDOWN_MAX_CONTENT_HEIGHT } from '../../constants'
 import { LayoutChangeEvent } from 'react-native'
 
-export const useVoiceTranscriptionsDropdown = (model: VoiceTranscriptionsDropdownModel) => {
+export const useDropdownAnimation = (model: DropdownModel) => {
   const isExpanded = useUnit(model.$isExpanded)
 
   const contentHeight = useSharedValue(0)
@@ -13,9 +13,9 @@ export const useVoiceTranscriptionsDropdown = (model: VoiceTranscriptionsDropdow
 
   const onListLayout = (event: LayoutChangeEvent) => {
     const measuredHeight = event.nativeEvent.layout.height
-    if (measuredHeight > 0) {
-      contentHeight.value = measuredHeight
-    }
+    if (measuredHeight <= 0) return
+    contentHeight.value =
+      contentHeight.value === 0 ? measuredHeight : withTiming(measuredHeight, { duration: 180 })
   }
 
   const listAnimatedStyle = useAnimatedStyle(() => {

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

@@ -0,0 +1,64 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { getActiveAttempt } from '../../helpers'
+import { AnswerAudio } from '../../types'
+import { VoicePlayerModel } from '../model'
+
+type Params = {
+  model: VoicePlayerModel
+  answers: AnswerAudio[]
+  attemptOffset: number
+  attemptsCount: number
+  problemId: string
+}
+
+// Owns playback engine mutations (init/reset/setCurrentAttempt/stopAudio).
+// VoiceTranscription stays read-only; consumers call this once per page.
+export const useVoicePlayerLifecycle = ({
+  model,
+  answers,
+  attemptOffset,
+  attemptsCount,
+  problemId,
+}: Params) => {
+  const activeAttempt = getActiveAttempt(attemptOffset, attemptsCount)
+
+  const answersKey = useMemo(
+    () => answers.map((a) => `${a._id}:${a.audioFileId ?? ''}`).join(','),
+    [answers],
+  )
+
+  const hasAnyAudio = useMemo(() => answers.some((a) => !!a.audioFileId), [answers])
+
+  const answersRef = useRef(answers)
+  answersRef.current = answers
+
+  useEffect(() => {
+    model.reinitializePlayer()
+    // No stopAudio cleanup: this hook re-runs across normal renders in some
+    // host components, and tearing down audio in the cleanup races with
+    // play() requests from other consumers (e.g. TimelineManager). The page
+    // unmount path (resetPlayer / cleanup) still releases audio properly.
+  }, [model])
+
+  useEffect(() => {
+    model.resetPlayer()
+  }, [problemId])
+
+  useEffect(() => {
+    if (answersRef.current.some((a) => a.audioFileId)) {
+      model.initializeWithAudios(answersRef.current)
+    }
+  }, [model, answersKey])
+
+  useEffect(() => {
+    // No stopAudio: VoiceSource (timeline) and VoiceTranscription (manual play
+    // button) drive playback transitions themselves. Calling stopAudio here
+    // races with concurrent play() requests and aborts in-flight audio.play().
+    model.setCurrentAttempt(activeAttempt)
+    if (activeAttempt !== null) {
+      model.loader.loadTranscriptForAttempt(activeAttempt)
+    }
+  }, [model, activeAttempt, answersKey])
+
+  return { activeAttempt, hasAnyAudio }
+}

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

@@ -0,0 +1,148 @@
+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/{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()