feat(showcase): init video background

src/components/settings.js

@@ -359,6 +359,16 @@ export default class Settings {
     window.music.resetMusic()
   }
 
+  setVideoFromWE(url) {
+    const type = url.split(".").pop()
+    document.getElementById("custom_video_background_clear").disabled = false
+  }
+
+  resetVideo() {
+    document.getElementById("custom_video_background").value = ""
+    document.getElementById("custom_video_background_clear").disabled = true
+  }
+
   #insertHTML() {
     this.#el.innerHTML = `
       <div>
@@ -410,6 +420,11 @@ export default class Settings {
             <input type="file" id="custom_background" accept="image/*"/>
             <button type="button" disabled id="custom_background_clear" disabled>Clear</button>
           </div>
+          <div>
+            <label for="custom_video_background"> Custom Video Background (Store Locally)</label>
+            <input type="file" id="custom_video_background" accept="video/*"/>
+            <button type="button" disabled id="custom_video_background_clear" disabled>Clear</button>
+          </div>
         </div>
         <div>
           <label for="voice">Voice</label>

src/index.js

@@ -10,6 +10,7 @@ document.querySelector('#app').innerHTML = `
   <div id="settings" hidden></div>
   <div id="voice_box" hidden></div>
   <div id="music_box" hidden></div> 
+  <div id="video_background"></div>
   <div id="widget-wrapper">
     <div id="fallback"
       style="background-image: url(./assets/${import.meta.env.VITE_FALLBACK_FILENAME}.png)"