feat(showcase): rewrite the webpage using preact for future development (2/3)

add wallpaper engine settings

template/showcase/src/components/settings.jsx

@@ -61,41 +61,88 @@ export default function Settings({
     spinePlayer.setFps(value)
   }
 
+  useEffect(() => {
+    const handleListener = (e) => {
+      setFPS(e.detail)
+    }
+    subscribe("settings:fps", handleListener)
+    return () => unsubscribe("settings:fps", handleListener)
+  }, [spinePlayer])
+
   const setLogoDisplay = (flag) => {
     setShowLogo(flag)
     logoEl.hidden = flag;
   }
 
+  useEffect(() => {
+    const handleListener = (e) => {
+      setLogoDisplay(e.detail)
+    }
+    subscribe("settings:logo", handleListener)
+    return () => unsubscribe("settings:logo", handleListener)
+  }, [logoEl])
+
+  const setLogo = (src, invert_filter) => {
+    logoEl.src = src
+    resize()
+    setLogoInvertFilter(invert_filter)
+  }
+
   const setLogoImage = (e) => {
     readFile(
       e,
       (readerEvent) => {
         const content = readerEvent.target.result;
-        logoEl.src = content
-        resize()
-        setLogoInvertFilter(false)
+        setLogo(content, false)
       },
       () => setLogoClearDisabled(false)
     )
   }
 
+  useEffect(() => {
+    const handleListener = (e) => {
+      setLogo(e.detail)
+    }
+    subscribe("settings:image:set", handleListener)
+    return () => unsubscribe("settings:image:set", handleListener)
+  }, [logoEl])
+
   const resetLogoImage = () => {
-    logoEl.src = defaultLogoImage
-    resize()
-    setLogoInvertFilter(defaultInvertFilter)
+    setLogo(defaultLogoImage, defaultInvertFilter)
     setLogoClearDisabled(true)
   }
 
+  useEffect(() => {
+    subscribe("settings:image:reset", resetLogoImage)
+    return () => unsubscribe("settings:image:reset", resetLogoImage)
+  }, [logoEl])
+
   const setLogoRatio = (value) => {
     setRatio(value)
     resize(value)
   }
 
+  useEffect(() => {
+    const handleListener = (e) => {
+      setLogoRatio(e.detail)
+    }
+    subscribe("settings:ratio", handleListener)
+    return () => unsubscribe("settings:ratio", handleListener)
+  }, [logoEl])
+
   const setLogoOpacity = (value) => {
     setOpacity(value)
     logoEl.style.opacity = value / 100
   }
 
+  useEffect(() => {
+    const handleListener = (e) => {
+      setLogoOpacity(e.detail)
+    }
+    subscribe("settings:opacity", handleListener)
+    return () => unsubscribe("settings:opacity", handleListener)
+  }, [logoEl])
+
   const setLogoInvertFilter = (flag) => {
     if (!flag) {
       logoEl.style.filter = "invert(0)"
@@ -104,22 +151,39 @@ export default function Settings({
     }
   }
 
+  const setBackgoundImage = (v) => {
+    document.body.style.backgroundImage = v
+  }
+
   const setBackground = (e) => {
     readFile(
       e,
       (readerEvent) => {
         const content = readerEvent.target.result;
-        document.body.style.backgroundImage = `url("${content}")`
+        setBackgoundImage(`url("${content}")`)
       },
       () => setBackgroundClearDisabled(false)
     )
   }
 
+  useEffect(() => {
+    const handleListener = (e) => {
+      setBackgoundImage(e.detail)
+    }
+    subscribe("settings:background:set", handleListener)
+    return () => unsubscribe("settings:background:set", handleListener)
+  }, [])
+
   const resetBackground = () => {
-    document.body.style.backgroundImage = defaultBackgroundImage
+    setBackgoundImage(defaultBackgroundImage)
     setBackgroundClearDisabled(true)
   }
 
+  useEffect(() => {
+    subscribe("settings:background:reset", resetLogoImage)
+    return () => unsubscribe("settings:background:reset", resetLogoImage)
+  }, [])
+
   const positionPadding = (key, value) => {
     switch (key) {
       case "left":
@@ -153,6 +217,14 @@ export default function Settings({
     }
   }
 
+  useEffect(() => {
+    const handleListener = (e) => {
+      positionPadding(e.detail.key, e.detail.value)
+    }
+    subscribe("settings:position:set", handleListener)
+    return () => unsubscribe("settings:position:set", handleListener)
+  }, [spinePlayer])
+
   const positionReset = () => {
     setPadLeft(defaultPadLeft)
     setPadRight(defaultPadRight)
@@ -161,6 +233,11 @@ export default function Settings({
     spinePlayer.updateViewport(defaultViewport)
   }
 
+  useEffect(() => {
+    subscribe("settings:position:reset", positionReset)
+    return () => unsubscribe("settings:position:reset", positionReset)
+  }, [spinePlayer])
+
   useEffect(() => {
     if (logoEl) {
       resize()

template/showcase/src/libs/wallpaper_engine.js

@@ -4,64 +4,65 @@ window.wallpaperPropertyListener = {
     applyGeneralProperties: function (properties) {
         if (properties.fps) {
             // use custom event
-            publish('fps', properties.fps.value)
+            publish('settings:fps', properties.fps.value)
         }
     },
     applyUserProperties: function (properties) {
         if (properties.logo) {
-            publish('logo', properties.logo.value)
+            publish('settings:logo', !properties.logo.value)
         }
         if (properties.logoratio) {
             if (properties.logoratio.value) {
-                publish('logoratio', properties.logoratio.value)
+                publish('settings:ratio', properties.logoratio.value)
             }
         }
         if (properties.logoopacity) {
             if (properties.logoopacity.value) {
-                publish('logoopacity', properties.logoopacity.value)
+                publish('settings:opacity', properties.logoopacity.value)
             }
         }
         if (properties.logoimage) {
             if (properties.logoimage.value) {
-                publish('logoimage', properties.logoimage.value)
-                // var logoImage = 'file:///' + properties.logoimage.value;
-                // settings.setLogo(logoImage, true);
+                publish('settings:image:set', 'file:///' + properties.logoimage.value)
             } else {
-                publish('logoimage', null)
-                // settings.resetLogo();
+                publish('settings:image:reset')
             }
         }
         if (properties.background) {
             if (properties.background.value) {
-                publish('background', properties.background.value)
-                // var background = 'file:///' + properties.background.value;
-                // settings.setBackground(background);
+                publish('settings:background:set', 'file:///' + properties.background.value)
             } else {
-                publish('background', null)
-                // settings.resetBackground();
+                publish('settings:background:reset')
             }
         }
         if (properties.position) {
             if (!properties.position.value) {
-                publish('position', null)
-                // settings.positionReset();
+                publish('settings:position:reset')
             }
         }
         if (properties.paddingleft) {
-            publish('paddingleft', properties.paddingleft.value)
-            // settings.positionPadding("padLeft", properties.paddingleft.value)
+            publish('settings:position:set', {
+                key: "left",
+                value: properties.paddingleft.value
+            })
         }
         if (properties.paddingright) {
-            publish('paddingright', properties.paddingright.value)
-            // settings.positionPadding("padRight", properties.paddingright.value)
+            publish('settings:position:set', {
+                key: "right",
+                value: properties.paddingright.value
+            })
         }
         if (properties.paddingtop) {
-            publish('paddingtop', properties.paddingtop.value)
-            // settings.positionPadding("padTop", properties.paddingtop.value)
+            publish('settings:position:set', {
+                key: "top",
+                value: properties.paddingtop.value
+            })
         }
         if (properties.paddingbottom) {
-            publish('paddingbottom', properties.paddingbottom.value)
-            // settings.positionPadding("padBottom", properties.paddingbottom.value)
+            publish('settings:position:set', {
+                key: "bottom",
+                value: properties.paddingbottom.value
+            })
         }
     },
 };