ReverseImageSearch: Add engine icons
This commit is contained in:
parent
f13f9e80a9
commit
cd53cf38fe
@ -17,6 +17,8 @@
|
||||
*/
|
||||
|
||||
import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
|
||||
import { Flex } from "@components/Flex";
|
||||
import { OpenExternalIcon } from "@components/Icons";
|
||||
import { Devs } from "@utils/constants";
|
||||
import definePlugin from "@utils/types";
|
||||
import { Menu } from "@webpack/common";
|
||||
@ -28,7 +30,7 @@ const Engines = {
|
||||
IQDB: "https://iqdb.org/?url=",
|
||||
TinEye: "https://www.tineye.com/search?url=",
|
||||
ImgOps: "https://imgops.com/start?url="
|
||||
};
|
||||
} as const;
|
||||
|
||||
function search(src: string, engine: string) {
|
||||
open(engine + encodeURIComponent(src), "_blank");
|
||||
@ -50,13 +52,28 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =>
|
||||
key="search-image"
|
||||
id="search-image"
|
||||
>
|
||||
{Object.keys(Engines).map(engine => {
|
||||
{Object.keys(Engines).map((engine, i) => {
|
||||
const key = "search-image-" + engine;
|
||||
return (
|
||||
<Menu.MenuItem
|
||||
key={key}
|
||||
id={key}
|
||||
label={engine}
|
||||
label={
|
||||
<Flex style={{ alignItems: "center", gap: "0.5em" }}>
|
||||
<img
|
||||
style={{
|
||||
borderRadius: i >= 3 // Do not round Google, Yandex & SauceNAO
|
||||
? "50%"
|
||||
: void 0
|
||||
}}
|
||||
aria-hidden="true"
|
||||
height={16}
|
||||
width={16}
|
||||
src={new URL("/favicon.ico", Engines[engine]).toString().replace("lens.", "")}
|
||||
/>
|
||||
{engine}
|
||||
</Flex>
|
||||
}
|
||||
action={() => search(src, Engines[engine])}
|
||||
/>
|
||||
);
|
||||
@ -64,7 +81,12 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =>
|
||||
<Menu.MenuItem
|
||||
key="search-image-all"
|
||||
id="search-image-all"
|
||||
label="All"
|
||||
label={
|
||||
<Flex style={{ alignItems: "center", gap: "0.5em" }}>
|
||||
<OpenExternalIcon height={16} width={16} />
|
||||
All
|
||||
</Flex>
|
||||
}
|
||||
action={() => Object.values(Engines).forEach(e => search(src, e))}
|
||||
/>
|
||||
</Menu.MenuItem>
|
||||
|
4
src/webpack/common/types/menu.d.ts
vendored
4
src/webpack/common/types/menu.d.ts
vendored
@ -16,7 +16,7 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import type { ComponentType, CSSProperties, MouseEvent, PropsWithChildren, UIEvent } from "react";
|
||||
import type { ComponentType, CSSProperties, MouseEvent, PropsWithChildren, ReactNode, UIEvent } from "react";
|
||||
|
||||
type RC<C> = ComponentType<PropsWithChildren<C & Record<string, any>>>;
|
||||
|
||||
@ -35,7 +35,7 @@ export interface Menu {
|
||||
}>;
|
||||
MenuItem: RC<{
|
||||
id: string;
|
||||
label: string;
|
||||
label: ReactNode;
|
||||
action?(e: MouseEvent): void;
|
||||
icon?: ComponentType<any>;
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user