1.1.30 Dark mode for android app.

rerdavies · Aug 30, 2023 · 6242a1a · 6242a1a
1 parent 21b5a2f
commit 6242a1a
Show file tree

Hide file tree

Showing 26 changed files with 147 additions and 66 deletions.
diff --git a/CMakeLists.txt b/CMakeLists.txt
@@ -1,6 +1,6 @@
 cmake_minimum_required(VERSION 3.16.0)
 project(pipedal 
-    VERSION 1.1.29
+    VERSION 1.1.30
     DESCRIPTION "PiPedal Guitar Effect Pedal For Raspberry Pi"
     HOMEPAGE_URL "https://rerdavies.github.io/pipedal"
 )

diff --git a/debian/control b/debian/control
@@ -9,6 +9,6 @@ Package: pipedal
 Pre-Depends: hostapd;authbind;dnsmasq
 Priority: optional
 Section: sound
-Version: 1.1.29
+Version: 1.1.30
 Installed-Size: 15147
 
diff --git a/docs/ReleaseNotes.md b/docs/ReleaseNotes.md
@@ -1,4 +1,8 @@
 # Release Notes
+## PiPedal 1.1.30
+
+- Use system preferences for dark mode when connecting from Android app.
+- 
 
 ## PiPedal 1.1.28
 

diff --git a/docs/index.md b/docs/index.md
@@ -7,7 +7,7 @@
 
 To download PiPedal, click [here](download.md).
 
-> NEW version 1.1.29 release. See the [release notes](https://rerdavies.github.io/pipedal/ReleaseNotes) for details.
+> NEW version 1.1.30 release. See the [release notes](https://rerdavies.github.io/pipedal/ReleaseNotes) for details.
 
 
 Use your Raspberry Pi as a guitar effects pedal. Configure and control PiPedal with your phone or tablet.

diff --git a/react/package.json b/react/package.json
@@ -58,6 +58,7 @@
   },
   "devDependencies": {
     "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5"
+    "@types/react-window": "^1.8.5",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2"
   }
 }
diff --git a/react/public/index.html b/react/public/index.html
@@ -40,22 +40,52 @@
     }
   </style>
   <script>
-      const darkMode = localStorage.getItem("darkMode"); if (darkMode) { } 
-      if (darkMode)
-      {
-          let bgStyle = document.getElementById("bgStyle");
-          if (bgStyle)
-          {
-            // disable the style block.
-            bgStyle.setAttribute('media',"max-width: 1px");
-          }
+    const androidHosted = !!(window.AndroidHost);
+
+    var darkMode = false;
+    var useSystem = false;
+
+    var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    switch (localStorage.getItem("colorScheme")) {
+      case null:
+      default:
+        if (androidHosted) {
+          useSystem = true;
+        } else {
+          darkMode = false;
+        }
+        break;
+
+      case "Light":
+        darkMode = false;
+        break;
+      case "Dark":
+        darkMode = true;
+        break;
+      case "System":
+        useSystem = true;
+        break;
+    }
+    if (useSystem)
+    {
+      darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } 
+
+    if (!darkMode) {
+      let bgStyle = document.getElementById("bgStyle");
+      if (bgStyle) {
+        // disable the style block.
+        bgStyle.setAttribute('media', "max-width: 1px");
       }
+    }
   </script>
-  </head>
-  <body >
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -65,5 +95,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+</body>
+
 </html>
diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/material/styles';
 
 import AppThemed from "./AppThemed";
-import isDarkMode from './DarkMode';
+import {isDarkMode} from './DarkMode';
 
 declare module '@mui/material/styles' {
     interface Theme {

diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx
@@ -60,7 +60,7 @@ import { BankIndex, BankIndexEntry } from './Banks';
 import RenameDialog from './RenameDialog';
 import JackStatusView from './JackStatusView';
 import { Theme } from '@mui/material/styles';
-import isDarkMode from './DarkMode';
+import {isDarkMode} from './DarkMode';
 
 import {ReactComponent as RenameOutlineIcon} from './svg/drive_file_rename_outline_black_24dp.svg';
 import {ReactComponent as SaveBankAsIcon} from './svg/ic_save_bank_as.svg';

diff --git a/react/src/DarkMode.tsx b/react/src/DarkMode.tsx
@@ -17,12 +17,58 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+export enum ColorTheme {
+    Light,
+    Dark,
+    System
+};
 
-export default function isDarkMode(): boolean {
-    let value = localStorage.getItem("darkMode");
-    return value === "true";
+
+
+export function getColorScheme(): ColorTheme {
+    const androidHosted = !!((window as any).AndroidHost);
+
+    switch (localStorage.getItem('colorScheme')) {
+        case null:
+        default:
+            if (androidHosted) {
+                return ColorTheme.System;
+            } else {
+                return ColorTheme.Light;
+            }
+        case "Light":
+            return ColorTheme.Light;
+        case "Dark":
+            return ColorTheme.Dark;
+        case "System":
+            return ColorTheme.System;
+    }
 }
+export function setColorScheme(value: ColorTheme): void {
+    var storageValue;
+    switch (value) {
+        default:
+        case ColorTheme.Light:
+            storageValue = "Light";
+            break;
+        case ColorTheme.Dark:
+            storageValue = "Dark";
+            break;
 
-export function setDarkMode(value: boolean): void {
-    localStorage.setItem("darkMode",value? "true": "false");
+        case ColorTheme.System:
+            storageValue = "System";
+            break;
+    }
+    localStorage.setItem("colorScheme", storageValue);
 }
+
+export function isDarkMode(): boolean {
+    var colorTheme = getColorScheme();
+    if (colorTheme === ColorTheme.System) {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return true;
+        }
+    }
+    return colorTheme === ColorTheme.Dark;
+}
+
diff --git a/react/src/DraggableGrid.tsx b/react/src/DraggableGrid.tsx
@@ -21,7 +21,7 @@ import { Theme } from '@mui/material/styles';
 import createStyles from '@mui/styles/createStyles';
 import { Property } from "csstype";
 import { nullCast} from './Utility'
-import isDarkMode from './DarkMode';
+import {isDarkMode} from './DarkMode';
 
 const SELECT_SCALE = 1.0;
 

diff --git a/react/src/FilePropertyControl.tsx b/react/src/FilePropertyControl.tsx
@@ -33,8 +33,7 @@ import { PiPedalModel, PiPedalModelFactory, ListenHandle} from './PiPedalModel';
 import ButtonBase from '@mui/material/ButtonBase'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import {PedalboardItem} from './Pedalboard';
-import isDarkMode from './DarkMode';
-
+import {isDarkMode} from './DarkMode';
 
 export const StandardItemSize = { width: 80, height: 140 }
 

diff --git a/react/src/GxTunerControl.tsx b/react/src/GxTunerControl.tsx
@@ -24,8 +24,7 @@ import createStyles from '@mui/styles/createStyles';
 import withStyles from '@mui/styles/withStyles';
 import { MonitorPortHandle, PiPedalModel, State, PiPedalModelFactory } from "./PiPedalModel";
 import SvgPathBuilder from './SvgPathBuilder'
-import isDarkMode from './DarkMode';
-
+import {isDarkMode} from './DarkMode';
 //const char* model[] = {"12-TET","19-TET","24-TET", "31-TET", "53-TET"};
 // set_adjustment(ui->widget[2]->adj,440.0, 440.0, 427.0, 453.0, 0.1, CL_CONTINUOS);
 

diff --git a/react/src/JackHostStatus.tsx b/react/src/JackHostStatus.tsx
@@ -19,8 +19,7 @@
 
 import React from 'react';
 import Typography from '@mui/material/Typography';
-import isDarkMode from './DarkMode';
-
+import {isDarkMode} from './DarkMode';
 
 const RED_COLOR = isDarkMode()? "#F88":"#C00";
 const GREEN_COLOR = isDarkMode()? "rgba(255,255,255,0.7)": "#666";

diff --git a/react/src/MainPage.tsx b/react/src/MainPage.tsx
@@ -47,8 +47,7 @@ import MidiBindingsDialog from './MidiBindingsDialog';
 import PluginPresetSelector from './PluginPresetSelector';
 import {ReactComponent as OldDeleteIcon} from "./svg/old_delete_outline_24dp.svg";
 import {ReactComponent as MidiIcon} from "./svg/ic_midi.svg";
-import isDarkMode from './DarkMode';
-
+import {isDarkMode} from './DarkMode';
 
 const SPLIT_CONTROLBAR_THRESHHOLD = 650;
 

diff --git a/react/src/PedalboardView.tsx b/react/src/PedalboardView.tsx
@@ -33,8 +33,7 @@ import Draggable from './Draggable'
 import Rect from './Rect';
 import {PiPedalStateError} from './PiPedalError';
 import Utility from './Utility';
-import isDarkMode from './DarkMode';
-
+import {isDarkMode} from './DarkMode';
 import {
     Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
 } from './Pedalboard';

diff --git a/react/src/PiPedalModel.tsx b/react/src/PiPedalModel.tsx
@@ -38,12 +38,8 @@ import GovernorSettings from './GovernorSettings';
 import WifiChannel from './WifiChannel';
 import AlsaDeviceInfo from './AlsaDeviceInfo';
 import { AndroidHostInterface, FakeAndroidHost } from './AndroidHost';
-import isDarkMode, {setDarkMode} from './DarkMode';
+import {ColorTheme, getColorScheme,setColorScheme} from './DarkMode';
 
-export enum ColorTheme {
-    Light,
-    Dark
-};
 
 export enum State {
     Loading,
@@ -2546,13 +2542,14 @@ export class PiPedalModel //implements PiPedalModel
     }
 
     getTheme(): ColorTheme {
-        return isDarkMode() ? ColorTheme.Dark: ColorTheme.Light;
+        return getColorScheme();
     }
 
     setTheme(value: ColorTheme) {
+
         if (this.getTheme() !== value)
         {
-            setDarkMode(value === ColorTheme.Dark);
+            setColorScheme(value);
             this.reloadPage();
         }
     }
@@ -2562,7 +2559,7 @@ export class PiPedalModel //implements PiPedalModel
     reloadPage() {
         this.reloadRequested = true;
         // eslint-disable-next-line no-restricted-globals
-        location.reload();
+        window.location.reload();
     }
 
 

diff --git a/react/src/PluginOutputControl.tsx b/react/src/PluginOutputControl.tsx
@@ -25,8 +25,7 @@ import withStyles from '@mui/styles/withStyles';
 import { UiControl } from './Lv2Plugin';
 import Typography from '@mui/material/Typography';
 import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle,State } from './PiPedalModel';
-import isDarkMode from './DarkMode';
-
+import {isDarkMode} from './DarkMode';
 
 
 

diff --git a/react/src/PresetDialog.tsx b/react/src/PresetDialog.tsx
@@ -18,7 +18,7 @@
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React, { SyntheticEvent,Component } from 'react';
-import isDarkMode from './DarkMode';
+import {isDarkMode} from './DarkMode';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { PiPedalModel, PiPedalModelFactory, PresetIndexEntry, PresetIndex } from './PiPedalModel';

diff --git a/react/src/PresetSelector.tsx b/react/src/PresetSelector.tsx
@@ -34,8 +34,7 @@ import Divider from '@mui/material/Divider';
 import RenameDialog from './RenameDialog'
 import Select from '@mui/material/Select';
 import UploadPresetDialog from './UploadPresetDialog';
-import isDarkMode from './DarkMode';
-
+import {isDarkMode} from './DarkMode';
 
 interface PresetSelectorProps extends WithStyles<typeof styles> {
 

diff --git a/react/src/SelectThemeDialog.tsx b/react/src/SelectThemeDialog.tsx
@@ -29,7 +29,7 @@ import FormControl from '@mui/material/FormControl';
 
 import RadioGroup from '@mui/material/RadioGroup';
 import Radio from '@mui/material/Radio';
-import {ColorTheme} from './PiPedalModel';
+import {ColorTheme} from './DarkMode';
 
 
 
@@ -45,7 +45,14 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
     const { onClose, defaultTheme, open,onOk } = props;
     const [ selectedTheme, setSelectedTheme ] = useState(defaultTheme);
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        let value = ((event.target as HTMLInputElement).value) === '0' ? ColorTheme.Light: ColorTheme.Dark;
+        let value = ColorTheme.Light;
+        if ((event.target as HTMLInputElement).value === '1')
+        {
+            value = ColorTheme.Dark;
+        } else if ((event.target as HTMLInputElement).value === '2')
+        {
+            value = ColorTheme.System;
+        }        
         setSelectedTheme(value);
     };
     const handleClose = (): void => {
@@ -67,6 +74,7 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
                     >
                         <FormControlLabel value={ColorTheme.Light} control={<Radio size='small' />} label="Light" />
                         <FormControlLabel value={ColorTheme.Dark} control={<Radio size='small' />} label="Dark" />
+                        <FormControlLabel value={ColorTheme.System} control={<Radio size='small' />} label="Use system setting" />
                     </RadioGroup>
                 </FormControl>
             </DialogContent>

diff --git a/react/src/SettingsDialog.tsx b/react/src/SettingsDialog.tsx
@@ -23,7 +23,8 @@ import OkCancelDialog from './OkCancelDialog';
 import ListSelectDialog from './ListSelectDialog';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { PiPedalModel, PiPedalModelFactory, State, ColorTheme } from './PiPedalModel';
+import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
+import {ColorTheme} from './DarkMode';
 import ButtonBase from "@mui/material/ButtonBase";
 import AppBar from '@mui/material/AppBar';
 import Button from '@mui/material/Button';
@@ -749,7 +750,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                             <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
                                                 Color Theme</Typography>
                                             <Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap>
-                                                { this.model.getTheme() === ColorTheme.Dark ? "Dark" :"Light"}
+                                                { this.model.getTheme() === ColorTheme.Dark ? "Dark" :
+                                                (this.model.getTheme() ===  ColorTheme.Light ? "Light": "System")}
                                             </Typography>
                                         </div>
                                     </ButtonBase>

diff --git a/react/src/TemporaryDrawer.tsx b/react/src/TemporaryDrawer.tsx
@@ -26,8 +26,7 @@ import IconButton from '@mui/material/Toolbar';
 import Drawer from '@mui/material/Drawer';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { Theme } from '@mui/material/styles';
-import isDarkMode from './DarkMode';
-
+import {isDarkMode} from './DarkMode';
 
 const drawerStyles = (theme: Theme) => {
     return createStyles({