feat(showcase): added video background

config/_project_json.yaml

@@ -25,7 +25,7 @@ localization:
     ui_voice_lang: Voice Language
     ui_voice_idle: Idle Timeout
     ui_voice_next: Voice Interval
-    ui_subtitle_title: <hr><h4>📑 Subtitle</h4><hr>
+    ui_subtitle_title: <hr><h4>🎵 Subtitle</h4><hr>
     ui_subtitle_lang: Subtitle Language
     ui_voice_actor_title: <hr><h4>🗣️ Voice Actor</h4><hr>
     ui_privacy_title: <hr><h4>📜 Privacy</h4><hr>
@@ -39,6 +39,9 @@ localization:
     ui_music_volume: Volume
     ui_music_offset: Offset
     ui_useStartAnimation_title: Use Start Animation
+    ui_video_title: <hr><h4>📝 Video</h4><hr>
+    ui_custom_video: Custom Video
+    ui_video_volume: Volume
   zh-chs:
     ui_notice_title: <hr><h4>📝 通知</h4><hr>
     ui_notice_set_fps: <span><b>在设置中设定FPS目标</b></span>
@@ -78,6 +81,9 @@ localization:
     ui_music_volume: 音量
     ui_music_offset: 弥补
     ui_useStartAnimation_title: 使用开始动画
+    ui_video_title: <hr><h4>📹 视频</h4><hr>
+    ui_custom_video: 自定义视频
+    ui_video_volume: 音量
 properties:
   - key: notice_title
     value: 
@@ -269,6 +275,27 @@ properties:
      step: 0.01
      max: 1
      min: 0
+  - key: video_title
+    value: 
+     text: ui_video_title
+     type: bool
+     value: false
+  - key: custom_video
+    value: 
+     text: ui_video_music
+     condition: video_title.value == true
+     type: file
+     fileType: video
+     value: ""
+  - key: video_volume
+    value: 
+     text: ui_video_volume
+     type: slider
+     value: 100
+     condition: video_title.value == true
+     fraction: false
+     max: 100
+     min: 0
   - key: useStartAnimation
     value: 
      text: ui_useStartAnimation_title

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,11 +450,22 @@ 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>
+        <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>
           <label for="voice">Voice</label>
@@ -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

@@ -38,3 +38,23 @@ body,
   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)