feat(showcase): added video background

showcase/src/components/settings.js

@@ -5,6 +5,7 @@ const getPercentage = (value) => parseInt(value.replace("%", ""))
 export default class Settings {
   #el
   #logoEl
+  #videoEl
   #defaultLogoImage
   #defaultFps = 60
   #defaultRatio = 61.8
@@ -64,7 +65,7 @@ export default class Settings {
     resize()
     this.#setLogoInvertFilter(this.#defaultInvertFilter)
     this.setLogoOpacity(this.#defaultOpacity)
-
+    this.#videoEl = document.getElementById("video-src")
     this.#insertHTML()
   }
 
@@ -367,12 +368,33 @@ export default class Settings {
     window.music.resetMusic()
   }
 
+  setVideo(e) {
+    this.#readFile(
+      e,
+      (blobURL, type) => {
+        this.#videoEl.src = blobURL
+        this.#videoEl.load()
+        document.getElementById("custom_video_background_clear").disabled = false
+      }
+    )
+  }
+
+  setVideoVolume(value) {
+    this.#videoEl.volume = value / 100
+  }
+
+  getVideoVolume() {
+    return this.#videoEl.volume * 100
+  }
+
   setVideoFromWE(url) {
-    const type = url.split(".").pop()
+    this.#videoEl.src = url
+    this.#videoEl.load()
     document.getElementById("custom_video_background_clear").disabled = false
   }
 
   resetVideo() {
+    this.#videoEl.src = ""
     document.getElementById("custom_video_background").value = ""
     document.getElementById("custom_video_background_clear").disabled = true
   }
@@ -428,10 +450,21 @@ 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>
+          <label for="video">Video</label>
+          <input type="checkbox" id="video" name="video" />
+          <div id="video_realted" hidden>
+            <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>
+              <label for="video_volume">Video Volume</label>
+              <input type="range" min="0" max="100" step="1" id="video_volume_slider" value="${this.getVideoVolume()}" />
+              <input type="number" id="video_volume_input"  min="0" max="100" step="1" name="video_volume" value="${this.getVideoVolume() }" />
+            </div>
           </div>
         </div>
         <div>
@@ -743,6 +776,25 @@ export default class Settings {
           _this.#sync(e.currentTarget, "music_switch_offset_slider");
           window.music.timeOffset = parseFloat(e.currentTarget.value)
         }
+      }, {
+        id: "video", event: "click", handler: e => {
+          _this.#showRelated(e.currentTarget, "video_realted");
+          if (!e.currentTarget.checked) _this.resetVideo()
+        }
+      }, {
+        id: "custom_video_background", event: "change", handler: e => _this.setVideo(e)
+      }, {
+        id: "custom_video_background_clear", event: "click", handler: () => _this.resetVideo()
+      }, {
+        id: "video_volume_slider", event: "input", handler: e => {
+          _this.#sync(e.currentTarget, "video_volume_input");
+          this.setVideoVolume(parseInt(e.currentTarget.value))
+        }
+      }, {
+        id: "video_volume_input", event: "change", handler: e => {
+          _this.#sync(e.currentTarget, "video_volume_slider");
+          this.setVideoVolume(parseInt(e.currentTarget.value))
+        }
       }, {
         id: "position", event: "click", handler: e => {
           _this.#showRelated(e.currentTarget, "position_realted");

showcase/src/index.css

@@ -37,4 +37,24 @@ body,
 .invert-filter {
   filter: invert(1);
   opacity: 0.3;
+}
+
+#video_background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%; 
+  overflow: hidden;
+}
+
+#video_background video {
+  min-width: 100%; 
+  min-height: 100%; 
+  width: auto;
+  height: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
 }

showcase/src/index.js

@@ -10,7 +10,9 @@ 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="video_background">
+    <video autoplay loop disablepictureinpicture id="video-src" />
+  </div>
   <div id="widget-wrapper">
     <div id="fallback"
       style="background-image: url(./assets/${import.meta.env.VITE_FALLBACK_FILENAME}.png)"

showcase/src/libs/wallpaper_engine.js

@@ -111,6 +111,18 @@ window.wallpaperPropertyListener = {
                 window.settings.resetMusic()
             }
         }
+        if (properties.custom_video) {
+            if (properties.custom_video.value) {
+                window.settings.setVideoFromWE(`file:///${properties.custom_video.value}`)
+                window.settings.functionInsights("setVideo", Object.keys(properties) !== 1)
+            } else {
+                window.settings.resetVideo()
+            }
+        }
+        if (properties.video_volume) {
+            window.settings.setVideoVolume(properties.video_volume.value)
+            window.settings.functionInsights("video_volume", Object.keys(properties) !== 1)
+        }
         if (properties.scale) {
             window.settings.setScale(properties.scale.value)
             window.settings.functionInsights("setScale", Object.keys(properties) !== 1)