Skip to content

Commit

Permalink
fix(setting-tab): adjust desc
Browse files Browse the repository at this point in the history
  • Loading branch information
@aidenlx
aidenlx committed Feb 17, 2024
1 parent cbbbb84 commit dd440d1
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 66 deletions.
5 changes: 2 additions & 3 deletions apps/app/src/settings/def.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ type MxSettingValues = {
timestampOffset: number;
biliDefaultQuality: BilibiliQuality;
screenshotFormat: "image/png" | "image/jpeg" | "image/webp";
screenshotQuality: number | null;
screenshotQuality?: number;
};
const settingKeys = enumerate<keyof MxSettingValues>()(
"defaultVolume",
Expand Down Expand Up @@ -71,7 +71,6 @@ const mxSettingsDefault = {
timestampOffset: 0,
biliDefaultQuality: BilibiliQuality.FHD,
screenshotFormat: "image/webp",
screenshotQuality: null,
} satisfies MxSettingValues;

function getDefaultDeviceName() {
Expand Down Expand Up @@ -157,7 +156,7 @@ export function createSettingsStore(plugin: MxPlugin) {
save(get());
},
setScreenshotQuality(quality) {
set({ screenshotQuality: quality });
set({ screenshotQuality: quality ?? undefined });
save(get());
},
getUrlMappingData() {
Expand Down
171 changes: 108 additions & 63 deletions apps/app/src/settings/tab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import "./style.global.less";
import type { BilibiliQuality } from "@/web/session/bilibili";
import { bilibiliQualityLabels } from "@/web/session/bilibili";
import { getDialog } from "@/web/session/utils";
import type { OpenLinkBehavior } from "./def";
import type { MxSettings, OpenLinkBehavior } from "./def";

export class MxSettingTabs extends PluginSettingTab {
plugin: MxPlugin;
Expand Down Expand Up @@ -324,22 +324,11 @@ export class MxSettingTabs extends PluginSettingTab {
);
}

noteTaking() {
timestamp() {
const { containerEl: container } = this;

new Setting(container).setHeading().setName("Note taking");
new Setting(container)
.setDesc("Configure where timestamps and screenshots are inserted")
.setName("Insert location")
.addDropdown((d) =>
d
.addOption("before", "Latest content on top")
.addOption("after", "Latest content at end")
.setValue(this.state.insertBefore === true ? "before" : "after")
.onChange((val) =>
this.state.setInsertPosition(val as "before" | "after"),
),
);
new Setting(container).setHeading().setName("Timestamp");

new Setting(container)
.setName("Timestamp template")
.setDesc(
Expand All @@ -356,13 +345,53 @@ export class MxSettingTabs extends PluginSettingTab {
text.inputEl.rows = 5;
text.inputEl.cols = 40;
});

new Setting(container)
.setName("Timestamp offset")
.setDesc("Offset in seconds to add to the timestamp")
.addSlider((slide) =>
slide
.setLimits(-10, 10, 0.01)
.setValue(this.state.timestampOffset)
.onChange(this.state.setTimestampOffset)
.then((slide) => {
this.sub((s, prev) => {
if (s.timestampOffset === prev.timestampOffset) return;
slide.setValue(s.timestampOffset);
});
}),
)
.addText((text) =>
text
.setValue(toStr(this.state.timestampOffset))
.onChange(handleFloat(this.state.setTimestampOffset))
.then((input) => {
setLimits.call(input, -10, 10, 0.01);
input.inputEl.type = "number";
input.inputEl.style.textAlign = "center";
this.sub((s, prev) => {
if (s.timestampOffset === prev.timestampOffset) return;
input.setValue(toStr(s.timestampOffset));
});
}),
)
.then((s) => s.controlEl.appendText("s"));
}

screenshot() {
const { containerEl: container } = this;

new Setting(container).setHeading().setName("Screenshot");

new Setting(container)
.setName("Screenshot linktext template")
.setDesc(
createFragment((descEl) => {
descEl.appendText("The template used to create screenshot linktext.");
descEl.createEl("br");
descEl.appendText("Supported placeholders: {{DURATION}}, {{TITLE}}");
descEl.createEl("br");
descEl.appendText("Remove `|50` suffix to embed image in full size");
}),
)
.addTextArea((text) => {
Expand All @@ -379,10 +408,14 @@ export class MxSettingTabs extends PluginSettingTab {
descEl.appendText("The template used to insert screenshot.");
descEl.createEl("br");
descEl.appendText("Supported placeholders: ");
descEl.createEl("br");
descEl.appendText("{{SCREENSHOT}} - screenshot link");
descEl.createEl("br");
descEl.appendText("{{TIMESTAMP}} - timestamp link");
descEl.createEl("ul", {}, (ul) => {
ul.createEl("li").appendText("{{TIMESTAMP}} - timestamp link");
ul.createEl("li", {}, (li) => {
li.appendText("{{SCREENSHOT}} - link to screenshot");
li.createEl("br");
li.appendText("add `!` prefix to insert as image embed");
});
});
}),
)
.addTextArea((text) => {
Expand All @@ -392,36 +425,7 @@ export class MxSettingTabs extends PluginSettingTab {
text.inputEl.rows = 5;
text.inputEl.cols = 40;
});
new Setting(container)
.setName("Timestamp offset")
.setDesc("Offset in seconds to add to the timestamp")
.addSlider((slide) =>
slide
.setLimits(-10, 10, 0.01)
.setValue(this.state.timestampOffset)
.onChange(this.state.setTimestampOffset)
.then((slide) => {
this.sub((s, prev) => {
if (s.timestampOffset === prev.timestampOffset) return;
slide.setValue(s.timestampOffset);
});
}),
)
.addText((text) =>
text
.setValue(toStr(this.state.timestampOffset))
.onChange(handleFloat(this.state.setTimestampOffset))
.then((input) => {
setLimits.call(input, -10, 10, 0.01);
input.inputEl.type = "number";
input.inputEl.style.textAlign = "center";
this.sub((s, prev) => {
if (s.timestampOffset === prev.timestampOffset) return;
input.setValue(toStr(s.timestampOffset));
});
}),
)
.then((s) => s.controlEl.appendText("s"));

new Setting(container)
.setName("Screenshot format")
.setDesc(
Expand All @@ -447,24 +451,44 @@ export class MxSettingTabs extends PluginSettingTab {
),
),
);

const qualVal = (state: MxSettings) =>
state.screenshotFormat === "image/webp" ? 0.8 : 0.92;
new Setting(container)
.setName("Screenshot quality")
.setDesc("Quality of the screenshot")
.addSlider((slide) =>
slide
.setLimits(0, 1, 0.01)
.setValue(
this.state.screenshotQuality ??
(this.state.screenshotFormat === "image/webp" ? 0.8 : 0.92),
)
.onChange(this.state.setScreenshotQuality)
.then((slide) => {
.addText((text) =>
text
.setValue(this.state.screenshotQuality?.toString() ?? "")
.setPlaceholder(qualVal(this.state).toString())
.onChange(handleFloat(this.state.setScreenshotQuality))
.then((input) => {
setLimits.call(input, 0, 1, 0.01);
input.inputEl.type = "number";
input.inputEl.style.textAlign = "center";
this.sub((s, prev) => {
if (s.screenshotFormat === prev.screenshotFormat) return;
slide.setValue(
s.screenshotQuality ??
(s.screenshotFormat === "image/webp" ? 0.8 : 0.92),
);
if (s.screenshotFormat !== prev.screenshotFormat) {
input.setPlaceholder(qualVal(this.state).toString());
}
if (s.screenshotQuality !== prev.screenshotQuality) {
input.setValue(s.screenshotQuality?.toString() ?? "");
}
});
}),
)
.addButton((btn) =>
btn
.setTooltip("Reset to default")
.setIcon("reset")
.onClick(() => {
this.state.setScreenshotQuality(null);
})
.setDisabled(this.state.screenshotQuality === null)
.then(() => {
this.sub((s, prev) => {
if (s.screenshotQuality !== prev.screenshotQuality) {
btn.setDisabled(s.screenshotQuality === null);
}
});
}),
)
Expand All @@ -477,6 +501,27 @@ export class MxSettingTabs extends PluginSettingTab {
});
}

noteTaking() {
const { containerEl: container } = this;

new Setting(container).setHeading().setName("Note taking");
new Setting(container)
.setDesc("Configure where timestamps and screenshots are inserted")
.setName("Insert location")
.addDropdown((d) =>
d
.addOption("before", "Latest content on top")
.addOption("after", "Latest content at end")
.setValue(this.state.insertBefore === true ? "before" : "after")
.onChange((val) =>
this.state.setInsertPosition(val as "before" | "after"),
),
);

this.timestamp();
this.screenshot();
}

webpage() {
if (!Platform.isDesktopApp) return;
const { containerEl: container } = this;
Expand Down

0 comments on commit dd440d1

Please sign in to comment.