feat: code cleanup

showcase/src/components/background.js

@@ -16,11 +16,16 @@ export default class Background {
     image: "operator_bg.png"
   }
   #config = {
-    image: null
+    video: {
+      name: null,
+      volume: 100,
+    },
+    useVideo: false,
+    name: null
   }
   #musicObj
 
-  init(el) {
+  constructor(el) {
     this.#parentEl = el
     this.#el.id = "background-box"
     this.image = this.#default.location + this.#default.image
@@ -31,119 +36,20 @@ export default class Background {
     this.#videoEl = document.getElementById("video-src")
   }
 
-  set image(v) {
-    this.#el.style.backgroundImage = `url("${v}")`
-  }
-
-  set video(v) {
-    const update = (url) => {
-      this.#videoEl.src = url
-          this.#videoEl.load()
-      document.getElementById("custom-video-background-clear").disabled = false
-    }
-    if (typeof v === "object") {
-      readFile(
-        v,
-        (blobURL) => update(blobURL)
-      )
-    } else {
-      update(v)
-    }
-  }
-
-  get volume() {
-    return this.#videoEl.volume * 100
-  }
-
-  set volume(v) {
-    this.#videoEl.volume = parseInt(v) / 100
-  }
-
-  get current() {
-    return this.#config.image || this.#default.image
-  }
-
-  set default(v) {
-    this.#default.image = v
-    if (!this.#config.image) {
-      this.image = this.#default.location + this.#default.image
-    }
-  }
-
-  set custom(v) {
-    const update = (url) => {
-      this.#config.image = v
-      this.image = url
-      document.getElementById("custom-background-clear").disabled = false
-    }
-    if (typeof v === "object") {
-      readFile(
-        v,
-        (blobURL) => update(blobURL)
-      )
-    } else {
-      update(v)
-    }
-  }
-
-  setVideoFromWE(url) {
-    // Note: Back Compatibility
-    this.video = url
-  }
-
-  get currentBackground() {
-    // Note: Back Compatibility
-    return this.current
-  }
-
   resetImage() {
     document.getElementById("custom-background").value = ""
     document.getElementById("custom-background-clear").disabled = true
-    this.#config.image = null
+    this.#config.name = null
     this.image = this.#default.location + this.#default.image
   }
 
   resetVideo() {
+    this.#config.video.name = null
     this.#videoEl.src = ""
     document.getElementById("custom-video-background").value = ""
     document.getElementById("custom-video-background-clear").disabled = true
   }
 
-  setBackgroundImage(v) {
-    // Note: Back Compatibility
-    this.image = v
-  }
-
-  setDefaultBackground(v) {
-    // Note: Back Compatibility
-    this.default = v
-  }
-
-  setBackground(v) {
-    // Note: Back Compatibility
-    this.custom = v
-  }
-
-  resetBackground() {
-    // Note: Back Compatibility
-    this.resetImage()
-  }
-
-  setVideo(e) {
-    // Note: Back Compatibility
-    this.video = e.target.files[0]
-  }
-
-  getVideoVolume() {
-    // Note: Back Compatibility
-    return this.volume
-  }
-
-  setVideoVolume(v) {
-    // Note: Back Compatibility
-    this.volume = v
-  }
-
   reset() {
     this.resetImage()
     this.resetVideo()
@@ -153,6 +59,100 @@ export default class Background {
     this.#musicObj = musicObj
   }
 
+  get useVideo() {
+    return this.#config.useVideo
+  }
+
+  set useVideo(v) {
+    this.#config.useVideo = v
+  }
+
+  set image(v) {
+    this.#el.style.backgroundImage = `url("${v}")`
+  }
+
+  set video(v) {
+    const update = (url, v = null) => {
+      this.#config.video.name = {
+        isLocalFile: v !== null,
+        value: v ? v.name : url
+      }
+      this.#videoEl.src = url
+      this.#videoEl.load()
+      document.getElementById("custom-video-background-clear").disabled = false
+    }
+    if (typeof v === "object") {
+      readFile(
+        v,
+        (blobURL) => update(blobURL, v)
+      )
+    } else {
+      update(v)
+    }
+  }
+
+  get volume() {
+    return this.#config.video.volume
+  }
+
+  set volume(v) {
+    v = parseInt(v)
+    this.#config.video.volume = v
+    this.#videoEl.volume = v / 100
+  }
+
+  get current() {
+    return this.#config.name || this.#default.image
+  }
+
+  set default(v) {
+    this.#default.image = v
+    this.#musicObj.music = v
+    this.image = this.#default.location + this.#default.image
+  }
+
+  set custom(v) {
+    const update = (url, v = null) => {
+      this.#config.name = {
+        isLocalFile: v !== null,
+        value: v ? v.name : url
+      }
+      this.image = url
+      document.getElementById("custom-background-clear").disabled = false
+    }
+    if (typeof v === "object") {
+      readFile(
+        v,
+        (blobURL) => update(blobURL, v)
+      )
+    } else {
+      update(v)
+    }
+  }
+
+  get config() {
+    return {
+      default: this.#default.image,
+      ...this.#config
+    }
+  }
+
+  get backCompatibilityFns() {
+    const _this = this
+    return {
+      currentBackground: _this.current,
+      setBackgoundImage: (v) => _this.image = v,
+      setDefaultBackground: (v) => _this.default = v,
+      setBackground: (v) => _this.custom = v,
+      resetBackground: _this.resetImage,
+      setVideo: (e) => _this.video = e.target.files[0],
+      getVideoVolume: () => _this.volume,
+      setVideoVolume: (v) => _this.volume = v,
+      setVideoFromWE: (url) => _this.video = url,
+      resetVideo: _this.resetVideo
+    }
+  }
+
   get HTML() {
     return `
     <div>
@@ -163,19 +163,29 @@ export default class Background {
         </select>
       </div>
       <div>
-        <label for="custom-background"> Custom Background (Store Locally)</label>
+        <label for="custom-background">Custom Background (Store Locally)</label>
         <input type="file" id="custom-background" accept="image/*"/>
-        <button type="button" disabled id="custom-background-clear" disabled>Clear</button>
+        <button type="button" id="custom-background-clear" ${this.#config.name ? this.#config.name.isLocalFile ? "" : "disabled" : "disabled"}>Clear</button>
+      </div>
+      <div>
+        <label for="custom-background-url">Custom Background URL:</label>
+        <input type="text" id="custom-background-url" name="custom-background-url" value="${this.#config.name ? this.#config.name.value : ""}">
+        <button type="button" id="custom-background-url-apply">Apply</button>
       </div>
     </div>
     <div>
       <label for="video">Video</label>
-      <input type="checkbox" id="video" name="video" />
-      <div id="video-realted" hidden>
+      <input type="checkbox" id="video" name="video" ${this.useVideo ? "checked" : ""}/>
+      <div id="video-realted" ${this.useVideo ? "" : "hidden"}>
         <div>
-          <label for="custom-video-background"> Custom Video Background (Store Locally)</label>
+          <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>
+          <button type="button" id="custom-video-background-clear" ${this.#config.video.name ? this.#config.video.name.isLocalFile ? "" : "disabled" : "disabled"}>Clear</button>
+        </div>
+        <div>
+          <label for="custom-video-background-url">Custom Video Background URL:</label>
+          <input type="text" id="custom-video-background-url" name="custom-video-background-url"  value="${this.#config.video.name ? this.#config.video.name.value : ""}">
+          <button type="button" id="custom-video-background-url-apply">Apply</button>
         </div>
         <div>
           <label for="video-volume">Video Volume</label>
@@ -204,21 +214,25 @@ export default class Background {
       }, {
         id: "default-background-select", event: "change", handler: e => {
           this.default = e.currentTarget.value
-          this.#musicObj.music = e.currentTarget.value
         }
       }, {
         id: "custom-background", event: "change", handler: e => this.custom = e.target.files[0]
       }, {
         id: "custom-background-clear", event: "click", handler: () => this.resetImage()
+      }, {
+        id: "custom-background-url-apply", event: "click", handler: () => this.custom = document.getElementById("custom-background-url").value
       }, {
         id: "video", event: "click", handler: e => {
           showRelatedHTML(e.currentTarget, "video-realted");
+          this.useVideo = e.currentTarget.checked
           if (!e.currentTarget.checked) this.resetVideo()
         }
       }, {
         id: "custom-video-background", event: "change", handler: e => this.video = e.target.files[0]
       }, {
         id: "custom-video-background-clear", event: "click", handler: () => this.resetVideo()
+      }, {
+        id: "custom-video-background-url-apply", event: "click", handler: () => this.video = document.getElementById("custom-video-background-url").value
       }, {
         id: "video-volume-slider", event: "input", handler: e => {
           syncHTMLValue(e.currentTarget, "video-volume-input");