Added support for changing the song timer bar color

src/components/SongInfo.js

@@ -42,9 +42,12 @@ function formatDiff(diff) {
 }
 
 export default function SongInfo() {
-	const [showSongInfo, shouldReplacePlayerInfoWithScore] = useSettingsStore(
+	const [showSongInfo, shouldReplacePlayerInfoWithScore, songTimeHex] =
-		(store) => [store.showSongInfo, store.shouldReplacePlayerInfoWithScore]
+		useSettingsStore((store) => [
-	);
+			store.showSongInfo,
+			store.shouldReplacePlayerInfoWithScore,
+			store.songTimeHex,
+		]);
 	const [
 		isLoading,
 		bsr,
@@ -117,7 +120,10 @@ export default function SongInfo() {
 					<div className={styles.songTimeBackground} />
 					<div
 						className={styles.songTime}
-						style={{ width: songTimerPercentage + "%" }}
+						style={{
+							width: songTimerPercentage + "%",
+							backgroundColor: "#" + songTimeHex,
+						}}
 					/>
 				</div>
 			</div>

src/store/overlaySettingsStore.ts

@@ -11,6 +11,7 @@ interface SettingsState {
 	showSongInfo: boolean;
 	showCutStats: boolean;
 	shouldReplacePlayerInfoWithScore: boolean;
+	songTimeHex: string;
 	setMounted: (isMounted: boolean) => void;
 	setOverlaySettings: (params: string) => void;
 }
@@ -25,6 +26,7 @@ export const useSettingsStore = create<SettingsState>()((set) => ({
 	showSongInfo: false,
 	showCutStats: false,
 	shouldReplacePlayerInfoWithScore: false,
+	songTimeHex: "FF0000",
 
 	setMounted: (isMounted: boolean) => set(() => ({ mounted: isMounted })),
 	setOverlaySettings: (params: any) =>

src/styles/songInfo.module.css

@@ -68,7 +68,6 @@
 	grid-row: 1;
 	z-index: 2;
 	padding: 3px;
-	background-color: red !important;
 }
 
 .songTimeText {