updates

package.json

@@ -34,7 +34,7 @@
     "@capacitor/local-notifications": "5.0.0",
     "@capacitor/splash-screen": "5.0.0",
     "@capacitor/status-bar": "^5.0.6",
-    "@ionic/angular": "7.5.3",
+    "@ionic/angular": "7.5.5",
     "@ionic/angular-toolkit": "9.0.0",
     "@pixi/filter-adjustment": "^5.1.1",
     "@pixi/filter-kawase-blur": "^5.1.1",

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

@@ -1,12 +1,12 @@
 import {
-  AfterViewInit,
   Component,
   ElementRef,
   Input,
   OnChanges,
   OnDestroy,
   SimpleChanges,
   ViewChild,
+  AfterViewInit,
 } from '@angular/core';
 import {
   Application,
@@ -27,15 +27,17 @@ import { KawaseBlurFilter } from '@pixi/filter-kawase-blur';
   template: `<canvas #canvas width="100" height="100"></canvas>`,
   styleUrls: ['./background-glow.scss'],
 })
-export class BackgroundGlowComponent implements AfterViewInit, OnDestroy, OnChanges {
+export class BackgroundGlowComponent
+  implements OnDestroy, OnChanges, AfterViewInit
+{
   @Input() src: string;
   @ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement>;
 
   private container: Container | null;
   private app: Application<ICanvas>;
 
   reduceMotionQuery = matchMedia('(prefers-reduced-motion)');
-  ngAfterViewInit() {
+  createApp() {
     const width = window.innerWidth;
     const height = window.innerHeight;
     this.app = new Application({
@@ -83,7 +85,6 @@ export class BackgroundGlowComponent implements AfterViewInit, OnDestroy, OnChan
       r as DisplayObject,
     );
   }
-
   initAnimation() {
     this.container = new Container();
     this.app.stage.addChild(this.container as DisplayObject);
@@ -148,9 +149,9 @@ export class BackgroundGlowComponent implements AfterViewInit, OnDestroy, OnChan
     colorOverlayContainer.addChild(_ as DisplayObject);
     this.app.stage.addChild(f as DisplayObject);
   }
-
+  
   updateArtwork(img: string) {
-    if (this.app && img !== 'assets/imgs/default.svg') {
+    if (this.app) {
       const incomingTexture = Texture.from(img);
       const incomingImgArray = [];
 
@@ -163,11 +164,16 @@ export class BackgroundGlowComponent implements AfterViewInit, OnDestroy, OnChan
       if (this.container.children.length > 4) {
         this.container.removeChildren(4);
       }
-      this.addSpritesToContainer(incomingImgArray[0],incomingImgArray[1],incomingImgArray[2],incomingImgArray[3]);
+      this.addSpritesToContainer(
+        incomingImgArray[0],
+        incomingImgArray[1],
+        incomingImgArray[2],
+        incomingImgArray[3],
+      );
 
       const currentContainerCopy = this.container.children.slice(0, 4);
       let opacityDelta = 1;
-      const currentRotationValArray = currentContainerCopy.map((h) => h.rotation);
+      const currentRotationValArray = currentContainerCopy.map( (h) => h.rotation,);
       this.app.ticker.add(() => {
         const rotationSpeed = 0.4;
         const opacitySpeed = this.app.ticker.deltaMS / 33.33333;
@@ -216,15 +222,17 @@ export class BackgroundGlowComponent implements AfterViewInit, OnDestroy, OnChan
       });
     }
   }
-
-  async ngOnChanges({ src }: SimpleChanges) {
-    if (src.currentValue !== 'assets/imgs/default.svg') {
+  ngAfterViewInit() {
+    this.createApp();
+  }
+  ngOnChanges({ src }: SimpleChanges) {
+    if (!src.firstChange && this.app != null) {
       this.updateArtwork(src.currentValue);
     }
   }
 
   ngOnDestroy(): void {
-    this.app.destroy(true, {
+    this.app?.destroy(true, {
       children: true,
       texture: true,
       baseTexture: true,

src/app/components/now-playing-artwork/now-playing-artwork.component.scss

@@ -61,6 +61,66 @@
     }
   }
 }
+
+@media (orientation: portrait) {
+  // .track-wrapper.animation-start {
+  //     :host.paused {
+  //       lazy-img { transform: scale3d(1,1,1) !important; }
+  //     }
+  // }
+
+  .queue-active {
+    // &.animation-done {
+    //   :host.paused {
+    //     lazy-img {
+    //       transform: unset !important;
+    //     }
+    //   }
+    // }
+
+    :host {
+      --lazy-transition-duration: 250ms;
+      .shadow { opacity: 0 }
+      // lazy-img {
+      //   transform: scale3d(1, 1, 1);
+      // }
+
+      &.paused {
+        lazy-img {
+          transform: scale3d(1, 1, 1);
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 // lazy-img {
 //   animation: animateShadow 3s infinite;
@@ -79,6 +139,20 @@
 //   }
 // }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // lazy-img::after {
 //   content: '';
 //   height: 100%;
@@ -90,7 +164,7 @@
 //   z-index: -1;
 //   filter: blur(12px);
 //   transform: scale3d(0.9, 0.9, 0.9);
-//   transform: scale3d(1.1, 1.1, 1.1) translate3d(0, 12px, 0);
+//   animation: pseudoEl 3s infinite;
 // }
 // @keyframes pseudoEl {
 //   0%, 100% {
@@ -100,35 +174,3 @@
 //     transform: scale3d(1.1, 1.1, 1.1) translate3d(0, 12px, 0);
 //   }
 // }
-
-@media (orientation: portrait) {
-  // .track-wrapper.animation-start {
-  //     :host.paused {
-  //       lazy-img { transform: scale3d(1,1,1) !important; }
-  //     }
-  // }
-
-  .queue-active {
-    // &.animation-done {
-    //   :host.paused {
-    //     lazy-img {
-    //       transform: unset !important;
-    //     }
-    //   }
-    // }
-
-    :host {
-      --lazy-transition-duration: 250ms;
-      .shadow { opacity: 0 }
-      // lazy-img {
-      //   transform: scale3d(1, 1, 1);
-      // }
-
-      &.paused {
-        lazy-img {
-          transform: scale3d(1, 1, 1);
-        }
-      }
-    }
-  }
-}

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

@@ -55,7 +55,7 @@ ion-content {
   z-index: 1;
 
   display: grid;
-  grid-template-rows: 70% auto;
+  grid-template-rows: 70% 30%;
   grid-template-areas:
     'now-playing'
     'controls';
@@ -255,7 +255,7 @@ ion-button.active {
   }
   .track-wrapper.queue-active {
     .track-player {
-      grid-template-rows: auto 50% 35%;
+      grid-template-rows: auto 50% 30%;
         // grid-template-rows: 65% 35%;
 
       grid-template-areas:

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

@@ -53,7 +53,7 @@ lazy-img {
       display: -webkit-box;
       overflow: hidden;
       -webkit-box-orient: vertical;
-      text-wrap: balanced
+      text-wrap: balance;
     }
   }
   .editorial-notes:hover {

src/app/components/queue-list/queue-list.html

@@ -4,9 +4,12 @@ <h3>
   </h3>
   <ng-content></ng-content>
 </div>
+
 <div class="queue-scroller" [@listAnimation]="queue.length">
+  <!-- <song-item *ngFor="let song of queue"></song-item> -->
   @for(song of queue; let i = $index; track song.id){
-  <song-item color="white" [song]="song" (click)="playAt.emit({$event, song})">
+<!-- [style.view-transition-name]="'song-item-'+ song.id" -->
+  <song-item color="white" [song]="song" (click)="playAt.emit({$event, song})" >
     <ion-thumbnail slot="start">
       <lazy-img
         [src]=" song.attributes.artwork?.url ?? 'assets/imgs/default.svg' | formatArtworkUrl : 60 "

src/app/components/song-contenxt-menu/song-context-menu.component.ts

@@ -44,6 +44,6 @@ export class SongContextMenuComponent {
 
   async playNext() {
     await this.#popoverCtrl.dismiss();
-    await this.#api.playNext(this.song.type, [this.song.id]);
+    await this.#api.playNext('song', this.song.id);
   }
 }

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

@@ -60,7 +60,6 @@ export class SongItemComponent {
     });
   }
   async showMore(e: any) {
-    console.log('click')
     e.stopPropagation();
     const popover = await this.popoverCtrl.create({
       component: SongContextMenuComponent,