From 862a4985dcfe76497d3fb8fadfe7d2b04807199a Mon Sep 17 00:00:00 2001
From: Marco Arriaga <marriaga158@gmail.com>
Date: Sat, 20 Jan 2024 10:29:09 -0500
Subject: [PATCH] feat: add rounded corners (#307)

* feat: add rounded corners

* Update src/renderer/app/index.tsx

Co-authored-by: Nicolas St-Amour <stamoun@gmail.com>

* fix: remove OS-specific rounded corner defaults

---------

Co-authored-by: Nicolas St-Amour <stamoun@gmail.com>
---
 src/constants.ts                                |  1 +
 src/main/main.ts                                |  2 +-
 src/models/settings.ts                          |  2 ++
 src/renderer/app/index.tsx                      |  8 ++++++--
 .../windows/settings/window-settings.tsx        | 17 ++++++++++++++++-
 5 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index 83d1b45..1ccd12b 100644
--- 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
index 1378e28..b6ff89e 100644
--- 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
index 56a1858..2e3ee41 100644
--- 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
index 8bc151f..d2eb42c 100644
--- 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
index aac2fed..80b43ba 100644
--- 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>
   );