From 06c16d53a5316aca1b8d04a6019fa6c9932c4a32 Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Sun, 8 Jan 2023 08:04:39 -0500 Subject: [PATCH] feat(showcase): rewrite the webpage using preact for future development (2/3) add wallpaper engine settings --- template/showcase/src/components/settings.jsx | 93 +++++++++++++++++-- .../showcase/src/libs/wallpaper_engine.js | 49 +++++----- 2 files changed, 110 insertions(+), 32 deletions(-) diff --git a/template/showcase/src/components/settings.jsx b/template/showcase/src/components/settings.jsx index 62e2625..a665574 100644 --- a/template/showcase/src/components/settings.jsx +++ b/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() diff --git a/template/showcase/src/libs/wallpaper_engine.js b/template/showcase/src/libs/wallpaper_engine.js index 0f39ac1..48fa66b 100644 --- a/template/showcase/src/libs/wallpaper_engine.js +++ b/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 + }) } }, }; \ No newline at end of file