feat(CustomSettings): replace video icon and add overlay icon for custom backgrounds

This commit is contained in:
alexsparkes
2026-01-28 16:44:27 +00:00
parent 0c9a90d693
commit 9d98e2124a

View File

@@ -10,9 +10,10 @@ import {
MdFolder, MdFolder,
MdChevronLeft, MdChevronLeft,
MdChevronRight, MdChevronRight,
MdDelete, MdImage,
MdInfo,
} from 'react-icons/md'; } from 'react-icons/md';
import { BiSolidFilm } from 'react-icons/bi';
import EventBus from 'utils/eventbus'; import EventBus from 'utils/eventbus';
import { compressAccurately, filetoDataURL } from 'image-conversion'; import { compressAccurately, filetoDataURL } from 'image-conversion';
import videoCheck from '../api/videoCheck'; import videoCheck from '../api/videoCheck';
@@ -802,9 +803,7 @@ const CustomSettings = memo(() => {
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<MdPersonalVideo <BiSolidFilm style={{ fontSize: '20px', color: 'white' }} />
style={{ fontSize: '20px', color: 'white' }}
/>
</div> </div>
</> </>
) : ( ) : (
@@ -813,12 +812,31 @@ const CustomSettings = memo(() => {
</div> </div>
) )
) : ( ) : (
<img <>
alt={bg.name || 'Custom background'} <img
src={bg.url} alt={bg.name || 'Custom background'}
loading="lazy" src={bg.url}
style={{ position: 'relative', zIndex: 1 }} loading="lazy"
/> style={{ position: 'relative', zIndex: 1 }}
/>
<div
className="photo-overlay-icon"
style={{
position: 'absolute',
top: '8px',
right: '8px',
zIndex: 2,
background: 'rgba(0, 0, 0, 0.6)',
borderRadius: '4px',
padding: '4px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<MdImage style={{ fontSize: '20px', color: 'white' }} />
</div>
</>
)} )}
<div className="image-nav-buttons"> <div className="image-nav-buttons">
<button <button