/* Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* * Based on... * ChromaCheck 1.16 * author Roel Nieskens, https://pixelambacht.nl * MIT license */ let colrFontSupported = undefined; async function isColrFontSupported() { if (colrFontSupported !== undefined) { return colrFontSupported; } console.log("Checking for COLR support"); // Firefox has supported COLR fonts since version 26 // but doesn't support the check below with content blocking enabled. if (navigator.userAgent.includes("Firefox")) { colrFontSupported = true; console.log("Browser is Firefox - assuming COLR is supported"); return colrFontSupported; } try { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const img = new Image(); // eslint-disable-next-line const fontCOLR = 'd09GRgABAAAAAAKAAAwAAAAAAowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDT0xSAAACVAAAABYAAAAYAAIAJUNQQUwAAAJsAAAAEgAAABLJAAAQT1MvMgAAAYAAAAA6AAAAYBfxJ0pjbWFwAAABxAAAACcAAAAsAAzpM2dseWYAAAH0AAAAGgAAABoNIh0kaGVhZAAAARwAAAAvAAAANgxLumdoaGVhAAABTAAAABUAAAAkCAEEAmhtdHgAAAG8AAAABgAAAAYEAAAAbG9jYQAAAewAAAAGAAAABgANAABtYXhwAAABZAAAABsAAAAgAg4AHW5hbWUAAAIQAAAAOAAAAD4C5wsecG9zdAAAAkgAAAAMAAAAIAADAAB4AWNgZGAAYQ5+qdB4fpuvDNIsDCBwaQGTAIi+VlscBaJZGMDiHAxMIAoAtjIF/QB4AWNgZGBgYQACOAkUQQWMAAGRABAAAAB4AWNgZGBgYGJgAdMMUJILJMQgAWICAAH3AC4AeAFjYGFhYJzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgFkDgKQMBw4CXDSwYWEBdIYgAFBgYA/8sIdAAABAAAAAAAAAB4AWNgYGBkYAZiBgYeBhYGBSDNAoRA/kuG//8hpDgjWJ4BAFVMBiYAAAAAAAANAAAAAQAAAAAEAAQAAAMAABEhESEEAPwABAD8AAAAeAEtxgUNgAAAAMHHIQTShTlOAty9/4bf7AARCwlBNhBw4L/43qXjYGUmf19TMuLcj/BJL3XfBg54AWNgZsALAAB9AAR4AWNgYGAEYj4gFgGygGwICQACOwAoAAAAAAABAAEAAQAAAA4AAAAAyP8AAA=='; const svg = ` `; canvas.width = 20; canvas.height = 100; img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg); // FIXME wait for safari load our colr font const wait = ms => new Promise((r, j)=>setTimeout(r, ms)); await wait(500); console.log("Drawing canvas to detect COLR support"); context.drawImage(img, 0, 0); colrFontSupported = (context.getImageData(10, 10, 1, 1).data[0] === 200); console.log("Canvas check revealed COLR is supported? " + colrFontSupported); } catch (e) { console.error("Couldn't load COLR font", e); colrFontSupported = false; } return colrFontSupported; } export async function fixupColorFonts() { if (colrFontSupported !== undefined) { return; } if (await isColrFontSupported()) { const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`; document.fonts.add(new FontFace("Twemoji", path, {})); // For at least Chrome on Windows 10, we have to explictly add extra // weights for the emoji to appear in bold messages, etc. document.fonts.add(new FontFace("Twemoji", path, { weight: 600 })); document.fonts.add(new FontFace("Twemoji", path, { weight: 700 })); } // if not supported, the browser will fall back to one of the native fonts specified. }