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

feat(background): implement custom background loading and improve state management

Browse Source
This commit is contained in:
alexsparkes
2026-01-26 12:24:26 +00:00
parent 40c248985d
commit e42a218116
1 changed files with 39 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/features/background/components/BackgroundImage.jsx
View File

@@ -1,23 +1,37 @@
import { memo } from 'react';
import { memo, useState, useEffect } from 'react';
import PhotoInformation from './PhotoInformation';
import variables from 'config/variables';
import { updateHash } from 'utils/deepLinking';
import EventBus from 'utils/eventbus';
import { getAllBackgrounds } from 'utils/customBackgroundDB';
/**
* BackgroundImage component for rendering image backgrounds
*/
function BackgroundImage({ photoInfo, currentAPI, url }) {
const isCustomType = localStorage.getItem('backgroundType') === 'custom';
const customBackgrounds = (() => {
try {
const stored = localStorage.getItem('customBackground');
return stored && stored !== 'null' ? JSON.parse(stored) : [];
} catch {
return [];
}
})();
const hasNoCustomImages = isCustomType && (!customBackgrounds || customBackgrounds.length === 0);
const [customBackgrounds, setCustomBackgrounds] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const loadCustomBackgrounds = async () => {
if (isCustomType) {
try {
const backgrounds = await getAllBackgrounds();
setCustomBackgrounds(backgrounds || []);
} catch (error) {
console.error('Failed to load custom backgrounds:', error);
setCustomBackgrounds([]);
}
}
setIsLoading(false);
};
loadCustomBackgrounds();
}, [isCustomType]);
const hasNoCustomImages =
isCustomType && !isLoading && (!customBackgrounds || customBackgrounds.length === 0);
const handleOpenSettings = () => {
updateHash('#settings/background/source');
@@ -28,21 +42,24 @@ function BackgroundImage({ photoInfo, currentAPI, url }) {
<>
<div id="backgroundImage" />
{hasNoCustomImages && (
<div style={{
position: 'absolute',
bottom: '20px',
left: '20px',
color: 'white',
background: 'rgba(0, 0, 0, 0.6)',
padding: '20px 30px',
borderRadius: '10px',
zIndex: 1,
}}>
<div
style={{
position: 'absolute',
bottom: '20px',
left: '20px',
color: 'white',
background: 'rgba(0, 0, 0, 0.6)',
padding: '20px 30px',
borderRadius: '10px',
zIndex: 1,
}}
>
<h2 style={{ margin: '0 0 10px 0', fontSize: '20px' }}>
{variables.getMessage('widgets.background.no_images_title') || 'No Custom Images'}
</h2>
<p style={{ margin: '0 0 15px 0', fontSize: '14px', opacity: 0.9 }}>
{variables.getMessage('widgets.background.no_images_description') || 'Please add custom images in the Background settings'}
{variables.getMessage('widgets.background.no_images_description') ||
'Please add custom images in the Background settings'}
</p>
<button
onClick={handleOpenSettings}
@@ -68,9 +85,7 @@ function BackgroundImage({ photoInfo, currentAPI, url }) {
</button>
</div>
)}
{photoInfo?.credit && (
<PhotoInformation info={photoInfo} api={currentAPI} url={url} />
)}
{photoInfo?.credit && <PhotoInformation info={photoInfo} api={currentAPI} url={url} />}
</>
);
}