Adjustable Refresh Rate

src/models/settings.ts

@@ -35,6 +35,7 @@ export interface Settings {
   trackInfoBackgroundOpacity: number;
   showFreemiumWarning: boolean;
   cornerRadius: number;
+  trackInfoRefreshTimeInSeconds: number;
 }
 
 export const DEFAULT_SETTINGS: Settings = {
@@ -66,4 +67,5 @@ export const DEFAULT_SETTINGS: Settings = {
   trackInfoBackgroundOpacity: 50,
   showFreemiumWarning: true,
   cornerRadius: 0,
+  trackInfoRefreshTimeInSeconds: 1,
 };

src/renderer/app/cover/index.tsx

@@ -17,8 +17,8 @@ import Menu from './menu';
 import { Visualizer } from './visualizer';
 import { Waiting } from './waiting';
 
-const ONE_SECOND = 1000;
-const ONE_MINUTE = ONE_SECOND * 60;
+const ONE_SECOND_IN_MS = 1000;
+const ONE_MINUTE = ONE_SECOND_IN_MS * 60;
 
 const TRUNCATE_REGEX = /(.*?)\s[-(•].*/g;
 const truncateText = (text: string): string => text?.replace(TRUNCATE_REGEX, '$1');
@@ -59,6 +59,7 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
     visualizationId,
     visualizationType,
     visualizerOpacity,
+    trackInfoRefreshTimeInSeconds,
   } = useMemo(() => settings, [settings]);
 
   const [currentSongId, setCurrentSongId] = useState('');
@@ -178,23 +179,23 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
   }, [onMouseWheel]);
 
   useEffect(() => {
-    const listeningToIntervalId = setInterval(handlePlaybackChanged, ONE_SECOND);
+    const listeningToIntervalId = setInterval(handlePlaybackChanged, trackInfoRefreshTimeInSeconds * ONE_SECOND_IN_MS);
 
     return () => {
       if (listeningToIntervalId) {
         clearInterval(listeningToIntervalId);
       }
     };
-  }, [handlePlaybackChanged]);
+  }, [handlePlaybackChanged, trackInfoRefreshTimeInSeconds]);
 
   useEffect(() => {
-    const refreshTrackLikedIntervalId = setInterval(refreshTrackLiked, 2 * ONE_SECOND);
+    const refreshTrackLikedIntervalId = setInterval(refreshTrackLiked, 2 * trackInfoRefreshTimeInSeconds * ONE_SECOND_IN_MS);
     return () => {
       if (refreshTrackLikedIntervalId) {
         clearInterval(refreshTrackLikedIntervalId);
       }
     };
-  }, [refreshTrackLiked]);
+  }, [refreshTrackLiked, trackInfoRefreshTimeInSeconds]);
 
   useEffect(() => {
     const keepAliveIntervalId = setInterval(keepAlive, ONE_MINUTE);

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

@@ -1,12 +1,15 @@
 import React, { FunctionComponent } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { Settings } from '../../../models/settings';
-import { FieldSet, FormGroup, Legend, Row, StyledCheckbox } from '../../components';
+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 } = useFormContext<Settings>();
+  const { register, watch } = useFormContext<Settings>();
+
+  const refreshTimeWatch = watch('trackInfoRefreshTimeInSeconds');
+
   return (
     <FormGroup>
       <FieldSet>
@@ -22,6 +25,20 @@ export const AdvancedSettings: FunctionComponent = () => {
         <Row>
           <StyledCheckbox color={INPUT_COLOR} label="Enable dev tools" size="xs" {...register('isDebug')} />
         </Row>
+        <Row>
+          <Label>
+            Currently Listening Refresh Time (Seconds)
+            <Slider
+              type="range"
+              min={1}
+              max={10}
+              step={1}
+              defaultValue={DEFAULT_SETTINGS.trackInfoRefreshTimeInSeconds}
+              {...register('trackInfoRefreshTimeInSeconds', { required: true, valueAsNumber: true })}
+            />
+            <RangeValue>{refreshTimeWatch}</RangeValue>
+          </Label>
+        </Row>
       </FieldSet>
     </FormGroup>
   );