feat(): fix

package.json

@@ -17,15 +17,15 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "17.0.0-rc.0",
-    "@angular/common": "17.0.0-rc.0",
-    "@angular/core": "17.0.0-rc.0",
-    "@angular/forms": "17.0.0-rc.0",
-    "@angular/platform-browser": "17.0.0-rc.0",
-    "@angular/platform-browser-dynamic": "17.0.0-rc.0",
-    "@angular/router": "17.0.0-rc.0",
-    "@angular/service-worker": "17.0.0-rc.0",
-    "@angular/ssr": "^17.0.0-next.0",
+    "@angular/animations": "17.0.0",
+    "@angular/common": "17.0.0",
+    "@angular/core": "17.0.0",
+    "@angular/forms": "17.0.0",
+    "@angular/platform-browser": "17.0.0",
+    "@angular/platform-browser-dynamic": "17.0.0",
+    "@angular/router": "17.0.0",
+    "@angular/service-worker": "17.0.0",
+    "@angular/ssr": "^17.0.0",
     "@capacitor/android": "latest",
     "@capacitor/app": "5.0.0",
     "@capacitor/browser": "5.0.0",
@@ -42,21 +42,22 @@
     "@request-metrics/browser-agent": "1.11.1",
     "ionicons": "7.2.1",
     "pixi.js": "^7.3.0",
+    "rollup-plugin-visualizer": "5.9.2",
     "rxjs": "7.8.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.0.0-next.9",
+    "@angular-devkit/build-angular": "17.0.0",
     "@angular-eslint/builder": "16.0.3",
     "@angular-eslint/eslint-plugin": "16.0.3",
     "@angular-eslint/eslint-plugin-template": "16.0.3",
     "@angular-eslint/schematics": "16.0.3",
     "@angular-eslint/template-parser": "16.0.3",
-    "@angular/cli": "17.0.0-next.9",
-    "@angular/compiler": "17.0.0-rc.0",
-    "@angular/compiler-cli": "17.0.0-rc.0",
-    "@angular/language-service": "17.0.0-rc.0",
+    "@angular/cli": "17.0.0",
+    "@angular/compiler": "17.0.0",
+    "@angular/compiler-cli": "17.0.0",
+    "@angular/language-service": "17.0.0",
     "@capacitor/cli": "latest",
     "@types/node": "12.12.47",
     "@typescript-eslint/eslint-plugin": "^5.59.2",

src/app/app.component.html

@@ -104,7 +104,8 @@
               Log Out
             </ion-item>
           </ion-menu-toggle>
-          } @else {
+          } 
+          @else {
           <ion-menu-toggle autoHide="false">
             <ion-item
               (click)="login()"

src/app/app.component.ts

@@ -38,8 +38,6 @@ import {
   IonRouterLink
 } from '@ionic/angular/standalone';
 
-// import { Capacitor } from '@capacitor/core'
-// import { Browser } from '@capacitor/browser';
 
 @Component({
   selector: 'app-root',
@@ -100,8 +98,6 @@ export class AppComponent implements OnInit {
       () => this.isAuthorized.set(this.musicKitInstance.isAuthorized)
     );
 
-
-    // console.log(Capacitor.isNativePlatform)
     // if (Capacitor.isNativePlatform) {
     //   this.overridewindow();
     // }

src/app/components/background-glow/background-glow.ts

@@ -119,7 +119,6 @@ export class BackgroundGlowComponent implements AfterViewInit, OnDestroy, OnChan
 
     const saturationFilter = new AdjustmentFilter();
     saturationFilter.saturation = 2.75;
-    // saturationFilter.contrast = 1// 1.9;
     saturationFilter.brightness = 0.7;
 
     this.container.filters = [twistingFilter, n, o, h, a, l, saturationFilter];
@@ -164,7 +163,6 @@ export class BackgroundGlowComponent implements AfterViewInit, OnDestroy, OnChan
       if (this.container.children.length > 4) {
         this.container.removeChildren(4);
       }
-      // this.addSpritesToContainer(incom)
       this.addSpritesToContainer(incomingImgArray[0],incomingImgArray[1],incomingImgArray[2],incomingImgArray[3]);
 
       const currentContainerCopy = this.container.children.slice(0, 4);

src/app/components/player-modal/player-modal.component.html

@@ -6,8 +6,21 @@
 <div class="track-wrapper" #wrapper>
   <div class="track-player">
     <div class="song-info">
-      <ion-thumbnail>
+      <ion-thumbnail
+  [ngClass]="{
+              paused:
+                player.playbackState() === playbackStates.PAUSED ||
+                player.playbackState() === playbackStates.NONE ||
+                player.playbackState() === playbackStates.STOPPED
+            }"
+      >
         <now-playing-artwork
+          [ngClass]="{
+              paused:
+                player.playbackState() === playbackStates.PAUSED ||
+                player.playbackState() === playbackStates.NONE ||
+                player.playbackState() === playbackStates.STOPPED
+            }"
           [src]=" player.nowPlaying()?.attributes?.artwork?.url ?? 'assets/imgs/default.svg' | formatArtworkUrl: 500 "
           alt="The album art work cover"
         ></now-playing-artwork>

src/app/components/preview-header/preview-header.component.html

@@ -2,61 +2,70 @@
   alt="The artwork for the album"
   [src]="
     collection?.attributes?.artwork?.url ?? 'assets/imgs/default.svg'
-      | formatArtworkUrl : 500
+      | formatArtworkUrl: 500
   "
 ></lazy-img>
 <div class="album-detail">
-  @if(collection){
-
+  @if (collection) {
     <h3>{{ collection?.attributes?.name }}</h3>
     <h3 class="name">
-      <ion-text color="primary">{{ collection?.attributes?.artistName ? collection.attributes.artistName : collection.attributes.curatorName }}</ion-text>
+      <ion-text color="primary">{{
+        collection?.attributes?.artistName
+          ? collection.attributes.artistName
+          : collection.attributes.curatorName
+      }}</ion-text>
     </h3>
-    <p id="editorial-notes">
-      @if(collection?.attributes?.description){
-        <ion-note>
-          {{ collection.attributes.description.standard }}
-        </ion-note>
-      }
-      @if(collection?.attributes?.editorialNotes){
-        <ion-note [innerHtml]="collection.attributes.editorialNotes?.standard" />
+
+    <p class="genre-names">
+      @if ( !collection.attributes.description && collection.attributes.genreNames) {
+        <ion-note >{{ collection.attributes?.genreNames[0] }} • {{ collection?.attributes?.releaseDate | date: 'YYYY' }}</ion-note >
       }
     </p>
-    <p>
-      @if(!collection.attributes.description && collection.attributes.genreNames){
-        <ion-note>
-          {{ collection.attributes?.genreNames[0] }}
-        </ion-note>
+
+    <p class="editorial-notes" (click)="showModal.set(true)">
+      @if (collection?.attributes?.description) {
+        <ion-note>{{ collection.attributes.description.standard }}</ion-note>
+      }
+      @if (collection?.attributes?.editorialNotes) {
+        <ion-note [innerHtml]="collection.attributes.editorialNotes?.standard" />
       }
     </p>
 
     <ion-modal
-      trigger="editorial-notes"
       [presentingElement]="routerOutlet"
+      [isOpen]="showModal()"
+      class="editorial-modal"
     >
       <ng-template>
         <ion-header>
           <ion-toolbar>
             <ion-title>{{ collection.attributes.name }}</ion-title>
             <ion-buttons slot="end">
-              <ion-button color="primary" fill="clear" (click)="dismiss()"
+              <ion-button
+                color="primary"
+                fill="clear"
+                (click)="showModal.set(false)"
                 >Done</ion-button
               >
             </ion-buttons>
           </ion-toolbar>
         </ion-header>
         <ion-content class="ion-padding">
-          @if(collection.attributes.editorialNotes){<p class="editorial-notes" [innerHTML]="collection.attributes.editorialNotes.standard" ></p>}
-          @else{ <p [innerHTML]="collection.attributes.description.standard"></p> }
+          @if (collection.attributes.editorialNotes) {
+            <p
+              class="modal-editorial-notes"
+              [innerHTML]="collection.attributes.editorialNotes.standard"
+            ></p>
+          } @else {
+            <p [innerHTML]="collection.attributes.description.standard"></p>
+          }
         </ion-content>
       </ng-template>
     </ion-modal>
-
-  }
-  @else{
-    <h3> <ion-skeleton-text animated style="width: 80%" /> </h3>
-    <p> <ion-skeleton-text animated style="width: 70%" /> </p>
-    <p> <ion-skeleton-text animated style="width: 60%" /> </p>
+  } @else {
+    <h3><ion-skeleton-text animated style="width: 80%" /></h3>
+    <p><ion-skeleton-text animated style="width: 70%" /></p>
+    <p><ion-skeleton-text animated style="width: 60%" /></p>
   }
   <ion-buttons>
     <ion-button (click)="togglePlay()" color="light" fill="solid">

src/app/components/preview-header/preview-header.component.scss

@@ -1,8 +1,8 @@
 :host {
-  padding: 16px 16px 24px 16px;
+  padding-bottom: 16px;
+  padding-top: 16px;
   display: grid;
   grid-template-columns: 40% 60%;
-  /* overflow: hidden; */
   align-items: center;
   justify-content: flex-start;
 }
@@ -24,48 +24,51 @@ lazy-img {
   aspect-ratio: 1/1;
   max-width: 324px;
   max-height: 324px;
+  width: auto;
+  height: auto;
   clip-path: inset(0 round 6px);
   overflow: hidden;
   box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
   margin: auto;
 }
-#editorial-notes:hover{ 
-  cursor: pointer; 
-}
+
 .album-detail {
   padding: 0 16px;
   z-index: 1;
   text-overflow: ellipsis;
-  white-space: nowrap;
   overflow: hidden;
   width: 100%;
   h3,
   p {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  p.editorial-notes {
-    overflow: unset;
-    text-overflow: unset;
-    color: var(--ion-color-step-600, #666666);
-    font-size: 14px;
 
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    white-space: break-spaces;
+  .editorial-notes {
+    ion-note {
+      text-align: start;
+      color: var(--ion-color-step-600, #666666);
+      line-clamp: 2;
+      -webkit-line-clamp: 2;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      text-wrap: balanced
+    }
   }
-  h3 {
-    font-weight: 800;
-  }
-  .name {
-    font-weight: bold;
+  .editorial-notes:hover {
+    cursor: pointer;
   }
   ion-button {
     width: 50%;
   }
 }
+hr {
+  background: var(--ion-color-step-100);
+  padding-bottom: 0;
+  width: 95%;
+  margin-right: 0;
+}
 @media (max-width: 650px) {
   :host,
   .album-info {
@@ -82,5 +85,23 @@ lazy-img {
   }
   .album-detail {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 0;
+      &:first-child {
+        margin-top: 8px;
+      }
+    }
+    p.genre-names {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    .editorial-notes {
+      order: 5;
+    }
   }
 }

src/app/components/preview-header/preview-header.component.ts

@@ -1,12 +1,11 @@
-import { JsonPipe, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   inject,
   Input,
   Output,
-  ViewChild,
+  signal,
 } from '@angular/core';
 import {
   IonNote,
@@ -26,6 +25,7 @@ import { addIcons } from 'ionicons';
 import { FormatArtworkUrlPipe } from '../../pipes/formatArtworkUrl/format-artwork-url.pipe';
 import { LazyImgComponent } from '../lazy-img/lazy-img.component';
 import { play, shuffle } from 'ionicons/icons';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'preview-header',
@@ -34,10 +34,8 @@ import { play, shuffle } from 'ionicons/icons';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgIf,
     FormatArtworkUrlPipe,
     LazyImgComponent,
-    JsonPipe,
     IonText,
     IonNote,
     IonModal,
@@ -50,22 +48,20 @@ import { play, shuffle } from 'ionicons/icons';
     IonSkeletonText,
     IonIcon,
     IonRouterOutlet,
+    DatePipe
   ],
 })
 export class PreviewHeaderComponent {
-  @Output() playCollection: EventEmitter<{ shuffle: boolean }> =
-    new EventEmitter();
+  @Output() playCollection: EventEmitter<{ shuffle: boolean }> = new EventEmitter();
   @Input() collection: any = null;
-  @ViewChild(IonModal) modal: IonModal;
 
+  public showModal = signal(false);
   routerOutlet = inject(IonRouterOutlet).nativeEl;
+
   constructor() {
     addIcons({ play, shuffle });
   }
   togglePlay(shuffle = false): void {
     this.playCollection.emit({ shuffle });
   }
-  async dismiss() {
-    await this.modal.dismiss();
-  }
 }

src/app/components/song-item/song-item.component.html

@@ -8,7 +8,7 @@
   <ng-content></ng-content>
   @if(index !== null){
   <ion-text color="primary" slot="start">
-    <p class="index">{{ index + 1 }}</p>
+    <p class="index">{{ index }}</p>
   </ion-text>
   } @if(song){
   <ion-label>