Allow users to select the default font + trackinfo font size, color a…

…nd background #240 (#269)

package.json

@@ -82,6 +82,10 @@
     "webpack-permissions-plugin": "^1.0.9"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mantine/core": "^6.0.10",
+    "@mantine/hooks": "^6.0.10",
     "bindings": "^1.3.1",
     "dayjs": "^1.11.7",
     "electron-store": "^8.1.0",

src/constants.ts

@@ -9,6 +9,8 @@ export const MACOS = platform() === 'darwin';
 export const MIN_SIDE_LENGTH = 115;
 export const MAX_SIDE_LENGTH = 1440;
 export const MAX_BAR_THICKNESS = 20;
+export const MIN_FONT_SIZE = 6;
+export const MAX_FONT_SIZE = 32;
 export const TRACK_INFO_GAP = { X: 10, Y: 10 };
 
 export const MIN_SKIP_SONG_DELAY = 5;

src/main/auth.ts

@@ -161,7 +161,7 @@ const handleServerResponse = async (request: http.IncomingMessage, response: htt
     }
 
     if (queryState !== codeState) {
-      console.error('Invalid state');
+      console.error('Invalid state', JSON.stringify(urlObj));
       response.end('Lofi authorization error: invalid state, you may close this window and retry.');
       return;
     }

src/main/main.utils.ts

@@ -21,16 +21,18 @@ export const getCommonWindowOptions = (): BrowserWindowConstructorOptions => ({
   roundedCorners: false,
   minimizable: false,
   maximizable: false,
-  resizable: false,
+  resizable: true,
   alwaysOnTop: true,
   fullscreenable: false,
   center: true,
 });
 
 export const getSettingsWindowOptions = (): BrowserWindowConstructorOptions => ({
   ...getCommonWindowOptions(),
-  height: 640,
-  width: 440,
+  height: 560,
+  minHeight: 560,
+  width: 540,
+  minWidth: 540,
   title: WindowTitle.Settings,
 });
 

src/models/settings.ts

@@ -28,6 +28,11 @@ export interface Settings {
   size: number;
   volumeIncrement: number;
   skipSongDelay: number;
+  font: string;
+  trackInfoFontSize: number;
+  trackInfoColor: string;
+  trackInfoBackgroundColor: string;
+  trackInfoBackgroundOpacity: number;
 }
 
 export const DEFAULT_SETTINGS: Settings = {
@@ -49,7 +54,12 @@ export const DEFAULT_SETTINGS: Settings = {
   isAlwaysShowTrackInfo: false,
   isAlwaysShowSongProgress: false,
   barThickness: 2,
-  barColor: '#74c999',
+  barColor: '#74C999',
   volumeIncrement: 5,
   skipSongDelay: 15,
+  font: 'Inter UI',
+  trackInfoFontSize: 14,
+  trackInfoColor: '#FFFFFF',
+  trackInfoBackgroundColor: '#000000',
+  trackInfoBackgroundOpacity: 50,
 };

src/renderer/app/cover/index.tsx

@@ -7,7 +7,7 @@ import styled, { css } from 'styled-components';
 import { WindowName } from '../../../constants';
 import { Settings, VisualizationType } from '../../../models/settings';
 import { AccountType, SpotifyApiInstance } from '../../api/spotify-api';
-import { WindowPortal } from '../../components/window-portal';
+import { WindowPortal } from '../../components';
 import { useCurrentlyPlaying } from '../../contexts/currently-playing.context';
 import { CurrentlyPlayingActions, CurrentlyPlayingType } from '../../reducers/currently-playing.reducer';
 import { TrackInfo } from '../../windows/track-info';

src/renderer/app/cover/menu/index.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { IpcMessage, WINDOWS } from '../../../../constants';
 import { VisualizationType } from '../../../../models/settings';
-import { CloseButton } from '../../../components/buttons/close-button';
+import { CloseButton } from '../../../components';
 
 const MenuList = styled.ul`
   display: flex;

src/renderer/app/index.tsx

@@ -8,7 +8,7 @@ import { AuthData, refreshAccessToken, setTokenRetrievedCallback } from '../../m
 import { DEFAULT_SETTINGS, Settings, VisualizationType } from '../../models/settings';
 import { visualizations } from '../../visualizations';
 import { AccountType, SpotifyApiInstance } from '../api/spotify-api';
-import { WindowPortal } from '../components/window-portal';
+import { WindowPortal } from '../components';
 import { useCurrentlyPlaying } from '../contexts/currently-playing.context';
 import { useSettings } from '../contexts/settings.context';
 import { DisplayData } from '../models';
@@ -90,18 +90,22 @@ export const App: FunctionComponent = () => {
 
       try {
         const userProfile = await SpotifyApiInstance.updateTokens(data);
-        if (userProfile?.accountType !== AccountType.Premium) {
-          const playbackDisabledMessage = 'Account is not premium, playback controls disabled.';
-          console.warn(playbackDisabledMessage);
-          setMessage(playbackDisabledMessage);
+        if (userProfile) {
+          if (userProfile?.accountType !== AccountType.Premium) {
+            const playbackDisabledMessage = 'Account is not premium, playback controls disabled.';
+            console.warn(playbackDisabledMessage);
+            setMessage(playbackDisabledMessage);
+          }
+
+          currentlyPlayingDispatch({
+            type: CurrentlyPlayingActions.SetUserProfile,
+            payload: userProfile,
+          });
+
+          console.log(`User '${userProfile.name}' successfully authenticated.`);
+        } else {
+          console.error('User not authenticated.');
         }
-
-        currentlyPlayingDispatch({
-          type: CurrentlyPlayingActions.SetUserProfile,
-          payload: userProfile,
-        });
-
-        console.log(`User '${userProfile.name}' successfully authenticated.`);
       } catch (error) {
         console.error(error);
       }

src/renderer/app/welcome/index.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 
 import { VisualizationType } from '../../../models/settings';
-import { LoginButton } from '../../components/login-button';
+import { LoginButton } from '../../components';
 import wavesImage from '../../static/waves.gif';
 import Menu from '../cover/menu';
 

src/renderer/components/styled/form.styled.ts → src/renderer/components/form.styled.ts

@@ -1,13 +1,23 @@
 import styled, { css } from 'styled-components';
 
+const SLIDER_HEIGHT = '10px';
+const INPUT_COLOR_HEX = '#be4bdb';
+
 export const FormGroup = styled.div`
   display: flex;
   flex-direction: column;
+  padding: 0.5rem 0;
 `;
 
 export const FieldSet = styled.fieldset`
   border-color: #717171;
   border-width: 2px;
+  padding: 0.25rem;
+  margin-bottom: 0.25rem;
+`;
+
+export const NoBorderFieldSet = styled(FieldSet)`
+  border: none;
 `;
 
 export const Legend = styled.legend`
@@ -16,11 +26,12 @@ export const Legend = styled.legend`
   font-weight: 300;
   font-variant: all-petite-caps;
   text-shadow: #00000085 0 0 0.25rem;
+  margin-bottom: 0.25rem;
 `;
 
 export const Row = styled.div`
   display: flex;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
 `;
 
 export const BaseSettingsInputStyle = css`
@@ -46,18 +57,43 @@ export const ColorInput = styled(Input).attrs({
   margin-left: 0.25rem;
 `;
 
-export const RangeInput = styled(Input).attrs({
-  type: 'range',
-})`
-  margin-left: 0.25rem;
-  width: 100%;
-`;
-
 export const RangeValue = styled.div`
   width: 1rem;
+  margin-left: 0.25rem;
 `;
 
 export const Select = styled.select`
   ${BaseSettingsInputStyle}
   margin-left: 0.25rem;
 `;
+
+export const Slider = styled(Input).attrs({
+  type: 'range',
+})`
+  margin-left: 0.25rem;
+  width: 100%;
+  background: rgb(218, 119, 242);
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  outline: none;
+  overflow: hidden;
+  border-radius: ${SLIDER_HEIGHT};
+
+  &::-webkit-slider-runnable-track {
+    height: ${SLIDER_HEIGHT};
+    background: #ccc;
+    border-radius: ${SLIDER_HEIGHT};
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: ${SLIDER_HEIGHT};
+    width: ${SLIDER_HEIGHT};
+    background-color: #fff;
+    border-radius: 50%;
+    border: 1px solid ${INPUT_COLOR_HEX};
+    box-shadow: -407px 0 0 400px ${INPUT_COLOR_HEX};
+  }
+`;

src/renderer/components/index.tsx

@@ -0,0 +1,42 @@
+import { CloseButton } from './close-button';
+import {
+  BaseSettingsInputStyle,
+  ColorInput,
+  FieldSet,
+  FormGroup,
+  Input,
+  Label,
+  Legend,
+  NoBorderFieldSet,
+  RangeValue,
+  Row,
+  Select,
+  Slider,
+} from './form.styled';
+import { LoginButton } from './login-button';
+import { StyledCheckbox, StyledTabs } from './mantine.styled';
+import { TitleBar } from './title-bar';
+import { StyledWindow } from './window.styled';
+import { WindowPortal } from './window-portal';
+
+export {
+  BaseSettingsInputStyle,
+  CloseButton,
+  ColorInput,
+  FieldSet,
+  FormGroup,
+  Input,
+  Label,
+  Legend,
+  LoginButton,
+  NoBorderFieldSet,
+  RangeValue,
+  Row,
+  Select,
+  Slider,
+  StyledCheckbox,
+  StyledTabs,
+  StyledWindow,
+  TitleBar,
+  WindowPortal,
+};

src/renderer/components/login-button/index.tsx → src/renderer/components/login-button.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { getAuthUrl, startAuthServer } from '../../../main/auth';
+import { getAuthUrl, startAuthServer } from '../../main/auth';
 
 const Link = styled.a`
   margin: auto;

src/renderer/components/mantine.styled.ts

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import { Checkbox, Select, Tabs, TextInput } from '@mantine/core';
+
+export const INPUT_COLOR = 'grape.6';
+
+export const StyledCheckbox = styled(Checkbox)`
+  .mantine-Checkbox-label {
+    color: white;
+    padding-left: 0.25rem;
+  }
+`;
+
+export const StyledSelect = styled(Select)``;
+
+export const StyledTextInput = styled(TextInput)`
+  padding-left: 0.25rem;
+`;
+
+export const StyledTabs = styled(Tabs)`
+  & .mantine-Tabs-root {
+    width: 100%;
+  }
+
+  & .mantine-Tabs-tabsList {
+    gap: 0;
+  }
+
+  & .mantine-Tabs-tab {
+    min-width: 130px;
+    margin: 0;
+    color: white;
+
+    &[data-active] {
+      background-color: #444444;
+    }
+
+    &:hover {
+      background-color: #646464;
+    }
+  }
+
+  & .mantine-Tabs-tabLabel {
+    color: white;
+  }
+
+  & .mantine-Tabs-tabIcon {
+    color: white;
+  }
+
+  & .mantine-Tabs-panel {
+    color: white;
+    padding: 0 0.25rem;
+    background-color: #444444;
+    height: calc(100% - 36px);
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+`;

src/renderer/components/title-bar/index.tsx → src/renderer/components/title-bar.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 
-import { CloseButton } from '../buttons/close-button';
+import { CloseButton } from './close-button';
 
 const TitleBarWrapper = styled.div`
   width: 100%;

src/renderer/contexts/settings.context.tsx

@@ -24,7 +24,7 @@ export const SettingsProvider: FunctionComponent = ({ children }) => {
       }),
     []
   );
-  const [state, dispatch] = useReducer(useSettingsReducer, store.get('settings'));
+  const [state, dispatch] = useReducer(useSettingsReducer, { ...DEFAULT_SETTINGS, ...store.get('settings') });
 
   useEffect(() => {
     store.set('settings', state || DEFAULT_SETTINGS);

src/renderer/renderer.tsx

@@ -1,5 +1,6 @@
 import './style.css';
 
+import { MantineProvider } from '@mantine/core';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
@@ -10,7 +11,9 @@ import { SettingsProvider } from './contexts/settings.context';
 ReactDOM.render(
   <SettingsProvider>
     <CurrentlyPlayingProvider>
-      <App />
+      <MantineProvider withNormalizeCSS>
+        <App />
+      </MantineProvider>
     </CurrentlyPlayingProvider>
   </SettingsProvider>,
   document.getElementById('app')

src/renderer/static/fontawesome/LICENSE.txt

@@ -23,7 +23,7 @@ as SVG and JS file types.
 In the Font Awesome Free download, the SIL OFL license applies to all icons
 packaged as web and desktop font files.
 
-Copyright (c) 2022 Fonticons, Inc. (https://fontawesome.com)
+Copyright (c) 2023 Fonticons, Inc. (https://fontawesome.com)
 with Reserved Font Name: "Font Awesome".
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
@@ -123,7 +123,7 @@ OTHER DEALINGS IN THE FONT SOFTWARE.
 In the Font Awesome Free download, the MIT license applies to all non-font and
 non-icon files.
 
-Copyright 2022 Fonticons, Inc.
+Copyright 2023 Fonticons, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in the