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

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

@@ -1,128 +0,0 @@
-import { Pressable, StyleSheet, View } from 'react-native'
-import React, { memo, useCallback, useRef } from 'react'
-import {
-  Button,
-  ButtonSize,
-  ButtonVariant,
-  COLORS,
-  Loader,
-  LoaderColor,
-  LoaderSize,
-  Typography,
-} from '@magmamath/react-native-ui'
-import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
-import { useVoiceTranscriptionsDropdownItemAnimation } from '../hooks/useVoiceTranscriptionsDropdownItemAnimation'
-import { useText } from '../../../../i18n/i18n'
-
-type VoiceTranscriptionsDropdownItemProps = {
-  attempt: number
-  content: string
-  isActive: boolean
-  isLoading?: boolean
-  onToggle: (attempt: number) => void
-  scrollToAttempt: (attempt: number) => void
-}
-
-export const VoiceTranscriptionsDropdownItem = memo(
-  ({
-    attempt,
-    content,
-    isActive,
-    isLoading,
-    onToggle,
-    scrollToAttempt,
-  }: VoiceTranscriptionsDropdownItemProps) => {
-    const t = useText()
-    const isActiveRef = useRef(isActive)
-    isActiveRef.current = isActive
-
-    const { contentAnimatedStyle, onLayout, progress } =
-      useVoiceTranscriptionsDropdownItemAnimation(isActive)
-
-    const handleScrollToAttempt = useCallback(
-      (attemptNumber: number) => {
-        if (!isActiveRef.current) return
-        scrollToAttempt(attemptNumber)
-      },
-      [scrollToAttempt],
-    )
-
-    useAnimatedReaction(
-      () => progress.value,
-      (progress) => {
-        if (progress === 1 && isActive) {
-          runOnJS(handleScrollToAttempt)(attempt)
-        }
-      },
-      [progress, attempt, isActive],
-    )
-
-    return (
-      <View style={styles.container}>
-        <Pressable disabled={isActive} style={styles.itemHeader} onPress={() => onToggle(attempt)}>
-          <Button
-            onPress={() => !isActive && onToggle(attempt)}
-            size={ButtonSize.SMALL}
-            variant={ButtonVariant.TERTIARY}
-            style={{
-              text: {
-                textTransform: 'uppercase',
-                color: isActive ? COLORS.NEUTRAL_9 : COLORS.NEUTRAL_7,
-              },
-            }}
-          >
-            {t('voice.attempt', { number: String(attempt) })}
-          </Button>
-        </Pressable>
-        {isLoading ? (
-          <View style={styles.loaderContainer}>
-            <Loader size={LoaderSize.SMALL} color={LoaderColor.BLUE} />
-          </View>
-        ) : (
-          <Animated.View style={contentAnimatedStyle}>
-            <View onLayout={onLayout} style={styles.contentWrapper}>
-              <Typography
-                variant="h8"
-                style={[
-                  styles.itemContent,
-                  {
-                    color: isActive ? COLORS.NEUTRAL_9 : COLORS.NEUTRAL_7,
-                  },
-                ]}
-              >
-                {content}
-              </Typography>
-            </View>
-          </Animated.View>
-        )}
-      </View>
-    )
-  },
-)
-
-const styles = StyleSheet.create({
-  container: {
-    borderTopWidth: 1,
-    borderColor: COLORS.NEUTRAL_3,
-  },
-  itemHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    paddingVertical: 8,
-  },
-  itemContent: {
-    paddingHorizontal: 8,
-  },
-  contentWrapper: {
-    width: '100%',
-    position: 'absolute',
-  },
-  loaderContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: 4,
-    paddingBottom: 8,
-  },
-})

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

@@ -1,40 +0,0 @@
-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/TranscriptionsDownloaderModel.ts

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