Move isSng control to settings page

src-angular/app/components/browse/chart-sidebar/chart-sidebar-menu/chart-sidebar-menu.component.html

@@ -1,62 +1,8 @@
 <div
 	class="dropdown-content card card-compact p-2 shadow bg-neutral text-neutral-content z-10 cursor-auto border-2 border-base-300 max-w-[90vw] sm:max-w-[80vw] lg:max-w-[70vw] 2xl:max-w-[60vw]">
 	<div class="card-body">
-		<div class="flex">
+		<div class="flex flex-row-reverse justify-between menu-title p-0 whitespace-nowrap text-neutral-content">
-			<div class="flex-1">
+			<div>
-				<h1 class="menu-title pl-0 pb-0 whitespace-nowrap text-neutral-content">
-					DOWNLOAD FORMAT
-					<button class="btn btn-xs btn-circle btn-ghost" (click)="selectSngModal.showModal()">
-						<i class="bi bi-info-circle text-sm hover:border-b-secondary-focus"></i>
-					</button>
-					<dialog #selectSngModal id="report_modal" class="modal whitespace-normal">
-						<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
-							<form method="dialog">
-								<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
-									<i class="bi bi-x-lg text-lg"></i>
-								</button>
-							</form>
-							<div class="flex gap-6">
-								<div class="flex-1">
-									<span class="font-bold text-lg">.sng (new)</span>
-									<ul class="list-disc pl-5">
-										<li>Single chart file</li>
-										<li>Can be scanned in-game directly without extracting</li>
-										<li>Currently only supported by YARG and Clone Hero v1.1</li>
-									</ul>
-								</div>
-								<div class="flex-1">
-									<span class="font-bold text-lg">.zip</span>
-									<ul class="list-disc pl-5">
-										<li>Contains chart folder</li>
-										<li>Must be extracted before it can be scanned in-game</li>
-										<li>Supported across many games</li>
-									</ul>
-								</div>
-							</div>
-							<br />
-							<div class="text-xs">
-								A program to convert between .sng files and chart folders can be found
-								<a class="link" href="https://github.com/mdsitton/SngFileFormat/releases" target="_blank">here</a>.
-							</div>
-						</div>
-						<form method="dialog" class="modal-backdrop">
-							<button>close</button>
-						</form>
-					</dialog>
-				</h1>
-				<div class="flex gap-2">
-					<label class="label cursor-pointer">
-						<input type="radio" class="radio radio-secondary mr-2" [value]="true" [formControl]="isSngControl" />
-						.sng
-					</label>
-
-					<label class="label cursor-pointer">
-						<input type="radio" class="radio radio-secondary mr-2" [value]="false" [formControl]="isSngControl" />
-						.zip
-					</label>
-				</div>
-			</div>
-			<div class="pt-2">
 				<button class="btn btn-secondary btn-xs flex-nowrap uppercase" (click)="reportModal.showModal()">
 					<i class="bi bi-exclamation-triangle text-sm text-secondary-content"></i> Report issue
 				</button>
@@ -106,12 +52,12 @@
 					</form>
 				</dialog>
 			</div>
-		</div>
 			@if (displayVersions.length > 1) {
-			<h1 class="menu-title pl-0 pb-0 pt-4 whitespace-nowrap text-neutral-content">SELECT VERSION</h1>
+				<span class="uppercase">Select Version</span>
 			}
+		</div>
 		<div
-			class="pt-2 overflow-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-neutral scrollbar-thumb-neutral-content scrollbar-thumb-rounded-full">
+			class="overflow-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-neutral scrollbar-thumb-neutral-content scrollbar-thumb-rounded-full">
 			<table class="table table-xs">
 				<thead>
 					<tr>

src-angular/app/components/browse/chart-sidebar/chart-sidebar-menu/chart-sidebar-menu.component.ts

@@ -3,7 +3,6 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormControl } from '@angular/forms'
 
 import { sortBy } from 'lodash'
-import { SearchService } from 'src-angular/app/core/services/search.service'
 import { environment } from 'src-angular/environments/environment'
 import { ChartData } from 'src-shared/interfaces/search.interface'
 import { driveLink } from 'src-shared/UtilFunctions'
@@ -26,14 +25,9 @@ export class ChartSidebarMenutComponent implements OnInit {
 	public reportMessage = ''
 
 	constructor(
-		private searchService: SearchService,
 		private http: HttpClient,
 	) { }
 
-	get isSngControl() {
-		return this.searchService.isSng
-	}
-
 	ngOnInit(): void {
 		this.selectedVersion = new FormControl<ChartData>(this.displayVersions[0], { nonNullable: true })
 		this.selectedVersion.valueChanges.subscribe(v => this.selectedVersionChanges.emit(v))

src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.html

@@ -88,52 +88,6 @@
 	</div>
 	<div class="join">
 		<button class="btn rounded-md flex-1 join-item btn-primary" (click)="onDownloadClicked()">Download</button>
-		<dialog #selectSngModal id="report_modal" class="modal">
-			<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
-				<form method="dialog">
-					<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
-						<i class="bi bi-x-lg text-2xl"></i>
-					</button>
-				</form>
-				<h3 class="font-bold text-lg">Select Download Format:</h3>
-				<div class="flex gap-6">
-					<div class="form-control flex-1">
-						<label class="label cursor-pointer justify-normal gap-2">
-							<input type="radio" name="selectedDownloadFormat{{ selectedChart.chartId }}" class="radio" (change)="selectDownloadFormat(true)" />
-							<span>.sng (new)</span>
-						</label>
-						<ul class="list-disc pl-5">
-							<li>Single chart file</li>
-							<li>Can be scanned in-game directly without extracting</li>
-							<li>Currently only supported by YARG and Clone Hero v1.1</li>
-						</ul>
-					</div>
-					<div class="form-control flex-1">
-						<label class="label cursor-pointer justify-normal gap-2">
-							<input type="radio" name="selectedDownloadFormat{{ selectedChart.chartId }}" class="radio" (change)="selectDownloadFormat(false)" />
-							<span>.zip</span>
-						</label>
-						<ul class="list-disc pl-5">
-							<li>Contains chart folder</li>
-							<li>Must be extracted before it can be scanned in-game</li>
-							<li>Supported across many games</li>
-						</ul>
-					</div>
-				</div>
-				<br />
-				<div class="text-xs">This can be changed later in the (<i class="bi bi-three-dots align-middle"></i>) menu.</div>
-				<div class="text-xs">
-					A program to convert between .sng files and chart folders can be found
-					<a class="link" href="https://github.com/mdsitton/SngFileFormat/releases" target="_blank">here</a>.
-				</div>
-				<div class="form-control flex-row justify-end">
-					<button class="btn btn-primary" [disabled]="!hasSelectedDownloadFormat" (click)="onDownloadClicked()">Download</button>
-				</div>
-			</div>
-			<form method="dialog" class="modal-backdrop">
-				<button>close</button>
-			</form>
-		</dialog>
 		<div
 			#menu
 			class="cursor-pointer bg-neutral rounded-md join-item dropdown dropdown-top dropdown-end p-1 flex items-center"

src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.ts

@@ -17,7 +17,6 @@ export class ChartSidebarComponent implements OnInit {
 	@HostBinding('class.contents') contents = true
 
 	@ViewChild('menu') menu: ElementRef
-	@ViewChild('selectSngModal') selectSngModal: ElementRef<HTMLDialogElement>
 
 	public shortInstrumentDisplay = shortInstrumentDisplay
 	public difficultyDisplay = difficultyDisplay
@@ -181,27 +180,11 @@ export class ChartSidebarComponent implements OnInit {
 		return this.selectedChart!.notesData.noteCounts.filter(this.currentTrackFilter)[0].count
 	}
 
-	public get hasSelectedDownloadFormat() {
-		// TODO
-		return localStorage.getItem('selectedDownloadFormat') === 'true'
-	}
-	public selectDownloadFormat(isSng: boolean) {
-		// TODO
-		this.searchService.isSng.setValue(isSng)
-		localStorage.setItem('selectedDownloadFormat', 'true')
-	}
-
 	/**
 	 * Adds the selected version to the download queue.
 	 */
 	onDownloadClicked() {
 		// TODO
-		if (!this.hasSelectedDownloadFormat) {
-			this.selectSngModal.nativeElement.showModal()
-			return
-		} else {
-			this.selectSngModal.nativeElement.close()
-		}
 		// this.downloadService.addDownload(
 		// 	this.selectedChart.versionID, {
 		// 	chartName: this.selectedChart.chartName,

src-angular/app/components/settings/settings.component.html

@@ -48,6 +48,63 @@
 		</div>
 	</label>
 
+	<div class="form-control">
+		<div class="label">
+			<span class="label-text">
+				Download Format
+				<button class="btn btn-xs btn-circle btn-ghost" (click)="selectSngModal.showModal()">
+					<i class="bi bi-info-circle text-sm hover:border-b-secondary-focus"></i>
+				</button>
+				<dialog #selectSngModal id="report_modal" class="modal whitespace-normal">
+					<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
+						<form method="dialog">
+							<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
+								<i class="bi bi-x-lg text-lg"></i>
+							</button>
+						</form>
+						<div class="flex gap-6">
+							<div class="flex-1">
+								<span class="font-bold text-lg">.sng (new)</span>
+								<ul class="list-disc pl-5">
+									<li>Single chart file</li>
+									<li>Can be scanned in-game directly without extracting</li>
+									<li>Currently only supported by YARG and Clone Hero v1.1</li>
+								</ul>
+							</div>
+							<div class="flex-1">
+								<span class="font-bold text-lg">.zip</span>
+								<ul class="list-disc pl-5">
+									<li>Contains chart folder</li>
+									<li>Must be extracted before it can be scanned in-game</li>
+									<li>Supported across many games</li>
+								</ul>
+							</div>
+						</div>
+						<br />
+						<div class="text-xs">
+							A program to convert between .sng files and chart folders can be found
+							<a class="link" (click)="openUrl('https://github.com/mdsitton/SngFileFormat/releases')">here</a>.
+						</div>
+					</div>
+					<form method="dialog" class="modal-backdrop">
+						<button>close</button>
+					</form>
+				</dialog>
+			</span>
+		</div>
+		<div class="flex gap-2">
+			<label class="label cursor-pointer">
+				<input type="radio" class="radio radio-secondary mr-2" [value]="true" [formControl]="isSng" />
+				.sng
+			</label>
+
+			<label class="label cursor-pointer">
+				<input type="radio" class="radio radio-secondary mr-2" [value]="false" [formControl]="isSng" />
+				.zip
+			</label>
+		</div>
+	</div>
+
 	<div class="absolute bottom-8 right-8 flex gap-6">
 		<div class="join">
 			<button *ngIf="updateAvailable" class="join-item btn btn-primary" (click)="downloadUpdate()">

src-angular/app/components/settings/settings.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { FormControl } from '@angular/forms'
 
 import { capitalize } from 'lodash'
 import { SettingsService } from 'src-angular/app/core/services/settings.service'
@@ -11,6 +12,8 @@ import { themes } from 'src-shared/Settings'
 export class SettingsComponent implements OnInit {
 	@ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
 
+	public isSng: FormControl<boolean>
+
 	updateAvailable: boolean | null = false
 	loginClicked = false
 	downloadUpdateText = 'Update available'
@@ -23,7 +26,10 @@ export class SettingsComponent implements OnInit {
 	constructor(
 		public settingsService: SettingsService,
 		private ref: ChangeDetectorRef
-	) { }
+	) {
+		this.isSng = new FormControl<boolean>(settingsService.isSng, { nonNullable: true })
+		this.isSng.valueChanges.subscribe(value => settingsService.isSng = value)
+	}
 
 	async ngOnInit() {
 		window.electron.on.updateAvailable(result => {
@@ -73,6 +79,10 @@ export class SettingsComponent implements OnInit {
 		}
 	}
 
+	openUrl(url: string) {
+		window.electron.emit.openUrl(url)
+	}
+
 	setTheme(theme: typeof themes[number]) {
 		this.settingsService.theme = theme
 	}

src-angular/app/core/services/search.service.ts

@@ -26,16 +26,12 @@ export class SearchService {
 	public availableIcons: string[]
 
 	public searchControl = new FormControl('', { nonNullable: true })
-	public isSng: FormControl<boolean>
 	public instrument: FormControl<Instrument | null>
 	public difficulty: FormControl<Difficulty | null>
 
 	constructor(
 		private http: HttpClient,
 	) {
-		this.isSng = new FormControl<boolean>((localStorage.getItem('isSng') ?? 'true') === 'true', { nonNullable: true })
-		this.isSng.valueChanges.subscribe(isSng => localStorage.setItem('isSng', `${isSng}`))
-
 		this.instrument = new FormControl<Instrument>(
 			(localStorage.getItem('instrument') === 'null' ? null : localStorage.getItem('instrument')) as Instrument
 		)

src-angular/app/core/services/settings.service.ts

@@ -75,11 +75,11 @@ export class SettingsService {
 		this.saveSettings()
 	}
 
-	get rateLimitDelay() {
+	get isSng() {
-		return this.settings.rateLimitDelay
+		return this.settings.isSng
 	}
-	set rateLimitDelay(delay: number) {
+	set isSng(value: boolean) {
-		this.settings.rateLimitDelay = delay
+		this.settings.isSng = value
 		this.saveSettings()
 	}
 }

src-electron/ipc/download/GoogleTimer.ts

@@ -1,4 +1,4 @@
-import { settings } from '../SettingsHandler.ipc'
+
 
 interface EventCallback {
 	'waitProgress': (remainingSeconds: number, totalSeconds: number) => void
@@ -36,7 +36,7 @@ class GoogleTimer {
 		if (this.hasTimerEnded() && this.callbacks.complete !== undefined) {
 			this.endTimer()
 		} else if (this.callbacks.waitProgress !== undefined) {
-			const delay = settings.rateLimitDelay
+			const delay = 31
 			this.callbacks.waitProgress(delay - this.rateLimitCounter, delay)
 		}
 	}
@@ -52,7 +52,7 @@ class GoogleTimer {
 	 * Checks if enough time has elapsed since the last timer activation.
 	 */
 	private hasTimerEnded() {
-		return this.rateLimitCounter > settings.rateLimitDelay
+		return true
 	}
 
 	/**

src-shared/Settings.ts

@@ -19,10 +19,10 @@ export const themes = [
  * Represents Bridge's user settings.
  */
 export interface Settings {
-	rateLimitDelay: number          // Number of seconds to wait between each file download from Google servers
 	downloadVideos: boolean         // If background videos should be downloaded
 	theme: typeof themes[number]    // The name of the currently enabled UI theme
 	libraryPath: string | undefined // The path to the user's library
+	isSng: boolean                  // If the chart should be downloaded as a .sng file or as a chart folder
 	instrument: Instrument | null   // The instrument selected by default, or `null` for "Any Instrument"
 	difficulty: Difficulty | null   // The difficulty selected by default, or `null` for "Any Difficulty"
 }
@@ -31,10 +31,10 @@ export interface Settings {
  * Bridge's default user settings.
  */
 export const defaultSettings: Settings = {
-	rateLimitDelay: 31,
 	downloadVideos: true,
 	theme: 'dark',
 	libraryPath: undefined,
+	isSng: false,
 	instrument: 'guitar',
 	difficulty: null,
 }