@magmamath/students-features 0.9.106 → 0.9.107-rc.1

package/src/features/voiceRecord/components/VoiceRecord.tsx

@@ -0,0 +1,78 @@
+import { StyleProp, ViewStyle, StyleSheet } from 'react-native'
+import { VoiceRecordButton } from './VoiceRecordButton'
+import React from 'react'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { VoiceRecordDelete } from './VoiceRecordDelete'
+import { VoiceRecordDevider } from './VoiceRecordDevider'
+import VoiceRecordTimer from './VoiceRecordTimer'
+import Animated, { FadeIn, FadeOut, useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+import { useVoiceRecorder } from '../hooks/useVoiceRecorder.hook'
+
+type VoiceRecordProps = {
+  style?: StyleProp<ViewStyle>
+  model: VoiceRecordModel
+}
+
+const CONTAINER_SIZES = {
+  COLLAPSED: 61,
+  EXPANDED: 152,
+}
+
+export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
+  const { recorder, recorderState, player, startRecording, stopRecording } = useVoiceRecorder(model)
+
+  const aniamtedStyle = useAnimatedStyle(() => {
+    return {
+      height: withTiming(
+        recorderState.isRecording ? CONTAINER_SIZES.EXPANDED : CONTAINER_SIZES.COLLAPSED,
+        {
+          duration: 280,
+        },
+      ),
+    }
+  }, [recorderState])
+
+  return (
+    <Animated.View style={[styles.container, style, aniamtedStyle]}>
+      <VoiceRecordButton
+        // onPress={() => setIsRecording((prev) => !prev)}
+        onPress={recorderState.isRecording ? stopRecording : startRecording}
+        isRecording={recorderState.isRecording}
+      />
+      {recorderState.isRecording && (
+        <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.expendedContainer}>
+          <VoiceRecordTimer
+            style={styles.timer}
+            //0:00 as default value and format mm:ss
+            time={
+              recorderState.durationMillis
+                ? new Date(recorderState.durationMillis).toISOString().substr(14, 5)
+                : '0:00'
+            }
+          />
+          <VoiceRecordDevider />
+          <VoiceRecordDelete onPress={model.deleteFile} />
+        </Animated.View>
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    padding: 3,
+    paddingBottom: 6,
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderRadius: 32,
+    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],
+  },
+  expendedContainer: {
+    alignItems: 'center',
+  },
+})

package/src/features/voiceRecord/components/VoiceRecordButton.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonStyle,
+  ButtonVariant,
+} from '@magmamath/react-native-ui'
+import { ViewStyle } from 'react-native'
+import { MicrophoneIcon, CheckIcon } from '@magmamath/react-native-ui'
+
+type VoiceRecordButtonProps = {
+  style?: ButtonStyle
+  onPress?: () => void
+  isRecording: boolean
+}
+
+export const VoiceRecordButton = ({ style, onPress, isRecording }: VoiceRecordButtonProps) => {
+  const combinedStyles = useMemo((): ButtonStyle => {
+    return {
+      button: {
+        width: 50,
+        ...(style?.button as ViewStyle),
+      },
+      container: {
+        ...(style?.container as ViewStyle),
+      },
+      text: {
+        ...(style?.text as ViewStyle),
+      },
+    }
+  }, [style])
+
+  return (
+    <Button
+      onPress={onPress}
+      style={combinedStyles}
+      size={ButtonSize.LARGE}
+      variant={ButtonVariant.PRIMARY}
+      colorScheme={ButtonColor.WHITE}
+      icon={isRecording ? <CheckIcon size={25} /> : <MicrophoneIcon size={19} />}
+    />
+  )
+}

package/src/features/voiceRecord/components/VoiceRecordDelete.tsx

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

package/src/features/voiceRecord/components/VoiceRecordDevider.tsx

@@ -0,0 +1,17 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const VoiceRecordDevider = () => {
+  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/voiceRecord/components/VoiceRecordTimer.tsx

@@ -0,0 +1,37 @@
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { COLORS, Typography } from '@magmamath/react-native-ui'
+import React from 'react'
+
+type VoiceRecordTimerProps = {
+  style?: StyleProp<ViewStyle>
+  time: string
+}
+
+export const VoiceRecordTimer = ({ style, time }: VoiceRecordTimerProps) => {
+  return (
+    <View style={[styles.container, style]}>
+      <Typography style={styles.text}>{time}</Typography>
+    </View>
+  )
+}
+
+export default VoiceRecordTimer
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    alignItems: 'center',
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_4,
+    borderRadius: 18,
+  },
+  text: {
+    color: COLORS.NEUTRAL_10,
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 18,
+    textTransform: 'uppercase',
+  },
+})

package/src/features/voiceRecord/helpers.ts

@@ -0,0 +1,30 @@
+import { IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
+import {
+  AudioRecorder,
+  getRecordingPermissionsAsync,
+  requestRecordingPermissionsAsync,
+} from 'expo-audio'
+
+export const ensureRecordingPermissions = async () => {
+  const { status } = await getRecordingPermissionsAsync()
+
+  if (status !== 'granted') {
+    const { granted } = await requestRecordingPermissionsAsync()
+    return granted
+  }
+
+  return true
+}
+
+export const getAvailableInputs = async (recorder: AudioRecorder) => {
+  if (IS_WEB) {
+    if (!navigator.mediaDevices?.enumerateDevices) return []
+
+    const devices = await navigator.mediaDevices.enumerateDevices()
+    return devices.filter((d) => d.kind === 'audioinput')
+  }
+  if (IS_MOBILE) {
+    return await recorder.getAvailableInputs()
+  }
+  return []
+}

package/src/features/voiceRecord/hooks/useVoiceRecorder.hook.ts

@@ -0,0 +1,39 @@
+import {
+  RecordingPresets,
+  useAudioPlayer,
+  useAudioRecorder,
+  useAudioRecorderState,
+} from 'expo-audio'
+import { ensureRecordingPermissions, getAvailableInputs } from '../helpers'
+import { VoiceRecordModel } from '../model/VoiceRecord.model'
+
+export const useVoiceRecorder = (model: VoiceRecordModel) => {
+  const recorder = useAudioRecorder(RecordingPresets.LOW_QUALITY, (status) =>
+    console.log('Recording status:', status),
+  )
+  const recorderState = useAudioRecorderState(recorder)
+
+  const player = useAudioPlayer()
+
+  const startRecording = async () => {
+    if (!(await ensureRecordingPermissions())) return model.showError('No microphone access')
+
+    await recorder.prepareToRecordAsync()
+
+    if (await getAvailableInputs(recorder).then((inputs) => inputs.length === 0)) {
+      return model.showError('No microphone found')
+    }
+
+    recorder.record()
+  }
+
+  const stopRecording = async () => {
+    await recorder.stop()
+    recorder.uri && console.log('Recording stopped and stored at', recorder.uri)
+
+    player.replace(recorder.uri!)
+    player.play()
+  }
+
+  return { recorder, recorderState, player, startRecording, stopRecording }
+}

package/src/features/voiceRecord/index.ts

@@ -0,0 +1,2 @@
+export * from './components/VoiceRecord'
+export * from './model/VoiceRecord.model'

package/src/features/voiceRecord/model/VoiceRecord.model.ts

@@ -0,0 +1,41 @@
+import { createEffect, createEvent, restore, sample } from 'effector'
+import { AudioRecorder } from 'expo-audio'
+
+type VoiceRecordModelParams = {
+  showToatInfo: (message: string) => void
+  showToastError: (message: string) => void
+}
+
+export class VoiceRecordModel {
+  public readonly startRecord = createEvent()
+  public readonly stop = createEvent()
+
+  public readonly deleteFile = createEvent()
+
+  public readonly setAudioFilePath = createEvent<string>()
+  public readonly clearAudioFilePath = createEvent()
+  public readonly $audioFilePath = restore(this.setAudioFilePath, '').reset(this.clearAudioFilePath)
+
+  public readonly showInfo: (message: string) => void
+  public readonly showError: (message: string) => void
+
+  constructor({ showToatInfo, showToastError }: VoiceRecordModelParams) {
+    this.showInfo = showToatInfo
+    this.showError = showToastError
+
+    sample({
+      clock: this.deleteFile,
+      target: createEffect(async () => {
+        this.clearAudioFilePath()
+        showToatInfo('Recording deleted')
+      }),
+    })
+
+    sample({
+      clock: this.startRecord,
+      target: createEffect(async () => {
+        showToatInfo('Recording started')
+      }),
+    })
+  }
+}

package/src/features/voiceRecord/model/VoiceRecordApi.ts

@@ -0,0 +1 @@
+export class VoiceRecordApi {}

package/src/index.ts

@@ -10,3 +10,4 @@ export * from './features/gifCelebrations'
 export * from './features/exampleSolution'
 export * from './features/keyboard'
 export * from './shared/icons'
+export * from './features/voiceRecord'

package/.editorconfig

@@ -1,15 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-
-indent_style = space
-indent_size = 2
-
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules/
-./lib/

package/.eslintrc

@@ -1,22 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2020": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react-refresh"],
-  "rules": {
-    "react-refresh/only-export-components": "warn"
-  }
-}

package/.gitattributes

@@ -1,3 +0,0 @@
-*.pbxproj -text
-# specific for windows script files
-*.bat text eol=crlf

package/.github/actions/setup/action.yml

@@ -1,37 +0,0 @@
-name: Setup
-description: Setup Node.js and install dependencies
-
-inputs:
-  npmrc-auth-token:
-    required: true
-
-runs:
-  using: composite
-  steps:
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version-file: .nvmrc
-
-    - name: Create .npmrc
-      shell: bash
-      run: |
-        echo "registry=https://registry.npmjs.org" > .npmrc
-        echo "//registry.npmjs.org/:_authToken=${{ inputs.npmrc-auth-token }}" >> .npmrc
-
-    - name: Cache dependencies
-      id: yarn-cache
-      uses: actions/cache@v3
-      with:
-        path: |
-          **/node_modules
-          .yarn/install-state.gz
-        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          ${{ runner.os }}-yarn-
-
-    - name: Install dependencies
-      if: steps.yarn-cache.outputs.cache-hit != 'true'
-      run: yarn install --immutable
-      shell: bash

package/.github/workflows/ci.yml

@@ -1,73 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-  merge_group:
-    types:
-      - checks_requested
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Lint files
-        run: yarn lint
-
-      - name: Typecheck files
-        run: yarn typecheck
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Run unit tests
-        run: yarn test --maxWorkers=2 --coverage
-
-  build-library:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Build package
-        run: yarn prepare
-
-  build-web:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Build example for Web
-        run: |
-          yarn example expo export --platform web

package/.gitignore

@@ -1,84 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# XDE
-.expo/
-
-# VSCode
-.vscode/
-jsconfig.json
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IJ
-#
-.classpath
-.cxx
-.gradle
-.idea
-.project
-.settings
-local.properties
-android.iml
-
-# Cocoapods
-#
-example/ios/Pods
-
-# Ruby
-example/vendor/
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-android/app/libs
-android/keystores/debug.keystore
-
-# Yarn
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-
-# Expo
-.expo/
-
-# Turborepo
-.turbo/
-
-# generated by bob
-dist/
-!src/lib/
-
-# React Native Codegen
-ios/generated
-android/generated
-.npmrc

package/.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

package/.idea/codeStyles/Project.xml

@@ -1,62 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <option name="LINE_SEPARATOR" value="&#10;" />
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/copilot.data.migration.agent.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AgentMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/copilot.data.migration.ask.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AskMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/copilot.data.migration.ask2agent.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Ask2AgentMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>