From cc85b286664f35764bb517f74ebb798bf61051ac Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sun, 15 Dec 2024 03:50:57 -0800
Subject: [PATCH] chore: rename from "Home" to "Currently Playing"

---
 src/app/app.routes.ts                         |  4 ++--
 ...nent.ts => currently-playing.component.ts} | 12 +++++-----
 src/assets/pause_icon.svg                     |  4 ++++
 src/assets/play_icon.svg                      | 24 +++++++++++++++++++
 4 files changed, 36 insertions(+), 8 deletions(-)
 rename src/app/views/{home.component.ts => currently-playing.component.ts} (97%)
 create mode 100644 src/assets/pause_icon.svg
 create mode 100644 src/assets/play_icon.svg

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 267f11f..bbd8f4d 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,9 +1,9 @@
 import { Routes } from "@angular/router";
-import {Home} from "./views/home.component";
+import {CurrentlyPlaying} from "./views/currently-playing.component";
 
 export const routes: Routes = [
   {
     path: "",
-    component: Home
+    component: CurrentlyPlaying
   }
 ];
diff --git a/src/app/views/home.component.ts b/src/app/views/currently-playing.component.ts
similarity index 97%
rename from src/app/views/home.component.ts
rename to src/app/views/currently-playing.component.ts
index 173ea2a..ed12d21 100644
--- a/src/app/views/home.component.ts
+++ b/src/app/views/currently-playing.component.ts
@@ -7,7 +7,7 @@ import {Metadata} from "../injectables/metadata";
 import {injectMutation} from "@tanstack/angular-query-experimental";
 
 @Component({
-  selector: "app-home-material",
+  selector: "currently-playing-material",
   template: `
       <div class="coverImgBg" style="background-image: {{stateMetadata.mp3CoverImage()}}"></div>
       <div class="scrim"></div>
@@ -41,7 +41,7 @@ import {injectMutation} from "@tanstack/angular-query-experimental";
       }
   `]
 })
-class AppHomeMaterial {
+class CurrentlyPlayingMaterial {
   stateMetadata = inject(Metadata);
 }
 
@@ -109,9 +109,9 @@ export class AlbumArt {
 @Component({
   // TODO: Rename from "home" to "now-playing"
   selector: 'app-home',
-  imports: [AppHomeMaterial, AlbumArt],
+  imports: [CurrentlyPlayingMaterial, AlbumArt],
   template: `
-      <app-home-material>
+      <currently-playing-material>
           <div class="container">
               @if (!openFileMutation.data()) {
                   <button (click)="openFileMutation.mutate()">Play</button>
@@ -141,7 +141,7 @@ export class AlbumArt {
                   </div>
               }
           </div>
-      </app-home-material>
+      </currently-playing-material>
   `,
   styles: [`
       .container {
@@ -232,7 +232,7 @@ export class AlbumArt {
       }
   `]
 })
-export class Home {
+export class CurrentlyPlaying {
   playingMetadata = injectSelector((state: RootState) => state.tauri);
   stateMetadata = inject(Metadata);
 
diff --git a/src/assets/pause_icon.svg b/src/assets/pause_icon.svg
new file mode 100644
index 0000000..2da26a5
--- /dev/null
+++ b/src/assets/pause_icon.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8.0013C8 7.64768 8.14048 7.30854 8.39052 7.05849C8.64057 6.80844 8.97971 6.66797 9.33333 6.66797H12C12.3536 6.66797 12.6928 6.80844 12.9428 7.05849C13.1929 7.30854 13.3333 7.64768 13.3333 8.0013V24.0013C13.3333 24.3549 13.1929 24.6941 12.9428 24.9441C12.6928 25.1942 12.3536 25.3346 12 25.3346H9.33333C8.97971 25.3346 8.64057 25.1942 8.39052 24.9441C8.14048 24.6941 8 24.3549 8 24.0013V8.0013ZM18.6667 8.0013C18.6667 7.64768 18.8071 7.30854 19.0572 7.05849C19.3072 6.80844 19.6464 6.66797 20 6.66797H22.6667C23.0203 6.66797 23.3594 6.80844 23.6095 7.05849C23.8595 7.30854 24 7.64768 24 8.0013V24.0013C24 24.3549 23.8595 24.6941 23.6095 24.9441C23.3594 25.1942 23.0203 25.3346 22.6667 25.3346H20C19.6464 25.3346 19.3072 25.1942 19.0572 24.9441C18.8071 24.6941 18.6667 24.3549 18.6667 24.0013V8.0013Z" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0003 5.33398H9.33366C8.62641 5.33398 7.94814 5.61494 7.44804 6.11503C6.94794 6.61513 6.66699 7.29341 6.66699 8.00065V24.0007C6.66699 24.7079 6.94794 25.3862 7.44804 25.8863C7.94814 26.3864 8.62641 26.6673 9.33366 26.6673H12.0003C12.7076 26.6673 13.3858 26.3864 13.8859 25.8863C14.386 25.3862 14.667 24.7079 14.667 24.0007V8.00065C14.667 7.29341 14.386 6.61513 13.8859 6.11503C13.3858 5.61494 12.7076 5.33398 12.0003 5.33398ZM22.667 5.33398H20.0003C19.2931 5.33398 18.6148 5.61494 18.1147 6.11503C17.6146 6.61513 17.3337 7.29341 17.3337 8.00065V24.0007C17.3337 24.7079 17.6146 25.3862 18.1147 25.8863C18.6148 26.3864 19.2931 26.6673 20.0003 26.6673H22.667C23.3742 26.6673 24.0525 26.3864 24.5526 25.8863C25.0527 25.3862 25.3337 24.7079 25.3337 24.0007V8.00065C25.3337 7.29341 25.0527 6.61513 24.5526 6.11503C24.0525 5.61494 23.3742 5.33398 22.667 5.33398Z" fill="white"/>
+</svg>
diff --git a/src/assets/play_icon.svg b/src/assets/play_icon.svg
new file mode 100644
index 0000000..712056c
--- /dev/null
+++ b/src/assets/play_icon.svg
@@ -0,0 +1,24 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1058_5186)">
+<g filter="url(#filter0_bd_1058_5186)">
+<path d="M9 5.50039V26.4996C8.99993 26.7635 9.06617 27.0228 9.19205 27.2512C9.31793 27.4797 9.49899 27.6692 9.71694 27.8007C9.93489 27.9321 10.182 28.0009 10.4334 28C10.6847 27.9991 10.9314 27.9286 11.1485 27.7956L28.2907 17.296C28.5065 17.1639 28.6856 16.9747 28.8101 16.7474C28.9345 16.52 29 16.2623 29 16C29 15.7377 28.9345 15.48 28.8101 15.2527C28.6856 15.0253 28.5065 14.8361 28.2907 14.704L11.1485 4.20444C10.9314 4.07142 10.6847 4.0009 10.4334 4.00001C10.182 3.99911 9.93489 4.06787 9.71694 4.19933C9.49899 4.3308 9.31793 4.52032 9.19205 4.74876C9.06617 4.9772 8.99993 5.23647 9 5.50039Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_bd_1058_5186" x="-91" y="-96" width="220" height="224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="50"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1058_5186"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1058_5186" result="effect2_dropShadow_1058_5186"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1058_5186" result="shape"/>
+</filter>
+<clipPath id="clip0_1058_5186">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
-- 
2.51.2