diff --git a/Makefile b/Makefile index 48ce768766..9dfb2cf512 100644 --- a/Makefile +++ b/Makefile @@ -56,6 +56,7 @@ integration: build build: node_modules binaries/client yarn run npm:fix-build-version $(MAKE) build-extensions -B + yarn run build:tray-icons yarn run compile ifeq "$(DETECTED_OS)" "Windows" # https://github.com/ukoloff/win-ca#clear-pem-folder-on-publish diff --git a/build/generate-tray-icons.ts b/build/generate-tray-icons.ts index 4a1952b63d..179e82a816 100644 --- a/build/generate-tray-icons.ts +++ b/build/generate-tray-icons.ts @@ -31,113 +31,70 @@ function getSvgStyling(colouring: "dark" | "light"): string { `; } -async function getBaseIconTemplates() { +async function getBaseIconImage() { const svgData = await readFile(inputFile, { encoding: "utf-8" }); const dom = new JSDOM(`${svgData}`); const root = dom.window.document.body.getElementsByTagName("svg")[0]; root.innerHTML += getSvgStyling("light"); - return root.outerHTML; + return Buffer.from(root.outerHTML); } -async function generateNormalImages(template: string, size: number, name: string) { +async function generateImage(image: Buffer, size: number, namePrefix: string) { + sharp(image) + .resize({ width: size, height: size }) + .toFile(path.join(outputFolder, `${namePrefix}.png`)); +} + +async function generateImages(image: Buffer, size: number, name: string) { await Promise.all([ - sharp(Buffer.from(template)) - .resize({ width: size, height: size }) - .png() - .toFile(path.join(outputFolder, `${name}.png`)), - sharp(Buffer.from(template)) - .resize({ width: size*2, height: size*2 }) - .png() - .toFile(path.join(outputFolder, `${name}@2x.png`)), + generateImage(image, size, name), + generateImage(image, size*2, `${name}@2x`), + generateImage(image, size*3, `${name}@3x`), + generateImage(image, size*4, `${name}@4x`), ]); } -async function generateUpdateAvailableImages(template: string, size: number, name: string, noticeSvg: string) { - const circleSvg = new JSDOM(` - - - - - - - `).window.document.getElementsByTagName("svg")[0]; - - circleSvg.innerHTML += getSvgStyling("dark"); - - const circleBuffer = await sharp(Buffer.from(circleSvg.outerHTML)) - .resize({ - width: Math.floor(size/1.5), - height: Math.floor(size/1.5), - }) +async function generateUpdateAvailableImages(baseImage: Buffer) { + const noticeIconImage = await getNoticeIconImage(); + const circleBuffer = await sharp(Buffer.from(` + + + + `)) .toBuffer(); - await sharp(circleBuffer) - .toFile(path.join(outputFolder, "circle.png")); - - await Promise.all([ - sharp(Buffer.from(template)) - .resize({ width: size, height: size }) - .composite([ - { - input: circleBuffer, - gravity: "southeast", - /** - * The `clear` blend rule is buggy and currently doesn't work - * - * https://github.com/lovell/sharp/issues/3247 - */ - blend: "clear", - }, - { - input: ( - await sharp(Buffer.from(noticeSvg)) - .resize({ - width: Math.floor(size/1.5), - height: Math.floor(size/1.5), - }) - .toBuffer() - ), - gravity: "southeast", - }, - ]) - .png() - .toFile(path.join(outputFolder, `${name}.png`)), - sharp(Buffer.from(template)) - .composite([ - { - input: circleBuffer, - gravity: "southeast", - blend: "clear", - }, - { - input: ( - await sharp(Buffer.from(noticeSvg)) - .resize({ - width: Math.floor((size * 2)/1.5), - height: Math.floor((size * 2)/1.5), - }) - .toBuffer() - ), - gravity: "southeast", - }, - ]) - .resize({ width: size*2, height: size*2 }) - .png() - .toFile(path.join(outputFolder, `${name}@2x.png`)), - ]); + return sharp(baseImage) + .resize({ width: 128, height: 128 }) + .composite([ + { + input: circleBuffer, + top: 64, + left: 64, + blend: "dest-out", + }, + { + input: ( + await sharp(noticeIconImage) + .resize({ + width: 60, + height: 60, + }) + .toBuffer() + ), + top: 66, + left: 66, + }, + ]) + .toBuffer(); } -async function getNoticeSvg(): Promise { +async function getNoticeIconImage() { const svgData = await readFile(noticeFile, { encoding: "utf-8" }); const noticeSvgRoot = new JSDOM(svgData).window.document.getElementsByTagName("svg")[0]; - return noticeSvgRoot.outerHTML; + return Buffer.from(noticeSvgRoot.outerHTML); } async function generateTrayIcons() { @@ -145,21 +102,14 @@ async function generateTrayIcons() { console.log("Generating tray icon pngs"); await ensureOutputFoler(); - const baseTemplate = await getBaseIconTemplates(); - const noticeTemplate = await getNoticeSvg(); - - void noticeTemplate; - void generateUpdateAvailableImages; + const baseIconImage = await getBaseIconImage(); + const updateAvailableImage = await generateUpdateAvailableImages(baseIconImage); await Promise.all([ - generateNormalImages(baseTemplate, size, "trayIconTemplate"), - // generateUpdateAvailableImages(baseTemplate, size, "trayIconDarkUpdateAvailableTemplate", noticeTemplate), + generateImages(baseIconImage, size, "trayIconTemplate"), + generateImages(updateAvailableImage, size, "trayIconUpdateAvailableTemplate"), ]); - console.warn("Did not update:", [ - "trayIconUpdateAvailableTemplate.png", - "trayIconUpdateAvailableTemplate@2x.png", - ]); console.log("Generated all images"); } catch (error) { console.error(error); diff --git a/build/tray/trayIconTemplate@3x.png b/build/tray/trayIconTemplate@3x.png new file mode 100644 index 0000000000..2e06ee1a7d Binary files /dev/null and b/build/tray/trayIconTemplate@3x.png differ diff --git a/build/tray/trayIconTemplate@4x.png b/build/tray/trayIconTemplate@4x.png new file mode 100644 index 0000000000..58567e118a Binary files /dev/null and b/build/tray/trayIconTemplate@4x.png differ diff --git a/build/tray/trayIconUpdateAvailableTemplate.png b/build/tray/trayIconUpdateAvailableTemplate.png index 25b4125e77..72fd9a8cf7 100644 Binary files a/build/tray/trayIconUpdateAvailableTemplate.png and b/build/tray/trayIconUpdateAvailableTemplate.png differ diff --git a/build/tray/trayIconUpdateAvailableTemplate@2x.png b/build/tray/trayIconUpdateAvailableTemplate@2x.png index f728e14161..eed819c648 100644 Binary files a/build/tray/trayIconUpdateAvailableTemplate@2x.png and b/build/tray/trayIconUpdateAvailableTemplate@2x.png differ diff --git a/build/tray/trayIconUpdateAvailableTemplate@3x.png b/build/tray/trayIconUpdateAvailableTemplate@3x.png new file mode 100644 index 0000000000..4fed4a6d09 Binary files /dev/null and b/build/tray/trayIconUpdateAvailableTemplate@3x.png differ diff --git a/build/tray/trayIconUpdateAvailableTemplate@4x.png b/build/tray/trayIconUpdateAvailableTemplate@4x.png new file mode 100644 index 0000000000..4d1342ea24 Binary files /dev/null and b/build/tray/trayIconUpdateAvailableTemplate@4x.png differ