feat(app): to dev updates (#1199)

Author: happylolonly

src/constants/localStorageKeys.ts

@@ -4,4 +4,8 @@ export const localStorageKeys = {
     POCKET_ACCOUNT: 'pocketAccount',
   },
   MENU_SHOW: 'menuShow',
+  settings: {
+    adviserAudio: 'adviserAudio',
+    adviserVoice: 'adviserVoice',
+  },
 };

src/features/adviser/Adviser/Adviser.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useState, useRef } from 'react';
 import cx from 'classnames';
+import { localStorageKeys } from 'src/constants/localStorageKeys';
 import styles from './Adviser.module.scss';
 // import TypeIt from 'typeit-react';
 
+const adviserAudioKey = localStorageKeys.settings.adviserAudio;
+const adviserVoiceKey = localStorageKeys.settings.adviserVoice;
+
 export enum AdviserColors {
   blue = 'blue',
   green = 'green',
@@ -46,10 +50,11 @@ function play(text: string) {
   const utterThis = new SpeechSynthesisUtterance(cleanText);
   utterThis.lang = 'en-US';
 
-  // woman voice
-  utterThis.voice = synth
-    .getVoices()
-    .find((voice) => voice.name === 'Google US English');
+  const voiceLS = localStorage.getItem(adviserVoiceKey);
+
+  utterThis.voice =
+    synth.getVoices().find((voice) => voice.name === voiceLS) ||
+    synth.getVoices()[0];
 
   synth.speak(utterThis);
 }
@@ -84,6 +89,12 @@ function Adviser({
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    const audioEnabled = localStorage.getItem(adviserAudioKey) === 'true';
+
+    if (!audioEnabled) {
+      return;
+    }
+
     const t = ref.current?.innerText;
 
     if (!t) {

src/pages/Settings/Audio/Audio.tsx

@@ -0,0 +1,46 @@
+import { Display } from 'src/components';
+import DisplayTitle from 'src/components/containerGradient/DisplayTitle/DisplayTitle';
+
+import Switch from 'src/components/Switch/Switch';
+import { useState } from 'react';
+import { localStorageKeys } from 'src/constants/localStorageKeys';
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
+import VoiceList from './VoiceList';
+
+const adviserAudioKey = localStorageKeys.settings.adviserAudio;
+
+function Audio() {
+  const [adviserAudio, setAdviserAudio] = useState(
+    localStorage.getItem(adviserAudioKey) === 'true'
+  );
+
+  const { setAdviser } = useAdviserTexts({
+    successText: 'audio settings',
+  });
+
+  function handleSwitch(value: boolean) {
+    setAdviserAudio(value);
+    localStorage.setItem(adviserAudioKey, value.toString());
+
+    setAdviser(
+      `Adviser audio is turned ${value ? 'on' : 'off'}`,
+      value ? 'green' : 'red'
+    );
+  }
+
+  return (
+    <Display title={<DisplayTitle title="audio" />}>
+      <div>
+        <Switch
+          value={adviserAudio}
+          onChange={handleSwitch}
+          label="Adviser audio"
+        />
+
+        <VoiceList />
+      </div>
+    </Display>
+  );
+}
+
+export default Audio;

src/pages/Settings/Audio/VoiceList.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { Select } from 'src/components';
+import { localStorageKeys } from 'src/constants/localStorageKeys';
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
+
+const { adviserVoice } = localStorageKeys.settings;
+
+function VoiceList() {
+  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);
+  const [voice, setVoice] = useState(localStorage.getItem(adviserVoice));
+
+  const { setAdviser } = useAdviserTexts({
+    successText: 'audio settings',
+  });
+
+  useEffect(() => {
+    const loadVoices = () => {
+      const voices = window.speechSynthesis.getVoices();
+      setVoices(voices);
+    };
+
+    loadVoices();
+
+    window.speechSynthesis.onvoiceschanged = loadVoices;
+  }, []);
+
+  return (
+    <div>
+      <h1>Available Voices</h1>
+      <ul>
+        <Select
+          width={300}
+          valueSelect={voice}
+          onChangeSelect={(value) => {
+            localStorage.setItem(adviserVoice, value);
+            setVoice(value);
+
+            setAdviser(`selected voice: ${value}`);
+          }}
+          options={voices.map((voice) => {
+            return {
+              value: voice.name,
+              text: `${voice.name} (${voice.lang})`,
+            };
+          })}
+        />
+      </ul>
+    </div>
+  );
+}
+
+export default VoiceList;

src/pages/Settings/Layout/SettingsMenu/SettingsMenu.tsx

@@ -1,7 +1,7 @@
 import { NavLink } from 'react-router-dom';
 import cx from 'classnames';
-import styles from './SettingsMenu.module.scss';
 import { Display } from 'src/components';
+import styles from './SettingsMenu.module.scss';
 
 type MenuItem = {
   text: string;
@@ -41,6 +41,13 @@ const links: Array<MenuItem[]> = [
       icon: '📡',
     },
   ],
+  [
+    {
+      text: 'Audio',
+      link: './audio',
+      icon: '🔊',
+    },
+  ],
 ];
 
 function SettingsMenu() {

src/pages/Settings/Settings.tsx

@@ -3,13 +3,15 @@ import IpfsSettings from 'src/features/ipfs/ipfsSettings';
 import Layout from './Layout/Layout';
 import Keys from '../Keys/Keys';
 import Hub from '../Hub/hub';
+import Audio from './Audio/Audio';
 
 function Settings() {
   return (
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<IpfsSettings />} />
         <Route path="keys" element={<Keys />} />
+        <Route path="audio" element={<Audio />} />
 
         <Route path="/*" element={<Hub />} />
       </Route>

src/pages/robot/Layout/LayoutRoot/Layout.module.scss

@@ -1,11 +1,10 @@
-@import '../../../../layouts/variables.module.scss';
+@import '../../../../layouts/variables.module';
 
 $robotHeaderHeight: 130px;
 
 .wrapper {
   display: flex;
   flex-direction: column;
-
 }
 
 .content {
@@ -14,18 +13,18 @@ $robotHeaderHeight: 130px;
   grid-template-rows: 1fr;
   justify-content: center;
   margin-right: -2px;
-
   height: 70vh;
-  max-height: calc(100vh - $reservedTopHeight - $actionBarHeight - $robotHeaderHeight);
+  max-height: calc(
+    100vh - $reservedTopHeight - $actionBarHeight - $robotHeaderHeight
+  );
 
   //Display
-
   > :first-child {
-    >div {
+    > div {
       height: 100%;
     }
 
-    >div {
+    > div > div {
       // don't understand this scroll
       overflow-x: hidden;
     }
@@ -36,5 +35,4 @@ $robotHeaderHeight: 130px;
     position: relative;
     overflow-x: auto;
   }
-
-}
+}