add options to use system emoji

cinnyapp · Oct 4, 2023 · 5f0b936 · 5f0b936
1 parent 2639f20
commit 5f0b936
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
@@ -51,6 +51,7 @@ function AppearanceSection() {
 
   const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+  const [useSystemEmoji, setUseSystemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
   const [hideMembershipEvents, setHideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
@@ -90,6 +91,16 @@ function AppearanceSection() {
             />
         )}
         />
+        <SettingTile
+          title="Use System Emoji"
+          options={(
+            <Toggle
+              isActive={useSystemEmoji}
+              onToggle={() => setUseSystemEmoji(!useSystemEmoji)}
+            />
+          )}
+          content={<Text variant="b3">Use system emoji instead of Twitter emojis.</Text>}
+        />
       </div>
       <div className="settings-appearance__card">
         <MenuHeader>Room messages</MenuHeader>

diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
@@ -9,6 +9,7 @@ export interface Settings {
   isMarkdown: boolean;
   editorToolbar: boolean;
   isPeopleDrawer: boolean;
+  useSystemEmoji: boolean;
 
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
@@ -27,6 +28,7 @@ const defaultSettings: Settings = {
   isMarkdown: true,
   editorToolbar: false,
   isPeopleDrawer: true,
+  useSystemEmoji: false,
 
   messageLayout: 0,
   messageSpacing: '400',

diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx
@@ -20,6 +20,20 @@ import cons from '../../../client/state/cons';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 import { MatrixClientProvider } from '../../hooks/useMatrixClient';
 import { ClientContent } from './ClientContent';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+
+function SystemEmojiFeature() {
+  const [systemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
+
+  if (systemEmoji) {
+    document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
+  } else {
+    document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
+  }
+
+  return null;
+}
 
 function Client() {
   const [isLoading, changeLoading] = useState(true);
@@ -115,6 +129,7 @@ function Client() {
         <Windows />
         <Dialogs />
         <ReusableContextMenu />
+        <SystemEmojiFeature />
       </div>
     </MatrixClientProvider>
   );