+
+@if (!loading()) {
+{{loading() ? 'Loading' : albums().length}} Albums
+
+
+
+
+
+
+
+ @for (album of filteredAlbums(); track $index) {
+
+} @else {
+
+
+
+
+ ![]()
+
+
+
+
+
+ } @empty {
+
+
+ }
+No Albums Exist...
+
+
+}
diff --git a/osse-web/src/app/albums/albums.component.ts b/osse-web/src/app/albums/albums.component.ts
new file mode 100644
index 0000000..7e5878d
--- /dev/null
+++ b/osse-web/src/app/albums/albums.component.ts
@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, OnInit, WritableSignal, signal } from '@angular/core';
+import { ConfigService } from '../shared/services/config/config.service';
+import { RouterLink } from '@angular/router';
+import { Album } from '../shared/services/album/Album';
+import { HeaderComponent } from '../shared/ui/header/header.component';
+import { OsseAlbum } from '../shared/services/album/osse-album';
+import { fetcher } from '../shared/util/fetcher';
+import { IconComponent } from '../shared/ui/icon/icon.component';
+import { mdiPlaylistPlay, mdiSearchWeb } from '@mdi/js';
+import { TrackService } from '../shared/services/track/track.service';
+import { ToastService } from '../toast-container/toast.service';
+
+@Component({
+ selector: 'app-albums',
+ imports: [RouterLink, HeaderComponent, IconComponent],
+ templateUrl: './albums.component.html',
+ styleUrl: `./albums.component.css`,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AlbumsComponent implements OnInit {
+ albums: WritableSignalLoading Albums
+
+
diff --git a/osse-web/src/app/albums/view/view.component.ts b/osse-web/src/app/albums/view/view.component.ts
new file mode 100644
index 0000000..7190278
--- /dev/null
+++ b/osse-web/src/app/albums/view/view.component.ts
@@ -0,0 +1,201 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild, WritableSignal, signal } from '@angular/core';
+import { Album } from '../../shared/services/album/Album';
+import { ConfigService } from '../../shared/services/config/config.service';
+import { TrackService } from '../../shared/services/track/track.service';
+import { Track } from '../../shared/services/track/track';
+import { HeaderComponent } from '../../shared/ui/header/header.component';
+import { ToastService } from '../../toast-container/toast.service';
+import { BackgroundImageService } from '../../shared/ui/background-image.service';
+import { IconComponent } from '../../shared/ui/icon/icon.component';
+import { mdiClose, mdiFilter, mdiPencil, mdiPlaylistPlay, mdiSearchWeb } from '@mdi/js';
+import { AlbumFilter } from './album-filter';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { ModalService } from '../../shared/ui/modal/modal.service';
+import { AlbumArtFullscreenComponent } from '../../shared/ui/modals/album-art-fullscreen/album-art-fullscreen.component';
+import { TrackMatrixComponent } from '../../shared/ui/track-matrix/track-matrix.component';
+import { CommonModule } from '@angular/common';
+import { TrackMatrixMode } from '../../shared/ui/track-matrix/track-matrix-mode.enum';
+import { AddMultipleTracksToPlaylistComponent } from '../../shared/ui/modals/add-multiple-tracks-to-playlist/add-multiple-tracks-to-playlist.component';
+import { Subscription } from 'rxjs';
+import { TrackInfo } from '../../shared/ui/track-matrix/track-info';
+
+@Component({
+ selector: 'app-view',
+ imports: [HeaderComponent, IconComponent, FormsModule, TrackMatrixComponent, CommonModule],
+ templateUrl: './view.component.html',
+ styles: ``,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+ @ViewChild(TrackMatrixComponent) matrix!: TrackMatrixComponent;
+ public album!: WritableSignal
+
+
+
+
+
+
+
+
+
+
+
+ + {{album().artist[0]?.name ?? albumTrackArtist() ?? "Unknown Artist"}} +
+{{totalDuration}} Minutes
+ @if (album().album.year) { +{{album().album.year}}
+ } +
+
+
+
+
+ {{album().tracks.length}} Tracks
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@if (tracks().length > 0) {
+
+
+
+
+
+
+ {{ artist() || 'Unknown Artist' }}
+ +
+ @if (showVisualizer()) {
+
+
+ +
+
+
+
+
+ @if (tracksCanBeRestored()) {
+
+ } @else {
+
+ }
+
+
+
+
+
+
+
+ @for (track of tracks(); track track.uuid; let idx = $index) {
+
+}
diff --git a/osse-web/src/app/home/home.component.ts b/osse-web/src/app/home/home.component.ts
new file mode 100644
index 0000000..b61f3fa
--- /dev/null
+++ b/osse-web/src/app/home/home.component.ts
@@ -0,0 +1,219 @@
+import { Component, computed, OnDestroy, OnInit, signal, WritableSignal } from '@angular/core';
+import { TrackComponent } from './track/track.component';
+import { TrackService } from '../shared/services/track/track.service';
+import { Track } from '../shared/services/track/track';
+import { PlayerService } from '../shared/player/player.service';
+import { PlaybackState } from '../shared/player/state-change';
+import { ConfigService } from '../shared/services/config/config.service';
+import { IconComponent } from '../shared/ui/icon/icon.component';
+import { mdiFastForward, mdiInformation, mdiRepeat, mdiRewind, mdiShuffle, mdiSilverwareForkKnife, mdiDeleteSweep, mdiRepeatOff, mdiRepeatOnce, mdiRestore, mdiCog } from '@mdi/js';
+import { ModalService } from '../shared/ui/modal/modal.service';
+
+import { Subscription } from 'rxjs';
+import { HeaderComponent } from '../shared/ui/header/header.component';
+import { AlbumArtFullscreenComponent } from '../shared/ui/modals/album-art-fullscreen/album-art-fullscreen.component';
+import { ToastService } from '../toast-container/toast.service';
+import { TrackInfoComponent } from '../shared/ui/modals/track-info/track-info.component';
+import { Repeat } from '../shared/services/track/repeat.enum';
+import { VisualizerComponent } from '../shared/player/visualizer/visualizer.component';
+import { PlayerSettingsComponent } from '../shared/ui/modals/player-settings/player-settings.component';
+import { CommonModule } from '@angular/common';
+import { AddToPlaylistFactoryComponent } from '../shared/ui/modals/add-to-playlist-factory/add-to-playlist-factory.component';
+
+@Component({
+ selector: 'app-home',
+ imports: [CommonModule, IconComponent, TrackComponent, HeaderComponent, VisualizerComponent],
+ templateUrl: './home.component.html'
+})
+export class HomeComponent implements OnInit, OnDestroy {
+ public bg: WritableSignal
+ @if (mode == 'view') {
+
diff --git a/osse-web/src/app/home/track/track.component.ts b/osse-web/src/app/home/track/track.component.ts
new file mode 100644
index 0000000..d9983ca
--- /dev/null
+++ b/osse-web/src/app/home/track/track.component.ts
@@ -0,0 +1,55 @@
+import { Component, EventEmitter, input, Input, InputSignal, Output } from '@angular/core';
+import { Track } from '../../shared/services/track/track';
+import { IconComponent } from '../../shared/ui/icon/icon.component';
+import { mdiClose, mdiDotsVertical, mdiPlay, mdiPlaylistPlus, mdiStar, mdiTrashCan } from '@mdi/js';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-track',
+ imports: [IconComponent, CommonModule],
+ templateUrl: './track.component.html'
+})
+export class TrackComponent {
+ @Input() track!: Track;
+ public activeTrack: InputSignal
+
+
+
+
+ } @else {
+
+
+
+
+
+
+
+
+
+ }
+