diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 0989a02..6b897af 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -17,7 +17,7 @@ "windows": [ { "fullscreen": false, - "resizable": false, + "resizable": true, "title": "tauri-app", "width": 640, "height": 292, diff --git a/src/app/components/controls/play-pause.ts b/src/app/components/controls/play-pause.ts new file mode 100644 index 0000000..01015ad --- /dev/null +++ b/src/app/components/controls/play-pause.ts @@ -0,0 +1,116 @@ +import {Component, inject, input, output} from "@angular/core"; +import {Metadata} from "../../injectables/metadata"; + +@Component({ + selector: "app-play-pause-btn", + template: ` +
+ @if (isPaused()) { + + Play + } @else { + + Pause + } +
+ `, + styles: [` + :host { + display: inline-flex; + height: 1px; + overflow: visible; + justify-content: center; + align-items: center; + } + + .playPauseBtnContainer { + position: relative; + width: fit-content; + margin: -12px 0; + } + + .playPauseBtn { + height: 72px; + width: 72px; + border-radius: 2.125rem; + border: 1px solid var(--Angled-Stroke, rgba(255, 255, 255, 0.20)); + aspect-ratio: 1; + + background-color: var(--bg-color); + color: var(--color); + + /* Blur + Shadow Big */ + box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.05), 0px 40px 80px 0px rgba(0, 0, 0, 0.08); + } + + .playPauseIcon { + pointer-events: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 32px; + height: 32px; + } + `] +}) +export class PlayPauseBtn { + metadata = inject(Metadata) + resume = output(); + pause = output(); + isPaused = input.required(); +} + +@Component({ + selector: "app-play-pause", + imports: [PlayPauseBtn], + template: ` +
+ + +
+ `, + styles: [` + .buttonsRow { + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + padding-left: 1rem; + padding-right: 1rem; + border-radius: 14px; + } + + .invisibleButton { + background: none; + border: none; + padding: 12px; + } + `] +}) +export class PlayPause { + metadata = inject(Metadata) + resume = output(); + pause = output(); + isPaused = input.required(); +} \ No newline at end of file diff --git a/src/app/types/currently-playing.ts b/src/app/types/currently-playing.ts new file mode 100644 index 0000000..2ba9e3d --- /dev/null +++ b/src/app/types/currently-playing.ts @@ -0,0 +1 @@ +export type ControlType = "play-pause" | "volume-change"; diff --git a/src/app/utils/strings.ts b/src/app/utils/strings.ts new file mode 100644 index 0000000..db82691 --- /dev/null +++ b/src/app/utils/strings.ts @@ -0,0 +1,3 @@ +export function zeroPad(num: number, places: number) { + return String(num).padStart(places, '0'); +} \ No newline at end of file diff --git a/src/app/views/currently-playing.component.ts b/src/app/views/currently-playing.component.ts index 1a91468..0f166e5 100644 --- a/src/app/views/currently-playing.component.ts +++ b/src/app/views/currently-playing.component.ts @@ -5,10 +5,9 @@ import {pause, play, resume, seek} from "../services/music"; import {pickSong} from "../services/fs"; import {Metadata} from "../injectables/metadata"; import {injectMutation} from "@tanstack/angular-query-experimental"; - -function zeroPad(num: number, places: number) { - return String(num).padStart(places, '0'); -} +import {PlayPauseBtn, PlayPause} from "../components/controls/play-pause"; +import {zeroPad} from "../utils/strings"; +import {ControlType} from "../types/currently-playing"; @Component({ selector: "currently-playing-material", @@ -111,9 +110,8 @@ export class AlbumArt { } @Component({ - // TODO: Rename from "home" to "now-playing" - selector: 'app-home', - imports: [CurrentlyPlayingMaterial, AlbumArt], + selector: 'app-now-playing', + imports: [CurrentlyPlayingMaterial, AlbumArt, PlayPause], template: `
@@ -140,17 +138,7 @@ export class AlbumArt {
-
- @if (playingMetadata().paused) { - - Play - } @else { - - Pause - } -
+
} @@ -227,14 +215,14 @@ export class AlbumArt { display: flex; justify-content: space-between; } - + .progressText { font-size: 14px; color: white; opacity: 0.5; margin: 0; } - + .progressBar { border-radius: 1.5rem; width: 100%; @@ -259,42 +247,14 @@ export class AlbumArt { padding: 0; margin: 0; } - - .playPauseBtnContainer { - position: relative; - width: fit-content; - margin: -12px 0; - } - - .playPauseBtn { - height: 72px; - width: 72px; - border-radius: 2.125rem; - border: 1px solid var(--Angled-Stroke, rgba(255, 255, 255, 0.20)); - aspect-ratio: 1; - background: #FFF; - mix-blend-mode: overlay; - - /* Blur + Shadow Big */ - box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.05), 0px 40px 80px 0px rgba(0, 0, 0, 0.08); - backdrop-filter: blur(50px); - } - - .playPauseIcon { - pointer-events: none; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 32px; - height: 32px; - } `] }) export class CurrentlyPlaying { playingMetadata = injectSelector((state: RootState) => state.tauri); stateMetadata = inject(Metadata); + controls: ControlType = "play-pause"; + openFileMutation = injectMutation(() => ({ mutationKey: ['openFile'], mutationFn: async () => { diff --git a/src/assets/volume_icon.svg b/src/assets/volume_icon.svg new file mode 100644 index 0000000..7e9c41a --- /dev/null +++ b/src/assets/volume_icon.svg @@ -0,0 +1,4 @@ + + + +