feat(android): let preload fade to system palette colors

Also changes the preload to not disappear until the fonts have loaded.
wardellbagby · Oct 14, 2021 · aaea861 · aaea861
1 parent 0be554e
commit aaea861
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 59 deletions.
diff --git a/apps/mobile/android/app/src/main/assets/capacitor.config.json b/apps/mobile/android/app/src/main/assets/capacitor.config.json
@@ -9,10 +9,7 @@
 	"ios": {
 		"path": "apps/mobile/ios"
 	},
-	"server": {
-		"url": "http://172.20.3.135:8080",
-		"cleartext": true
-	},
+	"server": false,
 	"plugins": {
 		"Keyboard": {
 			"resize": "native"

diff --git a/packages/common/main/preferences/PreferenceManager.ts b/packages/common/main/preferences/PreferenceManager.ts
@@ -8,6 +8,7 @@ import {
 import { Preferences } from '@lyricistant/common/preferences/Preferences';
 import {
   ColorScheme,
+  DisplayableColorScheme,
   Font,
   PreferencesData,
   RhymeSource,
@@ -90,12 +91,14 @@ export class PreferenceManager implements Manager {
     );
   };
 
-  private normalizeColorScheme(theme: ColorScheme): ColorScheme {
+  private normalizeColorScheme(theme: ColorScheme): DisplayableColorScheme {
     return theme === ColorScheme.System
       ? this.systemThemeToTheme(this.systemTheme)
       : theme;
   }
 
-  private systemThemeToTheme = (systemTheme: SystemTheme): ColorScheme =>
+  private systemThemeToTheme = (
+    systemTheme: SystemTheme
+  ): DisplayableColorScheme =>
     systemTheme === SystemTheme.Dark ? ColorScheme.Dark : ColorScheme.Light;
 }
diff --git a/packages/common/main/preferences/PreferencesData.ts b/packages/common/main/preferences/PreferencesData.ts
@@ -13,13 +13,17 @@ export enum RhymeSource {
   Offline,
   Datamuse,
 }
+export type DisplayableColorScheme = ColorScheme.Light | ColorScheme.Dark;
 
 export interface ThemeData {
-  colorScheme: ColorScheme;
+  colorScheme: DisplayableColorScheme;
   textSize: number;
   font: Font;
   systemPalette?: SystemPalette;
 }
-export interface PreferencesData extends Omit<ThemeData, 'systemPalette'> {
+export interface PreferencesData {
+  colorScheme: ColorScheme;
+  textSize: number;
+  font: Font;
   rhymeSource: RhymeSource;
 }
diff --git a/packages/renderer/main/index.tsx b/packages/renderer/main/index.tsx
@@ -36,10 +36,14 @@ const container: HTMLElement = document.getElementById('app');
 ReactDOM.render(
   <PlatformEventsReadyHandler>
     <Themed
-      onThemeChanged={(background: string, foreground: string) => {
-        document.body.style.backgroundColor = background;
-        document.body.style.color = foreground;
-        onThemeUpdated(background);
+      onThemeChanged={(palette) => {
+        document.body.style.backgroundColor = palette.background;
+        document.body.style.color = palette.primaryText;
+        onThemeUpdated(palette);
+      }}
+      onThemeReady={() => {
+        onPageLoaded();
+        container.style.opacity = '100%';
       }}
     >
       <SnackbarProvider
@@ -61,9 +65,5 @@ ReactDOM.render(
       </SnackbarProvider>
     </Themed>
   </PlatformEventsReadyHandler>,
-  container,
-  () => {
-    onPageLoaded();
-    container.style.opacity = '100%';
-  }
+  container
 );
diff --git a/packages/renderer/main/preload.tsx b/packages/renderer/main/preload.tsx
@@ -2,25 +2,24 @@ import { getThemePalette } from '@lyricistant/renderer/theme';
 import jss, { Styles } from 'jss';
 import camelCase from 'jss-plugin-camel-case';
 import nested from 'jss-plugin-nested';
+import { Palette } from '@lyricistant/common/theme/SystemTheme';
 import feather from './lyricistant_feather.svg';
 
 jss.use(camelCase(), nested());
 
-const theme = getThemePalette(true);
-
 const rootStyles: Styles = {
   '@keyframes loading': {
     '0%': {
-      fill: theme.primary,
+      fill: 'var(--primary)',
     },
     '100%': {
-      fill: theme.surface,
+      fill: 'var(--surface)',
     },
   },
   overlay: {
     opacity: 1,
-    backgroundColor: theme.background,
-    color: theme.primaryText,
+    backgroundColor: 'var(--background)',
+    color: 'var(--text)',
     transition: 'opacity 500ms linear, background-color 500ms;',
     height: '100%',
     width: '100%',
@@ -50,6 +49,8 @@ const {
   classes: { overlay },
 } = jss.createStyleSheet(rootStyles).attach();
 
+onThemeUpdated(getThemePalette().palette);
+
 let container = document.getElementById('preload-overlay');
 
 if (!container) {
@@ -73,8 +74,9 @@ export const onPageLoaded = () => {
   }, 500);
 };
 
-export const onThemeUpdated = (background: string) => {
-  if (container) {
-    container.style.backgroundColor = background;
-  }
-};
+export function onThemeUpdated(palette: Palette) {
+  document.body.style.setProperty('--primary', palette.primary);
+  document.body.style.setProperty('--background', palette.background);
+  document.body.style.setProperty('--surface', palette.surface);
+  document.body.style.setProperty('--text', palette.primaryText);
+}
diff --git a/packages/renderer/main/theme/Themed.tsx b/packages/renderer/main/theme/Themed.tsx
@@ -6,13 +6,14 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { createTheme } from '@lyricistant/renderer/theme';
+import { createTheme, getThemePalette } from '@lyricistant/renderer/theme';
 import { useChannel } from '@lyricistant/renderer/platform/useChannel';
 import {
   Font,
   ThemeData,
 } from '@lyricistant/common/preferences/PreferencesData';
 import { logger } from '@lyricistant/renderer/globals';
+import { Palette } from '@lyricistant/common/theme/SystemTheme';
 
 const loadFont = async (themeData?: ThemeData) => {
   switch (themeData?.font) {
@@ -24,31 +25,36 @@ const loadFont = async (themeData?: ThemeData) => {
 };
 export const Themed: FunctionComponent<
   PropsWithChildren<{
-    onThemeChanged: (background: string, foreground: string) => void;
+    onThemeChanged: (palette: Palette) => void;
+    onThemeReady: () => void;
   }>
-> = ({ onThemeChanged, children }) => {
-  const [theme, setTheme] = useState(createTheme(null));
-  useEffect(
-    () =>
-      onThemeChanged(
-        theme.palette.background.default,
-        theme.palette.getContrastText(theme.palette.background.default)
-      ),
-    [theme, onThemeChanged]
-  );
+> = ({ onThemeChanged, onThemeReady, children }) => {
+  const [theme, setTheme] = useState(createTheme());
+  const [palette, setPalette] = useState<Palette | null>(null);
 
   useChannel(
     'theme-updated',
     (themeData) => {
       const appTheme = createTheme(themeData);
       setTheme(appTheme);
-      loadFont(themeData).catch((reason) =>
-        logger.warn('Failed to load fonts', reason)
-      );
+      setPalette(getThemePalette(themeData).palette);
+
+      loadFont(themeData)
+        .then(onThemeReady)
+        .catch((reason) => {
+          onThemeReady();
+          logger.warn('Failed to load fonts', reason);
+        });
     },
     [setTheme]
   );
 
+  useEffect(() => {
+    if (palette) {
+      onThemeChanged(palette);
+    }
+  }, [theme, onThemeChanged]);
+
   return (
     <CssBaseline>
       <ThemeProvider theme={theme}>{children}</ThemeProvider>

diff --git a/packages/renderer/main/theme/index.ts b/packages/renderer/main/theme/index.ts
@@ -9,34 +9,41 @@ import {
 } from '@lyricistant/common/preferences/PreferencesData';
 import { Palette } from '@lyricistant/common/theme/SystemTheme';
 
-export const getThemePalette = (useDarkTheme: boolean): Palette =>
-  useDarkTheme ? darkThemePalette : lightThemePalette;
+export const getThemePalette = (
+  themeData?: ThemeData
+): { palette: Palette; isDark: boolean } => {
+  const useDarkTheme = !themeData || themeData.colorScheme === ColorScheme.Dark;
 
-export const createTheme = (themeData?: ThemeData): Theme => {
-  const useDarkTheme = themeData?.colorScheme === ColorScheme.Dark ?? true;
-  const themePalette: Palette = {
-    ...getThemePalette(useDarkTheme),
-    ...themeData?.systemPalette,
+  return {
+    palette: {
+      ...(useDarkTheme ? darkThemePalette : lightThemePalette),
+      ...themeData?.systemPalette,
+    },
+    isDark: useDarkTheme,
   };
+};
+
+export const createTheme = (themeData?: ThemeData): Theme => {
+  const { palette, isDark } = getThemePalette(themeData);
 
   return responsiveFontSizes(
     createMuiTheme({
       palette: {
-        type: useDarkTheme ? 'dark' : 'light',
+        type: isDark ? 'dark' : 'light',
         action: {
-          hover: themePalette.primary,
+          hover: palette.primary,
           hoverOpacity: 0,
         },
         primary: {
-          main: themePalette.primary,
+          main: palette.primary,
         },
         background: {
-          default: themePalette.background,
-          paper: themePalette.surface,
+          default: palette.background,
+          paper: palette.surface,
         },
         text: {
-          primary: themePalette.primaryText,
-          secondary: themePalette.secondaryText,
+          primary: palette.primaryText,
+          secondary: palette.secondaryText,
         },
       },
       typography: themeData?.textSize
@@ -48,15 +55,15 @@ export const createTheme = (themeData?: ThemeData): Theme => {
   );
 };
 
-const lightThemePalette = {
+const lightThemePalette: Palette = {
   primary: '#0388d1',
   background: '#fafafa',
   surface: '#E0E0E0',
   primaryText: '#212121',
   secondaryText: '#424242',
 };
 
-const darkThemePalette = {
+const darkThemePalette: Palette = {
   primary: '#2ab6f6',
   background: '#141414',
   surface: '#232323',