Rename to library

src-angular/app/app-routing.module.ts

@@ -1,18 +1,16 @@
 import { NgModule } from '@angular/core'
 import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router'
-
 import { BrowseComponent } from './components/browse/browse.component'
 import { SettingsComponent } from './components/settings/settings.component'
 import { ToolsComponent } from './components/tools/tools.component'
 import { TabPersistStrategy } from './core/tab-persist.strategy'
-import { PlaylistComponent } from './components/playlist/playlist.component'
+import { LibraryComponent } from './components/library/library.component'
 
 const routes: Routes = [
 	{ path: 'browse', component: BrowseComponent, data: { shouldReuse: true } },
-	{ path: 'library', redirectTo: '/browse' },
+	{ path: 'library', component: LibraryComponent, data: { shouldReuse: true } },
 	{ path: 'tools', component: ToolsComponent, data: { shouldReuse: true } },
 	{ path: 'settings', component: SettingsComponent, data: { shouldReuse: true } },
-	{ path: 'playlist', component: PlaylistComponent, data: { shouldReuse: true } },
 	{ path: 'about', redirectTo: '/browse' },
 	{ path: '**', redirectTo: '/browse' },
 ]

src-angular/app/app.module.ts

@@ -18,9 +18,10 @@ import { StatusBarComponent } from './components/browse/status-bar/status-bar.co
 import { SettingsComponent } from './components/settings/settings.component'
 import { ToolbarComponent } from './components/toolbar/toolbar.component'
 import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
-import { PlaylistTableComponent } from './components/playlist/playlist-table/playlist-table.component'
-import { PlaylistComponent } from './components/playlist/playlist.component'
-import { PlaylistBarComponent } from './components/playlist/playlist-bar/playlist-bar.component'
+import { LibraryTableComponent } from './components/library/library-table/library-table.component'
+import { LibraryComponent } from './components/library/library.component'
+import { LibraryBarComponent } from './components/library/library-bar/library-bar.component'
+
 
 @NgModule({
 	declarations: [
@@ -38,9 +39,9 @@ import { PlaylistBarComponent } from './components/playlist/playlist-bar/playlis
 		DownloadsModalComponent,
 		RemoveStyleTagsPipe,
 		SettingsComponent,
-		PlaylistTableComponent,
-		PlaylistComponent,
-		PlaylistBarComponent,
+		LibraryTableComponent,
+		LibraryComponent,
+		LibraryBarComponent,
 	],
 	bootstrap: [AppComponent], imports: [
 		BrowserModule,

src-angular/app/components/library/library-bar/library-bar.component.html

@@ -1,22 +1,22 @@
 <div class="border-t border-t-neutral p-2 flex gap-2 items-center max-w-full justify-between">
 	<div class="flex items-center gap-[8px]">
-		{{ (this.playlistService.tracks$ | async)?.length ?? 0 }} Songs
+		{{ (this.libraryService.tracks$ | async)?.length ?? 0 }} Songs
 
-		@if ((this.playlistService.selectedSongs$ | async)!.length > 0) {
+		@if ((this.libraryService.selectedSongs$ | async)!.length > 0) {
 			<button class="btn btn-sm btn-primary" (click)="exportSelected()">Export Selected</button>
 		} @else {
 			<button class="btn btn-sm btn-primary" (click)="exportPlaylist()">Export</button>
 		}
 		<button class="btn btn-sm btn-primary" (click)="importPlaylist()">Import</button>
-		<input type="file" #fileInput accept=".setlist" class="hidden" (change)="onFileSelected($event)" />
+		<input type="file" #fileInput accept=".library" class="hidden" (change)="onFileSelected($event)" />
 
-		@if ((this.playlistService.selectedSongs$ | async)!.length === 0) {
-			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.playlistService.clearPlaylist()">
+		@if ((this.libraryService.selectedSongs$ | async)!.length === 0) {
+			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.libraryService.clearPlaylist()">
 				<i class="bi bi-trash"></i>
 				Delete all
 			</button>
 		} @else {
-			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.playlistService.removeFromPlaylist()">
+			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.libraryService.removeFromPlaylist()">
 				<i class="bi bi-trash"></i>
 				Delete selected
 			</button>

src-angular/app/components/library/library-bar/library-bar.component.ts

@@ -1,27 +1,27 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
-import { PlaylistService } from 'src-angular/app/core/services/playlist.service'
 import { DownloadService } from '../../../core/services/download.service'
+import { LibraryService } from 'src-angular/app/core/services/library.service'
 
 @Component({
-	selector: 'app-playlist-bar',
-	templateUrl: './playlist-bar.component.html',
+	selector: 'app-library-bar',
+	templateUrl: './library-bar.component.html',
 	standalone: false,
 })
-export class PlaylistBarComponent {
-	@ViewChild('fileInput', { static: false }) fileInput: ElementRef<HTMLInputElement>
+export class LibraryBarComponent {
+	@ViewChild('fileInput', { static: false }) libraryfileInput: ElementRef<HTMLInputElement>
 
-	constructor(public playlistService: PlaylistService, public downloadService: DownloadService) { }
+	constructor(public libraryService: LibraryService, public downloadService: DownloadService) { }
 
 	exportPlaylist() {
-		this.playlistService.storePlaylist()
+		this.libraryService.storeLibrary()
 	}
 
 	exportSelected() {
-		this.playlistService.storeSelectedSongs()
+		this.libraryService.storeSelectedSongs()
 	}
 
 	importPlaylist() {
-		this.fileInput.nativeElement.click()
+		this.libraryfileInput.nativeElement.click()
 	}
 
 	onFileSelected(event: Event) {
@@ -34,7 +34,7 @@ export class PlaylistBarComponent {
 				try {
 					const importedTracks = JSON.parse(reader.result as string)
 					if (Array.isArray(importedTracks)) {
-						this.playlistService.downloadPlaylist(importedTracks)
+						this.libraryService.downloadLibrary(importedTracks)
 					} else {
 						console.error('Invalid file format')
 					}

src-angular/app/components/library/library-table/library-table.component.ts

@@ -1,18 +1,18 @@
 import { Component, OnInit, OnDestroy } from '@angular/core'
-import { PlaylistService } from 'src-angular/app/core/services/playlist.service'
 import { SelectionService } from 'src-angular/app/core/services/selection.service'
 import { ChartData } from 'src-shared/interfaces/search.interface'
 import { SettingsService } from '../../../core/services/settings.service'
 import { Subscription } from 'rxjs'
+import { LibraryService } from 'src-angular/app/core/services/library.service'
 
 type SortColumn = 'name' | 'artist' | 'album' | 'genre' | 'year' | 'charter' | 'length' | 'modifiedTime' | null
 
 @Component({
-	selector: 'app-playlist-table',
-	templateUrl: './playlist-table.component.html',
+	selector: 'app-library-table',
+	templateUrl: './library-table.component.html',
 	standalone: false,
 })
-export class PlaylistTableComponent implements OnInit, OnDestroy {
+export class LibraryTableComponent implements OnInit, OnDestroy {
 	songs: ChartData[] = []
 	sortDirection: 'asc' | 'desc' = 'asc'
 	sortColumn: SortColumn = null
@@ -23,7 +23,7 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 	selectedSongs: ChartData[] = []
 
 	constructor(
-		public playlistService: PlaylistService,
+		public libraryService: LibraryService,
 		public settingsService: SettingsService,
 		private selectionService: SelectionService
 	) { }
@@ -42,7 +42,7 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 
 	ngOnInit(): void {
 		this.subscriptions.push(
-			this.playlistService.tracks$
+			this.libraryService.tracks$
 				.subscribe(tracks => {
 					this.songs = tracks
 					this.filterSongs()
@@ -50,9 +50,10 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 		)
 		this.filteredSongs = [...this.songs]
 		this.subscriptions.push(
-			this.playlistService.selectedSongs$.subscribe(songs =>
-				this.selectedSongs = songs
-			)
+			this.libraryService.selectedSongs$
+				.subscribe(songs =>
+					this.selectedSongs = songs
+				)
 		)
 	}
 
@@ -69,10 +70,6 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 		)
 	}
 
-	trackByFn(index: number): number {
-		return index
-	}
-
 	onColClicked(column: SortColumn) {
 		if (this.filteredSongs.length === 0) { return }
 
@@ -105,19 +102,23 @@ export class PlaylistTableComponent implements OnInit, OnDestroy {
 	onCheckboxChange(song: ChartData, target?: EventTarget): void {
 		const input = target as HTMLInputElement
 		if (input.checked) {
-			this.playlistService.addToSelectedSongs(song)
+			this.libraryService.addToSelectedSongs(song)
 		} else {
-			this.playlistService.removeFromSelectedSongs(song)
+			this.libraryService.removeFromSelectedSongs(song)
 		}
 	}
 
+	trackByFn(index: number): number {
+		return index
+	}
+
 	toggleSelectAll(): void {
 		this.allRowsSelected = !this.allRowsSelected
 
 		if (this.allRowsSelected) {
-			this.filteredSongs.forEach(song => this.playlistService.addToSelectedSongs(song))
+			this.filteredSongs.forEach(song => this.libraryService.addToSelectedSongs(song))
 		} else {
-			this.playlistService.clearSelectedSongs()
+			this.libraryService.clearSelectedSongs()
 		}
 	}
 

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

@@ -0,0 +1,4 @@
+<div class="overflow-hidden">
+	<app-library-table></app-library-table>
+</div>
+<app-library-bar></app-library-bar>

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+	selector: 'app-library',
+	templateUrl: './library.component.html',
+	standalone: false,
+})
+export class LibraryComponent {
+
+}

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

@@ -1,4 +0,0 @@
-<div class="overflow-hidden">
-	<app-playlist-table></app-playlist-table>
-</div>
-<app-playlist-bar></app-playlist-bar>

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-	selector: 'app-playlist',
-	templateUrl: './playlist.component.html',
-	standalone: false,
-})
-export class PlaylistComponent {
-
-}

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

@@ -1,8 +1,8 @@
 <div class="navbar p-0 min-h-0 bg-base-100" style="-webkit-app-region: drag">
 	<div style="-webkit-app-region: no-drag">
 		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/browse">Browse</button>
+		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/library">Library</button>
 		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/tools">Tools</button>
-		<button class="btn btn-ghost rounded-none" routerLinkActive="btn-active" routerLink="/playlist">Playlist</button>
 		<button class="btn btn-ghost rounded-none flex flex-nowrap" routerLinkActive="btn-active" routerLink="/settings">
 			<i *ngIf="updateAvailable === 'error'" class="bi bi-exclamation-triangle-fill text-warning"></i>
 			Settings

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

@@ -6,7 +6,7 @@ import { resolveChartFolderName } from 'src-shared/UtilFunctions'
 
 import { DownloadProgress } from '../../../../src-shared/interfaces/download.interface'
 import { SettingsService } from './settings.service'
-import { PlaylistService } from './playlist.service'
+import { LibraryService } from './library.service'
 
 @Injectable({
 	providedIn: 'root',
@@ -16,7 +16,7 @@ export class DownloadService {
 	public downloadCountChanges = new EventEmitter<number>()
 	public downloads: DownloadProgress[] = []
 
-	constructor(zone: NgZone, private settingsService: SettingsService, private playlistService: PlaylistService) {
+	constructor(zone: NgZone, private settingsService: SettingsService, private libraryService: LibraryService) {
 		window.electron.on.downloadQueueUpdate(download => zone.run(() => {
 			const downloadIndex = this.downloads.findIndex(d => d.md5 === download.md5)
 			if (download.type === 'cancel') {
@@ -70,7 +70,7 @@ export class DownloadService {
 				this.downloads.forEach(d => d.stale = true)
 			}
 
-			this.playlistService.playlistAdd(chart)
+			this.libraryService.libraryAdd(chart)
 
 			const newChart = {
 				name: chart.name ?? 'Unknown Name',

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

@@ -3,10 +3,12 @@ import { BehaviorSubject } from 'rxjs'
 import { ChartData } from 'src-shared/interfaces/search.interface'
 import { DownloadService } from './download.service'
 
+const LibraryStorageIdentifyer: string = "library"
+
 @Injectable({
 	providedIn: 'root',
 })
-export class PlaylistService {
+export class LibraryService {
 	private _tracks = new BehaviorSubject<ChartData[]>([])
 	tracks$ = this._tracks.asObservable()
 
@@ -16,9 +18,10 @@ export class PlaylistService {
 	private _downloadService: DownloadService | null = null
 
 	constructor(private injector: Injector) {
-		const playlist = localStorage.getItem('playlist')
-		if (playlist) {
-			this._tracks.next(JSON.parse(playlist))
+		const library = localStorage.getItem(LibraryStorageIdentifyer)
+
+		if (library) {
+			this._tracks.next(JSON.parse(library))
 		}
 	}
 
@@ -33,13 +36,13 @@ export class PlaylistService {
 		return this._tracks.value
 	}
 
-	playlistAdd(chart: ChartData) {
+	libraryAdd(chart: ChartData) {
 		const updatedTracks = [...this._tracks.value, chart]
 		this._tracks.next(updatedTracks)
-		localStorage.setItem('playlist', JSON.stringify(updatedTracks))
+		localStorage.setItem(LibraryStorageIdentifyer, JSON.stringify(updatedTracks))
 	}
 
-	downloadPlaylist(songs: ChartData[]) {
+	downloadLibrary(songs: ChartData[]) {
 		songs.forEach(track => {
 			if (!this._tracks.value.includes(track)) {
 				this.downloadService.addDownload(track)
@@ -47,11 +50,11 @@ export class PlaylistService {
 		})
 	}
 
-	storePlaylist() {
+	storeLibrary() {
 		const fakeLink = document.createElement('a')
 		const file = new Blob([JSON.stringify(this._tracks.value)], { type: 'application/json' })
 		fakeLink.href = URL.createObjectURL(file)
-		fakeLink.download = 'songs.setlist'
+		fakeLink.download = 'songs.library'
 		fakeLink.click()
 	}
 
@@ -59,7 +62,7 @@ export class PlaylistService {
 		const fakeLink = document.createElement('a')
 		const file = new Blob([JSON.stringify(this._selectedSongs.value)], { type: 'application/json' })
 		fakeLink.href = URL.createObjectURL(file)
-		fakeLink.download = 'selected.setlist'
+		fakeLink.download = 'selected.library'
 		fakeLink.click()
 	}
 
@@ -81,12 +84,12 @@ export class PlaylistService {
 		this._selectedSongs.value.forEach(selectedSong => {
 			const updatedTracks = this._tracks.value.filter(track => track !== selectedSong)
 			this._tracks.next(updatedTracks)
-			localStorage.setItem('playlist', JSON.stringify(updatedTracks))
+			localStorage.setItem(LibraryStorageIdentifyer, JSON.stringify(updatedTracks))
 		})
 	}
 
 	clearPlaylist() {
 		this._tracks.next([])
-		localStorage.removeItem('playlist')
+		localStorage.removeItem(LibraryStorageIdentifyer)
 	}
 }