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

package/dist/typescript/module/features/voice/playing/components/VoiceTranscriptionsDropdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VoiceTranscriptionsDropdown.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/voice/playing/components/VoiceTranscriptionsDropdown.tsx"],"names":[],"mappings":"AASA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAEL,SAAS,EACT,SAAS,EAMV,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,WAAW,EAA0B,MAAM,aAAa,CAAA;AAEjE,OAAO,EAAE,gBAAgB,EAAe,MAAM,UAAU,CAAA;AASxD,KAAK,gCAAgC,GAAG;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,KAAK,EAAE,gBAAgB,CAAA;IACvB,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,2BAA2B,+FAQrC,gCAAgC,sBA4MlC,CAAA"}

package/dist/typescript/module/features/voice/playing/components/VoiceTranscriptionsDropdownItem.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-type VoiceTranscriptionsDropdownItemProps = {
-    attempt: number;
-    content: string;
-    isActive: boolean;
-    isLoading?: boolean;
-    onToggle: (attempt: number) => void;
-    scrollToAttempt: (attempt: number) => void;
-};
-export declare const VoiceTranscriptionsDropdownItem: React.MemoExoticComponent<({ attempt, content, isActive, isLoading, onToggle, scrollToAttempt, }: VoiceTranscriptionsDropdownItemProps) => React.JSX.Element>;
-export {};
-//# sourceMappingURL=VoiceTranscriptionsDropdownItem.d.ts.map

package/dist/typescript/module/features/voice/playing/components/VoiceTranscriptionsDropdownItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VoiceTranscriptionsDropdownItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/voice/playing/components/VoiceTranscriptionsDropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAexD,KAAK,oCAAoC,GAAG;IAC1C,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED,eAAO,MAAM,+BAA+B,oGAQvC,oCAAoC,uBAmExC,CAAA"}

package/dist/typescript/module/features/voice/playing/hooks/useVoiceTranscriptionsDropdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useVoiceTranscriptionsDropdown.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/voice/playing/hooks/useVoiceTranscriptionsDropdown.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gCAAgC,EAAE,MAAM,4CAA4C,CAAA;AAE7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD,eAAO,MAAM,8BAA8B,UAAW,gCAAgC;;;;;;;;;;;0BAMvD,iBAAiB;CAwC/C,CAAA"}

package/dist/typescript/module/features/voice/playing/hooks/useVoiceTranscriptionsDropdownItemAnimation.d.ts

@@ -1,11 +0,0 @@
-import { LayoutChangeEvent } from 'react-native';
-export declare const useVoiceTranscriptionsDropdownItemAnimation: (isExpanded: boolean) => {
-    contentAnimatedStyle: {
-        height: number;
-        opacity: number;
-        overflow: "hidden";
-    };
-    onLayout: (event: LayoutChangeEvent) => void;
-    progress: import("react-native-reanimated").SharedValue<number>;
-};
-//# sourceMappingURL=useVoiceTranscriptionsDropdownItemAnimation.d.ts.map

package/dist/typescript/module/features/voice/playing/hooks/useVoiceTranscriptionsDropdownItemAnimation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useVoiceTranscriptionsDropdownItemAnimation.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/voice/playing/hooks/useVoiceTranscriptionsDropdownItemAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAShD,eAAO,MAAM,2CAA2C,eAAgB,OAAO;;;;;;sBAoBpD,iBAAiB;;CAS3C,CAAA"}

package/dist/typescript/module/features/voice/playing/model/TranscriptionsDownloaderModel.d.ts

@@ -1,15 +0,0 @@
-import { VoiceTranscriptionsCollection } from './VoiceTranscriptionsCollection';
-import { VoicePlayerApi } from '../../types';
-export declare class TranscriptionsDownloaderModel {
-    private readonly collection;
-    private readonly api;
-    readonly setTranscriptsLoaded: import("effector").EventCallable<boolean>;
-    readonly reset: import("effector").EventCallable<void>;
-    readonly $transcriptsLoaded: import("effector").StoreWritable<boolean>;
-    constructor(collection: VoiceTranscriptionsCollection, api: VoicePlayerApi);
-    private fetchTranscriptWithRetry;
-    readonly loadAllTranscripts: import("effector").Effect<void, void, Error>;
-    getTranscript(attemptNumber: number): string | undefined;
-    isTranscriptLoading(attemptNumber: number): boolean;
-}
-//# sourceMappingURL=TranscriptionsDownloaderModel.d.ts.map

package/dist/typescript/module/features/voice/playing/model/TranscriptionsDownloaderModel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TranscriptionsDownloaderModel.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/voice/playing/model/TranscriptionsDownloaderModel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAA;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAO5C,qBAAa,6BAA6B;IACxC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA+B;IAC1D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAgB;IAEpC,SAAgB,oBAAoB,4CAAyB;IAC7D,SAAgB,KAAK,yCAAgB;IAErC,SAAgB,kBAAkB,4CAA8D;gBAEpF,UAAU,EAAE,6BAA6B,EAAE,GAAG,EAAE,cAAc;YAK5D,wBAAwB;IAmBtC,SAAgB,kBAAkB,+CA4BhC;IAEK,aAAa,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAIxD,mBAAmB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO;CAG3D"}

package/dist/typescript/module/features/voice/playing/model/VoiceTranscriptionsCollection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VoiceTranscriptionsCollection.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/voice/playing/model/VoiceTranscriptionsCollection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAEpD,qBAAa,6BAA6B;IACxC,SAAgB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAY;IAEpE,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,EAAE,sBAAsB;IAIvD,MAAM,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,sBAAsB,CAAC;IAKnE,MAAM,CAAC,aAAa,EAAE,MAAM;IAI5B,GAAG,CAAC,aAAa,EAAE,MAAM;IAIzB,MAAM;IAIN,KAAK;IAIL,aAAa,CAAC,aAAa,EAAE,MAAM;IAKnC,QAAQ,CAAC,aAAa,EAAE,MAAM;CAItC"}

package/dist/typescript/module/features/voice/playing/model/VoiceTranscriptionsDropdown.model.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VoiceTranscriptionsDropdown.model.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/voice/playing/model/VoiceTranscriptionsDropdown.model.ts"],"names":[],"mappings":"AAEA,qBAAa,gCAAgC;IAC3C,SAAgB,YAAY,yCAAgB;IAC5C,SAAgB,WAAW,4CAAyB;IACpD,SAAgB,KAAK,yCAAgB;IAErC,SAAgB,WAAW,4CAEP;CACrB"}

package/src/features/fluency/components/FluencyStatusOverlay.tsx

@@ -1,101 +0,0 @@
-import React, { ReactNode } from 'react'
-import { StyleSheet, View } from 'react-native'
-import {
-  COLORS,
-  ErrorIcon,
-  HeadingVariants,
-  InfoIcon,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { FluencyStatus } from '../shared/fluency.constants'
-import type { TranslationKey } from '../../../i18n/i18n'
-import { useText } from '../../../i18n/i18n'
-
-type StatusVariant = {
-  icon: ReactNode
-  circleColor: string
-  titleKey: TranslationKey
-  subtitleKey: TranslationKey
-}
-
-const FLUENCY_STATUS_VARIANTS: Record<FluencyStatus, StatusVariant> = {
-  [FluencyStatus.ERROR]: {
-    icon: <ErrorIcon color={COLORS.PRIMARY_RED} size={40} />,
-    circleColor: COLORS.RED_1,
-    titleKey: 'student.fluency.errorTitle',
-    subtitleKey: 'student.fluency.errorSubtitle',
-  },
-  [FluencyStatus.EMPTY]: {
-    icon: <InfoIcon color={COLORS.NEUTRAL_6} size={40} />,
-    circleColor: COLORS.NEUTRAL_2,
-    titleKey: 'student.fluency.emptyTitle',
-    subtitleKey: 'student.fluency.emptySubtitle',
-  },
-}
-
-type FluencyStatusOverlayProps = {
-  status: FluencyStatus
-}
-
-export const FluencyStatusOverlay = ({ status }: FluencyStatusOverlayProps) => {
-  const t = useText()
-
-  const variant = FLUENCY_STATUS_VARIANTS[status]
-  if (!variant) return null
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.content}>
-        <View style={[styles.iconCircle, { backgroundColor: variant.circleColor }]}>
-          {variant.icon}
-        </View>
-        <View style={styles.text}>
-          <Typography variant={HeadingVariants.H2} style={styles.title}>
-            {t(variant.titleKey)}
-          </Typography>
-          <Typography variant={HeadingVariants.H7} style={styles.subtitle}>
-            {t(variant.subtitleKey)}
-          </Typography>
-        </View>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  content: {
-    alignItems: 'center',
-    gap: SPACING[500],
-    paddingBottom: SPACING[800],
-  },
-  iconCircle: {
-    width: 88,
-    height: 88,
-    borderRadius: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    alignItems: 'center',
-    gap: SPACING[200],
-    maxWidth: 340,
-  },
-  title: {
-    color: COLORS.NEUTRAL_9,
-    textAlign: 'center',
-    fontSize: 24,
-    fontWeight: '500',
-  },
-  subtitle: {
-    color: COLORS.NEUTRAL_7,
-    textAlign: 'center',
-    fontSize: 16,
-    fontWeight: '400',
-  },
-})

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

@@ -1,296 +0,0 @@
-import {
-  Typography,
-  ScrollableList,
-  CaretDownIcon,
-  COLORS,
-  IS_WEB,
-  ScrollableListScrollView,
-} from '@magmamath/react-native-ui'
-import { useUnit } from 'effector-react'
-import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'
-import {
-  TouchableOpacity,
-  StyleProp,
-  ViewStyle,
-  FlatList,
-  LayoutChangeEvent,
-  ScrollView,
-  View,
-  StyleSheet,
-} from 'react-native'
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
-import { AnswerAudio, VoiceTranscriptionItem } from '../../types'
-import { useVoiceTranscriptionsDropdown } from '../hooks/useVoiceTranscriptionsDropdown'
-import { VoicePlayerModel, PlayerState } from '../model'
-import { VoiceTranscriptionsDropdownItem } from './VoiceTranscriptionsDropdownItem'
-import { DROPDOWN_MAX_CONTENT_HEIGHT, NO_AUDIO_BE_MESSAGE } from '../../constants'
-import { useText } from '../../../../i18n/i18n'
-import { PlayButton } from '../../../../shared/components/PlayButton'
-import { getActiveAttempt, getAudioStatus } from '../../helpers'
-
-const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)
-
-type VoiceTranscriptionsDropdownProps = {
-  style?: StyleProp<ViewStyle>
-  model: VoicePlayerModel
-  answers: AnswerAudio[]
-  attemptOffset: number
-  onAttemptOffsetChange: (offset: number) => void
-  attemptsCount: number
-  problemId: string
-}
-
-export const VoiceTranscriptionsDropdown = ({
-  style,
-  model,
-  answers,
-  attemptOffset,
-  onAttemptOffsetChange,
-  attemptsCount,
-  problemId,
-}: VoiceTranscriptionsDropdownProps) => {
-  const [attempts, setAttempts] = useState<VoiceTranscriptionItem[]>([])
-
-  const scrollRef = useRef<FlatList | null>(null)
-  const scrollViewRef = useRef<ScrollView | null>(null)
-  const itemLayoutsRef = useRef<Map<string, number>>(new Map())
-  const answersRef = useRef(answers)
-  answersRef.current = answers
-
-  const t = useText()
-
-  const [currentAttempt, transcriptsLoaded, playerState, isDropdownExpanded] = useUnit([
-    model.$currentAttempt,
-    model.loader.$transcriptsLoaded,
-    model.$playerState,
-    model.dropdown.$isExpanded,
-  ])
-
-  const activeAttempt = getActiveAttempt(attemptOffset, attemptsCount)
-
-  const answersKey = useMemo(
-    () => answers.map((a) => `${a._id}:${a.audioFileId ?? ''}`).join(','),
-    [answers],
-  )
-
-  const hasActiveTranscript =
-    activeAttempt !== null && answers?.[activeAttempt - 1]?.audioFileId !== undefined
-
-  const playButtonState = {
-    isActive: playerState !== PlayerState.IDLE,
-    isLoading: playerState === PlayerState.LOADING,
-    status: getAudioStatus(playerState),
-  }
-
-  const { listAnimatedStyle, iconAnimatedStyle, onListLayout } = useVoiceTranscriptionsDropdown(
-    model.dropdown,
-  )
-
-  const handleItemLayout = useCallback((id: string, event: LayoutChangeEvent) => {
-    itemLayoutsRef.current.set(id, event.nativeEvent.layout.y)
-  }, [])
-
-  const scrollToAttempt = useCallback(
-    (attemptNumber: number) => {
-      if (IS_WEB) {
-        const item = attempts.find((item) => item.attemptNumber === attemptNumber)
-        if (item) {
-          const y = itemLayoutsRef.current.get(item._id)
-          if (y !== undefined) {
-            scrollViewRef.current?.scrollTo({ y, animated: true })
-          }
-        }
-        return
-      }
-
-      const index = attempts.findIndex((item) => item.attemptNumber === attemptNumber)
-      if (index !== -1) {
-        scrollRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 })
-      }
-    },
-    [attempts],
-  )
-
-  const handleItemToggle = useCallback(
-    (attempt: number) => {
-      if (onAttemptOffsetChange && attemptsCount !== undefined) {
-        onAttemptOffsetChange(attemptsCount - attempt)
-      }
-    },
-    [onAttemptOffsetChange, attemptsCount],
-  )
-
-  const handlePlayPress = useCallback(() => {
-    if (activeAttempt) {
-      model.togglePlayPause(activeAttempt)
-    }
-  }, [model, activeAttempt])
-
-  const handleScrollToIndexFailed = useCallback((info: { index: number }) => {
-    setTimeout(() => {
-      scrollRef.current?.scrollToIndex({ index: info.index, animated: true, viewPosition: 0 })
-    }, 100)
-  }, [])
-
-  useEffect(() => {
-    model.reinitializePlayer()
-    return () => model.cleanup()
-  }, [model])
-
-  useEffect(() => {
-    const isLastAttemptsWithoutDrowing = !answers[answers.length - 1].drawing
-    if (answers.length > 0 && isLastAttemptsWithoutDrowing) {
-      model.dropdown.setExpanded(true)
-    } else {
-      model.dropdown.setExpanded(false)
-    }
-
-    model.resetPlayer()
-  }, [problemId])
-
-  useEffect(() => {
-    if (answersRef.current.some((answer) => answer.audioFileId)) {
-      model.initializeWithAudios(answersRef.current)
-      model.loader.loadAllTranscripts()
-    }
-  }, [model, answersKey])
-
-  useEffect(() => {
-    model.stopAudio()
-  }, [activeAttempt])
-
-  useEffect(() => {
-    const allAttempts = model.getAllAttempts()
-    setAttempts(allAttempts)
-  }, [answersKey, transcriptsLoaded, currentAttempt, model])
-
-  useEffect(() => {
-    if (isDropdownExpanded && activeAttempt !== null) {
-      setTimeout(() => {
-        scrollToAttempt(activeAttempt)
-      }, 500)
-    }
-  }, [isDropdownExpanded, answersKey])
-
-  const renderItem = useCallback(
-    ({ item }: { item: VoiceTranscriptionItem }) => {
-      const isLoading = model.loader.isTranscriptLoading(item.attemptNumber)
-      const transcript = model.loader.getTranscript(item.attemptNumber)
-      const isActive = activeAttempt === item.attemptNumber
-
-      return (
-        <VoiceTranscriptionsDropdownItem
-          isLoading={isActive && isLoading}
-          attempt={item.attemptNumber}
-          content={
-            transcript && transcript !== NO_AUDIO_BE_MESSAGE
-              ? transcript
-              : t('voice.transcriptNotAvailable')
-          }
-          isActive={isActive}
-          onToggle={handleItemToggle}
-          scrollToAttempt={scrollToAttempt}
-        />
-      )
-    },
-    [model, activeAttempt, t, handleItemToggle, scrollToAttempt],
-  )
-
-  return (
-    <Animated.View style={[styles.container, style]}>
-      <View style={styles.header}>
-        <Typography style={styles.title} variant="h7">
-          {t('voice.transcriptions')}
-        </Typography>
-        {hasActiveTranscript && (
-          <Animated.View entering={FadeIn.duration(120)} exiting={FadeOut.duration(120)}>
-            <PlayButton
-              state={playButtonState}
-              onPress={handlePlayPress}
-              activityIndicatorColor={COLORS.NEUTRAL_1}
-            />
-          </Animated.View>
-        )}
-      </View>
-
-      <Animated.View style={[listAnimatedStyle, { overflow: 'hidden' }]}>
-        <View onLayout={onListLayout} style={styles.listContainer}>
-          {IS_WEB ? (
-            <ScrollableListScrollView
-              bounces={false}
-              ref={scrollViewRef}
-              hideShadow
-              style={styles.list}
-              contentContainerStyle={styles.listContent}
-            >
-              {attempts.map((item) => (
-                <View key={item._id} onLayout={(e) => handleItemLayout(item._id, e)}>
-                  {renderItem({ item })}
-                </View>
-              ))}
-            </ScrollableListScrollView>
-          ) : (
-            <ScrollableList
-              bounces={false}
-              ref={scrollRef}
-              hideShadow
-              data={attempts}
-              keyExtractor={(item) => item._id}
-              onScrollToIndexFailed={handleScrollToIndexFailed}
-              renderItem={renderItem}
-              contentContainerStyle={styles.listContent}
-            />
-          )}
-        </View>
-      </Animated.View>
-
-      <AnimatedTouchableOpacity
-        style={[styles.expandButton, iconAnimatedStyle]}
-        onPress={() => model.dropdown.toggleExpand()}
-      >
-        <CaretDownIcon size={22} />
-      </AnimatedTouchableOpacity>
-    </Animated.View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    top: 56,
-    left: 8,
-    width: 222,
-    maxHeight: 405,
-    minHeight: 51,
-    padding: 4,
-    boxShadow: '0px 1px 3px 0px rgba(51, 51, 51, 0.25)',
-    borderRadius: 12,
-    backgroundColor: COLORS.NEUTRAL_1,
-    overflow: 'hidden',
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 4,
-    marginBottom: 4,
-    height: 32,
-  },
-  title: {
-    color: COLORS.NEUTRAL_9,
-    marginLeft: 4,
-  },
-  list: { flex: 1 },
-  expandButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  listContainer: {
-    position: 'absolute',
-    maxHeight: DROPDOWN_MAX_CONTENT_HEIGHT,
-    width: '100%',
-  },
-  listContent: {
-    paddingHorizontal: 4,
-  },
-})

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,
-  }
-}