0.0.7

Author: ivansglazunov

README.md

@@ -20,9 +20,9 @@ Application support:
 
 | Feature | web-chrome | web-safari | web-ios | web-android | app-ios | app-android | app-mac | app-win | app-linux | chrome-extension | firefox-extension | vsc-extension |
 | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-| 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 | 🟢 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 | 🔵 |
+| 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 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 | 🔴 |

electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdk",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Data-oriented operating space of associative data representation. Wellcome to the deep universe",
   "homepage": "https://deep.foundation/",
   "author": {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@deep-foundation/deepmemo-app",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
   "license": "Unlicense",
   "main": "./bin/server.js",
@@ -35,8 +35,9 @@
     "@capacitor/geolocation": "^5.0.7",
     "@deep-foundation/deepcase": "^0.0.121",
     "@deep-foundation/deeplinks": "^0.0.343",
-    "@deep-foundation/deepmemo-imports": "^0.0.6",
+    "@deep-foundation/deepmemo-imports": "^0.0.8",
     "@solid-primitives/geolocation": "^1.4.14",
+    "axios-hooks": "^5.0.2",
     "base64-blob": "^1.4.1",
     "capacitor-voice-recorder": "^5.0.0",
     "dotenv-load": "^2.0.1",

package.json

@@ -1,11 +1,17 @@
 import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
   Box, Button, CircularProgress, CircularProgressLabel, FormControl, FormLabel, Heading, Input, SimpleGrid,
   Slider,
   SliderFilledTrack,
   SliderMark,
   SliderThumb,
   SliderTrack,
   Switch,
+  Text,
   useToast,
 } from '@chakra-ui/react';
 import CytoGraph from '@deep-foundation/deepcase/imports/cyto/graph';
@@ -16,19 +22,20 @@ import {
   DeviceProvider,
   useDevice
 } from '@deep-foundation/deepmemo-imports/imports/device';
-import {
-  VoiceProvider,
-  useVoice
-} from '@deep-foundation/deepmemo-imports/imports/voice';
 import {
   GeolocationProvider,
   useGeolocation
 } from '@deep-foundation/deepmemo-imports/imports/geolocation';
+import { SaverProvider } from '@deep-foundation/deepmemo-imports/imports/saver';
+import {
+  VoiceProvider,
+  useVoice
+} from '@deep-foundation/deepmemo-imports/imports/voice';
+import { useLocalStore } from '@deep-foundation/store/local';
 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';
+import useAxios from 'axios-hooks';
 
 const Loading = React.memo(function Loading({ factor, interval }: { factor: any, interval: number }) {
   const [value, setValue] = useState(0);
@@ -76,7 +83,7 @@ const Interval = React.memo(function Loading({ value, onChange }: { value: any,
   </Slider></Box>;
 });
 
-const Graph = React.memo(function Graph({ linkId }: { linkId: Id }) {
+const Graph = React.memo(function Graph({ linkId, query = {} }: { linkId: Id; query?: any }) {
   const deep = useDeep();
   const cyRef = useRef();
   const cytoViewportRef = useRefstarter<{ pan: { x: number; y: number; }; zoom: number }>();
@@ -89,6 +96,7 @@ const Graph = React.memo(function Graph({ linkId }: { linkId: Id }) {
       deep.idLocal('@deep-foundation/core', 'Rejected'),
       deep.idLocal('@deep-foundation/core', 'PromiseResult'),
     ] } },
+    ...(query)
   });
   return <>
     {!!linkId && <Box w={500} h={500} border={'1px'} rounded='md' position="relative">
@@ -122,29 +130,91 @@ const GeolocationView = React.memo(function GeolocationView({ interval }: { inte
   </>;
 });
 
+const VoicesVoiceView = React.memo(function VoicesVoiceView({ voice, i }: { voice: any, i: number }) {
+  const deep = useDeep();
+
+  const ssl = deep.apolloClient.ssl;
+  const path = deep.apolloClient.path.slice(0, -4);
+  const url = `${ssl ? "https://" : "http://"}${path}/file?linkId=${voice.id}`;
+
+  const [{ data, loading, error }, refetch] = useAxios({ 
+    method: 'get', url: `${ssl ? "https://" : "http://"}${path}/file?linkId=${voice.id}`,
+    headers: { 'Authorization': `Bearer ${deep.token}` },
+    responseType: "blob",
+  });
+  const [src, setSrc] = useState<any>();
+  useEffect(() => {
+    if (!loading && data) {
+      const reader = new window.FileReader();
+      reader.onload = () => {
+        setSrc(reader.result);
+      }
+      reader.readAsDataURL(data);
+    }
+  }, [data, loading]);
+
+  const [text] = deep.useMinilinksSubscription({
+    type_id: deep.idLocal('@deep-foundation/core', 'SyncTextFile'),
+    in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: voice.id },
+  });
+
+  return <>
+    <AccordionItem>{({ isExpanded }) => (<>
+      <h2>
+        <AccordionButton>
+          <Box>
+            <Text noOfLines={1}>
+              {voice?.id || i} {text?.value?.value || ''}
+            </Text>
+          </Box>
+          <AccordionIcon />
+        </AccordionButton>
+      </h2>
+      <AccordionPanel pb={4}>
+        {!!isExpanded && !!src && <audio src={src} controls>Your browser does not support the audio element.</audio>}
+        {!!text && <Box>{text?.value?.value}</Box>}
+      </AccordionPanel>
+    </>)}</AccordionItem>
+  </>;
+});
+
+const VoicesView = React.memo(function VoiceView() {
+  const deep = useDeep();
+  const device = useDevice();
+  const voice = useVoice();
+  // const [voices, setVoices] = useState([]);
+  const voices = deep.useMinilinksSubscription({
+    type_id: deep.idLocal('@deep-foundation/core', 'AsyncFile'),
+    in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: device?.id || 0 },
+    order_by: {id: 'asc'},
+  });
+  return <>
+    <SimpleGrid columns={{sm: 1, md: 2}}>
+      <Box>
+        <Accordion allowToggle>
+          {voices.map((v, i) => <>
+            <VoicesVoiceView key={v.id} voice={v} i={i}/>
+          </>)}
+        </Accordion>
+      </Box>
+      {deep?.linkId && device?.id && <Graph linkId={device.id} query={{
+        up: { parent: { type_id: deep.idLocal('@deep-foundation/core', 'AsyncFile') } }
+      }}/>}
+    </SimpleGrid>
+  </>;
+});
+
 const VoiceView = React.memo(function VoiceView() {
   const deep = useDeep();
   const voice = useVoice();
-  const [voices, setVoices] = useState([]);
-  const [active, setActive] = useState(-1);
+  const device = useDevice();
   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>
+    {!!deep && !!device?.id && <VoicesView/>}
     {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>