dvx · stamoun · Dec 19, 2023 · Dec 19, 2023
diff --git a/src/main/main.utils.ts b/src/main/main.utils.ts
@@ -29,10 +29,10 @@ export const getCommonWindowOptions = (): BrowserWindowConstructorOptions => ({
 
 export const getSettingsWindowOptions = (): BrowserWindowConstructorOptions => ({
   ...getCommonWindowOptions(),
-  height: 560,
-  minHeight: 560,
-  width: 540,
-  minWidth: 540,
+  height: 420,
+  minHeight: 420,
+  width: 420,
+  minWidth: 420,
   title: WindowTitle.Settings,
 });
 

diff --git a/src/models/settings.ts b/src/models/settings.ts
@@ -33,6 +33,7 @@ export interface Settings {
   trackInfoColor: string;
   trackInfoBackgroundColor: string;
   trackInfoBackgroundOpacity: number;
+  showFreemiumWarning: boolean;
 }
 
 export const DEFAULT_SETTINGS: Settings = {
@@ -62,4 +63,5 @@ export const DEFAULT_SETTINGS: Settings = {
   trackInfoColor: '#FFFFFF',
   trackInfoBackgroundColor: '#000000',
   trackInfoBackgroundOpacity: 50,
+  showFreemiumWarning: true,
 };
diff --git a/src/renderer/app/index.tsx b/src/renderer/app/index.tsx
@@ -77,7 +77,7 @@ export const App: FunctionComponent = () => {
   const [displays, setDisplays] = useState<DisplayData[]>([]);
 
   const { state, dispatch } = useSettings();
-  const { dispatch: currentlyPlayingDispatch } = useCurrentlyPlaying();
+  const { state: currentlyPlaying, dispatch: currentlyPlayingDispatch } = useCurrentlyPlaying();
   const { accessToken, refreshToken, visualizationId, visualizationType } = state || DEFAULT_SETTINGS;
 
   const updateTokens = useCallback(
@@ -91,12 +91,6 @@ export const App: FunctionComponent = () => {
       try {
         const userProfile = await SpotifyApiInstance.updateTokens(data);
         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,
@@ -113,6 +107,16 @@ export const App: FunctionComponent = () => {
     [currentlyPlayingDispatch, dispatch]
   );
 
+  useEffect(() => {
+    if (currentlyPlaying.userProfile?.accountType !== AccountType.Premium && state.showFreemiumWarning) {
+      const playbackDisabledMessage = 'Account is not premium, playback controls disabled.';
+      console.warn(playbackDisabledMessage);
+      setMessage(playbackDisabledMessage);
+    } else {
+      setMessage('');
+    }
+  }, [currentlyPlaying.userProfile?.accountType, state.showFreemiumWarning]);
+
   useEffect(() => {
     setTokenRetrievedCallback(updateTokens);
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/renderer/components/form.styled.ts b/src/renderer/components/form.styled.ts
@@ -6,18 +6,15 @@ const INPUT_COLOR_HEX = '#be4bdb';
 export const FormGroup = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0.5rem 0;
+  padding: 0.5rem 0 0;
+  height: 100%;
 `;
 
 export const FieldSet = styled.fieldset`
-  border-color: #717171;
-  border-width: 2px;
+  border: none;
   padding: 0.25rem;
   margin-bottom: 0.25rem;
-`;
-
-export const NoBorderFieldSet = styled(FieldSet)`
-  border: none;
+  height: 100%;
 `;
 
 export const Legend = styled.legend`

diff --git a/src/renderer/components/index.tsx b/src/renderer/components/index.tsx
@@ -7,7 +7,6 @@ import {
   Input,
   Label,
   Legend,
-  NoBorderFieldSet,
   RangeValue,
   Row,
   Select,
@@ -29,7 +28,6 @@ export {
   Label,
   Legend,
   LoginButton,
-  NoBorderFieldSet,
   RangeValue,
   Row,
   Select,

diff --git a/src/renderer/components/mantine.styled.ts b/src/renderer/components/mantine.styled.ts
@@ -17,16 +17,16 @@ export const StyledTextInput = styled(TextInput)`
 `;
 
 export const StyledTabs = styled(Tabs)`
-  & .mantine-Tabs-root {
+  & .mantine-tabs-root {
     width: 100%;
   }
 
-  & .mantine-Tabs-tabsList {
+  & .mantine-tabs-tabsList {
     gap: 0;
   }
 
-  & .mantine-Tabs-tab {
-    min-width: 130px;
+  & .mantine-tabs-tab {
+    min-width: 80px;
     margin: 0;
     color: white;
 
@@ -39,15 +39,15 @@ export const StyledTabs = styled(Tabs)`
     }
   }
 
-  & .mantine-Tabs-tabLabel {
+  & .mantine-tabs-tabLabel {
     color: white;
   }
 
-  & .mantine-Tabs-tabIcon {
+  & .mantine-tabs-tabIcon {
     color: white;
   }
 
-  & .mantine-Tabs-panel {
+  & .mantine-tabs-panel {
     color: white;
     padding: 0 0.25rem;
     background-color: #444444;

diff --git a/src/renderer/windows/settings/advanced-settings.tsx b/src/renderer/windows/settings/advanced-settings.tsx
@@ -2,14 +2,15 @@ import React, { FunctionComponent } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { Settings } from '../../../models/settings';
-import { FormGroup, NoBorderFieldSet, Row, StyledCheckbox } from '../../components';
+import { FieldSet, FormGroup, Legend, Row, StyledCheckbox } from '../../components';
 import { INPUT_COLOR } from '../../components/mantine.styled';
 
 export const AdvancedSettings: FunctionComponent = () => {
   const { register } = useFormContext<Settings>();
   return (
-    <NoBorderFieldSet>
-      <FormGroup>
+    <FormGroup>
+      <FieldSet>
+        <Legend>Advanced</Legend>
         <Row>
           <StyledCheckbox
             color={INPUT_COLOR}
@@ -21,7 +22,7 @@ export const AdvancedSettings: FunctionComponent = () => {
         <Row>
           <StyledCheckbox color={INPUT_COLOR} label="Enable dev tools" size="xs" {...register('isDebug')} />
         </Row>
-      </FormGroup>
-    </NoBorderFieldSet>
+      </FieldSet>
+    </FormGroup>
   );
 };
diff --git a/src/renderer/windows/settings/audio-settings.tsx b/src/renderer/windows/settings/audio-settings.tsx
@@ -3,16 +3,17 @@ import { useFormContext } from 'react-hook-form';
 
 import { MAX_SKIP_SONG_DELAY, MIN_SKIP_SONG_DELAY } from '../../../constants';
 import { DEFAULT_SETTINGS, Settings } from '../../../models/settings';
-import { FormGroup, Label, NoBorderFieldSet, RangeValue, Row, Slider } from '../../components';
+import { FieldSet, FormGroup, Label, Legend, RangeValue, Row, Slider } from '../../components';
 
 export const AudioSettings: FunctionComponent = () => {
   const { register, watch } = useFormContext<Settings>();
   const volumeIncrementWatch = watch('volumeIncrement');
   const skipSongDelayWatch = watch('skipSongDelay');
 
   return (
-    <NoBorderFieldSet>
-      <FormGroup>
+    <FormGroup>
+      <FieldSet>
+        <Legend>Audio</Legend>
         <Row>
           <Label>
             Volume increment
@@ -41,7 +42,7 @@ export const AudioSettings: FunctionComponent = () => {
             <RangeValue>{skipSongDelayWatch}</RangeValue>
           </Label>
         </Row>
-      </FormGroup>
-    </NoBorderFieldSet>
+      </FieldSet>
+    </FormGroup>
   );
 };
diff --git a/src/renderer/windows/settings/index.tsx b/src/renderer/windows/settings/index.tsx
@@ -10,12 +10,14 @@ import { WindowHeader } from '../window-header';
 import { AccountSettings } from './account-settings';
 import { AdvancedSettings } from './advanced-settings';
 import { AudioSettings } from './audio-settings';
+import { TrackInfoSettings } from './track-info-settings';
 import { VisualizationSettings } from './visualization-settings';
 import { WindowSettings } from './window-settings';
 
 enum Tab {
   Advanced = 'Advanced',
   Audio = 'Audio',
+  TrackInfo = 'Track Info',
   Visualization = 'Visualization',
   Window = 'Window',
 }
@@ -101,24 +103,21 @@ export const SettingsWindow: FunctionComponent<Props> = ({ initialValues, displa
           <TabsWrapper>
             <StyledTabs defaultValue={Tab.Window} color="gray" variant="default" radius="md">
               <Tabs.List>
-                <Tabs.Tab value={Tab.Window} icon={<i className="fa-solid fa-window-maximize" />}>
-                  {Tab.Window}
-                </Tabs.Tab>
-                <Tabs.Tab value={Tab.Visualization} icon={<i className="fa-solid fa-chart-simple" />}>
-                  {Tab.Visualization}
-                </Tabs.Tab>
-                <Tabs.Tab value={Tab.Audio} icon={<i className="fa-solid fa-headphones" />}>
-                  {Tab.Audio}
-                </Tabs.Tab>
-                <Tabs.Tab value={Tab.Advanced} icon={<i className="fa-solid fa-gears" />}>
-                  {Tab.Advanced}
-                </Tabs.Tab>
+                <Tabs.Tab value={Tab.Window} icon={<i className="fa-solid fa-window-maximize" />} />
+                <Tabs.Tab value={Tab.TrackInfo} icon={<i className="fa-solid fa-circle-info" />} />
+                <Tabs.Tab value={Tab.Visualization} icon={<i className="fa-solid fa-chart-simple" />} />
+                <Tabs.Tab value={Tab.Audio} icon={<i className="fa-solid fa-headphones" />} />
+                <Tabs.Tab value={Tab.Advanced} icon={<i className="fa-solid fa-gears" />} />
               </Tabs.List>
 
               <Tabs.Panel value={Tab.Window}>
                 <WindowSettings />
               </Tabs.Panel>
 
+              <Tabs.Panel value={Tab.TrackInfo}>
+                <TrackInfoSettings />
+              </Tabs.Panel>
+
               <Tabs.Panel value={Tab.Visualization}>
                 <VisualizationSettings
                   displays={displays}

diff --git a/src/renderer/windows/settings/track-info-settings.tsx b/src/renderer/windows/settings/track-info-settings.tsx
@@ -0,0 +1,76 @@
+import React, { FunctionComponent } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { MAX_FONT_SIZE, MIN_FONT_SIZE } from '../../../constants';
+import { DEFAULT_SETTINGS, Settings } from '../../../models/settings';
+import { ColorInput, FieldSet, FormGroup, Label, Legend, RangeValue, Row, Slider } from '../../components';
+import { INPUT_COLOR, StyledCheckbox, StyledTextInput } from '../../components/mantine.styled';
+
+export const TrackInfoSettings: FunctionComponent = () => {
+  const { register, watch } = useFormContext<Settings>();
+
+  const trackInfoFontSizeWatch = watch('trackInfoFontSize');
+  const trackInfoBackgroundOpacityWatch = watch('trackInfoBackgroundOpacity');
+
+  return (
+    <FormGroup>
+      <FieldSet>
+        <Legend>Track Info</Legend>
+        <Row>
+          <Label>
+            Font family
+            <StyledTextInput size="xs" {...register('font')} />
+          </Label>
+        </Row>
+        <Row>
+          <Label>
+            Font size
+            <Slider
+              type="range"
+              min={MIN_FONT_SIZE}
+              max={MAX_FONT_SIZE}
+              step={1}
+              defaultValue={DEFAULT_SETTINGS.trackInfoFontSize}
+              {...register('trackInfoFontSize', { required: true, valueAsNumber: true })}
+            />
+            <RangeValue>{trackInfoFontSizeWatch}</RangeValue>
+          </Label>
+        </Row>
+        <Row>
+          <Label>
+            Font color
+            <ColorInput {...register('trackInfoColor')} />
+          </Label>
+        </Row>
+        <Row>
+          <Label>
+            Background color
+            <ColorInput {...register('trackInfoBackgroundColor')} />
+          </Label>
+        </Row>
+        <Row>
+          <Label>
+            Background opacity
+            <Slider
+              type="range"
+              min={0}
+              max={100}
+              step={1}
+              defaultValue={DEFAULT_SETTINGS.trackInfoBackgroundOpacity}
+              {...register('trackInfoBackgroundOpacity', { required: true, valueAsNumber: true })}
+            />
+            <RangeValue>{trackInfoBackgroundOpacityWatch}</RangeValue>
+          </Label>
+        </Row>
+        <Row>
+          <StyledCheckbox
+            color={INPUT_COLOR}
+            label="Display free account warning"
+            size="xs"
+            {...register('showFreemiumWarning')}
+          />
+        </Row>
+      </FieldSet>
+    </FormGroup>
+  );
+};
diff --git a/src/renderer/windows/settings/visualization-settings.tsx b/src/renderer/windows/settings/visualization-settings.tsx
@@ -3,7 +3,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { DEFAULT_SETTINGS, Settings } from '../../../models/settings';
 import { visualizations } from '../../../visualizations';
-import { FormGroup, Label, NoBorderFieldSet, RangeValue, Row, Select, Slider } from '../../components';
+import { FieldSet, FormGroup, Label, Legend, RangeValue, Row, Select, Slider } from '../../components';
 import { DisplayData } from '../../models';
 
 interface Props {
@@ -20,8 +20,9 @@ export const VisualizationSettings: FunctionComponent<Props> = ({
   const { register, watch } = useFormContext<Settings>();
   const opacityWatch = watch('visualizerOpacity');
   return (
-    <NoBorderFieldSet>
-      <FormGroup>
+    <FormGroup>
+      <FieldSet>
+        <Legend>Visualization</Legend>
         <Row>
           Display on
           <Select
@@ -58,7 +59,7 @@ export const VisualizationSettings: FunctionComponent<Props> = ({
             <RangeValue>{opacityWatch}</RangeValue>
           </Label>
         </Row>
-      </FormGroup>
-    </NoBorderFieldSet>
+      </FieldSet>
+    </FormGroup>
   );
 };