Skip to content

Commit

Permalink
making style assignments with classes + creating headers with setHead…
Browse files Browse the repository at this point in the history 
…ing + removed showSidebarIcon option
  • Loading branch information
@zuluwi
zuluwi committed Mar 6, 2024
1 parent 666d0bb commit 14ca8be
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 47 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/release.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,4 @@ jobs:
gh release create "$tag" \
--title="$tag" \
--draft \
main.js manifest.json
main.js manifest.json styles.css
11 changes: 0 additions & 11 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export default class VLCBridgePlugin extends Plugin {

async onload() {
await this.loadSettings();
this.setSidebarIcon();

const { getStatus, getCurrentVideo, checkPort, sendVlcRequest, openVideo, launchSyncplay, vlcExecOptions, addSubtitle } = passPlugin(this);
this.openVideo = openVideo;
Expand Down Expand Up @@ -225,16 +224,6 @@ export default class VLCBridgePlugin extends Plugin {

onunload() {}

setSidebarIcon = () => {
if (this.settings.showSidebarIcon) {
this.openVideoIcon = this.addRibbonIcon("lucide-traffic-cone", t("Select a file to open with VLC Player"), (evt: MouseEvent) => {
this.fileOpen();
});
} else {
this.openVideoIcon?.remove();
}
};

secondsToTimestamp(seconds: number) {
return new Date(seconds * 1000).toISOString().slice(seconds < 3600 ? 14 : 11, 19);
}
Expand Down
100 changes: 65 additions & 35 deletions src/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export interface VBPluginSettings {
pauseOnPasteSnapshot: boolean;
timestampOffset: number;
usePercentagePosition: boolean;
showSidebarIcon: boolean;
timestampLinktext: string;
timestampLinkTemplate: string;
snapshotLinktext: string;
Expand All @@ -50,7 +49,6 @@ export const DEFAULT_SETTINGS: VBPluginSettings = {
pauseOnPasteSnapshot: false,
timestampOffset: 0,
usePercentagePosition: false,
showSidebarIcon: true,
timestampLinktext: "{{timestamp}}",
timestampLinkTemplate: "{{timestamplink}} ",
snapshotLinktext: "{{filename}} {{timestamp}}",
Expand Down Expand Up @@ -165,31 +163,25 @@ export class VBPluginSettingsTab extends PluginSettingTab {
.setValue(this.plugin.settings.port.toString())
.onChange(async (value) => {
if (isNaN(Number(value)) || 65535 < Number(value) || 1 > Number(value)) {
text.inputEl.style.borderColor = "red";
text.inputEl.addClass("warning");
} else if (!(await isPortAvailable(Number(value)))) {
text.inputEl.style.borderColor = "red";
text.inputEl.addClass("warning");
new Notice(t("The port you selected is not usable, please enter another port value"));
} else {
text.inputEl.style.borderColor = "currentColor";
text.inputEl.removeClass("warning");
this.plugin.settings.port = Number(value);
await this.plugin.saveSettings();
setSettingDesc();
}
});
text.inputEl.addClass("vlc-bridge-text-input");

if (!(await isPortAvailable(this.plugin.settings.port))) {
text.inputEl.style.borderColor = "red";
text.inputEl.addClass("warning");
new Notice(t("The port you selected is not usable, please enter another port value"));
}
});

new Setting(containerEl).setName(t("Show 'open video' icon in the sidebar")).addToggle((toggle) => {
toggle.setValue(this.plugin.settings.showSidebarIcon).onChange(async (value) => {
this.plugin.settings.showSidebarIcon = value;
await this.plugin.saveSettings();
this.plugin.setSidebarIcon();
});
});
new Setting(containerEl).setName(t("Always show VLC Player on top")).addToggle((toggle) => {
toggle.setValue(this.plugin.settings.alwaysOnTop).onChange(async (value) => {
this.plugin.settings.alwaysOnTop = value;
Expand Down Expand Up @@ -244,23 +236,22 @@ export class VBPluginSettingsTab extends PluginSettingTab {
tsOffsetText = text;
text.setValue(this.plugin.settings.timestampOffset.toString()).onChange(async (value) => {
if (!Number.isInteger(Number(value))) {
text.inputEl.style.borderColor = "red";
text.inputEl.addClass("warning");
} else {
text.inputEl.style.borderColor = "currentColor";
text.inputEl.removeClass("warning");
this.plugin.settings.timestampOffset = Number(value);
await this.plugin.saveSettings();
tsOffsetSlider.setValue(this.plugin.settings.timestampOffset);
}
});

text.inputEl.style.width = "5em";
return text;
text.inputEl.addClasses(["vlc-bridge-text-input", "number"]);
});
}

containerEl.createEl("h1", { text: t("Link Templates") });
new Setting(containerEl).setName(t("Link Templates")).setHeading();

containerEl.createEl("h2", { text: t("Timestamp Link") });
new Setting(containerEl).setName(t("Timestamp Link")).setHeading();

const tsLinkTextSetting = new Setting(containerEl)
.setName(t("Timestamp Linktext"))
Expand All @@ -273,7 +264,7 @@ export class VBPluginSettingsTab extends PluginSettingTab {
await this.plugin.saveSettings();
setSettingDesc();
});
text.inputEl.style.width = "20em";
text.inputEl.addClasses(["vlc-bridge-text-input", "linktext"]);
return text;
})
.addExtraButton((button) =>
Expand Down Expand Up @@ -326,8 +317,7 @@ export class VBPluginSettingsTab extends PluginSettingTab {
await this.plugin.saveSettings();
setSettingDesc();
});
text.inputEl.style.width = "20em";
return text;
text.inputEl.addClasses(["vlc-bridge-text-input", "linktext"]);
})
.addExtraButton((button) =>
button.setIcon("lucide-rotate-ccw").onClick(async () => {
Expand Down Expand Up @@ -371,52 +361,90 @@ export class VBPluginSettingsTab extends PluginSettingTab {
})
);

containerEl.createEl("h1", { text: t("Seeking Amounts") });
new Setting(containerEl).setName(t("Seeking Amounts")).setHeading();

let seekOffsetSlider: SliderComponent;
let seekOffsetText: TextComponent;
new Setting(containerEl)
.setName(t("Normal Seek Amount (in seconds)"))
.setDesc(t("Set the seek amount for 'Seek forward/backward' commands"))
.addSlider((slider) => {
seekOffsetSlider = slider;
slider
.setLimits(1, 60, 1)
.setDynamicTooltip()
.setValue(this.plugin.settings.normalSeek)
.onChange((value) => {
.onChange(async (value) => {
this.plugin.settings.normalSeek = value;
this.plugin.saveSettings();
await this.plugin.saveSettings();
seekOffsetText.setValue(this.plugin.settings.normalSeek.toString());
});
})
.addText((text) => {
seekOffsetText = text;
text.setValue(this.plugin.settings.normalSeek.toString()).onChange(async (value) => {
if (!Number.isInteger(Number(value))) {
text.inputEl.addClass("warning");
} else {
text.inputEl.removeClass("warning");
this.plugin.settings.normalSeek = Number(value);
await this.plugin.saveSettings();
seekOffsetSlider.setValue(this.plugin.settings.normalSeek);
}
});

text.inputEl.addClasses(["vlc-bridge-text-input", "number"]);
});

let longSeekOffsetSlider: SliderComponent;
let longSeekOffsetText: TextComponent;
new Setting(containerEl)
.setName(t("Long Seek Amount (in seconds)"))
.setDesc(t("Set the seek amount for 'Long seek forward/backward' commands"))
.addSlider((slider) => {
longSeekOffsetSlider = slider;
slider
.setLimits(5, 10 * 60, 5)
.setDynamicTooltip()
.setValue(this.plugin.settings.largeSeek)
.onChange((value) => {
.onChange(async (value) => {
this.plugin.settings.largeSeek = value;
this.plugin.saveSettings();
await this.plugin.saveSettings();
longSeekOffsetText.setValue(this.plugin.settings.largeSeek.toString());
});
})
.addText((text) => {
longSeekOffsetText = text;
text.setValue(this.plugin.settings.largeSeek.toString()).onChange(async (value) => {
if (!Number.isInteger(Number(value))) {
text.inputEl.addClass("warning");
} else {
text.inputEl.removeClass("warning");
this.plugin.settings.largeSeek = Number(value);
await this.plugin.saveSettings();
longSeekOffsetSlider.setValue(this.plugin.settings.largeSeek);
}
});

text.inputEl.addClasses(["vlc-bridge-text-input", "number"]);
});

containerEl.createEl("h1", { text: t("Snapshot") });
new Setting(containerEl).setName(t("Snapshot")).setHeading();

const folderNamePattern = /^[A-Za-z0-9][^\\\/\<\>\"\*\:\|\?]*$/gi;
new Setting(containerEl)
.setName(t("Snapshot folder"))
.setDesc(t("Enter the folder name where snapshots will be saved in the vault"))
.setTooltip(t("Select a valid file name"))
.addText((text) =>
.addText((text) => {
text
.setPlaceholder(this.plugin.settings.snapshotFolder)
.setValue(this.plugin.settings.snapshotFolder)
.onChange(async (value) => {
if (!value.match(folderNamePattern)) {
text.inputEl.style.borderColor = "red";
text.inputEl.addClass("warning");
} else {
text.inputEl.style.borderColor = "currentColor";
text.inputEl.removeClass("warning");
if (await this.plugin.app.vault.adapter.exists(this.plugin.settings.snapshotFolder)) {
this.plugin.app.vault.adapter.rename(this.plugin.settings.snapshotFolder, value);
} else {
Expand All @@ -426,8 +454,10 @@ export class VBPluginSettingsTab extends PluginSettingTab {
await this.plugin.saveSettings();
setSettingDesc();
}
})
);
});
text.inputEl.addClass("vlc-bridge-text-input");
return text;
});

new Setting(containerEl)
.setName(t("Snapshot Format"))
Expand All @@ -443,7 +473,7 @@ export class VBPluginSettingsTab extends PluginSettingTab {
});
});

containerEl.createEl("h1", { text: "Syncplay" });
new Setting(containerEl).setName("Syncplay").setHeading();

let selectSPDescEl: HTMLElement;
const selectSP = new Setting(containerEl)
Expand Down Expand Up @@ -482,7 +512,7 @@ export class VBPluginSettingsTab extends PluginSettingTab {
})
);

containerEl.createEl("h1", { text: t("Extra") });
new Setting(containerEl).setName(t("Extra")).setHeading();

copyUrlEl = new Setting(containerEl).setName(t("Copy VLC Web Interface link")).addButton((btn) =>
btn.setButtonText(t("Copy to clipboard")).onClick(async () => {
Expand Down
12 changes: 12 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.vlc-bridge-text-input {
border-color: currentColor;
}
.vlc-bridge-text-input.warning {
border-color: red !important;
}
.vlc-bridge-text-input.number {
width: 5em !important;
}
.vlc-bridge-text-input.linktext {
width: 20em !important;
}

0 comments on commit 14ca8be

Please sign in to comment.