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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
import React, {useEffect, useState} from "react";
import {getBrowser} from "../main.tsx";
import BMIcon from "./BMIcon.tsx";
import Check from "../assets/check.svg?react"
import {IconCacheEntry, toDataURL} from "../Icons.ts";
interface IIconOption {
url: string,
source: "google" | "site" | "custom"
}
function IconPicker(props: {bmData: BookmarkTreeNode}) {
const [iconOptions, setIconOptions] = useState<IIconOption[]>([]);
const [iconCache, setIconCache] = useState<IconCacheEntry | undefined>(undefined);
useEffect(() => {
getBrowser().storage.local.get("icon-cache-"+props.bmData.id).then(r => {
setIconCache(r["icon-cache-"+props.bmData.id]);
});
(async ()=>{
let iconOptions2: IIconOption[] = [];
const gURL = new URL('https://www.google.com/s2/favicons');
gURL.searchParams.set("sz", "256");
gURL.searchParams.set("domain_url", new URL(props.bmData.url!).origin);
let gResponse = await fetch(gURL)
if (gResponse) {
iconOptions2.push({
url: gURL.toString(),
source: "google"
})
}
let siteIcons: string[] = (await getBrowser().storage.local.get("icon-aval-"+props.bmData.id))["icon-aval-" + props.bmData.id]
if (siteIcons) {
iconOptions2.push(...siteIcons.map(ic => ({url: ic, source: "site"} as IIconOption)))
}
setIconOptions(iconOptions2);
})()
}, []);
function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
if (!e.target.files || e.target.files.length <= 0) {
return;
}
let file = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
setIconOptions([...iconOptions, {url: reader.result, source: "custom"} as IIconOption])
}
}
return (<>
<div className={"icon-selector"}>
{iconOptions &&
iconOptions.map(i => <IconOption ico={i} isSelected={iconCache?.url == i.url} isSelectedAuto={false} id={props.bmData.id} />)
}
</div>
<h4>Custom</h4>
<input type={"file"} accept={"image/*"} className={"default"} name={"Upload"} onChange={handleImageUpload}/>
</>)
}
function IconOption(props: {ico: IIconOption, isSelected: boolean, isSelectedAuto: boolean, id: string}) {
async function handleClick() {
await getBrowser().storage.local.set({["icon-cache-"+props.id]: {
...props.ico,
data: await toDataURL(props.ico.url),
setByUser: true
} as IconCacheEntry})
}
return (
<div className={"icon-option"} onClick={handleClick}>
<BMIcon imgSrc={props.ico.url}/>
{props.isSelected && <div className={"selected"}>
<Check/>
</div>}
</div>
)
}
export default IconPicker;
|
