Merge pull request #371 from droans/next

Refactor Expressive scheme

Author: droans

src/components/navigation-bar-expressive.ts

@@ -102,8 +102,9 @@ class MassNavBar extends LitElement {
     const bounce_move = to_width * 0.2;
 
     const bounce_left = Math.max(0, to_left - bounce_move);
-    const bounce_width = bounce_left > 0 ? to_width : to_width - (to_left + bounce_move)
-    const translate_x = bounce_left - from_left;
+    const bounce_width = bounce_left > 0 ? to_width : to_width - bounce_move
+    const extra_left = to_left == 0 ? (bounce_move / 2) : 0;
+    const translate_x = bounce_left - from_left - extra_left;
     const scale_x = bounce_width / from_width;
 
     return {
@@ -118,13 +119,14 @@ class MassNavBar extends LitElement {
     const to_left = to_element.offsetLeft;
     const to_width = to_element.offsetWidth;
 
-    const bounce_move = to_width * 0.1;
+    const bounce_move = to_width * 0.2;
     const navbarWidth = this.navbar.offsetWidth;
     const to_elem_x_end = to_left + to_width;
 
     const bounce_left = to_left + bounce_move;
     const bounce_width = to_elem_x_end >= navbarWidth ? navbarWidth - bounce_left : to_width;
-    const translate_x = bounce_left - from_left;
+    const extra_left = to_elem_x_end >= navbarWidth ? (bounce_move / 2) : 0;
+    const translate_x = bounce_left - from_left - extra_left;
     const scale_x = bounce_width / from_width;
     return {
       transform: `translateX(${translate_x.toString()}px) scaleX(${scale_x.toString()})`,
@@ -153,6 +155,11 @@ class MassNavBar extends LitElement {
     const scale_x = to_width / from_width;
 
     const _keyframes = [
+      
+      {
+        transform: `translateX(${translate_x.toString()}px) scaleX(${scale_x.toString()})`,
+        offset: 0.6,
+      },
       bounce,
       {
         transform: `translateX(${translate_x.toString()}px) scaleX(${scale_x.toString()})`,

src/components/player-artwork.ts

@@ -99,6 +99,10 @@ export class MassPlayerArtwork extends LitElement {
       image: img
     }
     const ev = new CustomEvent('artwork-updated', { detail: detail });
+    const elem = this.shadowRoot?.querySelectorAll('sl-carousel-item')[idx];
+    if (elem) {
+      this.controller.ActivePlayer.activeArtworkElement = elem.firstElementChild as HTMLElement;
+    }
     this.controller.host.dispatchEvent(ev);
     this._timeout = setTimeout(
       () => {
@@ -117,10 +121,10 @@ export class MassPlayerArtwork extends LitElement {
         return item?.playing
       }
     )
-    if (idx >= 0) {
+    if (idx >= 0 && idx != this.carouselElement?.activeSlide) {
       this.currentIdx = idx;
-      this.setActiveSlide(this.currentIdx)
     }
+    this.setActiveSlide(this.currentIdx)
   }
 
   private onSwipe = (ev: SLSwipeEvent) => {

src/controller/active-player.ts

@@ -23,8 +23,12 @@ import { DynamicScheme } from "@material/material-color-utilities";
 import { getGroupVolumeServiceResponse, getGroupVolumeServiceSchema } from "mass-queue-types/packages/mass_queue/actions/get_group_volume";
 import { setGroupVolumeServiceSchema } from "mass-queue-types/packages/mass_queue/actions/set_group_volume";
 import { isActive, jsonMatch, playerHasUpdated } from "../utils/util";
-import { applyDefaultExpressiveScheme, applyExpressiveSchemeFromImage } from "../utils/expressive";
-import { ArtworkUpdatedEventData } from "../const/events";
+import {
+  applyExpressiveScheme,
+  generateDefaultExpressiveSchemeColor,
+  generateExpressiveSchemeFromColor,
+  generateExpressiveSourceColorFromImage
+} from "../utils/expressive.js";
 
 export class ActivePlayerController {
   private _activeEntityConfig: ContextProvider<typeof activeEntityConfContext>;
@@ -42,6 +46,8 @@ export class ActivePlayerController {
   private _config!: Config;
   private _host: HTMLElement;
   private _updatingScheme = false;
+  private _activeArtworkElement?: HTMLElement;
+  private _activeSchemeColor!: number;
 
   constructor(hass: ExtendedHass, config: Config, host: HTMLElement) {
     this._expressiveScheme = new ContextProvider(host, {
@@ -77,7 +83,6 @@ export class ActivePlayerController {
     this._hass = hass;
     this.config = config;
     this._host = host;
-    host.addEventListener("artwork-updated", this.onActiveTrackChange);
     this.setDefaultActivePlayer();
   }
   public set hass(hass: ExtendedHass) {
@@ -135,18 +140,6 @@ export class ActivePlayerController {
       if (player.attributes?.group_members) {
         this.setGroupAttributes();
       }
-      if (
-        isActive(this.hass, this.activeMediaPlayer, this.activeEntityConfig) 
-        && (
-          !this.expressiveScheme
-        || player.attributes.media_content_id != this.activeMediaPlayer.attributes.media_content_id
-        )
-      ) {
-        const img =
-          player.attributes.entity_picture_local ??
-          player.attributes.entity_picture;
-        void this.applyExpressiveSchemeFromImage(img);
-      }
     }
   }
   public get activeMediaPlayer() {
@@ -217,6 +210,17 @@ export class ActivePlayerController {
     return this._activePlayerData.value;
   }
 
+  public set activeArtworkElement(elem: HTMLElement | undefined) {
+    if (!elem) {
+      return
+    }
+    this._activeArtworkElement = elem;
+    this.createAndApplyExpressiveScheme();
+  }
+  public get activeArtworkElement() {
+    return this._activeArtworkElement;
+  }
+
   public async updateActivePlayerData() {
     if (!this.activeMediaPlayer || !this.volumeMediaPlayer || !this.activeEntityID) {
       return;
@@ -235,14 +239,6 @@ export class ActivePlayerController {
     });
     this._host.dispatchEvent(ev);
   }
-  public firstUpdateComplete() {
-    if (
-      !isActive(this.hass, this.activeMediaPlayer, this.activeEntityConfig) ||
-      !this.expressiveScheme
-    ) {
-      this.applyDefaultExpressiveScheme();
-    }
-  }
   private setGroupAttributes() {
     this.groupMembers = this.getGroupedPlayers().map((item) => {
       return item.entity_id;
@@ -334,36 +330,45 @@ export class ActivePlayerController {
     const result = ret.response[entity_id];
     return result;
   }
-  public onActiveTrackChange = (ev: Event) => {
-    const detail = (ev as ArtworkUpdatedEventData).detail;
-    if (detail.type != "current") {
-      return;
-    }
-    const img = detail.image;
-    if (!img || !(this.activeMediaPlayer.state == 'playing') ) {
-      return;
-    }
-    void this.applyExpressiveSchemeFromImage(img);
-  };
-  public applyDefaultExpressiveScheme() {
-    if (!this.config.expressive || this._updatingScheme) {
+  public createAndApplyExpressiveScheme() {
+    void this.createExpressiveSchemeFromArtwork().then(
+      (result) => {
+        if (!result) {
+          return;
+        }
+        this.applyExpressiveScheme();
+      }
+    );
+  }
+  public applyExpressiveScheme() {
+    const scheme = this.expressiveScheme;
+    if (!scheme) {
       return;
     }
-    this._host.getRootNode()
-    this.expressiveScheme = applyDefaultExpressiveScheme(this.hass, this.config.expressive_scheme, this._host);
+    applyExpressiveScheme(scheme, this._host)
   }
-  public async applyExpressiveSchemeFromImage(img: string) {
-    if (!this.config.expressive || this._updatingScheme) {
+  public async createExpressiveSchemeFromArtwork(): Promise<DynamicScheme | undefined> {
+    if (this._updatingScheme) {
       return;
     }
     this._updatingScheme = true;
-    this.expressiveScheme = await applyExpressiveSchemeFromImage(
-      img,
-      this.hass,
-      this.config.expressive_scheme,
-      this._host,
-    );
+    let schemeColor: number; 
+    if (!(this?.activeArtworkElement?.tagName?.toLowerCase() == 'img')) {
+      schemeColor = generateDefaultExpressiveSchemeColor();
+     } else {
+      const src = (this.activeArtworkElement as HTMLImageElement).src;
+      schemeColor = await generateExpressiveSourceColorFromImage(src, this.hass);
+    } 
+    if (schemeColor == this._activeSchemeColor) {
+      this._updatingScheme = false;
+      return;
+    }
+    this._activeSchemeColor = schemeColor;
+    const schemeName = this.config.expressive_scheme;
+    const scheme = generateExpressiveSchemeFromColor(schemeColor, schemeName, this.hass.themes.darkMode);
+    this.expressiveScheme = scheme;
     this._updatingScheme = false;
+    return this.expressiveScheme;
   }
   private async _getAndSetGroupedVolume() {
     const entity = this.activeMediaPlayer.entity_id;
@@ -407,11 +412,10 @@ export class ActivePlayerController {
     return vol;
   }
   public disconnected() {
-    this._host.removeEventListener("artwork-updated", this.onActiveTrackChange);
+    // Intentionally left blank
   }
   public reconnected(hass: ExtendedHass) {
     this.hass = hass;
-    this._host.addEventListener("artwork-updated", this.onActiveTrackChange);
     this.setActivePlayer(this.activeEntityID);
   }
 }

src/main.ts

@@ -323,7 +323,6 @@ export class MusicAssistantPlayerCard extends LitElement {
       //eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const stylesheet = head_styles.styleSheet!;
       document.adoptedStyleSheets.push(stylesheet);
-      this._controller.ActivePlayer.firstUpdateComplete();
     }
     this.addEventListener("section-changed", this.onSectionChangedEvent);
   }