From 6d2377dc1f4e087b26bfb3b2f74410c8f6f8c15e Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Sat, 3 Feb 2024 23:20:41 +0800
Subject: [PATCH] feat(showcase): use blob instead of base64

---
 src/components/music.js    |  2 +-
 src/components/settings.js | 35 ++++++++++++++---------------------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/components/music.js b/src/components/music.js
index c529fcb..f61d6f4 100644
--- a/src/components/music.js
+++ b/src/components/music.js
@@ -93,7 +93,7 @@ export default class Music {
 
   setMusic(data, type) {
     this.#audioLoopEl.src = data
-    this.#audioLoopEl.querySelector('source').type = `audio/${type}`
+    this.#audioLoopEl.querySelector('source').type = type
     this.#isUsingCustomMusic = true
     this.#playMusic()
   }
diff --git a/src/components/settings.js b/src/components/settings.js
index bc7c21d..2a527cd 100644
--- a/src/components/settings.js
+++ b/src/components/settings.js
@@ -138,23 +138,19 @@ export default class Settings {
     this.functionInsights("setLogo", this.isWallpaperEngine)
   }
 
-  #readFile(e, onload, callback = () => { }) {
+  #readFile(e, callback = () => { }) {
     const file = e.target.files[0]
     if (!file) return
-    const reader = new FileReader()
-    reader.readAsDataURL(file);
-    reader.onload = readerEvent => onload(readerEvent)
-    callback()
+    callback(URL.createObjectURL(file.slice()), file.type)
   }
 
   setLogoImage(e) {
     this.#readFile(
       e,
-      (readerEvent) => {
-        const content = readerEvent.target.result;
-        this.setLogo(content, false)
-      },
-      () => document.getElementById("logo_image_clear").disabled = false
+      (blobURL, type) => {
+        this.setLogo(blobURL, false)
+        document.getElementById("logo_image_clear").disabled = false
+      }
     )
   }
 
@@ -198,11 +194,10 @@ export default class Settings {
   setBackground(e) {
     this.#readFile(
       e,
-      (readerEvent) => {
-        const content = readerEvent.target.result;
-        this.setBackgoundImage(`url("${content}")`)
-      },
-      () => document.getElementById("custom_background_clear").disabled = false
+      (blobURL, type) => {
+        this.setBackgoundImage(`url("${blobURL}")`)
+        document.getElementById("custom_background_clear").disabled = false
+      }
     )
   }
 
@@ -359,12 +354,10 @@ export default class Settings {
   setMusic(e) {
     this.#readFile(
       e,
-      (readerEvent) => {
-        const content = readerEvent.target.result;
-        const type = content.split(";")[0].split(":")[1]
-        window.music.setMusic(content, type)
-      },
-      () => document.getElementById("custom_music_clear").disabled = false
+      (blobURL, type) => {
+        window.music.setMusic(blobURL, type)
+        document.getElementById("custom_music_clear").disabled = false
+      }
     )
   }