Reuse webp emoji sheets in the app

package.json

@@ -90,6 +90,9 @@
     "build:release": "cross-env SIGNAL_ENV=production pnpm run build:electron --config.directories.output=release",
     "build:release-win32-all": "pnpm run build:release --arm64 --x64",
     "build:preload-cache": "node ts/scripts/generate-preload-cache.js",
+    "build:emoji": "run-p build:emoji:32 build:emoji:64",
+    "build:emoji:32": "cwebp -progress -mt -preset icon -alpha_filter best -alpha_q 20 -pass 10 -q 75 ./node_modules/emoji-datasource-apple/img/apple/sheets-clean/32.png -o ./images/emoji-sheet-32.webp",
+    "build:emoji:64": "cwebp -progress -mt -preset icon -alpha_filter best -alpha_q 20 -pass 10 -q 75 ./node_modules/emoji-datasource-apple/img/apple/sheets-clean/64.png -o ./images/emoji-sheet-64.webp",
     "verify": "run-p --print-label verify:*",
     "verify:ts": "tsc --noEmit",
     "electron:install-app-deps": "electron-builder install-app-deps",
@@ -581,10 +584,7 @@
       "!node_modules/emoji-datasource/emoji_pretty.json",
       "!node_modules/emoji-datasource/**/*.png",
       "!node_modules/emoji-datasource-apple/emoji_pretty.json",
-      "!node_modules/emoji-datasource-apple/img/apple/sheets-*.png",
-      "!node_modules/emoji-datasource-apple/img/apple/sheets/*.png",
-      "node_modules/emoji-datasource-apple/img/apple/sheets/32.png",
-      "node_modules/emoji-datasource-apple/img/apple/sheets/64.png",
+      "!node_modules/emoji-datasource-apple/img/apple/sheets*",
       "!node_modules/spellchecker/vendor/hunspell/**/*",
       "!node_modules/@formatjs/intl-displaynames/**/*",
       "!node_modules/@formatjs/intl-listformat/**/*",

sticker-creator/package.json

@@ -17,7 +17,6 @@
     "eslint": "eslint --cache .",
     "prettier:format": "prettier --list-different --cache --write .",
     "prettier:check": "prettier --cache --check .",
-    "build:emoji": "cwebp -progress -mt -preset icon -alpha_filter best -alpha_q 20 -pass 10 -q 50 ./node_modules/emoji-datasource-apple/img/apple/sheets-clean/64.png -o ./src/assets/emoji.webp",
     "build:protos": "pbjs --target static-module --force-number --no-typeurl --no-delimited --no-verify --no-create --no-convert --wrap es6 --out src/util/protos.js ./protos/*.proto && pbts --out src/util/protos.d.ts src/util/protos.js",
     "test": "vitest"
   },

sticker-creator/src/components/ArtFrame.tsx

@@ -22,7 +22,6 @@ import { useI18n } from '../contexts/I18n';
 import { assert } from '../util/assert';
 import { ArtType } from '../constants';
 import type { EmojiData } from '../types.d';
-import EMOJI_SHEET from '../assets/emoji.webp';
 import EmojiPicker from './EmojiPicker';
 
 export type Mode = 'removable' | 'pick-emoji' | 'add';
@@ -53,7 +52,12 @@ function Emoji({ name, sheetX, sheetY }: EmojiData): JSX.Element {
     }
   };
   return (
-    <img alt={name} src={EMOJI_SHEET} className={styles.emoji} ref={onRef} />
+    <img
+      alt={name}
+      src="../../images/emoji-sheet-64.webp"
+      className={styles.emoji}
+      ref={onRef}
+    />
   );
 }
 

sticker-creator/src/components/EmojiPicker.tsx

@@ -8,7 +8,6 @@ import RealEmojiPicker, {
   EmojiStyle,
   Theme,
 } from '@indutny/emoji-picker-react';
-import EMOJI_SHEET from '../assets/emoji.webp';
 
 import { useI18n } from '../contexts/I18n';
 
@@ -19,7 +18,7 @@ export type EmojiPickerProps = Readonly<{
 }>;
 
 function getEmojiUrl() {
-  return EMOJI_SHEET;
+  return '../../images/emoji-sheet-64.webp';
 }
 
 export default function EmojiPicker({

stylesheets/components/fun/FunEmoji.scss

@@ -11,7 +11,7 @@
 .FunEmoji--Size16 {
   width: 16px;
   height: 16px;
-  background-image: url('../node_modules/emoji-datasource-apple/img/apple/sheets/32.png');
+  background-image: url('../images/emoji-sheet-32.webp');
   background-size: 1054px;
   background-position-x: calc(var(--fun-emoji-sheet-x) * -17px - 0.5px);
   background-position-y: calc(var(--fun-emoji-sheet-y) * -17px - 0.5px);
@@ -20,7 +20,7 @@
 .FunEmoji--Size32 {
   width: 32px;
   height: 32px;
-  background-image: url('../node_modules/emoji-datasource-apple/img/apple/sheets/64.png');
+  background-image: url('../images/emoji-sheet-64.webp');
   background-size: 2046px;
   background-position-x: calc(var(--fun-emoji-sheet-x) * -33px - 0.5px);
   background-position-y: calc(var(--fun-emoji-sheet-y) * -33px - 0.5px);