From 41814aa14040aa038c17ee0728532b0e341c5953 Mon Sep 17 00:00:00 2001 From: sowgro Date: Tue, 31 Dec 2024 00:49:03 -0500 Subject: Refactor BMIcon --- extension/src/components/BMEditor.tsx | 32 ++++++--- extension/src/components/BMIcon.tsx | 98 +++++++-------------------- extension/src/components/Bookmark.tsx | 54 ++++++++++++++- extension/src/components/RadioButtonGroup.tsx | 8 ++- 4 files changed, 106 insertions(+), 86 deletions(-) (limited to 'extension') diff --git a/extension/src/components/BMEditor.tsx b/extension/src/components/BMEditor.tsx index 2579bdb..4ebdaa2 100644 --- a/extension/src/components/BMEditor.tsx +++ b/extension/src/components/BMEditor.tsx @@ -2,17 +2,25 @@ import React, {useContext, useEffect, useState} from "react"; import CloseIcon from "../assets/close.svg?react" import {ActiveEdit} from "./Body.tsx"; import {getBrowser} from "../main.tsx"; +import RadioButtonGroup from "./RadioButtonGroup.tsx"; function BMEditor() { const [activeEdit, setActiveEdit] = useContext(ActiveEdit); const [iconOptions, setIconOptions] = useState([]); + const [gIcon, setGIcon] = useState(undefined); useEffect(() => { if (!activeEdit) return; + + const gURL = new URL('https://www.google.com/s2/favicons'); + gURL.searchParams.set("sz", "256"); + gURL.searchParams.set("domain_url", activeEdit.url!); + setGIcon(gURL.toString()); + getBrowser().storage.local.get("icon-aval-"+activeEdit.id).then( r => { - setIconOptions(r["icon-aval-"+activeEdit.id]); + setIconOptions(r["icon-aval-" + activeEdit.id]); }); }, [activeEdit]); @@ -39,13 +47,21 @@ function BMEditor() { )}

Icon

- {/**/} - {iconOptions && iconOptions.map(s => - // - )} - {/**/} +

Found on the site

+ {/*{ iconOptions &&*/} + {/* {*/} + {/* return { props: {*/} + {/* value: s,*/} + {/* children: ()*/} + {/* }}*/} + {/* }*/} + {/* )}*/} + {/*/>}*/} +

From Google

+ +

Custom

+

TODO

)} ); diff --git a/extension/src/components/BMIcon.tsx b/extension/src/components/BMIcon.tsx index e7c2a26..d8622fb 100644 --- a/extension/src/components/BMIcon.tsx +++ b/extension/src/components/BMIcon.tsx @@ -1,99 +1,49 @@ -import React, {SyntheticEvent, useEffect} from "react"; +import React, {SyntheticEvent, useEffect, useState} from "react"; import ColorThief from "colorthief"; import {getBrowser} from "../main.tsx"; -function BMIcon (props: {url: string, id: string}) { +function BMIcon(props: {imgSrc?: string, bmUrl?:string}) { - let [favicon, setFavicon] = React.useState(null); - let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("letter"); + let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("large"); let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null) - let [bgColorPriority, setBgColorPriority] = React.useState(0); - - useEffect(() => { - faviconURL(props).then(r => { - if (r) { - setFavicon(r) - setIconMode("small"); - } - }) - }, []); function handleImageLoad(e: SyntheticEvent) { - if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) { - setIconMode("large") - } else if(bgColorPriority < 2) { - setBgColor(new ColorThief().getColor(e.currentTarget)) - setBgColorPriority(2); + if (e.currentTarget.naturalWidth < 75 && !props.imgSrc!.startsWith("data:image/svg+xml")) { + setBgColor(new ColorThief().getColor(e.currentTarget)); + setIconMode("small"); } } + function handleImageError() { + let url = new URL(props.bmUrl!); + setBgColor(hashStringToColor(url.hostname)) + setIconMode("letter"); + } + return (
- {(() => { - switch (iconMode) { - case "letter": { - let url = new URL(props.url); - if (bgColorPriority < 1) { - setBgColor(hashStringToColor(url.hostname)); - setBgColorPriority(1); - } - return ({url.hostname.charAt(0)}) - } - case "small": { - return (Bookmark icon) - } - case "large": { - return (Bookmark icon) - } + {(() => { switch (iconMode) { + case "letter": { + return ({new URL(props.bmUrl!).hostname.charAt(0)}) + } + case "small": { + return (Bookmark icon) } - })()} -
+ case "large": { + return (Bookmark icon) + } + }})()} + ) } -/** - * Gets the icon for a bookmark - * - * @param data The URL of the link - * @return The URL of the icon - */ -async function faviconURL(data: {url: string, id:string}) { - let i = (await getBrowser().storage.local.get("icon-cache-"+data.id))["icon-cache-"+data.id]; - if (i) return i - // if (i == null) return i; - - const url = new URL('https://www.google.com/s2/favicons'); - url.searchParams.set("sz", "256"); - url.searchParams.set("domain_url", data.url!); - let resp = await fetch(url) - let imgData = resp.ok ? await toDataURL(url.toString()) : null; - getBrowser().storage.local.set({["icon-cache-"+data.id]: imgData}); - return imgData; -} - -function toDataURL(url: string): string { - // @ts-ignore - return fetch(url) - .then(response => response.blob()) - .then(blob => new Promise((resolve, reject) => { - const reader = new FileReader() - reader.onloadend = () => resolve(reader.result) - reader.onerror = reject - reader.readAsDataURL(blob) - })) -} - -function djb2(str: string){ +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 */ } - return hash; -} -function hashStringToColor(str: string): [number, number, number] { - let hash = djb2(str); let r = (hash & 0xFF0000) >> 16; let g = (hash & 0x00FF00) >> 8; let b = hash & 0x0000FF; diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx index 0e36b56..a57f7f7 100644 --- a/extension/src/components/Bookmark.tsx +++ b/extension/src/components/Bookmark.tsx @@ -84,7 +84,7 @@ function Bookmark(props: {id: string}) { return(
- + {bmData.title} {settings.editMode && } @@ -94,4 +94,54 @@ function Bookmark(props: {id: string}) { ); } -export default Bookmark; \ No newline at end of file +export default Bookmark; + +function IconPre(props: {bmUrl: string, id:string}) { + const [data, setData] = useState() + + useEffect(() => { + findIcon(props.bmUrl, props.id).then(r => { + setData(r); + }) + }, []); + + if (!data) return; + return +} + +/** + * 1. check for icon cache + * 2. check if the user selected an icon + * 3. use the best icon from the available icons + * 4. search googles icon database + */ +async function findIcon(bmUrl: string, id:string) { + let cachedIcon = (await getBrowser().storage.local.get("icon-cache-"+id))["icon-cache-"+id]; + if (cachedIcon) return cachedIcon + + // let selectedUrl: string[] = (await getBrowser().storage.local.get("icon-aval-"+data.id))["icon-aval-"+data.id] + // if (selectedUrl.length > 0) { + // await getBrowser().storage.local.set({["icon-cache-"+data.id]: selectedUrl[0]}); + // return selectedUrl[0]; + // } + + const url = new URL('https://www.google.com/s2/favicons'); + url.searchParams.set("sz", "256"); + url.searchParams.set("domain_url", bmUrl); + let resp = await fetch(url) + let imgData = resp.ok ? await toDataURL(url.toString()) : null; + getBrowser().storage.local.set({["icon-cache-"+bmUrl]: imgData}); + return imgData; +} + +function toDataURL(url: string): string { + // @ts-ignore + return fetch(url) + .then(response => response.blob()) + .then(blob => new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onloadend = () => resolve(reader.result) + reader.onerror = reject + reader.readAsDataURL(blob) + })) +} \ No newline at end of file diff --git a/extension/src/components/RadioButtonGroup.tsx b/extension/src/components/RadioButtonGroup.tsx index 297800d..ff5835d 100644 --- a/extension/src/components/RadioButtonGroup.tsx +++ b/extension/src/components/RadioButtonGroup.tsx @@ -1,4 +1,8 @@ import React, {ReactElement, useEffect, useId, useState} from "react"; +// +// function RadioEntry(props: {value: any, children: ReactElement}) { +// return props.children +// } /** * A component for a group of radio buttons where only one can be selected @@ -7,7 +11,7 @@ import React, {ReactElement, useEffect, useId, useState} from "react"; * @param props.value The option which is selected * @param props.onChange A function that will be called when the selected option changes */ -function RadioButtonGroup(props: { children: ReactElement[], value: any, onChange?: (arg0: any) => void }) { +function RadioButtonGroup(props: { children: {props: {value: any, children: ReactElement}}[], value: any, onChange?: (arg0: any) => void }) { const [selected, setSelected] = useState(props.value); useEffect(() => { setSelected(props.value); @@ -18,7 +22,7 @@ function RadioButtonGroup(props: { children: ReactElement[], return (
- { props.children.map((item) => ( + { props.children && props.children.map((item) => (