Rework setup and tray

This commit is contained in:
smartfrigde 2023-06-10 22:54:46 +02:00
parent 4937a2cddf
commit fdd9855065
11 changed files with 247 additions and 196 deletions

View file

@ -2,9 +2,7 @@
"loading_screen_start": "Starting ArmCord…",
"loading_screen_offline": "You appear to be offline. Please connect to the Internet and try again.",
"loading_screen_update": "A new version of ArmCord is available. Please update to the latest version.",
"setup_question1": "Select what kind of setup you want to perform:",
"setup_question1_answer1": "Express Setup",
"setup_question1_answer2": "Full Setup",
"setup_question1": "Welcome to the ArmCord Setup",
"setup_offline": "You appear to be offline. Please connect to the internet and restart ArmCord.",
"setup_question2": "Choose your Discord channel/instance:",
"setup_question3": "Should ArmCord handle client mods installation?",
@ -12,7 +10,7 @@
"no": "No",
"next": "Next",
"setup_question4": "Select a client mod you want to install:",
"setup_question4_clientmodnotice": "Why not all of them? Having many client mods at the same time can cause issues. If you really want to do it though, check our Discord.",
"setup_question5": "Do you want to use a tray icon?",
"settings-theme": "ArmCord theme",
"settings-theme-desc1": "ArmCord \"themes\" manage apps behaviour and looks.",
"settings-theme-desc2": "this is how ArmCord looks when you first launch it. It includes recreation of Discord's\n custom titlebar and ArmCord specific styles injected into Discord.",
@ -21,8 +19,8 @@
"settings-theme-native": "Native",
"settings-theme-transparent": "Transparent (Experimental)",
"settings-csp-desc": "ArmCord CSP is our system that manages loading custom content loading into the Discord app. Stuff like\n client mods and themes depend on it. Disable if you want to get rid of mods and custom styles.",
"settings-tray": "Minimize to tray",
"settings-tray-desc": "When disabled, ArmCord will close like any other window when closed, otherwise it'll sit back and relax\n in your system tray for later.",
"settings-mintoTray": "Minimize to tray",
"settings-mintoTray-desc": "When disabled, ArmCord will close like any other window when closed, otherwise it'll sit back and relax\n in your system tray for later.",
"settings-startMinimized": "Start minimized",
"settings-startMinimized-desc": "ArmCord starts in background and remains out of your way.",
"settings-patches": "Automatic Patches",
@ -35,6 +33,8 @@
"settings-dynamicIcon-desc": "Following Discord's behaviour on Windows, this shows unread messages/pings count on ArmCord's icon instead of it's tray.",
"settings-spellcheck": "Spellcheck",
"settings-spellcheck-desc": "Helps you correct misspelled words by highlighting them.",
"settings-tray": "Tray",
"settings-tray-desc": "ArmCord's tray menu is a place where you can easily and quickly access ArmCord's settings and allows you to quickly show up Discord window.",
"settings-channel": "Discord channel",
"settings-channel-desc1": "You can use this setting to change current instance of Discord:",
"settings-channel-desc2": "you're probably most familiar with this one. It's the one you see in default Discord\n client!",

View file

@ -74,7 +74,6 @@ ipcRenderer.on("rpc", (_event, data: object) => {
if (window.location.href.indexOf("splash.html") > -1 || window.location.href.indexOf("setup.html") > -1) {
contextBridge.exposeInMainWorld("armcordinternal", {
restart: () => ipcRenderer.send("restart"),
installState: ipcRenderer.sendSync("modInstallState"),
saveSettings: (...args: any) => ipcRenderer.send("saveSettings", ...args)
installState: ipcRenderer.sendSync("modInstallState")
});
}

View file

@ -18,14 +18,10 @@ if (ipcRenderer.sendSync("legacyCapturer")) {
const version = ipcRenderer.sendSync("displayVersion");
async function updateLang(): Promise<void> {
if (window.location.href.indexOf("setup.html") > -1) {
console.log("Setup, skipping lang update");
} else {
const value = `; ${document.cookie}`;
const parts: any = value.split(`; locale=`);
if (parts.length === 2) ipcRenderer.send("setLang", parts.pop().split(";").shift());
}
}
declare global {
interface Window {
armcord: any;

View file

@ -33,7 +33,11 @@ export function injectTitlebar(): void {
const quit = document.getElementById("quit");
minimize!.addEventListener("click", () => {
if (window.location.href.indexOf("setup.html") > -1) {
ipcRenderer.send("setup-minimize");
} else {
ipcRenderer.send("win-minimize");
}
});
maximize!.addEventListener("click", () => {
@ -46,11 +50,15 @@ export function injectTitlebar(): void {
});
quit!.addEventListener("click", () => {
if (window.location.href.indexOf("setup.html") > -1) {
ipcRenderer.send("setup-quit");
} else {
if (ipcRenderer.sendSync("minimizeToTray") === true) {
ipcRenderer.send("win-hide");
} else if (ipcRenderer.sendSync("minimizeToTray") === false) {
ipcRenderer.send("win-quit");
}
}
});
});
}

View file

@ -45,10 +45,10 @@
<br />
<div class="switch acTray">
<label class="header" data-string="settings-tray"></label>
<input id="tray" class="tgl tgl-light left" data-setting="minimizeToTray" type="checkbox" />
<label class="header" data-string="settings-mintoTray"></label>
<input id="minimizeToTray" class="tgl tgl-light left" data-setting="minimizeToTray" type="checkbox" />
<label class="tgl-btn left" for="tray"></label>
<p class="description" data-string="settings-tray-desc"></p>
<p class="description" data-string="settings-mintoTray-desc"></p>
</div>
<br />
@ -60,6 +60,14 @@
</div>
<br />
<div class="switch acTray">
<label class="header" data-string="settings-tray"></label>
<input id="tray" class="tgl tgl-light left" data-setting="tray" type="checkbox" />
<label class="tgl-btn left" for="tray"></label>
<p class="description" data-string="settings-tray-desc"></p>
</div>
<br />
<div class="switch acPatches">
<label class="header" data-string="settings-patches"></label>
<input id="patches" class="tgl tgl-light left" data-setting="automaticPatches" type="checkbox" />

42
src/setup/main.ts Normal file
View file

@ -0,0 +1,42 @@
import {BrowserWindow, app, ipcMain} from "electron";
import path from "path";
import * as fs from "fs";
import * as os from "os";
import {iconPath} from "../main";
import {Settings, getConfigLocation, setConfigBulk} from "../utils";
let setupWindow: BrowserWindow;
export function createSetupWindow(): void {
setupWindow = new BrowserWindow({
width: 390,
height: 470,
title: "ArmCord Setup",
darkTheme: true,
icon: iconPath,
frame: false,
autoHideMenuBar: true,
webPreferences: {
sandbox: false,
spellcheck: false,
preload: path.join(__dirname, "preload.js")
}
});
ipcMain.on("saveSettings", (_event, args: Settings) => {
console.log(args);
setConfigBulk(args);
});
ipcMain.on("setup-minimize", () => {
setupWindow.minimize();
});
ipcMain.on("setup-getOS", (event) => {
event.returnValue = process.platform;
});
ipcMain.on("setup-quit", async () => {
fs.unlink(await getConfigLocation(), (err) => {
if (err) throw err;
console.log('Closed during setup. "settings.json" was deleted');
app.quit();
});
});
setupWindow.loadURL(`file://${__dirname}/setup.html`);
}

12
src/setup/preload.ts Normal file
View file

@ -0,0 +1,12 @@
import {contextBridge, ipcRenderer} from "electron";
import {injectTitlebar} from "../preload/titlebar";
injectTitlebar();
contextBridge.exposeInMainWorld("armcordinternal", {
restart: () => ipcRenderer.send("restart"),
getOS: ipcRenderer.sendSync("setup-getOS"),
saveSettings: (...args: any) => ipcRenderer.send("saveSettings", ...args),
getLang: (toGet: string) =>
ipcRenderer.invoke("getLang", toGet).then((result) => {
return result;
})
});

View file

@ -7,9 +7,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ArmCord Setup</title>
<style>
@import url("css/setup.css");
@import url("../content/css/setup.css");
</style>
</head>
<body>
<div class="container">
<div id="warning" class="hidden">
@ -18,10 +19,9 @@
<div id="setup">
<div id="logo" class="hidden"></div>
<div id="page1" class="hidden">
<p id="setup_question1">Select the type of setup you want to perform.</p>
<p id="setup_question1">Welcome to the ArmCord Setup</p>
<div id="buttons">
<button id="express" class="center">Express</button>
<button id="full" class="center">Full</button>
<button id="full" class="center">Next</button>
</div>
</div>
@ -34,17 +34,8 @@
<option value="ptb">PTB</option>
</select>
</div>
<p class="text-center setup-ask" id="setup_question3">
Should ArmCord handle client mods installation?
</p>
<div class="center">
<select name="csp" id="csp" class="dropdown-button">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div id="buttons">
<button id="next" class="center">Next</button>
<button id="next-page2" class="center">Next</button>
</div>
</div>
@ -57,32 +48,36 @@
<option value="none">None</option>
</select>
</div>
<p class="text-center" id="setup_question4_clientmodnotice">
Why not all of them? Having many client mods at the same time can cause issues. If you really
want to do it though, check our Discord ;)
</p>
<div id="buttons">
<button id="next" class="center">Next</button>
<button id="next-page3" class="center">Next</button>
</div>
</div>
<div id="page4" class="hidden">
<p class="text-center setup-ask" id="setup_question5">Do you want to use a tray icon?</p>
<div class="center">
<select name="tray" id="tray" class="dropdown-button">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<p class="text-center" id="linuxNotice"></p>
<div id="buttons">
<button id="next-page4" class="center">Next</button>
</div>
</div>
</div>
</div>
<script>
async function loadLang() {
document.getElementById("next").innerHTML = await armcord.getLang("next");
document.getElementById("setup_offline").innerHTML = await armcord.getLang("setup_offline");
document.getElementById("setup_question1").innerHTML = await armcord.getLang("setup_question1");
document.getElementById("express").innerHTML = await armcord.getLang("setup_question1_answer1");
document.getElementById("full").innerHTML = await armcord.getLang("setup_question1_answer2");
document.getElementById("setup_question2").innerHTML = await armcord.getLang("setup_question2");
document.getElementById("setup_question3").innerHTML = await armcord.getLang("setup_question3");
document.getElementById("setup_question4").innerHTML = await armcord.getLang("setup_question4");
document.getElementById("setup_question4_clientmodnotice").innerHTML = await armcord.getLang(
"setup_question4_clientmodnotice"
);
//select stuff1
document.getElementById("csp").options[1].text = await armcord.getLang("no");
document.getElementById("csp").options[0].text = await armcord.getLang("yes");
document.getElementById("next").innerHTML = await armcordinternal.getLang("next");
document.getElementById("setup_offline").innerHTML = await armcordinternal.getLang("setup_offline");
document.getElementById("setup_question1").innerHTML = await armcordinternal.getLang("setup_question1");
document.getElementById("express").innerHTML = await armcordinternal.getLang("setup_question1_answer1");
document.getElementById("full").innerHTML = await armcordinternal.getLang("setup_question1_answer2");
document.getElementById("setup_question2").innerHTML = await armcordinternal.getLang("setup_question2");
document.getElementById("setup_question3").innerHTML = await armcordinternal.getLang("setup_question3");
document.getElementById("setup_question4").innerHTML = await armcordinternal.getLang("setup_question4");
document.getElementById("setup_question5").innerHTML = await armcordinternal.getLang("setup_question5");
}
loadLang();
</script>
@ -108,88 +103,52 @@
let page2 = document.getElementById("page2");
let page3 = document.getElementById("page3");
let page4 = document.getElementById("page4");
// }}}
// Express
page1.buttons[0].addEventListener("click", () => {
window.armcordinternal.saveSettings({
windowStyle: "default",
channel: "stable",
armcordCSP: true,
minimizeToTray: true,
alternativePaste: false,
automaticPatches: false,
mods: "none",
useLegacyCapturer: false,
inviteWebsocket: true,
mobileMode: false,
dynamicIcon: false,
trayIcon: "default",
startMinimized: false,
spellcheck: true,
performanceMode: "none"
});
setTimeout(() => window.armcordinternal.restart(), 500);
});
// Full
page1.buttons[1].addEventListener("click", () => {
page1.buttons[0].addEventListener("click", () => {
page1.classList.add("hidden");
page2.classList.remove("hidden");
});
page2.buttons = document.querySelectorAll("#page2 > #buttons > button");
page2.buttons[0].addEventListener("click", () => {
document.getElementById("next-page2").addEventListener("click", () => {
options.channel = document.getElementById("channel").value;
options.csp = document.getElementById("csp").value;
page2.classList.add("hidden");
page3.buttons = document.querySelectorAll("#page3 > #buttons > button");
if (options.csp === "true") {
page3.classList.remove("hidden");
page3.buttons[0].addEventListener("click", () => {
options.mod = document.getElementById("mod").value;
window.armcordinternal.saveSettings({
windowStyle: "default",
channel: options.channel,
armcordCSP: true,
minimizeToTray: true,
mobileMode: false,
automaticPatches: false,
performanceMode: "none",
useLegacyCapturer: false,
alternativePaste: false,
dynamicIcon: false,
spellcheck: true,
disableAutogain: false,
startMinimized: false,
trayIcon: "default",
mods: options.mod,
inviteWebsocket: true
page2.classList.add("hidden");
page3.classList.remove("hidden");
document.getElementById("next-page3").addEventListener("click", () => {
page3.classList.add("hidden");
page4.classList.remove("hidden");
});
setTimeout(() => window.armcordinternal.restart(), 500);
});
} else {
window.armcordinternal.saveSettings({
windowStyle: "default",
channel: options.channel,
armcordCSP: true,
minimizeToTray: true,
automaticPatches: false,
mobileMode: false,
spellcheck: true,
disableAutogain: false,
mods: "none",
dynamicIcon: false,
useLegacyCapturer: false,
startMinimized: false,
alternativePaste: false,
performanceMode: "none",
trayIcon: "default",
inviteWebsocket: true
});
setTimeout(() => window.armcordinternal.restart(), 500);
if (window.armcordinternal.getOS == "win32") {
document.getElementById("tray").value = "false";
document.getElementById(
"linuxNotice"
).innerHTML = `Linux may not work well with tray icons. Depending on your system configuration, you may not be able to see the tray icon. Enable at your own risk. Can be changed later.`;
}
document.getElementById("next-page4").addEventListener("click", () => {
window.armcordinternal.saveSettings({
windowStyle: "default",
channel: options.channel,
armcordCSP: true,
minimizeToTray: true,
automaticPatches: false,
mobileMode: false,
spellcheck: true,
disableAutogain: false,
mods: options.mod,
dynamicIcon: false,
useLegacyCapturer: false,
tray: /true/i.test(document.getElementById("tray").value),
startMinimized: false,
alternativePaste: false,
performanceMode: "none",
trayIcon: "default",
inviteWebsocket: true
});
setTimeout(() => window.armcordinternal.restart(), 500);
});
});
document.body.setAttribute("insetup", "");
</script>

View file

@ -1,7 +1,7 @@
import * as fs from "fs";
import {Menu, Tray, app, nativeImage} from "electron";
import {Menu, Tray, app, dialog, nativeImage} from "electron";
import {createInviteWindow, mainWindow} from "./window";
import {getConfig, getConfigLocation, getDisplayVersion, setWindowState} from "./utils";
import {getConfig, getConfigLocation, getDisplayVersion, setConfig, setWindowState} from "./utils";
import * as path from "path";
import {createSettingsWindow} from "./settings/main";
export let tray: any = null;
@ -25,7 +25,7 @@ app.whenReady().then(async () => {
};
if (process.platform == "darwin" && trayPath.getSize().height > 22) trayPath = trayPath.resize({height: 22});
if (await getConfig("tray")) {
let clientName = (await getConfig("clientName")) ?? "ArmCord";
if ((await getConfig("windowStyle")) == "basic") {
tray = new Tray(trayPath);
@ -142,4 +142,32 @@ app.whenReady().then(async () => {
tray.on("click", function () {
mainWindow.show();
});
} else {
if ((await getConfig("tray")) == undefined) {
if (process.platform == "win32") {
const options = {
type: "question",
buttons: ["Yes, please", "No, I don't"],
defaultId: 1,
title: "Tray icon choice",
message: `Do you want to use tray icons?`,
detail: "Linux may not work well with tray icons. Depending on your system configuration, you may not be able to see the tray icon. Enable at your own risk. Can be changed later."
};
dialog.showMessageBox(mainWindow, options).then(({response}) => {
if (response == 0) {
setConfig("tray", true);
} else {
setConfig("tray", false);
}
app.relaunch();
app.exit();
});
} else {
setConfig("tray", true);
app.relaunch();
app.exit();
}
}
}
});

View file

@ -52,6 +52,7 @@ export function setup(): void {
inviteWebsocket: true,
startMinimized: false,
dynamicIcon: false,
tray: true,
disableAutogain: false,
useLegacyCapturer: false,
mobileMode: false,
@ -260,6 +261,7 @@ export interface Settings {
performanceMode: string;
startMinimized: boolean;
useLegacyCapturer: boolean;
tray: boolean;
inviteWebsocket: boolean;
disableAutogain: boolean;
trayIcon: string;

View file

@ -23,6 +23,7 @@ import contextMenu from "electron-context-menu";
import os from "os";
import {tray} from "./tray";
import {iconPath} from "./main";
import {createSetupWindow} from "./setup/main";
export let mainWindow: BrowserWindow;
export let inviteWindow: BrowserWindow;
@ -256,12 +257,8 @@ async function doAfterDefiningTheWindow(): Promise<void> {
}
if (firstRun) {
await setLang(new Intl.DateTimeFormat().resolvedOptions().locale);
mainWindow.setSize(390, 470);
await mainWindow.loadFile(path.join(__dirname, "/content/setup.html"));
let trayPath = nativeImage.createFromPath(path.join(__dirname, "../", `/assets/ac_plug_colored.png`));
if (process.platform === "darwin" && trayPath.getSize().height > 22) trayPath = trayPath.resize({height: 22});
if (process.platform === "win32" && trayPath.getSize().height > 32) trayPath = trayPath.resize({height: 32});
tray.setImage(trayPath);
createSetupWindow();
mainWindow.close();
} else if ((await getConfig("skipSplash")) == true) {
// It's modified elsewhere.
// eslint-disable-next-line no-unmodified-loop-condition