@magmamath/students-features 0.9.113 → 0.9.114-rc.1

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

@@ -0,0 +1,239 @@
+import {
+  Typography,
+  ScrollableList,
+  CaretDownIcon,
+  COLORS,
+  IS_WEB,
+} from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import React, { useRef, useEffect, useState, useCallback } from 'react'
+import { TouchableOpacity, StyleProp, ViewStyle, FlatList, View, StyleSheet } from 'react-native'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { AnswerAudio } from '../../types'
+import { useVoiceTranscriptionsDropdown } from '../hooks/useVoiceTranscriptionsDropdown'
+import { VoicePlayerModel, PlayerState, VoiceTranscriptionItem } from '../model'
+import { VoiceTranscriptionsDropdownItem } from './VoiceTranscriptionsDropdownItem'
+import { DROPDOWN_MAX_CONTENT_HEIGHT, NO_AUDIO_BE_MESSAGE } from '../../constants'
+import { useText } from '../../../../shared/translation'
+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
+}
+
+export const VoiceTranscriptionsDropdown = ({
+  style,
+  model,
+  answers,
+  attemptOffset,
+  onAttemptOffsetChange,
+  attemptsCount,
+}: VoiceTranscriptionsDropdownProps) => {
+  const scrollRef = useRef<FlatList | null>(null)
+  const t = useText()
+
+  const [currentAttempt, transcriptsLoaded, playerState] = useUnit([
+    model.$currentAttempt,
+    model.$transcriptsLoaded,
+    model.$playerState,
+  ])
+
+  const [attempts, setAttempts] = useState<VoiceTranscriptionItem[]>([])
+  const activeAttempt = getActiveAttempt(attemptOffset, attemptsCount)
+
+  const answersKey = answers.map((a) => `${a._id}:${a.audioFileId ?? ''}`).join(',')
+  const answersRef = useRef(answers)
+  answersRef.current = answers
+
+  const { listAnimatedStyle, iconAnimatedStyle, onListLayout } = useVoiceTranscriptionsDropdown(
+    model.dropdown,
+  )
+
+  const hasActiveTranscript =
+    activeAttempt !== null && answers?.[activeAttempt - 1]?.audioFileId !== undefined
+
+  const playButtonState = {
+    isActive: playerState !== PlayerState.IDLE,
+    isLoading: playerState === PlayerState.LOADING,
+    status: getAudioStatus(playerState),
+  }
+
+  const scrollToAttempt = useCallback(
+    (attemptNumber: number) => {
+      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(() => {
+    if (answersRef.current.some((answer) => answer.audioFileId)) {
+      model.initializeWithAudios(answersRef.current)
+      model.loadAllTranscripts()
+    }
+  }, [model, answersKey])
+
+  useEffect(() => {
+    if (answers.length > 0 && !answers.find((answer) => answer.drawing)) {
+      model.dropdown.setExpanded(true)
+    }
+    model.stopAudio()
+  }, [attemptOffset])
+
+  useEffect(() => {
+    const allAttempts = model.getAllAttempts()
+    const validAttempts = allAttempts.filter(
+      (item) => typeof item.attemptNumber === 'number' && !isNaN(item.attemptNumber),
+    )
+    setAttempts(validAttempts)
+  }, [answersKey, transcriptsLoaded, currentAttempt, model])
+
+  useEffect(() => {
+    if (activeAttempt !== null) {
+      scrollToAttempt(activeAttempt)
+    }
+  }, [activeAttempt, hasActiveTranscript, scrollToAttempt, model])
+
+  const renderItem = useCallback(
+    ({ item }: { item: VoiceTranscriptionItem }) => {
+      const isLoading = model.isTranscriptLoading(item.attemptNumber)
+      const transcript = model.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}>
+          <ScrollableList
+            bounces={false}
+            ref={scrollRef}
+            hideShadow
+            data={attempts}
+            keyExtractor={(item) => item._id}
+            onScrollToIndexFailed={handleScrollToIndexFailed}
+            renderItem={renderItem}
+            style={IS_WEB && styles.list}
+            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

@@ -0,0 +1,127 @@
+import { Pressable, StyleSheet, View } from 'react-native'
+import React, { memo, useCallback } 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 '../../../../shared/translation'
+
+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 { contentAnimatedStyle, onLayout, progress } =
+      useVoiceTranscriptionsDropdownItemAnimation(isActive)
+
+    const handleScrollToAttempt = useCallback(
+      (attemptNumber: number) => {
+        setTimeout(() => {
+          scrollToAttempt(attemptNumber)
+        }, 300)
+      },
+      [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/useVoiceTranscriptionsDropdown.ts

@@ -0,0 +1,54 @@
+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 { DROPDOWN_MAX_CONTENT_HEIGHT } from '../../constants'
+import { LayoutChangeEvent } from 'react-native'
+
+export const useVoiceTranscriptionsDropdown = (model: VoiceTranscriptionsDropdownModel) => {
+  const isExpanded = useUnit(model.$isExpanded)
+
+  const contentHeight = useSharedValue(0)
+  const animationProgress = useSharedValue(isExpanded ? 1 : 0)
+
+  const onListLayout = (event: LayoutChangeEvent) => {
+    const measuredHeight = event.nativeEvent.layout.height
+    if (measuredHeight > 0) {
+      contentHeight.value = measuredHeight
+    }
+  }
+
+  const listAnimatedStyle = useAnimatedStyle(() => {
+    const height = interpolate(
+      animationProgress.value,
+      [0, 1],
+      [0, contentHeight.value || DROPDOWN_MAX_CONTENT_HEIGHT],
+    )
+
+    const opacity = interpolate(animationProgress.value, [0, 0.3, 1], [0, 0, 1])
+
+    return {
+      height,
+      opacity,
+    }
+  }, [animationProgress, contentHeight])
+
+  const iconAnimatedStyle = useAnimatedStyle(() => {
+    const rotation = interpolate(animationProgress.value, [0, 1], [0, 180])
+
+    return {
+      transform: [{ rotate: `${rotation}deg` }],
+    }
+  }, [animationProgress])
+
+  useEffect(() => {
+    animationProgress.value = withTiming(isExpanded ? 1 : 0, { duration: 300 })
+  }, [isExpanded, animationProgress])
+
+  return {
+    isExpanded,
+    listAnimatedStyle,
+    iconAnimatedStyle,
+    onListLayout,
+  }
+}

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

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

@@ -0,0 +1,92 @@
+import { createEffect, createEvent, restore } from 'effector'
+import { AudioPlayer, createAudioPlayer } from 'expo-audio'
+
+export enum PlayerState {
+  PLAYING = 'playing',
+  PAUSED = 'paused',
+  LOADING = 'loading',
+  IDLE = 'idle',
+}
+
+export class PlayerModel {
+  public player: AudioPlayer | null = createAudioPlayer()
+
+  public readonly reset = createEvent()
+  public readonly setPlayerState = createEvent<PlayerState>()
+  public readonly playbackFinished = createEvent()
+
+  public readonly $playerState = restore(this.setPlayerState, PlayerState.IDLE).reset(this.reset)
+
+  public readonly pause = createEffect(() => {
+    if (this.player) {
+      this.player.pause()
+      this.setPlayerState(PlayerState.PAUSED)
+    } else {
+      console.warn('Cannot pause: audio player not initialized')
+    }
+  })
+
+  public readonly stop = createEffect(() => {
+    if (this.player) {
+      this.player.replace('')
+      this.setPlayerState(PlayerState.IDLE)
+    } else {
+      console.warn('Cannot stop: audio player not initialized')
+    }
+  })
+
+  public readonly resume = createEffect(() => {
+    if (this.player) {
+      this.player.play()
+      this.setPlayerState(PlayerState.PLAYING)
+    } else {
+      console.warn('Cannot resume: audio player not initialized')
+    }
+  })
+
+  public readonly play = createEffect(async (uri: string) => {
+    if (!this.player) {
+      console.warn('Audio player not initialized')
+      return
+    }
+
+    this.player.replace(uri)
+
+    const waitForLoad = () => {
+      if (this.player && this.player.isLoaded) {
+        const unsubscribe = this.player.addListener('playbackStatusUpdate', (status) => {
+          if (status.didJustFinish) {
+            this.playbackFinished()
+            unsubscribe?.remove?.()
+            this.setPlayerState(PlayerState.IDLE)
+          }
+        })
+
+        this.player.play()
+        this.setPlayerState(PlayerState.PLAYING)
+      } else {
+        setTimeout(waitForLoad, 10)
+      }
+    }
+
+    waitForLoad()
+  })
+
+  public reinitialize() {
+    if (!this.player) {
+      this.player = createAudioPlayer()
+    }
+  }
+
+  public release() {
+    if (this.player) {
+      try {
+        this.stop()
+        this.player.remove()
+      } catch (error) {}
+      this.player.release()
+      this.player = null
+    }
+    this.reset()
+  }
+}