Merge pull request #821 from GetStream/emoji-fonts

CRS-455 Emoji flag fonts

Author: DanC5

package.json

@@ -119,6 +119,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sort-destructure-keys": "1.3.5",
     "eslint-plugin-typescript-sort-keys": "1.5.0",
+    "file-loader": "^6.2.0",
     "htmlparser2": "^5.0.1",
     "husky": "^4.3.0",
     "jest": "^26.6.3",

src/assets/EmojiOneColor.woff2

@@ -244,7 +244,15 @@ const ChannelInner = <
     onMentionsHover,
   } = props;
 
-  const { client, mutes, theme } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { client, mutes, theme, useImageFlagEmojisOnWindows } = useChatContext<
+    At,
+    Ch,
+    Co,
+    Ev,
+    Me,
+    Re,
+    Us
+  >();
   const { t } = useTranslationContext();
 
   const [notifications, setNotifications] = useState<ChannelNotifications>([]);
@@ -804,7 +812,13 @@ const ChannelInner = <
   }
 
   return (
-    <div className={`str-chat str-chat-channel ${theme}`}>
+    <div
+      className={`str-chat str-chat-channel ${theme}${
+        useImageFlagEmojisOnWindows && navigator.platform.match(/Win/)
+          ? ' str-chat--windows-flags'
+          : ''
+      }`}
+    >
       <ChannelProvider<At, Ch, Co, Ev, Me, Re, Us> value={channelContextValue}>
         <div className='str-chat__container'>{children}</div>
       </ChannelProvider>

src/assets/NotoColorEmoji-flags.woff2

@@ -291,6 +291,7 @@ const UnMemoizedChannelList = <
     navOpen = false,
     setActiveChannel,
     theme,
+    useImageFlagEmojisOnWindows,
   } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   const channelListRef = useRef<HTMLDivElement>(null);
@@ -441,6 +442,10 @@ const UnMemoizedChannelList = <
       <div
         className={`str-chat str-chat-channel-list ${theme} ${
           navOpen ? 'str-chat-channel-list--open' : ''
+        } ${
+          useImageFlagEmojisOnWindows && navigator.platform.match(/Win/)
+            ? 'str-chat--windows-flags'
+            : ''
         }`}
         ref={channelListRef}
       >

src/components/Channel/Channel.tsx

@@ -83,6 +83,14 @@ export type ChatProps<
    *  - `livestream dark`
    */
   theme?: Theme;
+  /**
+   * Windows 10 does not support country flag emojis out of the box.
+   * It chooses to render these emojis as characters instead.
+   * Stream chat can override this by loading a custom web font that will
+   * render images (PNGs or SVGs depending on the platform) instead.
+   * Set this prop to true if you want to use these custom emojis for Windows users.
+   */
+  useImageFlagEmojisOnWindows?: boolean;
 };
 
 /**
@@ -121,6 +129,7 @@ export const Chat = <
     i18nInstance,
     initialNavOpen = true,
     theme = 'messaging light',
+    useImageFlagEmojisOnWindows = false,
   } = props;
 
   const {
@@ -146,6 +155,7 @@ export const Chat = <
         openMobileNav,
         setActiveChannel,
         theme,
+        useImageFlagEmojisOnWindows,
       }}
     >
       <TranslationProvider value={translators}>{children}</TranslationProvider>

src/components/ChannelList/ChannelList.tsx

@@ -36,6 +36,7 @@ export type ChatContextValue<
     watchers?: { limit?: number; offset?: number },
     event?: React.SyntheticEvent,
   ) => void;
+  useImageFlagEmojisOnWindows?: boolean;
 };
 
 export const ChatContext = React.createContext({} as ChatContextValue);

src/components/Chat/Chat.tsx

@@ -67,6 +67,47 @@
   }
 }
 
+/* declare a font faces for our Emoji Replacement font, based on the default font used by Stream Chat React */
+
+$emoji-flag-unicode-range: U+1F1E6-1F1FF;
+
+/* png based woff for most browsers */
+@font-face {
+  font-family: ReplaceFlagEmojiPNG;
+  src: url("../assets/NotoColorEmoji-flags.woff2") format("woff2");
+  /* using the unicode-range attribute to limit the reach of the Flag Emoji web font to only flags */
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+/* svg based for firefox */
+@font-face {
+  font-family: ReplaceFlagEmojiSVG;
+  src: url("../assets/EmojiOneColor.woff2") format("woff2");
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+.str-chat--windows-flags {
+  .str-chat__textarea__textarea,
+  .str-chat__message-text-inner *,
+  .str-chat__emoji-item--entity,
+  .emoji-mart-emoji-native * {
+    font-family: ReplaceFlagEmojiPNG, $second-font, sans-serif;
+    font-display: swap;
+  }
+}
+
+@-moz-document url-prefix() {
+  .str-chat--windows-flags {
+    .str-chat__textarea__textarea,
+    .str-chat__message-text-inner *,
+    .str-chat__emoji-item--entity,
+    .emoji-mart-emoji-native * {
+      font-family: ReplaceFlagEmojiSVG, $second-font, sans-serif;
+      font-display: swap;
+    }
+  }
+}
+
 .str-chat-channel-list {
   float: left;
 }

src/context/ChatContext.tsx

@@ -44,6 +44,14 @@ const config = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
+      {
+        test: /\.(woff2)$/,
+        use: [
+          {
+            loader: 'file-loader',
+          }
+        ]
+      }
     ],
   },
   resolve: {

src/styles/_base.scss

@@ -5254,6 +5254,14 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 file-selector@^0.1.12:
   version "0.1.19"
   resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.19.tgz#8ecc9d069a6f544f2e4a096b64a8052e70ec8abf"