0.0.6

Author: ivansglazunov

README.md

@@ -5,9 +5,34 @@
 [![Gitpod](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/deep-foundation/deepmemo-app) 
 [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label&color=purple)](https://discord.gg/deep-foundation)
 
-## envs
+## ENVS
 
 ```
 export NEXT_PUBLIC_GQL_PATH=localhost:3006/gql;
 export NEXT_PUBLIC_GQL_SSL=0;
-```
+```
+
+## Description
+
+All features from `deepmemo-imports` enabled and visulized in app.
+
+Application support:
+
+| Feature | web-chrome | web-safari | web-ios | web-android | app-ios | app-android | app-mac | app-win | app-linux |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| Device | 🟢 | 🟢 | 🟢 | 🔵 | 🔵 | 🔵 | 🟢 | 🔵 | 🔵 | 🔵 |
+| Geolocation | 🟢 | 🟢 | 🟢 | 🔵 | 🔵 | 🔵 | 🟢 | [🟠](https://github.com/ionic-team/capacitor/issues/1858) | [🟠](https://github.com/ionic-team/capacitor/issues/1858) | [🟠](https://github.com/ionic-team/capacitor/issues/1858) |
+| Voice | 🟢 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 |
+| Contacts | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 |
+| Camera | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 |
+| Action | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 |
+| Haptics | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 |
+| Motion | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 |
+| Network | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 |
+| Reader | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 |
+
+- 🔴 not realized
+- 🟣 in process
+- 🟠 has problem, may  be link to issue
+- 🔵 realized but not tested
+- 🟢 tested

next.config.js

@@ -17,7 +17,7 @@ const config =  {
 
   transpilePackages: ['@deep-foundation/deepmemo-imports'],
 
-  webpack: (config) => {   
+  webpack: (config) => {
     config.resolve.fallback = {
       "buffer":false,
       "events": false,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@deep-foundation/deepmemo-app",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "",
   "license": "Unlicense",
   "main": "./bin/server.js",
@@ -37,6 +37,8 @@
     "@deep-foundation/deeplinks": "^0.0.343",
     "@deep-foundation/deepmemo-imports": "^0.0.6",
     "@solid-primitives/geolocation": "^1.4.14",
+    "base64-blob": "^1.4.1",
+    "capacitor-voice-recorder": "^5.0.0",
     "dotenv-load": "^2.0.1",
     "next": "^14.2.2",
     "next-env": "^1.1.1",

package.json

@@ -1,5 +1,11 @@
 import { appWithTranslation } from 'next-i18next';
 import { Provider } from '../src/provider';
+import c from 'crypto';
+import { v4 as uuidv4 } from 'uuid';
+
+if (typeof(crypto) === 'object') {
+  crypto.__proto__randomUUID = uuidv4;
+}
 
 function App({ Component, pageProps }) {
   return (

pages/_app.js

@@ -1,5 +1,5 @@
 import {
-  Box, Button, CircularProgress, CircularProgressLabel, FormControl, FormLabel, Heading, SimpleGrid,
+  Box, Button, CircularProgress, CircularProgressLabel, FormControl, FormLabel, Heading, Input, SimpleGrid,
   Slider,
   SliderFilledTrack,
   SliderMark,
@@ -16,6 +16,10 @@ import {
   DeviceProvider,
   useDevice
 } from '@deep-foundation/deepmemo-imports/imports/device';
+import {
+  VoiceProvider,
+  useVoice
+} from '@deep-foundation/deepmemo-imports/imports/voice';
 import {
   GeolocationProvider,
   useGeolocation
@@ -24,6 +28,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Connection } from '../src/connection';
 import { i18nGetStaticProps } from '../src/i18n';
 import { SaverProvider } from '@deep-foundation/deepmemo-imports/imports/saver';
+import { useLocalStore } from '@deep-foundation/store/local';
 
 const Loading = React.memo(function Loading({ factor, interval }: { factor: any, interval: number }) {
   const [value, setValue] = useState(0);
@@ -117,6 +122,58 @@ const GeolocationView = React.memo(function GeolocationView({ interval }: { inte
   </>;
 });
 
+const VoiceView = React.memo(function VoiceView() {
+  const deep = useDeep();
+  const voice = useVoice();
+  const [voices, setVoices] = useState([]);
+  const [active, setActive] = useState(-1);
+  return <>
+    <Heading>Voice</Heading>
+    <Box>
+      {voices.map((v, i) => <Button key={i}
+        onClick={() => setActive(id => i === id ? -1 : i)}
+        variant={active === i ? 'solid' : 'outline'}
+      >{v?.id || i}</Button>)}
+      <Box>
+    </Box>
+      {active >= 0 && <audio controls>
+        <source src={`data:audio/mpeg;base64,${voices[active]?.record}`} type="audio/mpeg"></source>
+      </audio>}
+    </Box>
+    {voice.status ? (
+      voice.recording ? (<>
+        <Button onClick={async () => {
+          const record = await voice.stop();
+          setVoices(v => [...v, record]);
+        }}>stop</Button>
+        {voice.paused ? (
+          <Button onClick={() => voice.pause()}>pause</Button>
+        ) : (
+          <Button onClick={() => voice.resume()}>resume</Button>
+        )}
+      </>) : (
+        <Button onClick={() => voice.start()}>start</Button>
+      )
+    ) : (
+      <Button onClick={() => voice.request()}>request</Button>
+    )}
+  </>;
+});
+
+export function Syncing({ title, value, setValue }) {
+  const deep = useDeep();
+  return <FormControl display='flex' alignItems='center'>
+    <FormLabel htmlFor='syncing' mb='0'>
+      {title}
+    </FormLabel>
+    <Switch id='syncing'
+      isChecked={value}
+      onChange={() => setValue(s => !s)}
+      disabled={!deep?.id}
+    />
+  </FormControl>;
+}
+
 export default function Page() {
   const deep = useDeep();
   const toast = useToast();
@@ -125,39 +182,49 @@ export default function Page() {
   if (typeof(window) === 'object') window.deep = deep;
   console.log('deep', deep);
 
+  const [containerId, setContainerId] = useLocalStore('deepmemo-app-containerId', null);
   const [deviceInterval, setDeviceInterval] = useState(5000);
+  const [deviceSaver, setDeviceSaver] = useState(true);
   const [geolocationInterval, setGeolocationInterval] = useState(5000);
+  const [geolocationSaver, setGeolocationSaver] = useState(true);
   const [saver, setSaver] = useState<boolean>(false);
   useEffect(() => {
     if (!deep) setSaver(false);
+    else deep.local = false;
   }, [deep]);
 
   return (<>
     <Connection/>
     <Box p={4}>
-    <FormControl display='flex' alignItems='center'>
-      <FormLabel htmlFor='syncing' mb='0'>
-        Enable syncing with deep backend?
-      </FormLabel>
-      <Switch id='syncing'
-        isChecked={saver}
-        onChange={() => setSaver(s => !s)}
-        disabled={!deep?.id}
-      />
-    </FormControl>
+      <Syncing title={'Enable syncing with deep backend?'} value={saver} setValue={setSaver}/>
+      <FormControl display='flex' alignItems='center'>
+        <FormLabel htmlFor='syncing' mb='0'>
+          ContainerId
+        </FormLabel>
+        <Input
+          placeholder={`${deep?.linkId}`}
+          value={containerId} onChange={(e) => setContainerId(e.target.value)}
+          w={'10em'}
+        />
+      </FormControl>
       <SaverProvider onSave={({ Type, id, object, mode, promise }) => {
         toast.promise(promise, {
           success: { title: `Saved ${mode} #${id || '?'} of type (#${Type}) to deep`, isClosable: true },
-          error: { title: `Error with saving ${mode} #${id || '?'} of type (#${Type}) to deep`, isClosable: true },
+          error: (e) => ({ title: `Error with saving ${mode} #${id || '?'} of type (#${Type}) to deep`, description: e.toString(), isClosable: true }),
           loading: { title: `Saving ${mode} #${id || '?'} of type (#${Type}) to deep`, isClosable: true },
         })
       }}>
-        <DeviceProvider saver={saver} containerId={deep?.linkId} interval={deviceInterval}>
-          <GeolocationProvider saver={saver} interval={geolocationInterval}>
-            <Interval value={deviceInterval} onChange={setDeviceInterval}/>
-            <DeviceView interval={deviceInterval}/>
-            <Interval value={geolocationInterval} onChange={setGeolocationInterval}/>
-            <GeolocationView interval={geolocationInterval}/>
+        <DeviceProvider saver={saver && deviceSaver} containerId={containerId} interval={deviceInterval}>
+          <GeolocationProvider saver={saver && geolocationSaver} interval={geolocationInterval}>
+            <VoiceProvider saver={saver}>
+              <VoiceView/>
+              <Interval value={deviceInterval} onChange={setDeviceInterval}/>
+              <Syncing title={'Enable voice syncing with deep backend?'} value={deviceSaver} setValue={setDeviceSaver}/>
+              <DeviceView interval={deviceInterval}/>
+              <Interval value={geolocationInterval} onChange={setGeolocationInterval}/>
+              <Syncing title={'Enable geolocation syncing with deep backend?'} value={geolocationSaver} setValue={setGeolocationSaver}/>
+              <GeolocationView interval={geolocationInterval}/>
+            </VoiceProvider>
           </GeolocationProvider>
         </DeviceProvider>
       </SaverProvider>