diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index d535bec..a09035e 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -2,13 +2,15 @@ import { Routes } from "@angular/router"; import { AppLayout } from "./layouts/app-layout"; import { CurrentlyPlaying } from "./views/currently-playing/currently-playing"; import { Settings } from "./views/settings/settings"; +import { Library } from "./views/library/library"; export const routes: Routes = [ { path: "", component: AppLayout, children: [ - { path: "", component: CurrentlyPlaying }, + { path: "", component: Library }, + { path: "playing", component: CurrentlyPlaying }, { path: "settings", component: Settings, diff --git a/src/app/components/currently-playing-material/currently-playing-material.scss b/src/app/components/currently-playing-material/currently-playing-material.scss index 4d2687f..25996ee 100644 --- a/src/app/components/currently-playing-material/currently-playing-material.scss +++ b/src/app/components/currently-playing-material/currently-playing-material.scss @@ -6,6 +6,7 @@ width: 100%; height: 100%; background-size: cover; + background-position: center; filter: blur(90px); } diff --git a/src/app/components/light-glass-outlined/light-glass-outlined.scss b/src/app/components/light-glass-outlined/light-glass-outlined.scss index d3b28d8..4da210b 100644 --- a/src/app/components/light-glass-outlined/light-glass-outlined.scss +++ b/src/app/components/light-glass-outlined/light-glass-outlined.scss @@ -18,5 +18,7 @@ height: 1px; /* rgba(255,255,255,0.03) on top of #060606 */ background: #131316; - border-radius: calc(48px - 2px); + border-radius: calc(48px + 2px); + position: relative; + overflow: hidden; } diff --git a/src/app/views/currently-playing/currently-playing.ts b/src/app/views/currently-playing/currently-playing.ts index a075494..3604aab 100644 --- a/src/app/views/currently-playing/currently-playing.ts +++ b/src/app/views/currently-playing/currently-playing.ts @@ -13,7 +13,7 @@ import { pause, play, resume, seek } from "../../services/music"; import { zeroPad } from "../../utils/strings"; @Component({ - selector: "now-playing", + selector: "currently-playing", imports: [CurrentlyPlayingMaterial, AlbumArt, PlayPause, VolumeSlider], templateUrl: "./currently-playing.html", styleUrl: "currently-playing.scss", diff --git a/src/app/views/library/components/sidebar-item/sidebar-item.html b/src/app/views/library/components/sidebar-item/sidebar-item.html new file mode 100644 index 0000000..e2ec264 --- /dev/null +++ b/src/app/views/library/components/sidebar-item/sidebar-item.html @@ -0,0 +1,16 @@ + +
+
+
+
+
+
+
+ + {{name()}} +
+
+ diff --git a/src/app/views/library/components/sidebar-item/sidebar-item.scss b/src/app/views/library/components/sidebar-item/sidebar-item.scss new file mode 100644 index 0000000..f8d7b86 --- /dev/null +++ b/src/app/views/library/components/sidebar-item/sidebar-item.scss @@ -0,0 +1,79 @@ +.container { + display: flex; + gap: 12px; + position: relative; + border-radius: 14px; + padding: 12px; + justify-content: center; + align-items: center; + cursor: pointer; + user-select: none; +} + +:host ::ng-deep light-glass-outlined { + border-radius: 12px !important; + padding: 1px !important; +} + +:host ::ng-deep light-glass-outlined > * { + height: fit-content !important; + border-radius: calc(12px + 1px) !important; +} + +.coverBgContainer { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: inherit; + overflow: hidden; +} + +.coverBgBlur { + width: 100%; + height: 100%; + backdrop-filter: blur(90px); + position: absolute; + top: 0; + left: 0; + z-index: 2; +} + +.coverBg { + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + z-index: 1; + opacity: 0.2; +} + +.hoverScrim { + opacity: 0; + z-index: 3; + width: 100%; + height: 100%; + position: absolute; + background: white; +} + +.container:hover .hoverScrim { + opacity: 0.1; +} + +.icon { + height: 24px; + width: 24px; + object-fit: contain; + object-position: center; +} + +.contents { + z-index: 4; + position: relative; + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; +} diff --git a/src/app/views/library/components/sidebar-item/sidebar-item.ts b/src/app/views/library/components/sidebar-item/sidebar-item.ts new file mode 100644 index 0000000..10e86cb --- /dev/null +++ b/src/app/views/library/components/sidebar-item/sidebar-item.ts @@ -0,0 +1,16 @@ +import { Component, inject, input } from "@angular/core"; +import { Metadata } from "../../../../injectables/metadata"; +import { LightGlassOutlined } from "../../../../components/light-glass-outlined/light-glass-outlined"; + +@Component({ + selector: "sidebar-item", + templateUrl: "./sidebar-item.html", + styleUrl: "./sidebar-item.scss", + imports: [LightGlassOutlined], +}) +export class SidebarItem { + stateMetadata = inject(Metadata); + + name = input.required(); + iconPath = input.required(); +} diff --git a/src/app/views/library/library.html b/src/app/views/library/library.html new file mode 100644 index 0000000..c6e786e --- /dev/null +++ b/src/app/views/library/library.html @@ -0,0 +1,40 @@ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+

Library

+
+ @if (!playingMetadata().currentlyPlayingPath) { +
+ + +

No song is currently playing

+ +
+ } @else { +
+ + + +
+ } +
+ +
+
diff --git a/src/app/views/library/library.scss b/src/app/views/library/library.scss new file mode 100644 index 0000000..539dbcd --- /dev/null +++ b/src/app/views/library/library.scss @@ -0,0 +1,123 @@ +:host { + display: contents; +} + +.container { + height: 1px; + flex-grow: 1; + display: grid; + grid-template-rows: auto 1fr; + grid-template-columns: auto 1fr; + box-sizing: border-box; + padding: 2rem; + gap: 1rem; +} + +.topbar { + grid-row: 1; + grid-column: 1 / span 2; +} + +.logo { + opacity: 0.8; + height: 32px; +} + +.sidebarContainer { + grid-row: 2; + grid-column: 1; +} + +.contentsContainer { + grid-row: 2; + grid-column: 2; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; +} + +.contentsContainer > light-glass-outlined { + flex-grow: 1; + height: 1px; +} + +.innerPlayBackgroundContainer { + width: 100%; + height: 100%; + border-radius: inherit; + overflow: hidden; + position: absolute; + top: 0; + left: 0; +} + +.innerPlayBlur { + width: 100%; + height: 100%; + backdrop-filter: blur(90px); + position: absolute; + top: 0; + left: 0; + z-index: 2; +} + +.innerPlayBackground { + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + z-index: 1; + opacity: 0.2; +} + +.innerContents { + position: relative; + padding: 2rem; + z-index: 3; +} + +.title { + margin: 0; + font-family: "Roboto Flex", sans-serif; + font-variation-settings: + "wght" 500, + "wdth" 151, + "GRAD" 150, + "XOPQ" 96; + user-select: none; +} + +.hr { + all: unset; + display: block; + height: 2px; + width: 100%; + background: rgba(255, 255, 255, 0.08); + margin-top: 20px; + margin-bottom: 20px; +} + +.noSongPlayingContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 3rem; +} + +.noSongPlayingInnerContainer { + all: unset; + background: rgba(255, 255, 255, 0.2); + padding: 2rem; + border-radius: 1rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1.5rem; +} + +.noSongPlayingInnerContainer > * { + margin: 0; +} diff --git a/src/app/views/library/library.ts b/src/app/views/library/library.ts new file mode 100644 index 0000000..0b9b3c3 --- /dev/null +++ b/src/app/views/library/library.ts @@ -0,0 +1,24 @@ +import { Component, effect, inject } from "@angular/core"; +import { LightGlassOutlined } from "../../components/light-glass-outlined/light-glass-outlined"; +import { setBodyBg } from "../../utils/styling"; +import { Metadata } from "../../injectables/metadata"; +import { SidebarItem } from "./components/sidebar-item/sidebar-item"; +import { injectSelector } from "@reduxjs/angular-redux"; +import { RootState } from "../../store"; +import { AlbumArt } from "../../components/album-art/album-art"; +import { RouterLink } from "@angular/router"; + +@Component({ + selector: "library-view", + templateUrl: "./library.html", + styleUrl: "./library.scss", + imports: [LightGlassOutlined, SidebarItem, AlbumArt, RouterLink], +}) +export class Library { + _ = effect(() => { + setBodyBg("#060606"); + }); + + stateMetadata = inject(Metadata); + playingMetadata = injectSelector((state: RootState) => state.tauri); +} diff --git a/src/assets/header-logo-black.svg b/src/assets/header-logo-black.svg index d465d8a..21b7e46 100644 --- a/src/assets/header-logo-black.svg +++ b/src/assets/header-logo-black.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/header-logo-white.svg b/src/assets/header-logo-white.svg index 6963b51..28af3ef 100644 --- a/src/assets/header-logo-white.svg +++ b/src/assets/header-logo-white.svg @@ -1,4 +1,4 @@ - - + +