feat: add rounded corners (#307)

* feat: add rounded corners * Update src/renderer/app/index.tsx Co-authored-by: Nicolas St-Amour <[email protected]> * fix: remove OS-specific rounded corner defaults --------- Co-authored-by: Nicolas St-Amour <[email protected]>
dvx · Jan 20, 2024 · 862a498 · 862a498
1 parent 78d2a9f
commit 862a498
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -12,6 +12,7 @@ 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 MAX_CORNER_RADIUS = 20;
 
 export const MIN_SKIP_SONG_DELAY = 5;
 export const MAX_SKIP_SONG_DELAY = 60;

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -107,7 +107,7 @@ const MAIN_WINDOW_OPTIONS: BrowserWindowConstructorOptions = {
     nodeIntegration: true,
     contextIsolation: false,
   },
-  backgroundColor: '#000000',
+  backgroundColor: 'rgba(0,0,0,0)',
   roundedCorners: false,
 };
 

diff --git a/src/models/settings.ts b/src/models/settings.ts
@@ -34,6 +34,7 @@ export interface Settings {
   trackInfoBackgroundColor: string;
   trackInfoBackgroundOpacity: number;
   showFreemiumWarning: boolean;
+  cornerRadius: number;
 }
 
 export const DEFAULT_SETTINGS: Settings = {
@@ -64,4 +65,5 @@ export const DEFAULT_SETTINGS: Settings = {
   trackInfoBackgroundColor: '#000000',
   trackInfoBackgroundOpacity: 50,
   showFreemiumWarning: true,
+  cornerRadius: 0,
 };
diff --git a/src/renderer/app/index.tsx b/src/renderer/app/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { Display, ipcRenderer } from 'electron';
-import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
+import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { IpcMessage, WindowName } from '../../constants';
@@ -79,6 +79,7 @@ export const App: FunctionComponent = () => {
   const { state, dispatch } = useSettings();
   const { state: currentlyPlaying, dispatch: currentlyPlayingDispatch } = useCurrentlyPlaying();
   const { accessToken, refreshToken, visualizationId, visualizationType } = state || DEFAULT_SETTINGS;
+  const { cornerRadius } = useMemo(() => state, [state]);
 
   const updateTokens = useCallback(
     async (data: AuthData) => {
@@ -274,7 +275,10 @@ export const App: FunctionComponent = () => {
   );
 
   return (
-    <VisibleUi id="visible-ui" className="click-on">
+    <VisibleUi
+      id="visible-ui"
+      className="click-on"
+      style={cornerRadius ? { borderRadius: `${cornerRadius}%`, overflow: 'hidden' } : {}}>
       {shouldShowSettings && (
         <WindowPortal onUnload={() => setShouldShowSettings(false)} name={WindowName.Settings}>
           <SettingsWindow

diff --git a/src/renderer/windows/settings/window-settings.tsx b/src/renderer/windows/settings/window-settings.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { MAX_BAR_THICKNESS } from '../../../constants';
+import { MAX_BAR_THICKNESS, MAX_CORNER_RADIUS } from '../../../constants';
 import { DEFAULT_SETTINGS, Settings } from '../../../models/settings';
 import {
   ColorInput,
@@ -20,6 +20,7 @@ export const WindowSettings: FunctionComponent = () => {
   const { register, watch } = useFormContext<Settings>();
 
   const barThicknessWatch = watch('barThickness');
+  const cornerRadiusWatch = watch('cornerRadius');
 
   return (
     <FormGroup>
@@ -72,6 +73,20 @@ export const WindowSettings: FunctionComponent = () => {
             <ColorInput {...register('barColor')} />
           </Label>
         </Row>
+        <Row>
+          <Label>
+            Border Radius
+            <Slider
+              type="range"
+              min={0}
+              max={MAX_CORNER_RADIUS}
+              step={1}
+              defaultValue={DEFAULT_SETTINGS.cornerRadius}
+              {...register('cornerRadius', { required: true, valueAsNumber: true })}
+            />
+            <RangeValue>{cornerRadiusWatch}</RangeValue>
+          </Label>
+        </Row>
       </FieldSet>
     </FormGroup>
   );