mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-16 15:11:57 +03:00
126 lines
6.1 KiB
JavaScript
126 lines
6.1 KiB
JavaScript
/*
|
|
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
|
|
*/
|
|
|
|
function safariVersionCheck(ua) {
|
|
console.log("Browser is Safari - checking version for COLR support");
|
|
try {
|
|
const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/);
|
|
if (safariVersionMatch) {
|
|
const macOSVersionStr = safariVersionMatch[1];
|
|
const safariVersionStr = safariVersionMatch[2];
|
|
const macOSVersion = macOSVersionStr.split("_").map(n => parseInt(n, 10));
|
|
const safariVersion = safariVersionStr.split(".").map(n => parseInt(n, 10));
|
|
const colrFontSupported = macOSVersion[0] >= 10 && macOSVersion[1] >= 14 && safariVersion[0] >= 12;
|
|
// https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on
|
|
console.log(`COLR support on Safari requires macOS 10.14 and Safari 12, ` +
|
|
`detected Safari ${safariVersionStr} on macOS ${macOSVersionStr}, ` +
|
|
`COLR supported: ${colrFontSupported}`);
|
|
return colrFontSupported;
|
|
}
|
|
} catch (err) {
|
|
console.error("Error in Safari COLR version check", err);
|
|
}
|
|
console.warn("Couldn't determine Safari version to check COLR font support, assuming no.");
|
|
return false;
|
|
}
|
|
|
|
async function isColrFontSupported() {
|
|
console.log("Checking for COLR support");
|
|
|
|
const {userAgent} = navigator;
|
|
// Firefox has supported COLR fonts since version 26
|
|
// but doesn't support the check below without
|
|
// "Extract canvas data" permissions
|
|
// when content blocking is enabled.
|
|
if (userAgent.includes("Firefox")) {
|
|
console.log("Browser is Firefox - assuming COLR is supported");
|
|
return true;
|
|
}
|
|
// Safari doesn't wait for the font to load (if it doesn't have it in cache)
|
|
// to emit the load event on the image, so there is no way to not make the check
|
|
// reliable. Instead sniff the version.
|
|
// Excluding "Chrome", as it's user agent unhelpfully also contains Safari...
|
|
if (!userAgent.includes("Chrome") && userAgent.includes("Safari")) {
|
|
return safariVersionCheck(userAgent);
|
|
}
|
|
|
|
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 = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="100" style="background:#fff;fill:#000;">
|
|
<style type="text/css">
|
|
@font-face {
|
|
font-family: "chromacheck-colr";
|
|
src: url(data:application/x-font-woff;base64,${fontCOLR}) format("woff");
|
|
}
|
|
</style>
|
|
<text x="0" y="0" font-size="20">
|
|
<tspan font-family="chromacheck-colr" x="0" dy="20"></tspan>
|
|
</text>
|
|
</svg>`;
|
|
canvas.width = 20;
|
|
canvas.height = 100;
|
|
|
|
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
|
|
|
|
console.log("Waiting for COLR SVG to load");
|
|
await new Promise(resolve => img.onload = resolve);
|
|
console.log("Drawing canvas to detect COLR support");
|
|
context.drawImage(img, 0, 0);
|
|
const colrFontSupported = (context.getImageData(10, 10, 1, 1).data[0] === 200);
|
|
console.log("Canvas check revealed COLR is supported? " + colrFontSupported);
|
|
return colrFontSupported;
|
|
} catch (e) {
|
|
console.error("Couldn't load COLR font", e);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
let colrFontCheckStarted = false;
|
|
export async function fixupColorFonts() {
|
|
if (colrFontCheckStarted) {
|
|
return;
|
|
}
|
|
colrFontCheckStarted = true;
|
|
|
|
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 }));
|
|
} else {
|
|
// fall back to SBIX, generated via https://github.com/matrix-org/twemoji-colr/tree/matthew/sbix
|
|
const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`;
|
|
document.fonts.add(new FontFace("Twemoji", path, {}));
|
|
document.fonts.add(new FontFace("Twemoji", path, { weight: 600 }));
|
|
document.fonts.add(new FontFace("Twemoji", path, { weight: 700 }));
|
|
}
|
|
// ...and if SBIX is not supported, the browser will fall back to one of the native fonts specified.
|
|
}
|
|
|