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

package/src/features/chatbot/components/ChatMessage/MessageTextToSpeech.tsx

@@ -1,42 +1,11 @@
 import React from 'react'
-import { ActivityIndicator } from 'react-native'
-import { Button, COLORS } from '@magmamath/react-native-ui'
-
-import { SpeakerIcon } from '../../../../shared/icons/SpeakerIcon'
-import { PlayIcon } from '../../../../shared/icons/PlayIcon'
-import { PauseIcon } from '../../../../shared/icons/PauseIcon'
-import { AudioStatus, T2SState } from '../../types/t2s.types'
 import { useChatModel } from '../../context/ChatBotModelContext'
+import { PlayButton } from '../../../../shared/components/PlayButton'
+import { T2SState } from '../../types/t2s.types'
 import { ConversationMessage } from '../../types/units.types'
-import { ColorScheme } from '../../types/style.types'
 import { MessageVariant } from '../../types/model.types'
-import { CONTROLS_COLORS_MAP, MESSAGE_COLORS_MAP } from '../../constants'
-
-type TextToSpeechIconProps = {
-  status: AudioStatus
-  isLoading: boolean
-  isActive: boolean
-  colorScheme?: ColorScheme
-}
-
-const TextToSpeechIcon = ({
-  status,
-  isActive,
-  isLoading,
-  colorScheme = ColorScheme.Blue,
-}: TextToSpeechIconProps) => {
-  if (isLoading && isActive) {
-    return <ActivityIndicator color={CONTROLS_COLORS_MAP[colorScheme].background} />
-  }
-
-  if (!isActive) {
-    return <SpeakerIcon />
-  }
-
-  if (status === 'playing') return <PauseIcon color={COLORS.NEUTRAL_1} />
-  if (status === 'paused') return <PlayIcon color={COLORS.NEUTRAL_1} />
-  return <SpeakerIcon />
-}
+import { ColorScheme } from '../../types/style.types'
+import { MESSAGE_COLORS_MAP } from '../../constants'
 
 type MessageTextToSpeechProps = {
   state: T2SState
@@ -46,14 +15,14 @@ type MessageTextToSpeechProps = {
 }
 
 export const MessageTextToSpeech = ({
-  state: { status, disabled, isActive, isLoading },
-  message,
+  state,
   variant,
+  message,
   colorScheme = ColorScheme.Blue,
 }: MessageTextToSpeechProps) => {
   const model = useChatModel()
 
-  function play() {
+  const play = () => {
     void model.t2s.play({
       isTranslated: model.translation.$isTranslated.getState(),
       message,
@@ -61,21 +30,10 @@ export const MessageTextToSpeech = ({
   }
 
   return (
-    <Button
-      disabled={disabled}
-      isActive={isActive}
-      variant={'secondary'}
+    <PlayButton
       colorScheme={MESSAGE_COLORS_MAP[colorScheme][variant].icon}
-      size={'small'}
+      state={state}
       onPress={play}
-      icon={
-        <TextToSpeechIcon
-          isActive={isActive}
-          isLoading={isLoading}
-          status={status}
-          colorScheme={colorScheme}
-        />
-      }
     />
   )
 }

package/src/features/chatbot/constants.ts

@@ -46,24 +46,24 @@ export const MESSAGE_COLORS_MAP = {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
       border: COLORS.NEUTRAL_3,
-      icon: ButtonColor.BLUE,
+      icon: ColorScheme.Blue,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_BLUE,
       border: COLORS.PRIMARY_BLUE,
-      icon: ButtonColor.BLUE,
+      icon: ColorScheme.Blue,
     },
   },
   [ColorScheme.Yellow]: {
     [MessageVariant.RECEIVED]: {
       background: COLORS.NEUTRAL_3,
       border: COLORS.NEUTRAL_3,
-      icon: ButtonColor.YELLOW,
+      icon: ColorScheme.Yellow,
     },
     [MessageVariant.SENT]: {
       background: COLORS.PRIMARY_YELLOW,
       border: COLORS.PRIMARY_YELLOW,
-      icon: ButtonColor.YELLOW,
+      icon: ColorScheme.Yellow,
     },
   },
 }

package/src/features/gifCelebrations/helpers.ts

@@ -52,6 +52,7 @@ export const generateProblemsGifsTable = (
     const selectedGif = unshownGif || gifsInGroup[0]
 
     if (selectedGif) {
+      selectedGif.isShown = true
       result[problemNumber] = {
         url: selectedGif.url,
         group: groupKey,

package/src/features/voice/constants.ts

@@ -0,0 +1,14 @@
+export const VOICE_RECORDER_CONTAINER_SIZES = {
+  COLLAPSED: 61,
+  EXPANDED: 152,
+}
+export const VOICE_RECORDER_MAX_DURATION_MS = 60000 // 1 minute
+export enum VoiceRecorderState {
+  IDLE,
+  RECORDING,
+  PAUSED,
+}
+export const DROPDOWN_MAX_CONTENT_HEIGHT = 330
+export const TRANSCRIPT_RETRY_INTERVAL_MS = 4000
+export const TRANSCRIPT_MAX_RETRIES = 15
+export const NO_AUDIO_BE_MESSAGE = 'No audio'

package/src/features/voice/helpers.ts

@@ -0,0 +1,254 @@
+import { IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
+import {
+  AudioPlayer,
+  AudioRecorder,
+  createAudioPlayer,
+  getRecordingPermissionsAsync,
+  requestRecordingPermissionsAsync,
+} from 'expo-audio'
+import * as FileSystem from 'expo-file-system'
+import { VoicePlayerApi, VoiceRecorderApi } from './types'
+import { VOICE_RECORDER_MAX_DURATION_MS } from './constants'
+import { PlayerState } from './playing/model'
+import { AudioStatus } from '../chatbot'
+import { AxiosResponse } from 'axios'
+
+export const formatDuration = (ms: number): string => {
+  const totalSeconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
+
+export const ensureRecordingPermissions = async () => {
+  const { status } = await getRecordingPermissionsAsync()
+  console.log('permission status: ', status)
+
+  if (status !== 'granted') {
+    const { granted } = await requestRecordingPermissionsAsync()
+    return granted
+  }
+
+  return true
+}
+
+const getAvailableInputsWeb = async () => {
+  if (!navigator.mediaDevices?.enumerateDevices) return []
+
+  const devices = await navigator.mediaDevices.enumerateDevices()
+  return devices.filter((d) => d.kind === 'audioinput')
+}
+
+export const getAvailableInputs = async (recorder: AudioRecorder) => {
+  if (IS_WEB) {
+    return await getAvailableInputsWeb()
+  }
+  if (IS_MOBILE) {
+    return await recorder.getAvailableInputs()
+  }
+  return []
+}
+
+export const addAudioInputsListenerWeb = (callback: (devices: MediaDeviceInfo[]) => void) => {
+  if (!IS_WEB || !navigator.mediaDevices?.addEventListener) {
+    return () => {}
+  }
+
+  const handleDeviceChange = async () => {
+    const devices = await getAvailableInputsWeb()
+    callback(devices)
+  }
+
+  handleDeviceChange()
+
+  navigator.mediaDevices.addEventListener('devicechange', handleDeviceChange)
+
+  return () => {
+    navigator.mediaDevices.removeEventListener('devicechange', handleDeviceChange)
+  }
+}
+/**
+ *
+ * @param fileUri
+ * @param externalPlayer - is optional expo-audio player, but should be provided
+ * because creating player is resource consuming operation
+ */
+export const getAudioDurationMs = (
+  fileUri: string,
+  externalPlayer?: AudioPlayer,
+): Promise<number | undefined> => {
+  if (!fileUri) return Promise.resolve(undefined)
+
+  const player = externalPlayer ?? createAudioPlayer()
+  const isInternalPlayer = !externalPlayer
+
+  player.replace(fileUri)
+
+  return new Promise((resolve, reject) => {
+    const subscription = player.addListener('playbackStatusUpdate', () => {
+      if (player.duration !== undefined && player.duration > 0) {
+        subscription.remove()
+
+        // player.duration is in seconds (e.g., 1.234567)
+        const durationMs = Math.round(player.duration * 1000) // convert to milliseconds
+
+        if (isInternalPlayer) {
+          player.remove()
+        }
+
+        resolve(durationMs)
+      }
+    })
+
+    setTimeout(() => {
+      subscription.remove()
+
+      if (isInternalPlayer) {
+        player.remove()
+      }
+
+      reject(new Error('Timeout loading audio metadata'))
+    }, 3000)
+  })
+}
+
+type GenerateAudioFormDataParams = {
+  audioFileUri: string
+  durationMs?: number
+  fileName?: string
+}
+
+export const generateAudioFormData = async ({
+  audioFileUri,
+  durationMs,
+  fileName,
+}: GenerateAudioFormDataParams): Promise<FormData> => {
+  //todo: add web or ios prefix to filename
+
+  const formData = new FormData()
+  const duration = Math.min(durationMs || 100, VOICE_RECORDER_MAX_DURATION_MS).toString()
+
+  if (IS_WEB) {
+    const response = await fetch(audioFileUri)
+    const blob = await response.blob()
+    const filename = fileName + blob.type.replace('audio/', '.')
+
+    formData.append('file', blob, filename)
+    formData.append('filename', filename)
+    formData.append('duration', duration)
+
+    return formData
+  }
+
+  const filename = fileName + '.m4a'
+  const file = {
+    uri: audioFileUri,
+    type: 'audio/m4a',
+    name: filename,
+  } as any
+
+  formData.append('file', file, filename)
+  formData.append('filename', filename)
+  formData.append('duration', duration)
+
+  return formData
+}
+
+export const uploadAudioFileRequestGenerator = (
+  audioFileFormData: FormData,
+  api: VoiceRecorderApi,
+) => {
+  const controller = new AbortController()
+
+  return {
+    uploadAudio: () =>
+      api.uploadAudioFile(
+        {
+          audioFileFormData,
+        },
+        //@ts-ignore
+        {
+          signal: controller.signal,
+        },
+      ),
+    controller,
+  }
+}
+
+const downloadAudioMobile = async (response: any, audioFileId: string) => {
+  const { config } = response
+  const url = config.url.startsWith('http')
+    ? config.url
+    : `${config.baseURL?.replace(/\/$/, '')}/${config.url.replace(/^\//, '')}`
+
+  const fileName = `audio-${audioFileId}.mp4`
+  const fileUri = `${FileSystem.cacheDirectory}${fileName}`
+  const authHeader = config.headers?.Authorization || config.headers?.authorization
+
+  const downloadResult = await FileSystem.downloadAsync(
+    url,
+    fileUri,
+    authHeader ? { headers: { Authorization: authHeader } } : undefined,
+  )
+
+  if (downloadResult.status !== 200) {
+    throw new Error(`Failed to download audio file. Status: ${downloadResult.status}`)
+  }
+
+  return {
+    uri: downloadResult.uri,
+    fileName,
+    fileType: 'audio/mp4',
+  }
+}
+
+const downloadAudioWeb = (response: AxiosResponse<Blob>, audioFileId: string) => {
+  const blob: Blob = response.data
+
+  if (!(blob instanceof Blob)) {
+    throw new Error('Unable to extract audio blob from response')
+  }
+
+  return {
+    uri: URL.createObjectURL(blob),
+    fileName: `audio-${audioFileId}.mp4`,
+    fileType: blob.type || 'audio/mp4',
+  }
+}
+
+export const downloadAudioFileRequestGenerator = (audioFileId: string, api: VoicePlayerApi) => {
+  const controller = new AbortController()
+
+  return {
+    downloadAudio: async () => {
+      const response = await api.downloadAudioFile(audioFileId, {
+        //@ts-ignore
+        signal: controller.signal,
+      })
+
+      return IS_WEB
+        ? downloadAudioWeb(response, audioFileId)
+        : downloadAudioMobile(response, audioFileId)
+    },
+    controller,
+  }
+}
+
+export const getActiveAttempt = (attemptOffset?: number, attemptsCount?: number): number | null => {
+  if (attemptOffset === undefined || attemptsCount === undefined) return null
+  return attemptsCount - attemptOffset
+}
+
+export const getAudioStatus = (state: PlayerState): AudioStatus | undefined => {
+  if (state === PlayerState.PLAYING) return AudioStatus.PLAYING
+  if (state === PlayerState.PAUSED) return AudioStatus.PAUSED
+  return undefined
+}
+
+export const is400Error = (error: unknown): boolean => {
+  if (error instanceof Error) {
+    const httpError = error as any
+    return httpError.status === 400 || httpError.response?.status === 400
+  }
+  return false
+}

package/src/features/voice/index.ts

@@ -0,0 +1,17 @@
+// Recording exports
+export * from './recording/components/VoiceRecord'
+export * from './recording/model/VoiceRecord.model'
+export * from './recording/modal/VoiceRecordDeleteModal'
+export * from './recording/modal/VoiceRecordUndoModal'
+
+// Playing exports
+export * from './playing/model/VoicePlayer.model'
+export * from './playing/model/VoiceTranscriptionsCollection'
+export * from './playing/model/VoiceTranscriptionsDownloader.model'
+export * from './playing/model/VoiceTranscriptionsDropdown.model'
+export * from './playing/components/VoiceTranscriptionsDropdown'
+
+// Shared exports
+export * from './playing/components/VoiceIcon'
+export * from './constants'
+export * from './types'

package/src/features/voice/model/index.ts

@@ -0,0 +1,13 @@
+// Re-export recording models
+export { VoiceRecordModel } from '../recording/model/VoiceRecord.model'
+export { VoiceRecordsCollection } from '../recording/model/VoiceRecordCollection'
+export { RecorderModel } from '../recording/model/Recorder.model'
+export { UploaderModel } from '../recording/model/Uploader.model'
+
+// Re-export playing models
+export { VoicePlayerModel } from '../playing/model/VoicePlayer.model'
+export { VoiceTranscriptionsCollection } from '../playing/model/VoiceTranscriptionsCollection'
+export type { VoiceTranscriptionItem } from '../playing/model/VoiceTranscriptionsCollection'
+export { VoiceTranscriptionsDownloaderModel } from '../playing/model/VoiceTranscriptionsDownloader.model'
+export { VoicePlayerModel as VoiceTranscriptionsPlayerModel } from '../playing/model/VoicePlayer.model'
+export { VoiceTranscriptionsDropdownModel } from '../playing/model/VoiceTranscriptionsDropdown.model'

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

@@ -0,0 +1,38 @@
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import React from 'react'
+import { COLORS, MicrophoneIcon } from '@magmamath/react-native-ui'
+import Animated, { FadeIn } from 'react-native-reanimated'
+
+type VoiceIconProps = {
+  style?: StyleProp<ViewStyle>
+}
+
+export const VoiceIcon = ({ style }: VoiceIconProps) => {
+  return (
+    <Animated.View entering={FadeIn.duration(250)} style={[styles.container, style]}>
+      <View style={styles.iconContainer}>
+        <MicrophoneIcon color={COLORS.NEUTRAL_5} />
+      </View>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    maxHeight: 124,
+    height: '80%',
+    aspectRatio: 1,
+    alignSelf: 'center',
+    padding: 24,
+    borderWidth: 4,
+    borderColor: COLORS.NEUTRAL_5,
+    borderRadius: 400,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})