1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import React, {SyntheticEvent, useEffect, useState} from "react";
import ColorThief from "colorthief";
import {getBrowser} from "../main.tsx";
function BMIcon(props: {imgSrc?: string, bmUrl?:string}) {
let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("large");
let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null)
function handleImageLoad(e: SyntheticEvent<HTMLImageElement, Event>) {
if (e.currentTarget.naturalWidth < 75 && !props.imgSrc!.startsWith("data:image/svg+xml")) {
setBgColor(new ColorThief().getColor(e.currentTarget));
setIconMode("small");
}
}
function handleImageError() {
if (props.bmUrl) {
let url = new URL(props.bmUrl);
setBgColor(hashStringToColor(url.hostname))
}
setIconMode("letter");
}
if (!props.imgSrc) {
if (props.bmUrl) {
let url = new URL(props.bmUrl);
bgColor = hashStringToColor(url.hostname)
}
iconMode = "letter"
}
return (
<div className={"icon-box " + (iconMode)}
style={bgColor ? {"--icon-bg": `rgba(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]}, 0.2)`} as React.CSSProperties : undefined}>
{(() => { switch (iconMode) {
case "letter": {
return (<span className={"letter"}>{ props.bmUrl
? new URL(props.bmUrl).hostname.charAt(0)
: '?'
}</span>)
}
case "small": {
return (<img alt="Bookmark icon" src={props.imgSrc}/>)
}
case "large": {
return (<img alt="Bookmark icon" src={props.imgSrc} onLoad={handleImageLoad} onError={handleImageError}/>)
}
}})()}
</div>
)
}
function hashStringToColor(str: string): [number, number, number] {
let hash = 5381;
for (var i = 0; i < str.length; i++) {
hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
}
let r = (hash & 0xFF0000) >> 16;
let g = (hash & 0x00FF00) >> 8;
let b = hash & 0x0000FF;
return [r, g, b];
}
export default BMIcon;
|
