@magmamath/students-features 1.2.1-rc.9 → 1.2.2-rc.1

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

@@ -1,7 +1,7 @@
 import { StyleProp, ViewStyle, StyleSheet } from 'react-native'
 import { VoiceRecordButton } from './VoiceRecordButton'
 import React, { useEffect } from 'react'
-import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
 import { VoiceRecordDeleteButton } from './VoiceRecordDeleteButton'
 import { VoiceRecordDivider } from './VoiceRecordDivider'
 import { VoiceRecordTimer } from './VoiceRecordTimer'
@@ -10,8 +10,6 @@ import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useVoiceRecorder } from '../hooks/useVoiceRecorder'
 import { useVoiceRecorderAnimation } from '../hooks/useVoiceRecorderAnimation'
 import { useUnit } from 'effector-react'
-import { RecordButtonVariant } from '../../types'
-import { VOICE_RECORD_SHAWODS } from '../../constants'
 
 type VoiceRecordProps = {
   style?: StyleProp<ViewStyle>
@@ -22,8 +20,7 @@ export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
   const { recorderState } = useVoiceRecorder(model)
   const [isExpanded, isDisabled] = useUnit([model.$isExpanded, model.$isButtonDisabled])
 
-  const recordButtonVariant = model.recordButtonVariant
-  const { containerAnimatedStyle } = useVoiceRecorderAnimation(isExpanded, recordButtonVariant)
+  const { containerAnimatedStyle } = useVoiceRecorderAnimation(isExpanded)
 
   useEffect(() => {
     return () => {
@@ -32,23 +29,12 @@ export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
   }, [model])
 
   return (
-    <Animated.View
-      style={[
-        styles.container,
-        recordButtonVariant === RecordButtonVariant.ADVANCED && styles.advancedVariantContainer,
-        { boxShadow: VOICE_RECORD_SHAWODS[recordButtonVariant] },
-        style,
-        containerAnimatedStyle,
-      ]}
-    >
+    <Animated.View style={[styles.container, style, containerAnimatedStyle]}>
       <VoiceRecordButton model={model} />
       {isExpanded && (
         <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.expendedContainer}>
           <VoiceRecordTimer
-            style={[
-              styles.timer,
-              recordButtonVariant === RecordButtonVariant.ADVANCED && styles.advancedVariantTimer,
-            ]}
+            style={styles.timer}
             model={model}
             recordingFileDurationMs={recorderState.durationMillis}
           />
@@ -67,21 +53,12 @@ const styles = StyleSheet.create({
     paddingBottom: 6,
     backgroundColor: COLORS.NEUTRAL_3,
     borderRadius: 32,
-  },
-  advancedVariantContainer: {
-    borderRadius: BORDER_RADIUS[300],
-    padding: 0,
+    boxShadow: '0 1px 3px 0 rgba(51, 51, 51, 0.10), 0 0 1px 0 rgba(51, 51, 51, 0.40)',
     overflow: 'hidden',
   },
   timer: {
     marginTop: SPACING[400],
   },
-  defaultTimer: {
-    marginTop: SPACING[300],
-  },
-  advancedVariantTimer: {
-    marginTop: SPACING[150],
-  },
   expendedContainer: {
     alignItems: 'center',
   },

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

@@ -1,35 +1,25 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
-  BORDER_RADIUS,
   Button,
   ButtonColor,
   ButtonSize,
   ButtonStyle,
   ButtonVariant,
-  CheckIcon,
-  COLORS,
   IS_WEB,
-  MicrophoneIcon,
 } from '@magmamath/react-native-ui'
-import { Pressable, StyleSheet, View } from 'react-native'
+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 { VOICE_RECORD_SHAWODS, VoiceRecorderState } from '../../constants'
+import { VoiceRecorderState } from '../../constants'
 import { useText } from '../../../../shared/translation'
-import { RecordButtonVariant } from '../../types'
 
 type VoiceRecordButtonProps = {
+  style?: ButtonStyle
   model: VoiceRecordModel
 }
 
-const defaultButtonStyles: ButtonStyle = {
-  button: {
-    width: 50,
-    height: 50,
-  },
-}
-
-export const VoiceRecordButton = ({ model }: VoiceRecordButtonProps) => {
+export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
   const t = useText()
 
   const availableInputs = useUnit(model.recorderModel.$availableInputs)
@@ -37,97 +27,38 @@ export const VoiceRecordButton = ({ model }: VoiceRecordButtonProps) => {
   const isButtonDisabled = useUnit(model.$isButtonDisabled)
   const isInitializing = useUnit(model.initializeRecording.pending)
 
-  const isRecording = voiceRecordState === VoiceRecorderState.RECORDING
-  const isIdle = voiceRecordState === VoiceRecorderState.IDLE
-  const hasInputs = availableInputs.length > 0
+  const combinedStyles = useMemo((): ButtonStyle => {
+    return {
+      button: [{ width: 50, height: 50 }, style?.button],
+      container: [style?.container],
+      text: [style?.text],
+    }
+  }, [style])
 
   return (
     <Pressable
       onPressIn={(e) => {
-        if (hasInputs) return
+        if (availableInputs.length) return
         e.preventDefault()
         model.notification.warning(t('voice.noMicrophoneFound'))
       }}
-      pointerEvents={!hasInputs || isInitializing ? 'box-only' : 'auto'}
-      style={[isButtonDisabled ? styles.disabledCursor : undefined]}
+      pointerEvents={!availableInputs.length || isInitializing ? 'box-only' : 'auto'}
     >
-      {model.recordButtonVariant === RecordButtonVariant.ADVANCED ? (
-        <AdvancedButton
-          isRecording={isRecording}
-          isIdle={isIdle}
-          disabled={isButtonDisabled}
-          onPressIn={() => model.recorderButtonHandler()}
-        />
-      ) : (
-        <Button
-          disabled={isButtonDisabled}
-          onPressIn={() => model.recorderButtonHandler()}
-          style={defaultButtonStyles}
-          size={ButtonSize.LARGE}
-          variant={ButtonVariant.SECONDARY}
-          colorScheme={ButtonColor.WHITE}
-          icon={
-            isRecording ? (
-              <CheckIcon size={25} />
-            ) : (
-              <MicrophoneIcon style={IS_WEB ? { width: 19 } : { minWidth: 23, minHeight: 23 }} />
-            )
-          }
-        />
-      )}
+      <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>
   )
 }
-
-type AdvancedButtonProps = {
-  isRecording: boolean
-  isIdle: boolean
-  disabled: boolean
-  onPressIn: () => void
-}
-
-const AdvancedButton = ({ isRecording, isIdle, disabled, onPressIn }: AdvancedButtonProps) => (
-  <Pressable
-    style={[styles.advancedButtonContainer, disabled && styles.disabledCursor]}
-    onPressIn={onPressIn}
-    disabled={disabled}
-  >
-    <View
-      style={[
-        styles.advancedIconContainer,
-        !isIdle && { borderRadius: 32, backgroundColor: COLORS.PRIMARY_BLUE },
-      ]}
-    >
-      {isRecording ? (
-        <CheckIcon size={18} color={COLORS.NEUTRAL_1} />
-      ) : (
-        <MicrophoneIcon
-          style={{ width: 14, height: 19 }}
-          color={disabled ? COLORS.NEUTRAL_5 : isIdle ? COLORS.NEUTRAL_9 : COLORS.NEUTRAL_1}
-        />
-      )}
-    </View>
-  </Pressable>
-)
-
-const styles = StyleSheet.create({
-  advancedButtonContainer: {
-    width: 52,
-    height: 52,
-    backgroundColor: 'white',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: BORDER_RADIUS[300],
-    boxShadow: VOICE_RECORD_SHAWODS[RecordButtonVariant.ADVANCED],
-  },
-  advancedIconContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: BORDER_RADIUS[300],
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  disabledCursor: {
-    cursor: 'not-allowed' as 'auto',
-  },
-})

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

@@ -17,8 +17,8 @@ export const VoiceRecordDeleteButton = ({ onPress, isDisabled }: VoiceRecordDele
 
 const styles = StyleSheet.create({
   container: {
-    width: 32,
-    height: 32,
+    width: 36,
+    height: 36,
     alignItems: 'center',
     justifyContent: 'center',
   },

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

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

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

@@ -4,7 +4,6 @@ import { VoiceRecordsCollection } from './VoiceRecordCollection'
 import { UploaderModel } from './Uploader.model'
 import { VoiceRecorderState } from '../../constants'
 import {
-  RecordButtonVariant,
   VoiceRecordCollectionItem,
   VoiceRecorderApi,
   VoiceRecordNotificationTypes,
@@ -59,8 +58,6 @@ export class VoiceRecordModel {
   public readonly events: VoiceRecordEvents
   private shouldDiscardRecording = false
 
-  public recordButtonVariant = RecordButtonVariant.DEFAULT
-
   public readonly setCurrentKey = createEvent<string>()
   public readonly setCurrentRecord = createEvent<any>()
   public readonly reset = createEvent()
@@ -85,10 +82,6 @@ export class VoiceRecordModel {
     await this.api.deleteAudioFile(audioFileId)
   })
 
-  public readonly setRecordButtonVariant = createEffect((variant: RecordButtonVariant) => {
-    this.recordButtonVariant = variant
-  })
-
   public readonly deleteCurrentRecording = attach({
     source: this.$currentKey,
     mapParams: (props: DeleteCurrentRecordingProps | void, currentKey) => ({

package/src/features/voice/types.ts

@@ -82,8 +82,3 @@ export type VoiceTranscriptionItem = {
   controller?: AbortController
   hasDrawing?: boolean
 }
-
-export enum RecordButtonVariant {
-  DEFAULT = 'default',
-  ADVANCED = 'advanced',
-}

package/src/index.ts

@@ -1,3 +1,4 @@
+export { TEST_IDS as FEATURES_TEST_IDS } from './config/dataTestIDs'
 export { useFeaturesLocalization, setFeaturesLocalization } from './shared/translation'
 export { generateRandomId } from './lib/helpers/helpers'
 export * from './features/chatbot'