mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-15 13:03:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Background): make the background filters an overlay to prevent juttery transition of styles being added AFTER completion

Browse Source
This commit is contained in:
alexsparkes
2025-10-31 13:56:03 +00:00
parent 94c92f7216
commit ef22e91b07
6 changed files with 85 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/features/background/hooks/useBackgroundEvents.js
View File

@@ -1,6 +1,6 @@
import { useEffect } from 'react';
import EventBus from 'utils/eventbus';
import { getBackgroundFilterStyle } from '../api/backgroundFilters';
import { getBackgroundFilterStyle, getBackgroundOverlayStyle } from '../api/backgroundFilters';
/**
* Hook for handling EventBus background events
@@ -45,9 +45,21 @@ export function useBackgroundEvents(backgroundData, refreshBackground) {
};
const applyFilters = () => {
const filter = getBackgroundFilterStyle();
const element = document.getElementById(backgroundData.video ? 'backgroundVideo' : 'backgroundImage');
if (element) element.style.webkitFilter = filter;
// For video backgrounds, apply filters directly to the video element
if (backgroundData.video) {
const filter = getBackgroundFilterStyle();
const element = document.getElementById('backgroundVideo');
if (element) element.style.webkitFilter = filter;
} else {
// For image backgrounds, apply filters to the overlay element
const overlayElement = document.getElementById('backgroundFilterOverlay');
if (overlayElement) {
const overlayStyle = getBackgroundOverlayStyle();
overlayElement.style.backdropFilter = overlayStyle.backdropFilter;
overlayElement.style.webkitBackdropFilter = overlayStyle.WebkitBackdropFilter;
overlayElement.style.backgroundColor = overlayStyle.backgroundColor;
}
}
};
EventBus.on('refresh', handleEvent);