mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-17 05:54:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Enhance photo pack data structure and improve button layout in PhotoInformation component

Browse Source
This commit is contained in:
alexsparkes
2026-02-07 22:19:45 +00:00
parent 8758188521
commit 96e51c96cf
4 changed files with 81 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/features/background/api/backgroundLoader.js
View File

@@ -326,6 +326,15 @@ function getPhotoPackBackground(isOffline) {
url: selected.url.default || selected.url,
source: selected.source,
pack_id: selected.pack_id,
pack_name: selected.pack_name || null,
...(selected.colour && { colour: selected.colour }),
...(selected.camera && { camera: selected.camera }),
...(selected.category && { category: selected.category }),
...(selected.latitude &&
selected.longitude && {
latitude: selected.latitude,
longitude: selected.longitude,
}),
...(selected.photographer_page && { photographerURL: selected.photographer_page }),
...(selected.photo_page && { photoURL: selected.photo_page }),
},
@@ -381,6 +390,15 @@ async function prefetchPhotoPackImages(queueManager, pool, currentPhoto, current
url: photo.url.default || photo.url,
source: photo.source,
pack_id: photo.pack_id,
pack_name: photo.pack_name || null,
...(photo.colour && { colour: photo.colour }),
...(photo.camera && { camera: photo.camera }),
...(photo.category && { category: photo.category }),
...(photo.latitude &&
photo.longitude && {
latitude: photo.latitude,
longitude: photo.longitude,
}),
...(photo.photographer_page && { photographerURL: photo.photographer_page }),
...(photo.photo_page && { photoURL: photo.photo_page }),
},

18
src/features/background/api/photoPackAPI.js
View File

@@ -311,7 +311,9 @@ export function buildPhotoPool() {
enabledPacksValue: enabledPacks[packId],
api_enabled: pack.api_enabled,
api_ready: apiPacksReady.includes(pack.id),
cached_photos: pack.api_enabled ? apiPackCache[pack.id]?.photos?.length || 0 : pack.photos?.length || 0,
cached_photos: pack.api_enabled
? apiPackCache[pack.id]?.photos?.length || 0
: pack.photos?.length || 0,
});
if (enabledPacks[packId] === false) {
@@ -323,23 +325,30 @@ export function buildPhotoPool() {
if (apiPacksReady.includes(pack.id)) {
const cached = apiPackCache[pack.id];
if (cached && cached.photos.length > 0) {
console.log(`[Build Pool] Adding ${cached.photos.length} API photos from ${pack.display_name || pack.name}`);
console.log(
`[Build Pool] Adding ${cached.photos.length} API photos from ${pack.display_name || pack.name}`,
);
cached.photos.forEach((photo) => {
pool.push({
...photo,
source: `api:${pack.api_provider}`,
pack_id: pack.id,
pack_name: pack.display_name || pack.name,
attribution_config: pack.attribution || null,
});
});
} else {
console.log(`[Build Pool] API pack ${pack.display_name || pack.name} has no cached photos`);
console.log(
`[Build Pool] API pack ${pack.display_name || pack.name} has no cached photos`,
);
}
} else {
console.log(`[Build Pool] API pack ${pack.display_name || pack.name} is not ready yet`);
}
} else {
console.log(`[Build Pool] Adding ${pack.photos.length} static photos from ${pack.display_name || pack.name}`);
console.log(
`[Build Pool] Adding ${pack.photos.length} static photos from ${pack.display_name || pack.name}`,
);
pack.photos.forEach((photo) => {
pool.push({
photographer: photo.photographer,
@@ -348,6 +357,7 @@ export function buildPhotoPool() {
blur_hash: photo.blur_hash,
source: 'static',
pack_id: pack.id,
pack_name: pack.display_name || pack.name,
attribution_config: pack.attribution || null,
});
});

65
src/features/background/components/PhotoInformation.jsx
View File

@@ -52,7 +52,8 @@ const formatText = (text) => {
const downloadImage = async (info) => {
const link = document.createElement('a');
link.href = await toDataURL(getProxiedImageUrl(info.url));
const locationText = typeof info.location === 'string' ? info.location : info.location?.name || 'unknown';
const locationText =
typeof info.location === 'string' ? info.location : info.location?.name || 'unknown';
link.download = `mue-${formatText(info.credit)}-${formatText(locationText)}.jpg`;
document.body.appendChild(link);
link.click();
@@ -96,7 +97,17 @@ function ColorSwatch({ hex }) {
/**
* MetadataGrid - 2-column grid of photo metadata
*/
function MetadataGrid({ location, camera, width, height, colour, category, packId, packName, onPackClick }) {
function MetadataGrid({
location,
camera,
width,
height,
colour,
category,
packId,
packName,
onPackClick,
}) {
const t = useT();
// Get pack display name from marketplace data
@@ -250,7 +261,14 @@ function UnsplashStats({ views, downloads, likes }) {
/**
* ActionButtons - Photo action buttons (share, favorite, download, exclude)
*/
function ActionButtons({ info, onShare, onExclude, onDownload, favouriteTooltipText, setFavouriteTooltipText }) {
function ActionButtons({
info,
onShare,
onExclude,
onDownload,
favouriteTooltipText,
setFavouriteTooltipText,
}) {
const t = useT();
return (
@@ -382,7 +400,6 @@ function PhotoInformation({ info, url, api }) {
);
}
const widgetStyle = localStorage.getItem('widgetStyle');
return (
@@ -428,11 +445,7 @@ function PhotoInformation({ info, url, api }) {
</span>
</div>
{info.views && info.downloads !== null && (
<UnsplashStats
views={info.views}
downloads={info.downloads}
likes={info.likes}
/>
<UnsplashStats views={info.views} downloads={info.downloads} likes={info.likes} />
)}
</div>
@@ -450,25 +463,23 @@ function PhotoInformation({ info, url, api }) {
onPackClick={handlePackClick}
/>
{localStorage.getItem('photoMap') === 'true' &&
info.latitude &&
info.longitude && (
<>
<div className="section-divider" />
<LocationMap latitude={info.latitude} longitude={info.longitude} />
</>
)}
{localStorage.getItem('photoMap') === 'true' && info.latitude && info.longitude && (
<>
<div className="section-divider" />
<LocationMap latitude={info.latitude} longitude={info.longitude} />
</>
)}
<div className="section-divider" />
<ActionButtons
info={info}
onShare={() => openShareModal(true)}
onExclude={() => openExcludeModal(true)}
onDownload={() => downloadImage(info)}
favouriteTooltipText={favouriteTooltipText}
setFavouriteTooltipText={setFavouriteTooltipText}
/>
<div className="buttons-wrapper">
<ActionButtons
info={info}
onShare={() => openShareModal(true)}
onExclude={() => openExcludeModal(true)}
onDownload={() => downloadImage(info)}
favouriteTooltipText={favouriteTooltipText}
setFavouriteTooltipText={setFavouriteTooltipText}
/>
</div>
</div>
</div>
)}

20
src/features/background/scss/_photoinformation.scss
View File

@@ -14,7 +14,6 @@
flex-flow: column;
.buttons {
padding: 30px 0 0;
display: flex;
}
@@ -246,7 +245,6 @@
flex-flow: column;
.buttons {
padding: 30px 0 0;
display: flex;
}
@@ -369,10 +367,14 @@
display: none;
}
.buttons-wrapper {
grid-column: 1 / -1;
padding-top: 20px;
}
.buttons {
align-items: center;
gap: 20px;
padding: 20px 20px 0 0;
display: none;
svg {
@@ -559,9 +561,9 @@
gap: 8px;
.swatch-preview {
width: 24px;
height: 24px;
border-radius: 6px;
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
@@ -656,19 +658,19 @@
animation-delay: 0.05s;
}
> *:nth-child(2) {
animation-delay: 0.10s;
animation-delay: 0.1s;
}
> *:nth-child(3) {
animation-delay: 0.15s;
}
> *:nth-child(4) {
animation-delay: 0.20s;
animation-delay: 0.2s;
}
> *:nth-child(5) {
animation-delay: 0.25s;
}
> *:nth-child(6) {
animation-delay: 0.30s;
animation-delay: 0.3s;
}
}