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

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

@@ -0,0 +1,178 @@
+import { attach, combine, createEffect, createEvent, createStore, restore, sample } from 'effector'
+import {
+  ensureRecordingPermissions,
+  generateAudioFormData,
+  getAudioDurationMs,
+  getAvailableInputs,
+  uploadAudioFileRequestGenerator,
+} from '../helpers'
+import { AudioApi, VoiceRecordNotificationTypes, VoiceRecordStackItem } from '../types'
+import { t } from '../../../shared/translation'
+import { RecorderModel } from './Recorder.model'
+import { VoiceRecordsCollection } from './VoiceRecordCollection'
+
+type VoiceRecordModelParams = {
+  api: AudioApi
+  notification: VoiceRecordNotificationTypes
+  events: VoiceRecordEvents
+}
+
+type UploadParams = {
+  uri: string
+  currentKey: string
+}
+
+type VoiceRecordEvents = {
+  deleteRecord: () => void
+  undoRecord: () => void
+}
+
+type DeleteCurrentRecordingProps = {
+  notification?: boolean
+}
+type DeleteCurrentRecordingValues = {
+  currentKey: string
+  notification?: boolean
+}
+
+export class VoiceRecordModel {
+  public readonly recorderModel: RecorderModel
+  public readonly collection: VoiceRecordsCollection
+  public readonly api: AudioApi
+  public readonly notification: VoiceRecordNotificationTypes
+  public readonly events: VoiceRecordEvents
+
+  public readonly setCurrentKey = createEvent<string>()
+  public readonly setUri = createEvent<string>()
+  public readonly setCurrentRecord = createEvent<any>()
+  public readonly reset = createEvent()
+
+  public readonly $currentKey = restore(this.setCurrentKey, '')
+  public readonly $currentRecord = createStore<VoiceRecordStackItem | null>(null).reset(this.reset)
+  public readonly $uri = restore(this.setUri, '').reset(this.reset)
+
+  public readonly deleteCurrentRecording = attach({
+    source: this.$currentKey,
+    mapParams: (props: DeleteCurrentRecordingProps | void, currentKey) => ({
+      notification: true,
+      ...props,
+      currentKey,
+    }),
+    effect: createEffect(({ currentKey, notification }: DeleteCurrentRecordingValues) => {
+      const recordingItem = this.collection.get(currentKey)
+
+      this.abortUploadIfInProgress(recordingItem)
+      this.resetRecordingState(currentKey)
+
+      if (notification) {
+        this.notification.info(t('voiceRecorder.recordingDeleted'))
+      }
+    }),
+  })
+
+  public readonly initializeRecording = createEffect(async () => {
+    this.deleteCurrentRecording({ notification: false })
+
+    const hasPermissions = await ensureRecordingPermissions()
+    if (!hasPermissions) {
+      this.notification.error(t('voiceRecorder.noMicrophoneAccess'))
+      return
+    }
+
+    const inputs = await getAvailableInputs(this.recorderModel.recorder)
+    this.recorderModel.setAvailableInputs(inputs)
+
+    if (inputs.length === 0) {
+      this.notification.error(t('voiceRecorder.noMicrophoneFound'))
+      return
+    }
+
+    return this.recorderModel.start()
+  })
+
+  constructor({ api, notification, events }: VoiceRecordModelParams) {
+    this.api = api
+    this.notification = notification
+    this.events = events
+    this.recorderModel = new RecorderModel()
+    this.collection = new VoiceRecordsCollection()
+
+    this.setupUploadHandler()
+    this.setupCurrentRecordSync()
+  }
+
+  private abortUploadIfInProgress(recordingItem: ReturnType<VoiceRecordsCollection['get']>) {
+    if (!recordingItem?.id && recordingItem?.controller) {
+      recordingItem.controller.abort()
+    }
+  }
+
+  private resetRecordingState(currentKey: string) {
+    this.recorderModel.reset()
+    this.reset()
+    this.collection.delete(currentKey)
+  }
+
+  private async handleAudioUpload({ uri, currentKey }: UploadParams) {
+    const durationMs = await getAudioDurationMs(uri)
+    const formData = await generateAudioFormData({ audioFileUri: uri, durationMs })
+    const { uploadAudio, controller } = uploadAudioFileRequestGenerator(formData, this.api)
+
+    const audioUploadPromise = uploadAudio()
+      .then((data) => {
+        // Check if the item still exists (wasn't deleted during upload)
+        if (this.collection.get(currentKey)) {
+          this.collection.update(currentKey, { id: data.id })
+        }
+        return data
+      })
+      .catch((error) => {
+        if (error.name === 'CanceledError') return
+        this.notification.error(t('voiceRecorder.uploadFailed'))
+      })
+
+    this.collection.add(currentKey, {
+      durationMs,
+      audioUploadPromise,
+      controller,
+      uri,
+    })
+
+    return audioUploadPromise
+  }
+
+  private setupUploadHandler() {
+    sample({
+      clock: this.setUri,
+      source: this.$currentKey,
+      filter: (currentKey, uri) => !!uri && !!currentKey,
+      fn: (currentKey, uri) => ({ currentKey, uri }),
+      target: createEffect(({ uri, currentKey }: UploadParams) =>
+        this.handleAudioUpload({ uri, currentKey }),
+      ),
+    })
+  }
+
+  private setupCurrentRecordSync() {
+    sample({
+      source: this.$currentKey,
+      fn: (currentKey) => this.collection.get(currentKey),
+      target: createEffect((recordingItem?: VoiceRecordStackItem) => {
+        if (!recordingItem) {
+          this.reset()
+          return
+        }
+
+        this.setCurrentRecord(recordingItem)
+
+        if (recordingItem.durationMs) {
+          this.recorderModel.setAudioFileDurationMs(recordingItem.durationMs)
+        }
+
+        if (recordingItem.uri) {
+          this.setUri(recordingItem.uri)
+        }
+      }),
+    })
+  }
+}

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

@@ -0,0 +1,25 @@
+import { createEffect } from 'effector'
+import { AudioApi } from '../types'
+import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
+
+export class VoiceRecordApi {
+  // public readonly uploadAudioFileFx
+
+  // public readonly abortUpload = createEffect(() => {
+  //   if (this.uploadAudioFileFx.pending.getState()) {
+  //     this.uploadAudioFileFx.controller.abort()
+  //   }
+  // })
+
+  constructor(api: AudioApi) {
+    // this.uploadAudioFileFx = createControllerEffect((audioFileFormData: FormData, config) =>
+    //   api.uploadAudioFile(
+    //     { audioFileFormData },
+    //     //@ts-ignore
+    //     {
+    //       signal: config?.signal,
+    //     },
+    //   ),
+    // )
+  }
+}

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

@@ -0,0 +1,26 @@
+import { VoiceRecordStackItem } from '../types'
+
+export class VoiceRecordsCollection {
+  public readonly collection: Map<string, VoiceRecordStackItem> = new Map()
+
+  public add(key: string, item: VoiceRecordStackItem) {
+    this.collection.set(key, item)
+  }
+
+  public update(key: string, item: Partial<VoiceRecordStackItem>) {
+    const existingItem = this.collection.get(key) || {}
+    this.collection.set(key, { ...existingItem, ...item })
+  }
+
+  public delete(key: string) {
+    this.collection.delete(key)
+  }
+
+  public get(key: string) {
+    return this.collection.get(key)
+  }
+
+  public clear() {
+    this.collection.clear()
+  }
+}

package/src/features/voiceRecord/types.ts

@@ -0,0 +1,49 @@
+import { WithAbortSignal } from 'src/types/common.types'
+import { getAvailableInputs } from './helpers'
+import { VoiceRecordModel } from './model/VoiceRecord.model'
+
+export type VoiceRecordNotificationTypes = {
+  info: (message: string) => void
+  error: (message: string) => void
+  warning: (message: string) => void
+}
+
+export type UploadAudioPayload = WithAbortSignal<{
+  audioFileFormData: FormData
+}>
+
+type AudioTranscriptResponse = {
+  text: string
+}
+type UploadAudioResponse = {
+  id: string
+  fileName: string
+  fileType: string
+}
+
+export type AudioApi = {
+  uploadAudioFile: (data: UploadAudioPayload) => Promise<UploadAudioResponse>
+  getAudioFileTranscript: (audioFileId: string) => Promise<AudioTranscriptResponse>
+}
+//'exiericeid-probleid-attemptnumber'
+export type VoiceRecordStackItem = {
+  solutionId?: string
+  id?: string //it exists after upload to server
+  durationMs?: number
+  uri?: string
+  audioUploadPromise?: Promise<void | UploadAudioResponse>
+  controller?: AbortController
+}
+
+export type VoiceRecordStack = {
+  [problemId: string]: VoiceRecordStackItem
+}
+
+export type AvailableAudioInputs = Awaited<ReturnType<typeof getAvailableInputs>>
+
+export type VoiceRecordDeleteModalParams = {
+  model: VoiceRecordModel
+}
+export type VoiceRecordUndoModalParams = {
+  model: VoiceRecordModel
+}

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/src/shared/translation/localization/ca.json

@@ -39,5 +39,18 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Delete recording?",
+    "youWontBeAbleToRecover": "You won't be able to recover this file once it's gone.",
+    "recordingDeleted": "Recording successfully deleted",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "noMicrophoneAccess": "No microphone access",
+    "noMicrophoneFound": "No microphone found",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }

package/src/shared/translation/localization/de.json

@@ -39,5 +39,18 @@
     "volume": "Volumen",
     "weight": "Gewicht",
     "time": "Zeit"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Aufnahme löschen?",
+    "youWontBeAbleToRecover": "Du kannst die Datei nicht wiederherstellen, wenn sie einmal gelöscht ist.",
+    "recordingDeleted": "Aufnahme gelöscht.",
+    "delete": "Löschen",
+    "cancel": "Abbrechen",
+    "noMicrophoneAccess": "Kein Mikrofon-Zugriff.",
+    "noMicrophoneFound": "Kein Mikrofon gefunden.",
+    "uploadFailed": "Hochladen fehlgeschlagen. Bitte versuche es erneut.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }

package/src/shared/translation/localization/en.json

@@ -39,5 +39,18 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Delete recording?",
+    "youWontBeAbleToRecover": "You won't be able to recover this file once it's gone.",
+    "recordingDeleted": "Recording successfully deleted",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "noMicrophoneAccess": "No microphone access",
+    "noMicrophoneFound": "No microphone found",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }

package/src/shared/translation/localization/gb.json

@@ -39,5 +39,18 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Delete recording?",
+    "youWontBeAbleToRecover": "You won't be able to recover this file once it's gone.",
+    "recordingDeleted": "Recording successfully deleted",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "noMicrophoneAccess": "No microphone access",
+    "noMicrophoneFound": "No microphone found",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }

package/src/shared/translation/localization/sct.json

@@ -39,5 +39,18 @@
     "volume": "Volume",
     "weight": "Weight",
     "time": "Time"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Delete recording?",
+    "youWontBeAbleToRecover": "You won't be able to recover this file once it's gone.",
+    "recordingDeleted": "Recording successfully deleted",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "noMicrophoneAccess": "No microphone access",
+    "noMicrophoneFound": "No microphone found",
+    "uploadFailed": "Upload failed. Please try again.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }

package/src/shared/translation/localization/sw.json

@@ -39,5 +39,18 @@
     "volume": "Volym",
     "weight": "Vikt",
     "time": "Tid"
+  },
+  "voiceRecorder": {
+    "deleteRecording": "Radera inspelningen?",
+    "youWontBeAbleToRecover": "Du kommer inte att kunna återställa filen när den väl är borta.",
+    "recordingDeleted": "Recording deleted",
+    "delete": "Radera",
+    "cancel": "Avbryt",
+    "noMicrophoneAccess": "Ingen mikrofonåtkomst",
+    "noMicrophoneFound": "Ingen mikrofon hittades",
+    "uploadFailed": "Uppladdning misslyckades. Försök igen.",
+    "redoRecording": "Redo recording?",
+    "redo": "Redo",
+    "thisWillRemoveRecording": "This will remove your previous recording."
   }
 }

package/src/types/common.types.ts

@@ -2,3 +2,4 @@ export type Size = {
   width: number
   height: number
 }
+export type WithAbortSignal<T> = T & { signal?: AbortSignal }

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