Replace favico.js dependency with simplified variant grown from it

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/13649/head
Michael Telatynski 2 years ago
parent d44808e0e6
commit 911bd2e469
  1. 1
      package.json
  2. 6
      src/@types/global.d.ts
  3. 256
      src/favicon.ts
  4. 28
      src/vector/platform/VectorBasePlatform.js
  5. 5
      yarn.lock

@ -58,7 +58,6 @@
},
"dependencies": {
"browser-request": "^0.3.3",
"favico.js": "^0.3.10",
"gfm.css": "^1.1.2",
"highlight.js": "^9.13.1",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",

@ -24,5 +24,11 @@ declare global {
// electron-only
ipcRenderer: any;
// opera-only
opera: any;
// https://developer.mozilla.org/en-US/docs/Web/API/InstallTrigger
InstallTrigger: any;
}
}

@ -0,0 +1,256 @@
/*
Copyright 2020 New Vector Ltd
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 upon https://github.com/ejci/favico.js/blob/master/favico.js [MIT license]
interface IParams {
// colour parameters
bgColor: string;
textColor: string;
// font styling parameters
fontFamily: string;
fontWeight: "normal" | "italic" | "bold" | "bolder" | "lighter" | number;
// positioning parameters
isUp: boolean;
isLeft: boolean;
}
const defaults: IParams = {
bgColor: "#d00",
textColor: "#fff",
fontFamily: "sans-serif", // Arial,Verdana,Times New Roman,serif,sans-serif,...
fontWeight: "bold", // normal,italic,oblique,bold,bolder,lighter,100,200,300,400,500,600,700,800,900
isUp: false,
isLeft: false,
};
// Allows dynamic rendering of a circular badge atop the loaded favicon
// supports colour, font and basic positioning parameters.
export default class Favicon {
private readonly browser = {
ff: typeof window.InstallTrigger !== "undefined",
opera: !!window.opera || navigator.userAgent.includes("Opera"),
};
private readonly params: IParams;
private readonly canvas: HTMLCanvasElement;
private readonly baseImage: HTMLImageElement;
private context: CanvasRenderingContext2D;
private icons: HTMLLinkElement[];
private isReady: boolean = false;
// callback to run once isReady is asserted, allows for a badge to be queued for when it can be shown
private readyCb = () => {};
constructor(params: Partial<IParams> = {}) {
this.params = {...defaults, ...params};
this.icons = Favicon.getIcons();
// create work canvas
this.canvas = document.createElement("canvas");
// create clone of favicon as a base
this.baseImage = document.createElement("img");
const lastIcon = this.icons[this.icons.length - 1];
if (lastIcon.hasAttribute("href")) {
this.baseImage.setAttribute("crossOrigin", "anonymous");
this.baseImage.onload = () => {
// get height and width of the favicon
this.canvas.height = (this.baseImage.height > 0) ? this.baseImage.height : 32;
this.canvas.width = (this.baseImage.width > 0) ? this.baseImage.width : 32;
this.context = this.canvas.getContext("2d");
this.ready();
};
this.baseImage.setAttribute("src", lastIcon.getAttribute("href"));
} else {
this.canvas.height = this.baseImage.height = 32;
this.canvas.width = this.baseImage.width = 32;
this.context = this.canvas.getContext("2d");
this.ready();
}
}
private reset() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.drawImage(this.baseImage, 0, 0, this.canvas.width, this.canvas.height);
}
private options(n: number | string) {
const opt = {
n: ((typeof n) === "number") ? Math.abs(n as number | 0) : n,
len: ("" + n).length,
// badge positioning constants as percentages
x: 0.4,
y: 0.4,
w: 0.6,
h: 0.6,
};
// apply positional transformations
if (this.params.isUp) {
if (opt.y < 0.6) {
opt.y = opt.y - 0.4;
} else {
opt.y = opt.y - 2 * opt.y + (1 - opt.w);
}
}
if (this.params.isLeft) {
if (opt.x < 0.6) {
opt.x = opt.x - 0.4;
} else {
opt.x = opt.x - 2 * opt.x + (1 - opt.h);
}
}
// scale the position to the canvas
opt.x = this.canvas.width * opt.x;
opt.y = this.canvas.height * opt.y;
opt.w = this.canvas.width * opt.w;
opt.h = this.canvas.height * opt.h;
return opt;
}
private circle(n: number | string) {
const opt = this.options(n);
let more = false;
if (opt.len === 2) {
opt.x = opt.x - opt.w * 0.4;
opt.w = opt.w * 1.4;
more = true;
} else if (opt.len >= 3) {
opt.x = opt.x - opt.w * 0.65;
opt.w = opt.w * 1.65;
more = true;
}
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.drawImage(this.baseImage, 0, 0, this.canvas.width, this.canvas.height);
this.context.beginPath();
const fontSize = Math.floor(opt.h * (opt.n > 99 ? 0.85 : 1)) + "px";
this.context.font = `${this.params.fontWeight} ${fontSize} ${this.params.fontFamily}`;
this.context.textAlign = "center";
if (more) {
this.context.moveTo(opt.x + opt.w / 2, opt.y);
this.context.lineTo(opt.x + opt.w - opt.h / 2, opt.y);
this.context.quadraticCurveTo(opt.x + opt.w, opt.y, opt.x + opt.w, opt.y + opt.h / 2);
this.context.lineTo(opt.x + opt.w, opt.y + opt.h - opt.h / 2);
this.context.quadraticCurveTo(opt.x + opt.w, opt.y + opt.h, opt.x + opt.w - opt.h / 2, opt.y + opt.h);
this.context.lineTo(opt.x + opt.h / 2, opt.y + opt.h);
this.context.quadraticCurveTo(opt.x, opt.y + opt.h, opt.x, opt.y + opt.h - opt.h / 2);
this.context.lineTo(opt.x, opt.y + opt.h / 2);
this.context.quadraticCurveTo(opt.x, opt.y, opt.x + opt.h / 2, opt.y);
} else {
this.context.arc(opt.x + opt.w / 2, opt.y + opt.h / 2, opt.h / 2, 0, 2 * Math.PI);
}
this.context.fillStyle = this.params.bgColor;
this.context.fill();
this.context.closePath();
this.context.beginPath();
this.context.stroke();
this.context.fillStyle = this.params.textColor;
if ((typeof opt.n) === "number" && opt.n > 999) {
const count = ((opt.n > 9999) ? 9 : Math.floor(opt.n as number / 1000)) + "k+";
this.context.fillText(count, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.2));
} else {
this.context.fillText("" + opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.15));
}
this.context.closePath();
}
private ready() {
if (this.isReady) return;
this.isReady = true;
this.readyCb();
}
private setIcon(canvas) {
setImmediate(() => {
this.setIconSrc(canvas.toDataURL("image/png"));
});
}
private setIconSrc(url) {
// if is attached to fav icon
if (this.browser.ff || this.browser.opera) {
// for FF we need to "recreate" element, attach to dom and remove old <link>
const old = this.icons[this.icons.length - 1];
const newIcon = window.document.createElement("link");
this.icons = [newIcon];
newIcon.setAttribute("rel", "icon");
newIcon.setAttribute("type", "image/png");
window.document.getElementsByTagName("head")[0].appendChild(newIcon);
newIcon.setAttribute("href", url);
if (old.parentNode) {
old.parentNode.removeChild(old);
}
} else {
this.icons.forEach(icon => {
icon.setAttribute("href", url);
});
}
}
public badge(content: number | string) {
if (!this.isReady) {
this.readyCb = () => {
this.badge(content);
}
return;
}
if (typeof content === "string" || content > 0) {
this.circle(content);
} else {
this.reset();
}
this.setIcon(this.canvas);
}
private static getLinks() {
const icons: HTMLLinkElement[] = [];
const links = window.document.getElementsByTagName("head")[0].getElementsByTagName("link");
for (let i = 0; i < links.length; i++) {
if ((/(^|\s)icon(\s|$)/i).test(links[i].getAttribute("rel"))) {
icons.push(links[i]);
}
}
return icons;
}
private static getIcons() {
// get favicon link elements
let elms = Favicon.getLinks();
// if link element
if (elms.length === 0) {
elms = [window.document.createElement("link")];
elms[0].setAttribute("rel", "icon");
window.document.getElementsByTagName("head")[0].appendChild(elms[0]);
}
elms.forEach(item => {
item.setAttribute("type", "image/png");
});
return elms;
}
}

@ -24,7 +24,7 @@ import { _t } from 'matrix-react-sdk/src/languageHandler';
import dis from 'matrix-react-sdk/src/dispatcher';
import {getVectorConfig} from "../getconfig";
import Favico from 'favico.js';
import Favico from '../../favicon';
export const updateCheckStatusEnum = {
CHECKING: 'CHECKING',
@ -85,29 +85,9 @@ export default class VectorBasePlatform extends BasePlatform {
bgColor = "#f00";
}
const doUpdate = () => {
this.favicon.badge(notif, {
bgColor: bgColor,
});
};
doUpdate();
// HACK: Workaround for Chrome 78+ and dependency incompatibility.
// The library we use doesn't appear to work in Chrome 78, likely due to their
// changes surrounding tab behaviour. Tabs went through a bit of a redesign and
// restructuring in Chrome 78, so it's not terribly surprising that the library
// doesn't work correctly. The library we use hasn't been updated in years and
// does not look easy to fix/fork ourselves - we might as well write our own that
// doesn't include animation/webcam/etc support. However, that's a bit difficult
// so for now we'll just trigger the update twice.
//
// Note that trying to reproduce the problem in isolation doesn't seem to work:
// see https://gist.github.com/turt2live/5ab87919918adbfd7cfb8f1ad10f2409 for
// an example (you'll need your own web server to host that).
if (window.chrome) {
doUpdate();
}
this.favicon.badge(notif, {
bgColor: bgColor,
});
} catch (e) {
console.warn(`Failed to set badge count: ${e.message}`);
}

@ -4284,11 +4284,6 @@ fast-levenshtein@~2.0.6:
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
favico.js@^0.3.10:
version "0.3.10"
resolved "https://registry.yarnpkg.com/favico.js/-/favico.js-0.3.10.tgz#80586e27a117f24a8d51c18a99bdc714d4339301"
integrity sha1-gFhuJ6EX8kqNUcGKmb3HFNQzkwE=
faye-websocket@^0.10.0:
version "0.10.0"
resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"

Loading…
Cancel
Save