diff --git a/src/features/app/hooks/useLiquidGlassEffect.test.tsx b/src/features/app/hooks/useLiquidGlassEffect.test.tsx index 665ffcbf..33c59e28 100644 --- a/src/features/app/hooks/useLiquidGlassEffect.test.tsx +++ b/src/features/app/hooks/useLiquidGlassEffect.test.tsx @@ -74,6 +74,25 @@ describe("useLiquidGlassEffect", () => { }); }); + it("reapplies liquid glass after resize", async () => { + vi.mocked(isGlassSupported).mockResolvedValue(true); + + renderHook(() => useLiquidGlassEffect({ reduceTransparency: false })); + + await waitFor(() => { + expect(setLiquidGlassEffect).toHaveBeenCalled(); + }); + const beforeResizeCalls = vi.mocked(setLiquidGlassEffect).mock.calls.length; + + window.dispatchEvent(new Event("resize")); + + await waitFor(() => { + expect(vi.mocked(setLiquidGlassEffect).mock.calls.length).toBeGreaterThan( + beforeResizeCalls, + ); + }); + }); + it("applies Acrylic effect on Windows when liquid glass is unsupported", async () => { vi.mocked(isGlassSupported).mockResolvedValue(false); setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64)"); diff --git a/src/features/app/hooks/useLiquidGlassEffect.ts b/src/features/app/hooks/useLiquidGlassEffect.ts index 8601af0a..56721cdd 100644 --- a/src/features/app/hooks/useLiquidGlassEffect.ts +++ b/src/features/app/hooks/useLiquidGlassEffect.ts @@ -20,7 +20,8 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) { const apply = async () => { try { - const window = getCurrentWindow(); + const windowHandle = getCurrentWindow(); + if (reduceTransparency) { if (supportedRef.current === null) { supportedRef.current = await isGlassSupported(); @@ -28,7 +29,7 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) { if (supportedRef.current) { await setLiquidGlassEffect({ enabled: false }); } - await window.setEffects({ effects: [] }); + await windowHandle.setEffects({ effects: [] }); return; } @@ -39,7 +40,7 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) { return; } if (supportedRef.current) { - await window.setEffects({ effects: [] }); + await windowHandle.setEffects({ effects: [] }); await setLiquidGlassEffect({ enabled: true, cornerRadius: 16, @@ -54,7 +55,7 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) { const isWindows = userAgent.includes("Windows"); if (isWindows) { - await window.setEffects({ + await windowHandle.setEffects({ effects: [Effect.Acrylic], state: EffectState.Active, }); @@ -64,7 +65,7 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) { if (!isMac && !isLinux) { return; } - await window.setEffects({ + await windowHandle.setEffects({ effects: [Effect.HudWindow], state: EffectState.Active, radius: 16, @@ -84,9 +85,16 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) { }; void apply(); + const handleResize = () => { + if (!cancelled && !reduceTransparency) { + void apply(); + } + }; + window.addEventListener("resize", handleResize); return () => { cancelled = true; + window.removeEventListener("resize", handleResize); }; }, [onDebug, reduceTransparency]); }