+
+ {variables.getMessage('modals.main.loading')}
+
+ );
+ }
+
+ if (isUploading) {
+ return (
+
+
+
+ {variables.getMessage('modals.main.settings.sections.background.source.uploading', {
+ current: uploadProgress.current,
+ total: uploadProgress.total,
+ })}
+
+
+ {Math.round((uploadProgress.current / uploadProgress.total) * 100)}%
+
);
}
@@ -281,7 +517,7 @@ const CustomSettings = memo(() => {
}
>
-
+
@@ -303,41 +539,228 @@ const CustomSettings = memo(() => {
icon={
+
+
+
+
+ {customBackground.length} {customBackground.length === 1 ? 'image' : 'images'}
+
+ {' '}
+ · {formatBytes(storageUsed)} / {formatBytes(STORAGE_LIMIT)}
+ {storagePercent > 80 && navigator.storage && navigator.storage.persist && (
+
+ )}
+
+
+ ·
+ {selectedImages.size > 0 ? (
+ <>
+ {selectedImages.size} selected
+
+ {selectedImages.size < customBackground.length && (
+
+ )}
+ {selectedImages.size === customBackground.length && (
+
+ )}
+
+ ) : (
+ customBackground.length > 0 && (
+
+ )
+ )}
+
+
+
- {customBackground.length > 0 ? (
- {
- const index = currentBackgroundIndex + fileIndex;
- handleCustomBackground(e, index);
+ multiple
+ loadFunction={async (files) => {
+ await handleFileInputChange(files);
}}
/>
+
{hasVideo && (
<>
{
/>
)}
+
setCustomURLModal(false)}
@@ -404,6 +830,82 @@ const CustomSettings = memo(() => {
modalCloseOnly={() => setCustomURLModal(false)}
/>
+
+ {
+ setFolderTaggingModal(false);
+ setPendingFiles([]);
+ }}
+ isOpen={folderTaggingModal}
+ className="Modal resetmodal mainModal"
+ overlayClassName="Overlay resetoverlay"
+ ariaHideApp={false}
+ >
+ {
+ setFolderTaggingModal(false);
+ setPendingFiles([]);
+ }}
+ />
+
+
+ setStorageQuotaModal(false)}
+ isOpen={storageQuotaModal}
+ className="Modal resetmodal mainModal"
+ overlayClassName="Overlay resetoverlay"
+ ariaHideApp={false}
+ >
+
);
});
diff --git a/src/features/background/options/FolderTaggingModal.jsx b/src/features/background/options/FolderTaggingModal.jsx
new file mode 100644
index 00000000..7019318a
--- /dev/null
+++ b/src/features/background/options/FolderTaggingModal.jsx
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import variables from 'config/variables';
+import { MdClose } from 'react-icons/md';
+import { Button } from 'components/Elements';
+
+const FolderTaggingModal = ({ files, onConfirm, onCancel }) => {
+ const [folderName, setFolderName] = useState('');
+
+ const handleConfirm = () => {
+ onConfirm(folderName.trim());
+ };
+
+ return (
+ >} Array of background URLs
+ * Get all custom backgrounds as objects
+ * @returns {Promise>} Array of background objects with metadata
*/
-export async function getAllBackgrounds() {
+export async function getAllBackgroundsWithMetadata() {
try {
const db = await openDB();
const transaction = db.transaction(STORE_NAME, 'readonly');
@@ -44,8 +47,26 @@ export async function getAllBackgrounds() {
return new Promise((resolve, reject) => {
request.onsuccess = () => {
const results = request.result;
- // Return array of URLs in order
- resolve(results.map(item => item.url));
+ // Return array of background objects in order
+ // For backward compatibility, convert old string URLs to objects
+ resolve(
+ results.map((item) => {
+ if (typeof item.url === 'string' && !item.name) {
+ // Old format - migrate to new format
+ return {
+ id: item.id,
+ url: item.url,
+ name: `Image ${item.id}`,
+ uploadDate: item.createdAt || Date.now(),
+ dimensions: null,
+ fileSize: null,
+ folder: '',
+ blurHash: null,
+ };
+ }
+ return item;
+ }),
+ );
};
request.onerror = () => reject(request.error);
});
@@ -56,15 +77,38 @@ export async function getAllBackgrounds() {
}
/**
- * Add a new background
- * @param {string} url - The background URL (data URL or remote URL)
+ * Get all custom backgrounds (URLs only for backward compatibility)
+ * @returns {Promise>} Array of background URLs
+ */
+export async function getAllBackgrounds() {
+ const backgrounds = await getAllBackgroundsWithMetadata();
+ return backgrounds.map((bg) => bg.url || bg);
+}
+
+/**
+ * Add a new background with metadata
+ * @param {Object} backgroundData - The background data object
+ * @param {string} backgroundData.url - The background URL (data URL or remote URL)
+ * @param {string} backgroundData.name - The filename
+ * @param {number} backgroundData.uploadDate - Upload timestamp
+ * @param {Object} backgroundData.dimensions - {width, height}
+ * @param {number} backgroundData.fileSize - File size in bytes
+ * @param {string} backgroundData.folder - Folder name (optional)
+ * @param {string} backgroundData.blurHash - BlurHash string (optional)
* @returns {Promise} The ID of the added background
*/
-export async function addBackground(url) {
+export async function addBackground(backgroundData) {
const db = await openDB();
const transaction = db.transaction(STORE_NAME, 'readwrite');
const store = transaction.objectStore(STORE_NAME);
- const request = store.add({ url, createdAt: Date.now() });
+
+ // Support old string format for backward compatibility
+ const data =
+ typeof backgroundData === 'string'
+ ? { url: backgroundData, name: 'Image', uploadDate: Date.now(), folder: '' }
+ : { ...backgroundData, uploadDate: backgroundData.uploadDate || Date.now() };
+
+ const request = store.add(data);
return new Promise((resolve, reject) => {
request.onsuccess = () => resolve(request.result);
@@ -75,10 +119,10 @@ export async function addBackground(url) {
/**
* Update a background at a specific index
* @param {number} index - The index to update (0-based)
- * @param {string} url - The new URL
+ * @param {Object|string} backgroundData - The new background data
* @returns {Promise}
*/
-export async function updateBackground(index, url) {
+export async function updateBackground(index, backgroundData) {
const db = await openDB();
const transaction = db.transaction(STORE_NAME, 'readwrite');
const store = transaction.objectStore(STORE_NAME);
@@ -91,7 +135,13 @@ export async function updateBackground(index, url) {
const items = getAllRequest.result;
if (items[index]) {
const item = items[index];
- item.url = url;
+
+ // Support old string format
+ if (typeof backgroundData === 'string') {
+ item.url = backgroundData;
+ } else {
+ Object.assign(item, backgroundData);
+ }
item.updatedAt = Date.now();
const updateRequest = store.put(item);
@@ -99,7 +149,7 @@ export async function updateBackground(index, url) {
updateRequest.onerror = () => reject(updateRequest.error);
} else {
// If index doesn't exist, add it
- addBackground(url).then(resolve).catch(reject);
+ addBackground(backgroundData).then(resolve).catch(reject);
}
};
getAllRequest.onerror = () => reject(getAllRequest.error);
@@ -134,6 +184,48 @@ export async function deleteBackground(index) {
});
}
+/**
+ * Delete multiple backgrounds by indices
+ * @param {Array} indices - Array of indices to delete (0-based)
+ * @returns {Promise}
+ */
+export async function deleteMultipleBackgrounds(indices) {
+ const db = await openDB();
+ const transaction = db.transaction(STORE_NAME, 'readwrite');
+ const store = transaction.objectStore(STORE_NAME);
+
+ // Get all items first
+ const getAllRequest = store.getAll();
+
+ return new Promise((resolve, reject) => {
+ getAllRequest.onsuccess = () => {
+ const items = getAllRequest.result;
+ const idsToDelete = indices.filter((index) => items[index]).map((index) => items[index].id);
+
+ // Delete all selected items
+ let completed = 0;
+ const total = idsToDelete.length;
+
+ if (total === 0) {
+ resolve();
+ return;
+ }
+
+ idsToDelete.forEach((id) => {
+ const deleteRequest = store.delete(id);
+ deleteRequest.onsuccess = () => {
+ completed++;
+ if (completed === total) {
+ resolve();
+ }
+ };
+ deleteRequest.onerror = () => reject(deleteRequest.error);
+ });
+ };
+ getAllRequest.onerror = () => reject(getAllRequest.error);
+ });
+}
+
/**
* Clear all custom backgrounds
* @returns {Promise}
@@ -166,6 +258,35 @@ export async function getBackgroundCount() {
});
}
+/**
+ * Update a background's metadata by ID
+ * @param {number} id - The background ID
+ * @param {Object} metadata - Metadata to update
+ * @returns {Promise}
+ */
+export async function updateBackgroundMetadata(id, metadata) {
+ const db = await openDB();
+ const transaction = db.transaction(STORE_NAME, 'readwrite');
+ const store = transaction.objectStore(STORE_NAME);
+ const request = store.get(id);
+
+ return new Promise((resolve, reject) => {
+ request.onsuccess = () => {
+ const item = request.result;
+ if (item) {
+ Object.assign(item, metadata);
+ item.updatedAt = Date.now();
+ const updateRequest = store.put(item);
+ updateRequest.onsuccess = () => resolve();
+ updateRequest.onerror = () => reject(updateRequest.error);
+ } else {
+ reject(new Error('Background not found'));
+ }
+ };
+ request.onerror = () => reject(request.error);
+ });
+}
+
/**
* Migrate backgrounds from localStorage to IndexedDB
* @returns {Promise} True if migration occurred
@@ -188,7 +309,7 @@ export async function migrateFromLocalStorage() {
}
// Filter out null/empty values
- backgrounds = backgrounds.filter(bg => bg && bg.trim() !== '');
+ backgrounds = backgrounds.filter((bg) => bg && bg.trim() !== '');
if (backgrounds.length === 0) {
return false;
diff --git a/src/utils/imageMetadata.js b/src/utils/imageMetadata.js
new file mode 100644
index 00000000..c059554e
--- /dev/null
+++ b/src/utils/imageMetadata.js
@@ -0,0 +1,154 @@
+import { encode } from 'blurhash';
+
+/**
+ * Extract image dimensions from a data URL or File
+ * @param {string|File} source - Image source (data URL or File)
+ * @returns {Promise<{width: number, height: number}>}
+ */
+export async function getImageDimensions(source) {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+
+ img.onload = () => {
+ resolve({
+ width: img.width,
+ height: img.height,
+ });
+ // Clean up object URL if created
+ if (typeof source !== 'string') {
+ URL.revokeObjectURL(img.src);
+ }
+ };
+
+ img.onerror = () => reject(new Error('Failed to load image'));
+
+ if (typeof source === 'string') {
+ img.src = source;
+ } else {
+ img.src = URL.createObjectURL(source);
+ }
+ });
+}
+
+/**
+ * Generate blur hash from an image
+ * @param {string|File} source - Image source (data URL or File)
+ * @param {number} componentX - Number of horizontal components (default: 4)
+ * @param {number} componentY - Number of vertical components (default: 3)
+ * @returns {Promise} BlurHash string
+ */
+export async function generateBlurHash(source, componentX = 4, componentY = 3) {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+
+ img.onload = () => {
+ try {
+ // Create canvas to get pixel data
+ const canvas = document.createElement('canvas');
+ const context = canvas.getContext('2d');
+
+ // Use smaller dimensions for faster processing
+ const maxSize = 64;
+ const scale = Math.min(maxSize / img.width, maxSize / img.height);
+ canvas.width = Math.floor(img.width * scale);
+ canvas.height = Math.floor(img.height * scale);
+
+ context.drawImage(img, 0, 0, canvas.width, canvas.height);
+ const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+ const blurHash = encode(
+ imageData.data,
+ imageData.width,
+ imageData.height,
+ componentX,
+ componentY,
+ );
+
+ // Clean up
+ if (typeof source !== 'string') {
+ URL.revokeObjectURL(img.src);
+ }
+
+ resolve(blurHash);
+ } catch (error) {
+ reject(error);
+ }
+ };
+
+ img.onerror = () => reject(new Error('Failed to load image for blur hash'));
+
+ if (typeof source === 'string') {
+ img.src = source;
+ } else {
+ img.src = URL.createObjectURL(source);
+ }
+ });
+}
+
+/**
+ * Calculate file size from data URL
+ * @param {string} dataUrl - Data URL string
+ * @returns {number} File size in bytes
+ */
+export function getDataUrlSize(dataUrl) {
+ // Remove data URL prefix to get just the base64 string
+ const base64String = dataUrl.split(',')[1];
+ if (!base64String) return 0;
+
+ // Base64 encoding adds ~33% overhead
+ // Actual size = (base64 length * 3) / 4
+ const padding = (base64String.match(/=/g) || []).length;
+ return Math.floor((base64String.length * 3) / 4 - padding);
+}
+
+/**
+ * Extract filename from File object or generate default name
+ * @param {File|null} file - File object
+ * @param {number} index - Index for default naming
+ * @returns {string} Filename
+ */
+export function getFileName(file, index) {
+ if (file && file.name) {
+ return file.name;
+ }
+ return `Image ${index + 1}`;
+}
+
+/**
+ * Calculate total storage used by custom backgrounds only
+ * Note: This estimates IndexedDB storage from data URLs
+ * @returns {number} Storage size in bytes (estimate)
+ */
+export function calculateStorageSize() {
+ // This is now just an estimate - actual storage is in IndexedDB
+ // We'll calculate it properly from the actual background data
+ return 0; // Will be calculated from actual backgrounds in the component
+}
+
+/**
+ * Calculate total localStorage usage (all settings)
+ * @returns {number} Total storage size in bytes
+ */
+export function calculateTotalStorageSize() {
+ const settings = {};
+ Object.keys(localStorage).forEach((key) => {
+ settings[key] = localStorage.getItem(key);
+ });
+ return new TextEncoder().encode(JSON.stringify(settings)).length;
+}
+
+/**
+ * Format bytes to human-readable string
+ * @param {number} bytes - Size in bytes
+ * @returns {string} Formatted string (e.g., "2.3 MB")
+ */
+export function formatBytes(bytes) {
+ if (bytes === 0) return '0 Bytes';
+ if (!bytes) return 'Unknown';
+
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+ return Math.round((bytes / Math.pow(k, i)) * 10) / 10 + ' ' + sizes[i];
+}
- {customBackground.map((url, index) => (
-
+
- {url && !videoCheck(url) ? (
- 
- ) : url && videoCheck(url) ? (
-
) : (
0 ? 'selection-mode' : ''}`}>
+ {sortedBackgrounds.map((bg, index) => {
+ const originalIndex = customBackground.findIndex((item) => item === bg);
+ const isVideo = bg && videoCheck(bg.url);
+
+ return (
+
+ );
+ })}
+
-
- )}
-
- ))}
+
+ toggleImageSelection(originalIndex)}
+ />
+
+
+ {bg.blurHash &&
+ !isVideo &&
+ (() => {
+ const blurHashDataUrl = generateBlurHashDataUrl(bg.blurHash, 32, 32);
+ return blurHashDataUrl ? (
+
+ ) : null;
+ })()}
+ {isVideo ? (
+ 
+ )}
+
+
+
+ ) : (
+
+
+
+
+
+
+ {bg.name || 'Unnamed'}
+
+
+ {bg.dimensions && (
+
+ {bg.dimensions.width} × {bg.dimensions.height}
+
+ )}
+ {bg.fileSize && {formatBytes(bg.fileSize)}}
+ {bg.folder && {bg.folder}}
+
+
@@ -366,14 +789,16 @@ const CustomSettings = memo(() => {
)}
+
+
+
+ {variables.getMessage('modals.main.settings.sections.background.source.storage_info')}
+
+
+
+
+
+ + {variables.getMessage( + 'modals.main.settings.sections.background.source.storage_description', + )} +
+
+
+ + Custom Backgrounds +
++ {formatBytes(storageUsed)} / {formatBytes(STORAGE_LIMIT)} ( + {Math.round(storagePercent)}%) +
+
+
+ + Total localStorage Usage +
++ {formatBytes(totalStorageUsed)} / {formatBytes(TOTAL_STORAGE_LIMIT)} ( + {Math.round((totalStorageUsed / TOTAL_STORAGE_LIMIT) * 100)}%) +
++ Includes all Mue settings and custom images +
+
+
+
+
+ );
+};
+
+export default FolderTaggingModal;
diff --git a/src/i18n/locales/en_GB.json b/src/i18n/locales/en_GB.json
index 151184ab..d161b845 100644
--- a/src/i18n/locales/en_GB.json
+++ b/src/i18n/locales/en_GB.json
@@ -267,7 +267,25 @@
},
"custom_title": "Custom Images",
"custom_description": "Select images from your local computer",
- "remove": "Remove Image"
+ "remove": "Remove Image",
+ "delete_selected": "Delete {count} Selected",
+ "uploading": "Uploading {current} of {total}...",
+ "images": "images",
+ "tag_images": "Organise Images",
+ "tag_description": "Add {count} images to a folder (optional)",
+ "folder_name": "Folder Name",
+ "folder_placeholder": "Leave empty for no folder",
+ "storage_info": "Storage Information",
+ "storage_description": "Mue uses browser storage to save your custom images. The current limit is approximately 4.85MB for all settings and images combined.",
+ "storage_current": "Current usage: {used} of {total} ({percent}%)",
+ "sort": {
+ "date_newest": "Date Added (Newest)",
+ "date_oldest": "Date Added (Oldest)",
+ "name_asc": "Name (A-Z)",
+ "name_desc": "Name (Z-A)",
+ "size_small": "File Size (Smallest)",
+ "size_large": "File Size (Largest)"
+ }
},
"display": "Display",
"display_subtitle": "Change how background and photo information are loaded",
@@ -518,7 +536,10 @@
"buttons": {
"reset": "Reset",
"import": "Import",
- "export": "Export"
+ "export": "Export",
+ "cancel": "Cancel",
+ "continue": "Continue",
+ "close": "Close"
}
},
"marketplace": {
diff --git a/src/utils/customBackgroundDB.js b/src/utils/customBackgroundDB.js
index 55f5653c..a212b968 100644
--- a/src/utils/customBackgroundDB.js
+++ b/src/utils/customBackgroundDB.js
@@ -23,7 +23,10 @@ function openDB() {
// Create object store if it doesn't exist
if (!db.objectStoreNames.contains(STORE_NAME)) {
- const objectStore = db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
+ const objectStore = db.createObjectStore(STORE_NAME, {
+ keyPath: 'id',
+ autoIncrement: true,
+ });
objectStore.createIndex('url', 'url', { unique: false });
}
};
@@ -31,10 +34,10 @@ function openDB() {
}
/**
- * Get all custom backgrounds
- * @returns {Promise
+
+ {variables.getMessage('modals.main.settings.sections.background.source.tag_images')}
+
+
+
+
+
+ + {variables.getMessage('modals.main.settings.sections.background.source.tag_description', { + count: files.length, + })} +
+
+
+ setFolderName(e.target.value)}
+ onKeyPress={(e) => {
+ if (e.key === 'Enter') {
+ handleConfirm();
+ }
+ }}
+ autoFocus
+ />
+
+
+
+
+
+