Update settings

2026-06-06 05:38:44 +08:00 · 2023-05-26 22:20:01 +08:00
parent d9908be26d
commit a00002a3b8
5 changed files with 140 additions and 2 deletions
--- a/components/SettingsContext.tsx
+++ b/components/SettingsContext.tsx
@@ -25,7 +25,7 @@ export default class SettingsContext extends Component<Props, State> {
    }
    render() {
        return (
-            <SettingsCtx.Provider value={this.props}>
+            <SettingsCtx.Provider value={this.state}>
                {this.props.children}
            </SettingsCtx.Provider>
        );
--- a/components/SettingsText.tsx
+++ b/components/SettingsText.tsx
@@ -0,0 +1,88 @@
+import { Component, ComponentChildren, ContextType } from "preact";
+import { SettingsCtx } from "./SettingsContext.tsx";
+import { ConfigType } from "../config.ts";
+import TextField from "preact-material-components/TextField";
+import { Ref, useRef } from "preact/hooks";
+
+export type SettingsTextProps = {
+    value: string;
+    name: keyof ConfigType;
+    description: string;
+    label?: string;
+    helpertext?: string;
+    textarea?: boolean;
+    fullwidth?: boolean;
+    disabled?: boolean;
+    children?: ComponentChildren;
+};
+
+export default class SettingsText
+    extends Component<SettingsTextProps, unknown> {
+    static contextType = SettingsCtx;
+    ref: Ref<TextField | undefined> | undefined;
+    declare context: ContextType<typeof SettingsCtx>;
+    update(value: string) {
+        const e = this.ref?.current;
+        if (e) {
+            const b = e.base;
+            if (b) {
+                const t = b as HTMLElement;
+                const d = t.querySelector("input");
+                if (d) {
+                    d.value = value;
+                }
+            }
+        }
+    }
+    set_text(value: string) {
+        if (this.context) {
+            this.context.set_settings((v) => {
+                if (v) {
+                    const t: Record<string, unknown> = v;
+                    t[this.props.name] = value;
+                    if (this.context) {
+                        this.context.set_changed((v) => {
+                            v.add(this.props.name);
+                            return v;
+                        });
+                    }
+                    return t as ConfigType;
+                }
+            });
+        }
+    }
+    componentDidMount() {
+        this.update(this.props.value);
+    }
+    componentWillUpdate(
+        nextProps: Readonly<SettingsTextProps>,
+        _nextState: Readonly<unknown>,
+        _nextContext: unknown,
+    ) {
+        this.update(nextProps.value);
+    }
+    render() {
+        this.ref = useRef<TextField>();
+        return (
+            <div class="text">
+                <label>{this.props.description}</label>
+                <TextField
+                    fullwidth={this.props.fullwidth}
+                    textarea={this.props.textarea}
+                    type="text"
+                    disabled={this.props.disabled}
+                    helperText={this.props.helpertext}
+                    label={this.props.label}
+                    ref={this.ref}
+                    onInput={(ev: InputEvent) => {
+                        if (ev.target) {
+                            const e = ev.target as HTMLInputElement;
+                            this.set_text(e.value);
+                        }
+                    }}
+                />
+                {this.props.children}
+            </div>
+        );
+    }
+}
--- a/deno.lock
+++ b/deno.lock
@@ -198,6 +198,7 @@
    "https://esm.sh/[email protected]/Checkbox": "bf34f5cd8c6d015916d854d91aab2caf115463e97be9a461f8dd3370ea11a49c",
    "https://esm.sh/[email protected]/Icon": "e15153f88485e448a8d5ee9d1399205717b41d9cb72bd5824c3b42e1dc463cf6",
    "https://esm.sh/[email protected]/List": "5eefaedd7a0f66843c1a1de658f4058b6fc1bbdcd0af1ec627c0f9412f4510c5",
+    "https://esm.sh/[email protected]/TextField": "a03efbe74b561d1bb95d2ff59163ba50cfe27ef72d8c29f136d0be7e248eca76",
    "https://esm.sh/[email protected]/TopAppBar": "e418485020aecb866d9cc44216cd52c5ac1ff120bd1ad422b318428c274b3474",
    "https://esm.sh/[email protected]": "ae382301328ab874e2c42bee76e261bb8d094673fe76ca7eb71917636d43d8ad",
    "https://esm.sh/[email protected]/hooks": "1813f80c6d648f8137a62569e35972b0716f92539f192d6db66d45b7aafea43a",
@@ -227,12 +228,25 @@
    "https://esm.sh/v122/@babel/[email protected]/deno/helpers/typeof.js": "ea8e5723c88f83ac7cfbb5728d38e20449f7387093b2825e6c8c81fdc50a7f32",
    "https://esm.sh/v122/@material/[email protected]/deno/component.js": "031f373ae497c52e9b7050165e31dc6e708aebe2b2df027b25c897ce4b7cd43a",
    "https://esm.sh/v122/@material/[email protected]/deno/foundation.js": "4edd0737b3601305ffe599556e98e4861542210744da83af19194c8c4f50c0e0",
+    "https://esm.sh/v122/@material/[email protected]/deno/adapter.js": "05ef2078de04c85a8fd4567ef122eefa4ff04418048602f0885f78bbd156418a",
+    "https://esm.sh/v122/@material/[email protected]/deno/constants.js": "d3a83d71e3c72466ef6323cc53fb7ca1b7387667d9f9c0c2c58165ae334c1cab",
+    "https://esm.sh/v122/@material/[email protected]/deno/foundation.js": "3c818e3221af9d8b07846044f2c7ba6bcd356ca3dce862eff5a89edb67e4952e",
+    "https://esm.sh/v122/@material/[email protected]/deno/index.js": "37408ccc9af1c7427ffbd47d1434b690e0b9da3819a1f3a27b2f6e8d94ef2160",
+    "https://esm.sh/v122/@material/[email protected]/deno/adapter.js": "5e9cde4f63e9d9397f535bf58e46a34b1e40e06ee71e3943c97f445b2772999c",
+    "https://esm.sh/v122/@material/[email protected]/deno/constants.js": "28766d91bf1b13cc3b51b3bc65a9c76121822155c0cba9d1c10dadbba95507c4",
+    "https://esm.sh/v122/@material/[email protected]/deno/foundation.js": "7e585feac286e979498551b01eaed5b7c30ec45fa31f9efbd992cb5c81ff5501",
+    "https://esm.sh/v122/@material/[email protected]/deno/index.js": "d0e6e381a39928988ee1f00ef4d69b83e9b8640920aca83ad3857f773e1d7139",
+    "https://esm.sh/v122/@material/[email protected]/deno/adapter.js": "d9fb961820cd0c896798b05af0383bdb4cbc0a722f1c37c8525fa451c916d5b8",
+    "https://esm.sh/v122/@material/[email protected]/deno/constants.js": "6f49ba051a3daf2a696aa69d1f97e21c56883e235d113c8b2cc90bf5ca7365da",
+    "https://esm.sh/v122/@material/[email protected]/deno/foundation.js": "c8aab4b3755d5c745ea75840867f02cddc3ec9ca2edbfb7f421ff91c140d66a3",
+    "https://esm.sh/v122/@material/[email protected]/deno/index.js": "491e625fbbcfb69bd6f77856b710f4caa9a13437440de772e5ed1c5f00d0bcb3",
    "https://esm.sh/v122/@material/[email protected]/deno/adapter.js": "29b56c7005653c22ce0d167db65b802e14903e2ba67164824d0be6364309117f",
    "https://esm.sh/v122/@material/[email protected]/deno/constants.js": "f8a80510d9c102aacc87c0fdcdd665118685d53f18948f7eabe275b2c85512a8",
    "https://esm.sh/v122/@material/[email protected]/deno/foundation.js": "691312af51a78412d5bea70fee6d85cd3c2e6beb6e39a5ad878496d874b9633a",
    "https://esm.sh/v122/@material/[email protected]/deno/index.js": "379c671f75219f71074e9d5fc1d790325d4ef469e0268d509147afaab67c6e8a",
    "https://esm.sh/v122/@material/[email protected]/deno/ripple.mjs": "a915efddd4cf20bc2bbb187fc44655b1d9919d563be67053fa9b71b78cd05df5",
    "https://esm.sh/v122/@material/[email protected]/deno/util.js": "4df787664fc517d4545bb7d502f85de3b34cfa613e34edd6b4630ea21e673cf2",
+    "https://esm.sh/v122/@material/[email protected]/deno/textfield.mjs": "b5b70ecde6fb97e99b8f2dfbd052cf14e3caaf99ba1c19a63fb3d52e2ee91876",
    "https://esm.sh/v122/@material/[email protected]/deno/top-app-bar.mjs": "e7de012030af2ce0baac3cff6c96adc206f763cea07924a8c714fd4a83b6a18f",
    "https://esm.sh/v122/[email protected]/deno/bind-decorator.mjs": "21a126bdebaca6e38120139d903c3485c4f57e15487646666e79c1b5c15d0e44",
    "https://esm.sh/v122/[email protected]/Base/MaterialComponent.d.ts": "af619a28f2d2f76113e29e952308a2ce46577438f7ed40531458b880ff9a141f",
@@ -240,11 +254,13 @@
    "https://esm.sh/v122/[email protected]/Button/index.d.ts": "3744521d359e3ccf04f115ac731e3304ff8d5901b7d7bcb617de5d88833fdb5c",
    "https://esm.sh/v122/[email protected]/Icon/index.d.ts": "b2c27c8b912f07f20025951d9d05b2e4fb07c773d43db567b930e59b1c444f1c",
    "https://esm.sh/v122/[email protected]/List/index.d.ts": "b4159279b6622abbf057385c2b155875dc7e80bdd4403def72d1c0cf58324c73",
+    "https://esm.sh/v122/[email protected]/TextField/index.d.ts": "107e98cbbf663f9ad39aca61600e885935ccb84cf670397739ecf9685a7208d5",
    "https://esm.sh/v122/[email protected]/TopAppBar/index.d.ts": "d921bd9336541339b0fff19e0769cea149b798bc172d261a7b7a1595f6b90266",
    "https://esm.sh/v122/[email protected]/deno/Base/MaterialComponent.js": "7dca052dee2ab5010232055eac4a3159c8455e9b2857870525f7002cb50160bd",
    "https://esm.sh/v122/[email protected]/deno/Button.js": "d60a9ea2eff985808ee0f491579b88dd30e6ce8bf0cb95ac2e7e9c2da9b0c0f3",
    "https://esm.sh/v122/[email protected]/deno/Icon.js": "44e17e354a08a2421fffcca3493efa60cc92e2357d410ed387e40f5d34da0ee2",
    "https://esm.sh/v122/[email protected]/deno/List.js": "6e908d2bac752351683097bcc22ea26d8e46009c60bc3cee2312728af2f60776",
+    "https://esm.sh/v122/[email protected]/deno/TextField.js": "111d412f9eb75a09cdc4cccd3b929d655432f8ecd1c4745a7da5db29f2793fef",
    "https://esm.sh/v122/[email protected]/deno/TopAppBar.js": "ab7ec4fa168d7867961b9fd818e10d138ffb075c20ea4b11f6d231318d897145",
    "https://esm.sh/v122/[email protected]/deno/themeUtils/generateThemeClass.js": "5ec3dd1474bfb68d60ae2c06c90a3faab4e1f79597807d1e72ff5608b05f0a44",
    "https://esm.sh/v124/@babel/[email protected]/deno/helpers/classCallCheck.js": "678d4a1fc837f06947628e73a957e1f017fe30c77e8500008ec9a5977563c4f9",
--- a/islands/Settings.tsx
+++ b/islands/Settings.tsx
@@ -1,11 +1,12 @@
 import { Component, ContextType } from "preact";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import Button from "preact-material-components/Button";
 import { tw } from "twind";
 import { GlobalCtx } from "../components/GlobalContext.tsx";
 import { ConfigType } from "../config.ts";
 import SettingsCheckbox from "../components/SettingsCheckbox.tsx";
 import SettingsContext from "../components/SettingsContext.tsx";
+import SettingsText from "../components/SettingsText.tsx";

 export type SettingsProps = {
    show: boolean;
@@ -35,6 +36,7 @@ export default class Settings extends Component<SettingsProps> {
        if (error) {
            data = <div class={tw`text-red-500`}>{error}</div>;
        } else if (settings) {
+            const ref = useRef<SettingsText>();
            data = (
                <div class="settings">
                    <SettingsContext
@@ -56,6 +58,30 @@ export default class Settings extends Component<SettingsProps> {
                            checked={settings.mpv}
                            description="Fetch page data from Multi-Page Viewer."
                        />
+                        <SettingsText
+                            name="base"
+                            value={settings.base}
+                            description="Download location:"
+                        />
+                        <SettingsText
+                            name="ua"
+                            value={settings.ua ? settings.ua : ""}
+                            description="User Agent:"
+                            ref={ref}
+                        >
+                            <Button
+                                onClick={() => {
+                                    if (ref.current) {
+                                        const ua = navigator.userAgent;
+                                        const t = ref.current;
+                                        t.update(ua);
+                                        t.set_text(ua);
+                                    }
+                                }}
+                            >
+                                Use current browser's user agent.
+                            </Button>
+                        </SettingsText>
                    </SettingsContext>
                    <Button onClick={loadData}>Reload</Button>
                </div>
--- a/static/common.css
+++ b/static/common.css
@@ -18,6 +18,14 @@
    top: 64px;
 }

+.settings {
+    width: 100vw;
+}
+
 .settings label {
    line-height: 40px;
 }
+
+.settings label.text {
+    line-height: 64px;
+}