added support for multiple image and video backgrounds to be uploaded at once

This commit is contained in:
SethBurkart123
2023-10-18 10:50:34 +11:00
parent 115a8bb83a
commit eaad32b39f
4 changed files with 104 additions and 121 deletions
+21
View File
@@ -8,6 +8,27 @@
body {
margin: 0 !important;
}
video, img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: fade 0.2s ease-in-out;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
+23 -4
View File
@@ -13,12 +13,18 @@ const openDB = () => {
});
};
// Read data from IndexedDB
// Modified Read Data from IndexedDB
const readData = async () => {
const selectedBackground = localStorage.getItem("selectedBackground");
if (!selectedBackground) {
console.log("No selected background in local storage.");
return null;
}
const db = await openDB();
const tx = db.transaction("backgrounds", "readonly");
const store = tx.objectStore("backgrounds");
const request = store.get("customBackground");
const request = store.get(selectedBackground);
return await new Promise((resolve, reject) => {
request.onsuccess = () => resolve(request.result);
@@ -26,8 +32,8 @@ const readData = async () => {
});
};
// Main function to run on page load
const main = async () => {
// Function to update the background
const updateBackground = async () => {
try {
const data = await readData();
if (!data) {
@@ -37,6 +43,7 @@ const main = async () => {
const url = URL.createObjectURL(data.blob);
const container = document.getElementById("media-container");
container.innerHTML = ""; // Clear previous background
if (data.type === "image") {
const imgElement = document.createElement("img");
@@ -56,5 +63,17 @@ const main = async () => {
}
};
// Main function to run on page load
const main = async () => {
await updateBackground(); // Initial background update
// Listen for changes to local storage
window.addEventListener("storage", async (event) => {
if (event.key === "selectedBackground") {
await updateBackground(); // Update background if 'selectedBackground' changes
}
});
};
// Run the main function when the document is ready
document.addEventListener("DOMContentLoaded", main);