From 9e14c9411a0c99c238b38ea9a55e09815971331e Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Wed, 14 Aug 2024 14:01:54 +0800
Subject: [PATCH] feat(showcase): added video background

---
 config/_project_json.yaml             | 29 +++++++++++-
 showcase/src/components/settings.js   | 64 ++++++++++++++++++++++++---
 showcase/src/index.css                | 20 +++++++++
 showcase/src/index.js                 |  4 +-
 showcase/src/libs/wallpaper_engine.js | 12 +++++
 5 files changed, 121 insertions(+), 8 deletions(-)

diff --git a/config/_project_json.yaml b/config/_project_json.yaml
index 138f6d9..bcd7fb4 100644
--- a/config/_project_json.yaml
+++ b/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
diff --git a/showcase/src/components/settings.js b/showcase/src/components/settings.js
index b43cc72..e1efc3d 100644
--- a/showcase/src/components/settings.js
+++ b/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");
diff --git a/showcase/src/index.css b/showcase/src/index.css
index 2facf67..fdc130d 100644
--- a/showcase/src/index.css
+++ b/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%);
 }
\ No newline at end of file
diff --git a/showcase/src/index.js b/showcase/src/index.js
index 5f3a78e..ba30522 100644
--- a/showcase/src/index.js
+++ b/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)"
diff --git a/showcase/src/libs/wallpaper_engine.js b/showcase/src/libs/wallpaper_engine.js
index 140f478..feb770d 100644
--- a/showcase/src/libs/wallpaper_engine.js
+++ b/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)