Image Preloading

scripts/scene.js

@@ -1,11 +1,10 @@
 // TODO:
-// - Support removal of images
-// - Add adjustable slideshow speed
 // - Add image fading
 
 
 let socket
 let socketStatus = false
+let mimes = {}
 
 let jsonValid = (json) => {
     try {
@@ -19,11 +18,86 @@ let jsonValid = (json) => {
     return true;
 }
 
+let loadMime = () => {
+    return new Promise((resolve, reject) => {
+        let request = new XMLHttpRequest()
+        request.open('GET', 'image.csv', true)
+        request.onload = () => {
+            if (request.readyState = 4 && request.status === 200) {
+                let mimeCSV = request.responseText
+                mimeCSV.split('\n').forEach(line => {
+                    line = line.split(',')
+                    let extension = line[0]
+                    let mime = line[1]
+                    let RFC = line[2]
+                    mimes[extension] = {
+                        mime: mime,
+                        RFC: RFC
+                    }
+                })
+                resolve()
+            }else{
+                reject('Failed to load image.csv')
+            }
+        }
+        request.send()
+    })
+}
+
+let urlExists = (url, callback) => {
+    var request = new XMLHttpRequest()
+    request.open('GET', url, true)
+    request.onreadystatechange = () => {
+        if (request.readyState === 4){
+            if (request.status === 404) {
+                callback(false)
+            } else {
+                callback(true)
+            }
+        }
+    };
+    request.send();
+}
+
+let preloadImage = (url, callback) => {
+    console.log(`%cPreloading ${url}`, 'color: #ECEFF4; font-family: monospace;')
+    let request = new XMLHttpRequest()
+    request.responseType = 'blob'
+    request.open('GET', url, true)
+    request.onload = () => {
+        console.log(`%cLoaded (${request.status}) ${url} `, 'color: #ECEFF4; font-family: monospace;')
+        if (request.readyState = 4 && request.status === 200) {
+            let reader = new FileReader()
+            reader.readAsArrayBuffer(request.response)
+            reader.onload = () => {
+                let imageData = btoa(new Uint8Array(reader.result).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+                let header = "data:"//";base64,"
+                let extension = url.split('.').pop() + ""
+                if (mimes[extension.toLowerCase()]) {
+                    header += mimes[extension].mime
+                } else {
+                    header += "image/" + extension
+                }
+                header += ";base64,"
+                console.log(("%c" + header + imageData), "color: #A3BE8C; font-family: monospace; font-size: 8px;")
+                callback(header + imageData)
+            }
+        }else {
+            callback(false)
+        }
+    }
+    request.send()
+}
+
 let setWallpaper = (path) => {
-    console.log(`Setting wallpaper to ${path}`)
-    let wallpaper = document.getElementById('wallpaper')
-    // wallpaper.src = path
-    wallpaper.style.backgroundImage = `url(${path})`
+    preloadImage(path, (image) => {
+        if (image) {
+            console.log(`Setting wallpaper to ${path}`)
+            let wallpaper = document.getElementById('wallpaper')
+            // wallpaper.style.backgroundImage = `url(${path})`
+            wallpaper.style.backgroundImage = `url(${image})`
+        }
+    })
 }
 
 let dumpStorage = () => {
@@ -64,25 +138,34 @@ let pickWallpaper = () => {
         wallpapers = []
         console.log('%cWallpapers not found in Local Storage', 'color: #BF616A; font-size: 18px; font-family: monospace;')
     }
-    // for (let index = wallpapers.length-1; index >= 0; index--) {
-    //     if (!wallpapers.includes(localStorage.getItem('member'))) {
-    //         wallpapers.splice(index, 1)
-    //     }
-    // }
     let validWallpapers = []
     wallpapers.forEach(wp => {
         if (wp.includes(localStorage.getItem('member'))) {
             validWallpapers.push(wp)
         }
     })
-    let wallpaper = "file:///" + validWallpapers[Math.floor(Math.random() * validWallpapers.length)]
+    let chosenWallpaper = validWallpapers[Math.floor(Math.random() * validWallpapers.length)]
+    let wallpaper = "file:///" + chosenWallpaper
     if (validWallpapers.length == 0) {
         wallpaper = "https://picsum.photos/3840/2160"
     }
-    setWallpaper(wallpaper)
-    setTimeout(() => {
-        pickWallpaper()
-    }, 30000)
+    urlExists(wallpaper, (exists) => {
+        if (exists) {
+            setWallpaper(wallpaper)
+            setTimeout(() => {
+                pickWallpaper()
+            }, 30000)
+        } else {
+            console.log(`%c${wallpaper} does not exist`, 'color: #BF616A; font-size: 18px; font-family: monospace;')
+            // Remove wallpaper from list
+            let index = wallpapers.indexOf(chosenWallpaper)
+            if (index > -1) {
+                wallpapers.splice(index, 1)
+            }
+            localStorage.setItem('wallpapers', JSON.stringify(wallpapers))
+            pickWallpaper()
+        }
+    })
 }
 
 let loadSocket = () => {
@@ -169,10 +252,11 @@ window.wallpaperPropertyListener = {
     },
 }
 
-window.onload = () => {
+window.onload = async () => {
     console.log("%cPage Loaded.", "background: #2E3440; color: #A3BE8C; font-size: 24px;")
     // Set default member
     dumpStorage()
     grabLatestFronter()
+    await loadMime()
     loadSocket()
 }