unbreak formatting

.eslintrc.json

@@ -22,12 +22,22 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "import", "prettier", "react", "react-hooks", "simple-import-sort"],
+  "plugins": [
+    "@typescript-eslint",
+    "import",
+    "prettier",
+    "react",
+    "react-hooks",
+    "simple-import-sort"
+  ],
   "rules": {
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "no-use-before-define": "off",
     "@typescript-eslint/no-use-before-define": ["error"],
-    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
     "react/jsx-filename-extension": [
       "warn",
       {

ACKNOWLEDGMENTS.md

@@ -2,11 +2,11 @@
 
 This is a list of assets used by Lofi, including, but not limited to, fonts, graphics, images, and vector icons.
 
-
 - [ipc](https://github.com/jarikomppa/ipc) by [Jari Komppa](http://iki.fi/sol/)
 - [Inter-UI](https://rsms.me/inter/) font pack by [Rasmus Andersson](https://twitter.com/rsms)
 - [Font Awesome](https://fontawesome.com) vector icons
 - [Ｖａｐｏｒｗａｖｅ　ぎレブ](https://steamcommunity.com/sharedfiles/filedetails/?id=1551937777) by [mrchernobyl](https://steamcommunity.com/id/mrchernobyl)
 
 ## Removal
-If your license doesn't permit Lofi to use your asset, or you would like me to remove the asset from Lofi (for whatever reason), please submit an [issue](https://github.com/dvx/lofi/issues).
+
+If your license doesn't permit Lofi to use your asset, or you would like me to remove the asset from Lofi (for whatever reason), please submit an [issue](https://github.com/dvx/lofi/issues).

BUGS.md

@@ -1,3 +1,5 @@
 # Known bugs
+
 Bugs:
+
 - When Windows Desktop DPI size is not 100%, application window "touchable" area might not be the right size. Drag the window to fix this.

src/main/main.ts

@@ -227,7 +227,10 @@ const createMainWindow = (): void => {
 
   const windowOpenHandler = (
     details: HandlerDetails
-  ): { action: 'allow' | 'deny'; overrideBrowserWindowOptions?: BrowserWindowConstructorOptions } => {
+  ): {
+    action: 'allow' | 'deny';
+    overrideBrowserWindowOptions?: BrowserWindowConstructorOptions;
+  } => {
     switch (details.frameName) {
       case WindowName.About: {
         return {
@@ -300,7 +303,10 @@ const createMainWindow = (): void => {
         });
 
         childWindow.on('close', () => {
-          setAlwaysOnTop({ window: mainWindow, isAlwaysOnTop: settings.isAlwaysOnTop });
+          setAlwaysOnTop({
+            window: mainWindow,
+            isAlwaysOnTop: settings.isAlwaysOnTop,
+          });
         });
         break;
       }
@@ -317,7 +323,10 @@ const createMainWindow = (): void => {
       case WindowName.TrackInfo: {
         moveTrackInfo(mainWindow, screen);
         childWindow.setIgnoreMouseEvents(true);
-        setAlwaysOnTop({ window: childWindow, isAlwaysOnTop: settings.isAlwaysOnTop });
+        setAlwaysOnTop({
+          window: childWindow,
+          isAlwaysOnTop: settings.isAlwaysOnTop,
+        });
         if (MACOS) {
           childWindow.setWindowButtonVisibility(false);
         }
@@ -390,7 +399,10 @@ app.on('ready', () => {
       mainWindow.center();
     }
 
-    setAlwaysOnTop({ window: mainWindow, isAlwaysOnTop: settings.isAlwaysOnTop });
+    setAlwaysOnTop({
+      window: mainWindow,
+      isAlwaysOnTop: settings.isAlwaysOnTop,
+    });
 
     const bounds = mainWindow.getBounds();
     const currentDisplay = screen.getDisplayMatching(bounds);

src/renderer/app/cover/index.tsx

@@ -59,7 +59,7 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
     visualizationId,
     visualizationType,
     visualizerOpacity,
-    refreshTime
+    refreshTime,
   } = useMemo(() => settings, [settings]);
 
   const [currentSongId, setCurrentSongId] = useState('');
@@ -82,7 +82,10 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
         return;
       }
 
-      dispatch({ type: CurrentlyPlayingActions.SetCurrentlyPlaying, payload: currentlyPlaying });
+      dispatch({
+        type: CurrentlyPlayingActions.SetCurrentlyPlaying,
+        payload: currentlyPlaying,
+      });
       setErrorToDisplay('');
     } catch (error) {
       console.error(error);
@@ -97,7 +100,10 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
         if (state.isLiked !== isTrackLiked) {
           ipcRenderer.send(IpcMessage.TrackLiked, isTrackLiked);
         }
-        dispatch({ type: CurrentlyPlayingActions.SetTrackLiked, payload: isTrackLiked });
+        dispatch({
+          type: CurrentlyPlayingActions.SetTrackLiked,
+          payload: isTrackLiked,
+        });
         await handlePlaybackChanged();
       } catch (error) {
         console.error(error);

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

@@ -30,9 +30,17 @@ export const Visualizer: FunctionComponent<Props> = ({
 
   useEffect(() => {
     if (!visualizationId || visualizationId < 0 || visualizationId >= visualizations.length) {
-      visualizations[0].visualize({ canvas: canvasRef.current, peakFactor, timeFactor });
+      visualizations[0].visualize({
+        canvas: canvasRef.current,
+        peakFactor,
+        timeFactor,
+      });
     } else {
-      visualizations[visualizationId].visualize({ canvas: canvasRef.current, peakFactor, timeFactor });
+      visualizations[visualizationId].visualize({
+        canvas: canvasRef.current,
+        peakFactor,
+        timeFactor,
+      });
     }
     const canvasRefValue = canvasRef.current;
     return () => {

src/renderer/app/index.tsx

@@ -151,7 +151,13 @@ export const App: FunctionComponent = () => {
       let mouseX = 0;
       let mouseY = 0;
 
-      setDisplays(() => displayData.map(({ label, bounds: { height, width } }) => ({ label, height, width })));
+      setDisplays(() =>
+        displayData.map(({ label, bounds: { height, width } }) => ({
+          label,
+          height,
+          width,
+        }))
+      );
 
       const moveWindow = (): void => {
         ipcRenderer.send(IpcMessage.WindowMoving, { mouseX, mouseY });

src/renderer/contexts/currently-playing.context.tsx

@@ -12,7 +12,10 @@ interface CurrentlyPlayingContext {
   dispatch: Dispatch<CurrentlyPlayingAction>;
 }
 
-const Context = createContext<CurrentlyPlayingContext>({ state: null, dispatch: null });
+const Context = createContext<CurrentlyPlayingContext>({
+  state: null,
+  dispatch: null,
+});
 
 export const CurrentlyPlayingProvider: FunctionComponent = ({ children }) => {
   const [state, dispatch] = useReducer(useCurrentlyPlayingReducer, INITIAL_STATE);

src/renderer/contexts/settings.context.tsx

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

src/renderer/hooks/use-hover.ts

@@ -1,6 +1,9 @@
 import { useState } from 'react';
 
-export const useHover = (): { isHovering: boolean; props: { onMouseEnter: () => void; onMouseLeave: () => void } } => {
+export const useHover = (): {
+  isHovering: boolean;
+  props: { onMouseEnter: () => void; onMouseLeave: () => void };
+} => {
   const [isHovering, setIsHovering] = useState(false);
 
   const props = {

src/renderer/index.html

@@ -1,14 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>lofi</title>
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <title>lofi</title>
-</head>
-
-<body id="app-body">
-  <div id="app"
-    class="app"></div>
-</body>
-
-</html>
+  <body id="app-body">
+    <div id="app" class="app"></div>
+  </body>
+</html>

src/renderer/style.css

@@ -1,9 +1,9 @@
-@import url('./static/inter-ui/inter-ui.css');
-@import url('./static/fontawesome/css/all.min.css');
+@import url("./static/inter-ui/inter-ui.css");
+@import url("./static/fontawesome/css/all.min.css");
 
 html,
 body {
-  font-family: 'Inter UI', sans-serif;
+  font-family: "Inter UI", sans-serif;
   height: 100%;
   width: 100%;
   -webkit-app-region: none;
@@ -64,4 +64,4 @@ body {
   background-color: transparent;
   width: 100%;
   height: 100%;
-}
+}

src/renderer/windows/settings/advanced-settings.tsx

@@ -5,8 +5,6 @@ import { DEFAULT_SETTINGS, Settings } from '../../../models/settings';
 import { FieldSet, FormGroup, Label, Legend, RangeValue, Row, Slider, StyledCheckbox } from '../../components';
 import { INPUT_COLOR } from '../../components/mantine.styled';
 
-
-
 export const AdvancedSettings: FunctionComponent = () => {
   const { register, watch } = useFormContext<Settings>();
 
@@ -36,7 +34,10 @@ export const AdvancedSettings: FunctionComponent = () => {
               max={10000}
               step={500}
               defaultValue={DEFAULT_SETTINGS.refreshTime}
-              {...register('refreshTime', { required: true, valueAsNumber: true })}
+              {...register('refreshTime', {
+                required: true,
+                valueAsNumber: true,
+              })}
             />
             <RangeValue>{refreshTimeWatch}</RangeValue>
           </Label>

src/renderer/windows/settings/audio-settings.tsx

@@ -23,7 +23,10 @@ export const AudioSettings: FunctionComponent = () => {
               max={100}
               step={2}
               defaultValue={DEFAULT_SETTINGS.volumeIncrement}
-              {...register('volumeIncrement', { required: true, valueAsNumber: true })}
+              {...register('volumeIncrement', {
+                required: true,
+                valueAsNumber: true,
+              })}
             />
             <RangeValue>{volumeIncrementWatch}</RangeValue>
           </Label>
@@ -37,7 +40,10 @@ export const AudioSettings: FunctionComponent = () => {
               max={MAX_SKIP_SONG_DELAY}
               step={5}
               defaultValue={DEFAULT_SETTINGS.skipSongDelay}
-              {...register('skipSongDelay', { required: true, valueAsNumber: true })}
+              {...register('skipSongDelay', {
+                required: true,
+                valueAsNumber: true,
+              })}
             />
             <RangeValue>{skipSongDelayWatch}</RangeValue>
           </Label>

src/renderer/windows/settings/track-info-settings.tsx

@@ -31,7 +31,10 @@ export const TrackInfoSettings: FunctionComponent = () => {
               max={MAX_FONT_SIZE}
               step={1}
               defaultValue={DEFAULT_SETTINGS.trackInfoFontSize}
-              {...register('trackInfoFontSize', { required: true, valueAsNumber: true })}
+              {...register('trackInfoFontSize', {
+                required: true,
+                valueAsNumber: true,
+              })}
             />
             <RangeValue>{trackInfoFontSizeWatch}</RangeValue>
           </Label>
@@ -57,7 +60,10 @@ export const TrackInfoSettings: FunctionComponent = () => {
               max={100}
               step={1}
               defaultValue={DEFAULT_SETTINGS.trackInfoBackgroundOpacity}
-              {...register('trackInfoBackgroundOpacity', { required: true, valueAsNumber: true })}
+              {...register('trackInfoBackgroundOpacity', {
+                required: true,
+                valueAsNumber: true,
+              })}
             />
             <RangeValue>{trackInfoBackgroundOpacityWatch}</RangeValue>
           </Label>

src/renderer/windows/settings/visualization-settings.tsx

@@ -54,7 +54,10 @@ export const VisualizationSettings: FunctionComponent<Props> = ({
               max={100}
               step={5}
               defaultValue={DEFAULT_SETTINGS.visualizerOpacity}
-              {...register('visualizerOpacity', { required: true, valueAsNumber: true })}
+              {...register('visualizerOpacity', {
+                required: true,
+                valueAsNumber: true,
+              })}
             />
             <RangeValue>{opacityWatch}</RangeValue>
           </Label>

src/renderer/windows/settings/window-settings.tsx

@@ -62,7 +62,10 @@ export const WindowSettings: FunctionComponent = () => {
               max={MAX_BAR_THICKNESS}
               step={1}
               defaultValue={DEFAULT_SETTINGS.barThickness}
-              {...register('barThickness', { required: true, valueAsNumber: true })}
+              {...register('barThickness', {
+                required: true,
+                valueAsNumber: true,
+              })}
             />
             <RangeValue>{barThicknessWatch}</RangeValue>
           </Label>
@@ -82,7 +85,10 @@ export const WindowSettings: FunctionComponent = () => {
               max={MAX_CORNER_RADIUS}
               step={1}
               defaultValue={DEFAULT_SETTINGS.cornerRadius}
-              {...register('cornerRadius', { required: true, valueAsNumber: true })}
+              {...register('cornerRadius', {
+                required: true,
+                valueAsNumber: true,
+              })}
             />
             <RangeValue>{cornerRadiusWatch}</RangeValue>
           </Label>