@magmamath/students-features 0.11.0-rc.8 → 1.0.0

package/src/features/voice/recording/components/VoiceRecordButton.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonStyle,
+  ButtonVariant,
+  IS_WEB,
+} from '@magmamath/react-native-ui'
+import { Pressable } from 'react-native'
+import { MicrophoneIcon, CheckIcon } from '@magmamath/react-native-ui'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useUnit } from 'effector-react'
+import { VoiceRecorderState } from '../../constants'
+import { useText } from '../../../../shared/translation'
+
+type VoiceRecordButtonProps = {
+  style?: ButtonStyle
+  model: VoiceRecordModel
+}
+
+export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
+  const t = useText()
+
+  const availableInputs = useUnit(model.recorderModel.$availableInputs)
+  const voiceRecordState = useUnit(model.recorderModel.$voiceRecordState)
+  const isButtonDisabled = useUnit(model.$isButtonDisabled)
+  const isInitializing = useUnit(model.initializeRecording.pending)
+
+  const combinedStyles = useMemo((): ButtonStyle => {
+    return {
+      button: [{ width: 50, height: 50 }, style?.button],
+      container: [style?.container],
+      text: [style?.text],
+    }
+  }, [style])
+
+  return (
+    <Pressable
+      onPressIn={(e) => {
+        if (availableInputs.length) return
+        e.preventDefault()
+        model.notification.warning(t('voice.noMicrophoneFound'))
+      }}
+      pointerEvents={!availableInputs.length || isInitializing ? 'box-only' : 'auto'}
+    >
+      <Button
+        disabled={isButtonDisabled || !availableInputs.length}
+        onPressIn={() => model.recorderButtonHandler()}
+        style={combinedStyles}
+        size={ButtonSize.LARGE}
+        variant={ButtonVariant.SECONDARY}
+        colorScheme={ButtonColor.WHITE}
+        icon={
+          voiceRecordState === VoiceRecorderState.RECORDING ? (
+            <CheckIcon size={25} />
+          ) : (
+            <MicrophoneIcon style={IS_WEB ? { width: 19 } : { minWidth: 23, minHeight: 23 }} />
+          )
+        }
+      />
+    </Pressable>
+  )
+}

package/src/features/voice/recording/components/VoiceRecordDeleteButton.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import { COLORS, TrashcanIcon } from '@magmamath/react-native-ui'
+import React from 'react'
+
+type VoiceRecordDeleteProps = {
+  onPress?: () => void
+  isDisabled?: boolean
+}
+
+export const VoiceRecordDeleteButton = ({ onPress, isDisabled }: VoiceRecordDeleteProps) => {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress} disabled={isDisabled}>
+      <TrashcanIcon size={20} color={isDisabled ? COLORS.NEUTRAL_5 : COLORS.NEUTRAL_9} />
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/features/voice/recording/components/VoiceRecordDivider.tsx

@@ -0,0 +1,17 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const VoiceRecordDivider = () => {
+  return <View style={styles.container} />
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 1,
+    borderRadius: 1,
+    width: 28,
+    margin: 8,
+    backgroundColor: COLORS.NEUTRAL_6,
+  },
+})

package/src/features/voice/recording/components/VoiceRecordTimer.tsx

@@ -0,0 +1,49 @@
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { COLORS, Typography } from '@magmamath/react-native-ui'
+import React from 'react'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useUnit } from 'effector-react'
+import { formatDuration } from '../../helpers'
+
+type VoiceRecordTimerProps = {
+  style?: StyleProp<ViewStyle>
+  model: VoiceRecordModel
+  recordingFileDurationMs?: number
+}
+
+export const VoiceRecordTimer = ({
+  style,
+  model,
+  recordingFileDurationMs,
+}: VoiceRecordTimerProps) => {
+  const savedAudioFileDurationMs = useUnit(model.$currentRecord)?.durationMs || 0
+  const displayDurationMs = recordingFileDurationMs || savedAudioFileDurationMs
+
+  return (
+    <View style={[styles.container, style]}>
+      <Typography variant="h9" style={styles.text}>
+        {displayDurationMs ? formatDuration(displayDurationMs) : '0:00'}
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    alignItems: 'center',
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_4,
+    borderRadius: 18,
+    minWidth: 45,
+  },
+  text: {
+    color: COLORS.NEUTRAL_10,
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 18,
+    textTransform: 'uppercase',
+  },
+})

package/src/features/voice/recording/hooks/useVoiceRecorder.ts

@@ -0,0 +1,62 @@
+import { RecordingPresets, useAudioRecorder, useAudioRecorderState } from 'expo-audio'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useEffect } from 'react'
+import { IS_WEB } from '@magmamath/react-native-ui'
+import { VOICE_RECORDER_MAX_DURATION_MS, VoiceRecorderState } from '../../constants'
+import { addAudioInputsListenerWeb, getAvailableInputs } from '../../helpers'
+
+export const useVoiceRecorder = (model: VoiceRecordModel) => {
+  const recorder = useAudioRecorder(RecordingPresets.LOW_QUALITY, model.recordingStatusUpdate)
+  const recorderState = useAudioRecorderState(recorder)
+
+  useEffect(() => {
+    if (
+      recorderState.durationMillis >= VOICE_RECORDER_MAX_DURATION_MS &&
+      recorderState.isRecording
+    ) {
+      model.recorderModel.stop()
+    }
+    // Track the last known duration while recording (for old browsers where getAudioDurationMs returns Infinity)
+    if (recorderState.isRecording && recorderState.durationMillis > 0) {
+      model.recorderModel.setLastKnownDurationMs(recorderState.durationMillis)
+    }
+  }, [recorderState.durationMillis])
+
+  useEffect(() => {
+    if (!IS_WEB) {
+      //only once for iPad and listener for WEB
+      getAvailableInputs(recorder).then((inputs) => {
+        model.recorderModel.setAvailableInputs(inputs)
+      })
+      return
+    }
+
+    const removeListener = addAudioInputsListenerWeb((devices) => {
+      model.recorderModel.setAvailableInputs(devices)
+    })
+
+    return removeListener
+  }, [recorder, model.recorderModel])
+
+  useEffect(() => {
+    if (recorderState.isRecording) {
+      model.recorderModel.setVoiceRecordState(VoiceRecorderState.RECORDING)
+      return
+    }
+    if (recorderState.durationMillis > 0) {
+      model.recorderModel.setVoiceRecordState(VoiceRecorderState.PAUSED)
+      return
+    }
+    model.recorderModel.setVoiceRecordState(VoiceRecorderState.IDLE)
+
+    return () => {
+      model.recorderModel.reset()
+    }
+  }, [recorderState, model.recorderModel])
+
+  useEffect(() => {
+    model.recorderModel.recorder = recorder
+  }, [recorder])
+
+  return { recorderState }
+}

package/src/features/voice/recording/hooks/useVoiceRecorderAnimation.ts

@@ -0,0 +1,19 @@
+import { useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { VOICE_RECORDER_CONTAINER_SIZES } from '../../constants'
+
+export const useVoiceRecorderAnimation = (isExpanded: boolean) => {
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      height: withTiming(
+        isExpanded
+          ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED
+          : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED,
+        {
+          duration: 280,
+        },
+      ),
+    }
+  }, [isExpanded])
+
+  return { containerAnimatedStyle }
+}

package/src/features/voice/recording/modal/ModalFooterButtons.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Button, ButtonColor, ButtonSize, ButtonVariant, SPACING } from '@magmamath/react-native-ui'
+import { StyleSheet, View } from 'react-native'
+import { useText } from '../../../../shared/translation'
+import { TranslationKeys } from '../../../../shared/translation/types'
+
+type ModalFooterButtonsProps = {
+  onCancel: () => void
+  onConfirm: () => void
+  confirmLabel: TranslationKeys
+  confirmColor?: ButtonColor
+}
+
+export const ModalFooterButtons = ({
+  onCancel,
+  onConfirm,
+  confirmLabel,
+  confirmColor = ButtonColor.BLUE,
+}: ModalFooterButtonsProps) => {
+  const t = useText()
+
+  return (
+    <View style={styles.container}>
+      <Button
+        style={{ text: styles.buttonLabel }}
+        variant={ButtonVariant.TERTIARY}
+        size={ButtonSize.LARGE}
+        onPress={onCancel}
+      >
+        {t('voice.cancel')}
+      </Button>
+      <Button
+        colorScheme={confirmColor}
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.LARGE}
+        onPress={onConfirm}
+        style={{ text: styles.buttonLabel }}
+      >
+        {t(confirmLabel)}
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  buttonLabel: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/voice/recording/modal/VoiceRecordDeleteModal.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect } from 'react'
+import { BaseModal, ButtonColor } from '@magmamath/react-native-ui'
+import { StyleSheet } from 'react-native'
+import { useUnit } from 'effector-react'
+import { VoiceRecorderState } from '../../constants'
+import { useText } from '../../../../shared/translation'
+import { ModalFooterButtons } from './ModalFooterButtons'
+import { VoiceRecordModalParams } from '../../types'
+
+type VoiceRecordDeleteModalComponentProps = {
+  modal: {
+    closeModal: () => void
+    params: VoiceRecordModalParams
+  }
+}
+
+export const VoiceRecordDeleteModal = ({
+  modal: { closeModal, params },
+}: VoiceRecordDeleteModalComponentProps) => {
+  const t = useText()
+  const { model } = params
+
+  const recorderState = useUnit(model.recorderModel.$voiceRecordState)
+
+  const handleDelete = () => {
+    if (recorderState === VoiceRecorderState.PAUSED) {
+      // if recording is paused, we need to start it again to ensure the recorder is in a consistent state before deletion
+      // without .record() browser still will use microphone
+      model.recorderModel.recorder.record()
+      setTimeout(() => {
+        model.stop()
+        model.deleteCurrentRecording()
+      }, 50)
+      closeModal()
+      return
+    }
+
+    model.deleteCurrentRecording()
+    closeModal()
+  }
+
+  useEffect(() => {
+    if (recorderState === VoiceRecorderState.RECORDING) {
+      model.recorderModel.recorder.pause()
+    }
+
+    return () => {
+      if (model.recorderModel.$voiceRecordState.getState() === VoiceRecorderState.PAUSED) {
+        try {
+          model.recorderModel.recorder.record()
+        } catch (error) {
+          console.error(`Failed to resume recording: ${error}`)
+        }
+      }
+    }
+  }, [])
+
+  return (
+    <BaseModal
+      style={{
+        container: styles.modalContainer,
+      }}
+      header={t('voice.deleteRecording')}
+      content={t('voice.youWontBeAbleToRecover')}
+      footer={
+        <ModalFooterButtons
+          onCancel={closeModal}
+          onConfirm={handleDelete}
+          confirmLabel="voice.delete"
+          confirmColor={ButtonColor.RED}
+        />
+      }
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    width: 600,
+    height: 268,
+  },
+})

package/src/features/voice/recording/modal/VoiceRecordUndoModal.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { BaseModal } from '@magmamath/react-native-ui'
+import { StyleSheet } from 'react-native'
+import { useText } from '../../../../shared/translation'
+import { ModalFooterButtons } from './ModalFooterButtons'
+import { VoiceRecordModalParams } from '../../types'
+
+type VoiceRecordUndoModalProps = {
+  modal: {
+    closeModal: () => void
+    params: VoiceRecordModalParams
+  }
+}
+
+export const VoiceRecordUndoModal = ({
+  modal: { closeModal, params },
+}: VoiceRecordUndoModalProps) => {
+  const t = useText()
+  const { model } = params
+
+  const redoRecording = () => {
+    model.deleteCurrentRecording({ notification: false })
+    closeModal()
+    model.initializeRecording()
+  }
+
+  return (
+    <BaseModal
+      style={{
+        container: styles.modalStyle,
+      }}
+      header={t('voice.redoRecording')}
+      content={t('voice.thisWillRemoveRecording')}
+      footer={
+        <ModalFooterButtons
+          onCancel={closeModal}
+          onConfirm={redoRecording}
+          confirmLabel="voice.redo"
+        />
+      }
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  modalStyle: {
+    width: 600,
+    height: 268,
+  },
+})

package/src/features/voice/recording/model/Recorder.model.ts

@@ -0,0 +1,63 @@
+import { createEffect, createEvent, restore } from 'effector'
+import { AudioRecorder, setAudioModeAsync } from 'expo-audio'
+import { VoiceRecorderState } from '../../constants'
+import { AvailableAudioInputs } from '../../types'
+
+const AUDIO_MODE_CONFIG = {
+  playsInSilentMode: true,
+  allowsRecording: true,
+} as const
+
+type StopResolver<T> = (result: T) => void
+
+export class RecorderModel<T = unknown> {
+  public recorder!: AudioRecorder
+  private stopResolver: StopResolver<T> | null = null
+
+  public readonly reset = createEvent()
+  public readonly setVoiceRecordState = createEvent<VoiceRecorderState>()
+  public readonly setAvailableInputs = createEvent<AvailableAudioInputs>()
+  public readonly setLastKnownDurationMs = createEvent<number>()
+
+  public readonly $voiceRecordState = restore(
+    this.setVoiceRecordState,
+    VoiceRecorderState.IDLE,
+  ).reset(this.reset)
+  public readonly $availableInputs = restore(this.setAvailableInputs, [])
+  public readonly $lastKnownDurationMs = restore(this.setLastKnownDurationMs, 0).reset(this.reset)
+
+  public readonly start = createEffect(async () => {
+    try {
+      await setAudioModeAsync(AUDIO_MODE_CONFIG)
+      await this.recorder.prepareToRecordAsync()
+      this.recorder.record()
+      this.setVoiceRecordState(VoiceRecorderState.RECORDING)
+    } catch (error) {
+      console.error('Error starting recording:', error)
+      throw error
+    }
+  })
+
+  public readonly stop = createEffect(() => {
+    if (!this.recorder.getStatus().isRecording) return
+    return this.recorder.stop()
+  })
+
+  public stopAndAwaitResult(): Promise<T> {
+    return new Promise((resolve) => {
+      this.stopResolver = resolve
+      this.recorder.getStatus().isRecording && this.recorder.stop()
+    })
+  }
+
+  public resolveRecord(result: T): void {
+    if (this.stopResolver) {
+      this.stopResolver(result)
+      this.stopResolver = null
+    }
+  }
+
+  public clearStopResolver(): void {
+    this.stopResolver = null
+  }
+}

package/src/features/voice/recording/model/Uploader.model.ts

@@ -0,0 +1,48 @@
+import { createEffect } from 'effector'
+import { VoiceRecordCollectionItem, VoiceRecorderApi } from '../../types'
+import { generateAudioFormData, uploadAudioFileRequestGenerator } from '../../helpers'
+
+type UploadParams = {
+  uri: string
+  fileName: string
+  durationMs: number
+}
+
+type UploadResult = {
+  collectionItem: VoiceRecordCollectionItem
+  uploadPromise: Promise<any>
+}
+
+export class UploaderModel {
+  private api!: VoiceRecorderApi
+
+  public readonly setApi = (api: VoiceRecorderApi) => {
+    this.api = api
+  }
+
+  public readonly upload = createEffect(
+    async ({ uri, fileName, durationMs }: UploadParams): Promise<UploadResult> => {
+      const formData = await generateAudioFormData({
+        audioFileUri: uri,
+        durationMs,
+        fileName,
+      })
+
+      const { uploadAudio, controller } = uploadAudioFileRequestGenerator(formData, this.api)
+      const uploadPromise = uploadAudio()
+
+      const collectionItem: VoiceRecordCollectionItem = {
+        durationMs,
+        audioUploadPromise: uploadPromise,
+        controller,
+        uri,
+      }
+
+      return { collectionItem, uploadPromise }
+    },
+  )
+
+  public readonly abortUpload = (controller?: AbortController) => {
+    controller?.abort()
+  }
+}