diff --git a/src/main/ipc.ts b/src/main/ipc.ts index 19318c9..c48a6ab 100644 --- a/src/main/ipc.ts +++ b/src/main/ipc.ts @@ -28,8 +28,9 @@ import { IpcEvents } from "../shared/IpcEvents"; import { setBadgeCount } from "./appBadge"; import { autoStart } from "./autoStart"; import { VENCORD_FILES_DIR, VENCORD_QUICKCSS_FILE, VENCORD_THEMES_DIR } from "./constants"; -import { createTrayIcon, generateTrayIcons, getTrayIconFile, mainWin, setTrayIcon } from "./mainWindow"; +import { mainWin, setTrayIcon } from "./mainWindow"; import { Settings } from "./settings"; +import { createTrayIcon, generateTrayIcons, getTrayIconFile, getTrayIconFileSync, pickTrayIcon } from "./tray"; import { handle, handleSync } from "./utils/ipcWrappers"; import { PopoutWindows } from "./utils/popout"; import { isDeckGameMode, showGamePage } from "./utils/steamOS"; @@ -162,6 +163,8 @@ watch( handle(IpcEvents.SET_TRAY_ICON, (_, iconURI) => setTrayIcon(iconURI)); handle(IpcEvents.GET_TRAY_ICON, (_, iconPath) => getTrayIconFile(iconPath)); +handleSync(IpcEvents.GET_TRAY_ICON_SYNC, (_, iconPath) => getTrayIconFileSync(iconPath)); handle(IpcEvents.GET_SYSTEM_ACCENT_COLOR, () => `#${systemPreferences.getAccentColor?.() || ""}`); handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL) => createTrayIcon(iconName, dataURL)); handle(IpcEvents.GENERATE_TRAY_ICONS, () => generateTrayIcons()); +handle(IpcEvents.SELECT_TRAY_ICON, async (_, iconName) => pickTrayIcon(iconName)); diff --git a/src/main/mainWindow.ts b/src/main/mainWindow.ts index 99f3276..a099e5a 100755 --- a/src/main/mainWindow.ts +++ b/src/main/mainWindow.ts @@ -16,9 +16,8 @@ import { session, Tray } from "electron"; -import { mkdirSync, writeFileSync } from "fs"; -import { readFile, rm } from "fs/promises"; -import { join, parse } from "path"; +import { rm } from "fs/promises"; +import { join } from "path"; import { IpcEvents } from "shared/IpcEvents"; import { isTruthy } from "shared/utils/guards"; import { once } from "shared/utils/once"; @@ -39,6 +38,7 @@ import { } from "./constants"; import { Settings, State, VencordSettings } from "./settings"; import { createSplashWindow } from "./splash"; +import { generateTrayIcons } from "./tray"; import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally"; import { applyDeckKeyboardFix, askToApplySteamLayout, isDeckGameMode } from "./utils/steamOS"; import { downloadVencordFiles, ensureVencordFiles } from "./utils/vencordLoader"; @@ -516,32 +516,3 @@ export async function setTrayIcon(iconName: string) { } tray.setImage(join(STATIC_DIR, "icon.png")); } - -export async function getTrayIconFile(iconPath: string) { - const Icons = new Set(["speaking", "muted", "deafened", "idle"]); - if (!Icons.has(parse(iconPath).name)) { - iconPath = "icon"; - return readFile(join(STATIC_DIR, "icon.png")); - } - return readFile(iconPath, "utf8"); -} - -export async function createTrayIcon(iconName: string, iconDataURL: string) { - // creates .png at config/TrayIcons/iconName.png from given iconDataURL - // primarily called from renderer using CREATE_TRAY_ICON_RESPONSE IPC call - iconDataURL = iconDataURL.replace(/^data:image\/png;base64,/, ""); - writeFileSync(join(DATA_DIR, "TrayIcons", iconName + ".png"), iconDataURL, "base64"); - mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON); -} - -export async function generateTrayIcons(force = false) { - // this function generates tray icons as .png's in Vesktop cache for future use - mkdirSync(join(DATA_DIR, "TrayIcons"), { recursive: true }); - if (force || !Settings.store.trayCustom) { - const Icons = ["speaking", "muted", "deafened", "idle"]; - for (const icon of Icons) { - mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, join(STATIC_DIR, icon + ".svg")); - } - } - mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON); -} diff --git a/src/main/tray.ts b/src/main/tray.ts new file mode 100644 index 0000000..c2f8ecc --- /dev/null +++ b/src/main/tray.ts @@ -0,0 +1,72 @@ +/* + * SPDX-License-Identifier: GPL-3.0 + * Vesktop, a desktop app aiming to give you a snappier Discord Experience + * Copyright (c) 2023 Vendicated and Vencord contributors + */ + +import { dialog, nativeImage } from "electron"; +import { copyFileSync, mkdirSync, writeFileSync } from "fs"; +import { readFile } from "fs/promises"; +import { join } from "path"; +import { IpcEvents } from "shared/IpcEvents"; +import { STATIC_DIR } from "shared/paths"; + +import { DATA_DIR } from "./constants"; +import { mainWin } from "./mainWindow"; +import { Settings } from "./settings"; + +export async function getTrayIconFile(iconName: string) { + const Icons = new Set(["speaking", "muted", "deafened", "idle"]); + if (!Icons.has(iconName)) { + iconName = "icon"; + return readFile(join(STATIC_DIR, "icon.png")); + } + return readFile(join(STATIC_DIR, iconName + ".svg"), "utf8"); +} + +export function getTrayIconFileSync(iconName: string) { + // returns dataURL of image from TrayIcons folder + const Icons = new Set(["speaking", "muted", "deafened", "idle", "icon"]); + if (Icons.has(iconName)) { + const img = nativeImage + .createFromPath(join(DATA_DIR, "TrayIcons", iconName + ".png")) + .resize({ width: 128, height: 128 }); + if (img.isEmpty()) + return nativeImage.createFromPath(join(DATA_DIR, "TrayIcons", iconName + ".png")).toDataURL(); + return img.toDataURL(); + } +} + +export async function createTrayIcon(iconName: string, iconDataURL: string) { + // creates .png at config/TrayIcons/iconName.png from given iconDataURL + // primarily called from renderer using CREATE_TRAY_ICON_RESPONSE IPC call + iconDataURL = iconDataURL.replace(/^data:image\/png;base64,/, ""); + writeFileSync(join(DATA_DIR, "TrayIcons", iconName + ".png"), iconDataURL, "base64"); + mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON); +} + +export async function generateTrayIcons(force = false) { + // this function generates tray icons as .png's in Vesktop cache for future use + mkdirSync(join(DATA_DIR, "TrayIcons"), { recursive: true }); + if (force || !Settings.store.trayCustom) { + const Icons = ["speaking", "muted", "deafened", "idle"]; + for (const icon of Icons) { + mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, icon); + } + } + mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON); +} + +export async function pickTrayIcon(iconName: string) { + const res = await dialog.showOpenDialog(mainWin!, { + properties: ["openFile"], + filters: [{ name: "Image", extensions: ["png", "jpg"] }] + }); + if (!res.filePaths.length) return "cancelled"; + const dir = res.filePaths[0]; + // add .svg !! + const image = nativeImage.createFromPath(dir); + if (image.isEmpty()) return "invalid"; + copyFileSync(dir, join(DATA_DIR, "TrayIcons", iconName + ".png")); + return dir; +} diff --git a/src/preload/VesktopNative.ts b/src/preload/VesktopNative.ts index 9bbee1b..53d6372 100644 --- a/src/preload/VesktopNative.ts +++ b/src/preload/VesktopNative.ts @@ -35,7 +35,8 @@ export const VesktopNative = { }, fileManager: { showItemInFolder: (path: string) => invoke(IpcEvents.SHOW_ITEM_IN_FOLDER, path), - selectVencordDir: () => invoke>(IpcEvents.SELECT_VENCORD_DIR) + selectVencordDir: () => invoke>(IpcEvents.SELECT_VENCORD_DIR), + selectTrayIcon: () => invoke>(IpcEvents.SELECT_TRAY_ICON) }, settings: { get: () => sendSync(IpcEvents.GET_SETTINGS), @@ -82,7 +83,8 @@ export const VesktopNative = { }, tray: { setIcon: (iconURI: string) => invoke(IpcEvents.SET_TRAY_ICON, iconURI), - getIcon: (iconPath: string) => invoke(IpcEvents.GET_TRAY_ICON, iconPath), + getIcon: (iconName: string) => invoke(IpcEvents.GET_TRAY_ICON, iconName), + getIconSync: (iconName: string) => sendSync(IpcEvents.GET_TRAY_ICON_SYNC, iconName), createIconResponse: (iconName: string, iconDataURL: string) => invoke(IpcEvents.CREATE_TRAY_ICON_RESPONSE, iconName, iconDataURL), createIconRequest: (listener: (iconName: string) => void) => { diff --git a/src/renderer/components/settings/Settings.tsx b/src/renderer/components/settings/Settings.tsx index 2000991..d7e8c1a 100644 --- a/src/renderer/components/settings/Settings.tsx +++ b/src/renderer/components/settings/Settings.tsx @@ -14,7 +14,7 @@ import { isMac, isWindows } from "renderer/utils"; import { AutoStartToggle } from "./AutoStartToggle"; import { DiscordBranchPicker } from "./DiscordBranchPicker"; import { NotificationBadgeToggle } from "./NotificationBadgeToggle"; -import { TrayFillColorSwitch, TrayIconPicker, TraySwitch, CustomizeTraySwitch } from "./TraySettings"; +import { CustomizeTraySwitch, TrayFillColorSwitch, TrayIconPicker, TraySwitch } from "./TraySettings"; import { VencordLocationPicker } from "./VencordLocationPicker"; import { WindowsTransparencyControls } from "./WindowsTransparencyControls"; diff --git a/src/renderer/components/settings/TraySettings.tsx b/src/renderer/components/settings/TraySettings.tsx index 06f6b57..562496a 100644 --- a/src/renderer/components/settings/TraySettings.tsx +++ b/src/renderer/components/settings/TraySettings.tsx @@ -6,15 +6,17 @@ import "./traySetting.css"; -import { Margins } from "@vencord/types/utils"; -import { findByCodeLazy } from "@vencord/types/webpack"; -import { Forms, Select, Switch } from "@vencord/types/webpack/common"; +import { Margins, Modals, ModalSize, openModal } from "@vencord/types/utils"; +import { findByCodeLazy, findByPropsLazy } from "@vencord/types/webpack"; +import { Forms, Select, Switch, Toasts } from "@vencord/types/webpack/common"; import { setCurrentTrayIcon } from "renderer/patches/tray"; +import { useSettings } from "renderer/settings"; import { isLinux, isMac } from "renderer/utils"; import { SettingsComponent } from "./Settings"; const ColorPicker = findByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)"); +const { PencilIcon } = findByPropsLazy("PencilIcon"); const presets = [ "#3DB77F", // discord default ~ @@ -33,6 +35,110 @@ if (!isLinux) if (color) presets.unshift(color); }); +function trayEditButton(iconName: string) { + return ( +
+ read if cute :3 + { + const choice = await VesktopNative.fileManager.selectTrayIcon(); + switch (choice) { + case "cancelled": + return; + case "invalid": + Toasts.show({ + message: "Please select a valid .png or .jpg image!", + id: Toasts.genId(), + type: Toasts.Type.FAILURE + }); + return; + } + console.log("choice:", choice); + // copy image and reload + // settings.trayIconPath = choice; + }} + /> +
+ ); +} + +function TrayModalComponent({ modalProps, close }: { modalProps: any; close: () => void }) { + const Settings = useSettings(); + return ( + + + Custom Tray Icons + + + + { + Settings.trayCustom = v; + }} + note="Whether to use custom tray icons" + > + Custom Tray Icons + + + + + Main icon + + {trayEditButton("icon")} + + + + + + Idle icon + + {trayEditButton("idle")} + + + + + + Speaking icon + + {trayEditButton("speaking")} + + + + + + Muted icon + + {trayEditButton("muted")} + + + + + + Deafened icon + + {trayEditButton("deafened")} + + + + + ); +} + +const openTrayModal = () => { + const key = openModal(props => props.onClose()} />); +}; + export const TraySwitch: SettingsComponent = ({ settings }) => { if (isMac) return null; return ( @@ -71,7 +177,7 @@ export const CustomizeTraySwitch: SettingsComponent = ({ settings }) => { href="about:blank" onClick={e => { e.preventDefault(); - // Bring up modal here + openTrayModal(); }} > Configure diff --git a/src/renderer/components/settings/traySetting.css b/src/renderer/components/settings/traySetting.css index 7455f29..e45a3e1 100644 --- a/src/renderer/components/settings/traySetting.css +++ b/src/renderer/components/settings/traySetting.css @@ -35,8 +35,7 @@ .vcd-tray-icon-wrap { position: relative; - align-self: right; - bottom: 24px; + align-self: end; } .vcd-tray-icon-image { @@ -48,11 +47,10 @@ .vcd-edit-button { visibility: visible; - display: block; opacity: 0; position: absolute; - top: 3px; - left: 4px; + top: 0.5em; + left: 0.7em; } .vcd-tray-icon-wrap:hover .vcd-tray-icon-image { @@ -65,3 +63,24 @@ visibility: visible; opacity: 1; } + + + + +.vcd-custom-tray-header h1 { + margin: 0; +} + +.vcd-custom-tray-modal { + padding: 1em; +} + +.vcd-custom-tray-icon-section { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.vcd-custom-tray-icon-form-text { + font-size: medium; +} \ No newline at end of file diff --git a/src/renderer/patches/tray.ts b/src/renderer/patches/tray.ts index 682c5e5..703676d 100644 --- a/src/renderer/patches/tray.ts +++ b/src/renderer/patches/tray.ts @@ -25,12 +25,12 @@ export function setCurrentTrayIcon() { } } -VesktopNative.tray.createIconRequest(async (iconPath: string) => { +VesktopNative.tray.createIconRequest(async (iconName: string) => { const pickedColor = VesktopNative.settings.get().trayColor; const fillColor = VesktopNative.settings.get().trayAutoFill ?? "auto"; try { - var svg = await VesktopNative.tray.getIcon(iconPath); + var svg = await VesktopNative.tray.getIcon(iconName); svg = svg.replace(/#f6bfac/gim, "#" + (pickedColor ?? "3DB77F")); if (fillColor !== "auto") { svg = svg.replace(/black/gim, fillColor); @@ -47,9 +47,7 @@ VesktopNative.tray.createIconRequest(async (iconPath: string) => { if (ctx) { ctx.drawImage(img, 0, 0); const dataURL = canvas.toDataURL("image/png"); - const fileNameExt = iconPath.replace(/^.*[\\/]/, ""); - const fileName = fileNameExt.substring(0, fileNameExt.lastIndexOf(".")); - VesktopNative.tray.createIconResponse(fileName, dataURL); + VesktopNative.tray.createIconResponse(iconName, dataURL); } }; img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`; diff --git a/src/shared/IpcEvents.ts b/src/shared/IpcEvents.ts index fd07c04..425c959 100644 --- a/src/shared/IpcEvents.ts +++ b/src/shared/IpcEvents.ts @@ -53,9 +53,11 @@ export const enum IpcEvents { SET_TRAY_ICON = "VCD_SET_TRAY_ICON", GET_TRAY_ICON = "VCD_GET_TRAY_ICON", + GET_TRAY_ICON_SYNC = "VCD_GET_TRAY_ICON_SYNC", CREATE_TRAY_ICON_REQUEST = "VCD_CREATE_TRAY_ICON_REQUEST", CREATE_TRAY_ICON_RESPONSE = "VCD_CREATE_TRAY_ICON_RESPONSE", GENERATE_TRAY_ICONS = "VCD_GENERATE_TRAY_ICONS", SET_CURRENT_VOICE_TRAY_ICON = "VCD_SET_CURRENT_VOICE_ICON", - GET_SYSTEM_ACCENT_COLOR = "VCD_GET_ACCENT_COLOR" + GET_SYSTEM_ACCENT_COLOR = "VCD_GET_ACCENT_COLOR", + SELECT_TRAY_ICON = "VCD_SELECT_TRAY_ICON" }