fix(media): use local volume mute behavior

awesomestvi · awesomestvi · commit f1533236a208 · 2026-03-15T18:34:30.000+01:00
diff --git a/src/app/features/media/components/media-card/index.tsx b/src/app/features/media/components/media-card/index.tsx
@@ -67,7 +67,6 @@ export const MediaCard = memo(function MediaCard({
     isMuted,
     isOpen,
     openDialog,
-    thumbnailAlbumArt,
     toggleMute,
     togglePlay,
     volume,
@@ -126,7 +125,6 @@ export const MediaCard = memo(function MediaCard({
             <MediaSmallView
               entityId={id}
               artwork={resolvedAlbumArt}
-              paletteArtwork={thumbnailAlbumArt}
               onArtworkError={handleArtworkError}
               title={title}
               artist={artist}
@@ -146,7 +144,6 @@ export const MediaCard = memo(function MediaCard({
             <MediaMediumView
               entityId={id}
               artwork={resolvedAlbumArt}
-              paletteArtwork={thumbnailAlbumArt}
               onArtworkError={handleArtworkError}
               title={title}
               artist={artist}
@@ -168,7 +165,6 @@ export const MediaCard = memo(function MediaCard({
             <MediaMediumVerticalView
               entityId={id}
               artwork={resolvedAlbumArt}
-              paletteArtwork={thumbnailAlbumArt}
               onArtworkError={handleArtworkError}
               title={title}
               artist={artist}
@@ -196,7 +192,6 @@ export const MediaCard = memo(function MediaCard({
             isOpen={isOpen}
             onOpenChange={closeDialog}
             artwork={resolvedAlbumArt}
-            paletteArtwork={thumbnailAlbumArt}
             onArtworkError={handleArtworkError}
             title={title}
             artist={artist}
diff --git a/src/app/features/media/components/media-card/use-media-card-controller.ts b/src/app/features/media/components/media-card/use-media-card-controller.ts
@@ -1,10 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useAuth } from '@/app/contexts/auth-context';
-import { fetchMediaThumbnailDataUrl } from '@/app/features/media/utils/media-thumbnail';
-import { useHomeAssistant, useI18n } from '@/app/hooks';
+import { useI18n } from '@/app/hooks';
 import { homeAssistantService } from '@/app/services/home-assistant.service';
-import { homeAssistantSelectors } from '@/app/stores/selectors';
 import {
   resolveHomeAssistantAbsoluteUrl,
   resolveHomeAssistantProxyUrl,
@@ -41,18 +39,16 @@ export function useMediaCardController({
   initialPositionUpdatedAt,
 }: UseMediaCardControllerParams) {
   const { config: authConfig } = useAuth();
-  const connected = useHomeAssistant(homeAssistantSelectors.connected);
-  const connection = useHomeAssistant(homeAssistantSelectors.connection);
   const { t } = useI18n();
   const [state, setState] = useState(initialState);
   const [volume, setVolume] = useState(initialVolume);
   const [isMuted, setIsMuted] = useState(initialMuted);
+  const [previousVolume, setPreviousVolume] = useState(initialVolume > 0 ? initialVolume : 50);
   const [isOpen, setIsOpen] = useState(false);
   const [elapsedSeconds, setElapsedSeconds] = useState(initialElapsedSeconds ?? 0);
   const [durationSeconds, setDurationSeconds] = useState(initialDurationSeconds ?? 0);
   const [failedArtworkUrl, setFailedArtworkUrl] = useState<string | null>(null);
   const [resolvedAlbumArt, setResolvedAlbumArt] = useState<string | null>(null);
-  const [thumbnailAlbumArt, setThumbnailAlbumArt] = useState<string | null>(null);
   const artworkRequestKey = [entityId, artworkKey].filter(Boolean).join('::');
   const fallbackArtwork = entityPicture
     ? import.meta.env.DEV
@@ -66,11 +62,14 @@ export function useMediaCardController({
 
   useEffect(() => {
     setVolume(initialVolume);
+    if (initialVolume > 0) {
+      setPreviousVolume(initialVolume);
+    }
   }, [initialVolume]);
 
   useEffect(() => {
-    setIsMuted(initialMuted);
-  }, [initialMuted]);
+    setIsMuted(initialMuted || initialVolume === 0);
+  }, [initialMuted, initialVolume]);
 
   useEffect(() => {
     setElapsedSeconds(initialElapsedSeconds ?? 0);
@@ -82,58 +81,22 @@ export function useMediaCardController({
 
   useEffect(() => {
     if (!artworkRequestKey) {
-      setThumbnailAlbumArt(null);
       setResolvedAlbumArt(
         isFailedArtworkCandidate(fallbackArtwork, failedArtworkUrl) ? null : fallbackArtwork
       );
       return;
     }
-
-    let cancelled = false;
-
-    void (async () => {
-      if (!connected || !connection) {
-        if (!cancelled) {
-          setResolvedAlbumArt(
-            isFailedArtworkCandidate(fallbackArtwork, failedArtworkUrl) ? null : fallbackArtwork
-          );
-        }
-        return;
-      }
-
-      const thumbnailDataUrl = await fetchMediaThumbnailDataUrl(entityId, connection).catch(
-        () => null
-      );
-      if (thumbnailDataUrl && !isFailedArtworkCandidate(thumbnailDataUrl, failedArtworkUrl)) {
-        if (cancelled) {
-          return;
-        }
-
-        setThumbnailAlbumArt(thumbnailDataUrl);
-        setResolvedAlbumArt(thumbnailDataUrl);
-        return;
-      }
-
-      if (!cancelled) {
-        setThumbnailAlbumArt(null);
-        setResolvedAlbumArt(
-          isFailedArtworkCandidate(fallbackArtwork, failedArtworkUrl) ? null : fallbackArtwork
-        );
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [artworkRequestKey, connected, connection, entityId, failedArtworkUrl, fallbackArtwork]);
+    setResolvedAlbumArt(
+      isFailedArtworkCandidate(fallbackArtwork, failedArtworkUrl) ? null : fallbackArtwork
+    );
+  }, [artworkRequestKey, failedArtworkUrl, fallbackArtwork]);
 
   useEffect(() => {
     if (!artworkRequestKey) {
       return;
     }
 
     setFailedArtworkUrl(null);
-    setThumbnailAlbumArt(null);
   }, [artworkRequestKey]);
 
   const isPlaying = state === 'playing';
@@ -193,24 +156,45 @@ export function useMediaCardController({
   const toggleMute = useCallback(() => {
     const nextMuted = !isMuted;
     setIsMuted(nextMuted);
+    if (nextMuted) {
+      const nextPreviousVolume = volume > 0 ? volume : previousVolume;
+      setPreviousVolume(nextPreviousVolume);
+      setVolume(0);
+      void runAction(
+        () => homeAssistantService.setMediaPlayerVolume(entityId, 0),
+        t('media.feedback.updateVolumeFailed')
+      );
+      return;
+    }
+
+    const restoredVolume = previousVolume > 0 ? previousVolume : 50;
+    setVolume(restoredVolume);
     void runAction(
-      () => homeAssistantService.setMediaPlayerMute(entityId, nextMuted),
+      () => homeAssistantService.setMediaPlayerVolume(entityId, restoredVolume),
       t('media.feedback.updateVolumeFailed')
     );
-  }, [entityId, isMuted, runAction, t]);
+  }, [entityId, isMuted, previousVolume, runAction, t, volume]);
 
   const handleVolumeChange = useCallback(
     (nextVolume: number) => {
       setVolume(nextVolume);
+      if (nextVolume > 0) {
+        setPreviousVolume(nextVolume);
+      }
+
       if (nextVolume > 0 && isMuted) {
         setIsMuted(false);
-        void runAction(async () => {
-          await homeAssistantService.setMediaPlayerMute(entityId, false);
-          await homeAssistantService.setMediaPlayerVolume(entityId, nextVolume);
-        }, t('media.feedback.updateVolumeFailed'));
+        void runAction(
+          () => homeAssistantService.setMediaPlayerVolume(entityId, nextVolume),
+          t('media.feedback.updateVolumeFailed')
+        );
         return;
       }
 
+      if (nextVolume === 0) {
+        setIsMuted(true);
+      }
+
       void runAction(
         () => homeAssistantService.setMediaPlayerVolume(entityId, nextVolume),
         t('media.feedback.updateVolumeFailed')
@@ -252,7 +236,6 @@ export function useMediaCardController({
 
   return {
     albumArt: resolvedAlbumArt,
-    thumbnailAlbumArt,
     closeDialog,
     durationSeconds,
     elapsedSeconds,
diff --git a/src/app/features/media/components/media/media-dialog.tsx b/src/app/features/media/components/media/media-dialog.tsx
@@ -13,7 +13,6 @@ interface MediaDialogProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
   artwork?: string | null;
-  paletteArtwork?: string | null;
   onArtworkError?: (imageUrl?: string | null) => void;
   title: string;
   artist: string;
@@ -34,7 +33,6 @@ export function MediaDialog({
   isOpen,
   onOpenChange,
   artwork,
-  paletteArtwork,
   onArtworkError,
   title,
   artist,
@@ -53,13 +51,7 @@ export function MediaDialog({
   const { t } = useI18n();
   const surface = getThemeSurfaceTokens(theme);
   const isGlass = theme === 'glass';
-  const palette = useMediaArtworkColors(
-    artwork,
-    theme,
-    entityId,
-    `${title}::${artist}`,
-    paletteArtwork
-  );
+  const palette = useMediaArtworkColors(artwork, theme, `${entityId}::${title}::${artist}`);
   const displayRemaining = formatMediaTime(Math.max(0, durationSeconds - elapsedSeconds));
   const displayDuration = durationSeconds > 0 ? formatMediaTime(durationSeconds) : '--:--';
   const presetButton = (isActive: boolean) =>
diff --git a/src/app/features/media/components/media/media-medium-vertical-view.tsx b/src/app/features/media/components/media/media-medium-vertical-view.tsx
@@ -13,7 +13,6 @@ import { useMediaArtworkColors, withAlpha } from './use-media-artwork-colors';
 interface MediaMediumVerticalViewProps {
   entityId: string;
   artwork?: string | null;
-  paletteArtwork?: string | null;
   onArtworkError?: (imageUrl?: string | null) => void;
   title: string;
   artist: string;
@@ -34,7 +33,6 @@ interface MediaMediumVerticalViewProps {
 export function MediaMediumVerticalView({
   entityId,
   artwork,
-  paletteArtwork,
   onArtworkError,
   title,
   artist,
@@ -54,13 +52,7 @@ export function MediaMediumVerticalView({
   const { t } = useI18n();
   const displayVolume = Math.max(0, Math.min(100, isMuted ? 0 : volume));
   const stateSurface = getCardStateSurfaceTokens(theme, isActive);
-  const palette = useMediaArtworkColors(
-    artwork,
-    theme,
-    entityId,
-    `${title}::${artist}`,
-    paletteArtwork
-  );
+  const palette = useMediaArtworkColors(artwork, theme, `${entityId}::${title}::${artist}`);
   const iconTone = stateSurface.primaryTextClassName;
   const subtitleTone = stateSurface.secondaryTextClassName;
   const displayRemaining = formatMediaTime(Math.max(0, durationSeconds - elapsedSeconds));
diff --git a/src/app/features/media/components/media/media-medium-view.tsx b/src/app/features/media/components/media/media-medium-view.tsx
@@ -12,7 +12,6 @@ import { useMediaArtworkColors, withAlpha } from './use-media-artwork-colors';
 interface MediaMediumViewProps {
   entityId: string;
   artwork?: string | null;
-  paletteArtwork?: string | null;
   onArtworkError?: (imageUrl?: string | null) => void;
   title: string;
   artist: string;
@@ -34,7 +33,6 @@ interface MediaMediumViewProps {
 export function MediaMediumView({
   entityId,
   artwork,
-  paletteArtwork,
   onArtworkError,
   title,
   artist,
@@ -55,13 +53,7 @@ export function MediaMediumView({
   const { t } = useI18n();
   const displayVolume = Math.max(0, Math.min(100, isMuted ? 0 : volume));
   const stateSurface = getCardStateSurfaceTokens(theme, isActive);
-  const palette = useMediaArtworkColors(
-    artwork,
-    theme,
-    entityId,
-    `${title}::${artist}`,
-    paletteArtwork
-  );
+  const palette = useMediaArtworkColors(artwork, theme, `${entityId}::${title}::${artist}`);
   const iconTone = stateSurface.primaryTextClassName;
   const subtitleTone = stateSurface.secondaryTextClassName;
   const displayRemaining = formatMediaTime(Math.max(0, durationSeconds - elapsedSeconds));
diff --git a/src/app/features/media/components/media/media-small-view.tsx b/src/app/features/media/components/media/media-small-view.tsx
@@ -15,7 +15,6 @@ import { useMediaArtworkColors, withAlpha } from './use-media-artwork-colors';
 interface MediaSmallViewProps {
   entityId: string;
   artwork?: string | null;
-  paletteArtwork?: string | null;
   onArtworkError?: (imageUrl?: string | null) => void;
   title: string;
   artist: string;
@@ -35,7 +34,6 @@ interface MediaSmallViewProps {
 export function MediaSmallView({
   entityId,
   artwork,
-  paletteArtwork,
   onArtworkError,
   title,
   artist,
@@ -76,13 +74,7 @@ export function MediaSmallView({
   const subtitleTone = stateSurface.secondaryTextClassName;
   const displayRemaining = formatMediaTime(Math.max(0, durationSeconds - elapsedSeconds));
   const controls = getMediaControlStyles(theme);
-  const palette = useMediaArtworkColors(
-    artwork,
-    theme,
-    entityId,
-    `${title}::${artist}`,
-    paletteArtwork
-  );
+  const palette = useMediaArtworkColors(artwork, theme, `${entityId}::${title}::${artist}`);
   const controlSizes = getCardActionControlSizes('small');
   const primaryControlSizes = getCardActionControlSizes('medium');
   const subduedFallback = !artwork && !isActive;
diff --git a/src/app/features/media/components/media/use-media-artwork-colors.ts b/src/app/features/media/components/media/use-media-artwork-colors.ts
diff --git a/src/app/features/media/utils/media-thumbnail.ts b/src/app/features/media/utils/media-thumbnail.ts
