Fascinated/Vencord
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

ReverseImageSearch: Add engine icons

Browse Source
This commit is contained in:
V 2023-05-13 23:58:24 +02:00
parent f13f9e80a9
commit cd53cf38fe
No known key found for this signature in database
GPG Key ID: A1DC0CFB5615D905
2 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/plugins/reverseImageSearch.tsx
View File

@ -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
View File

@ -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>;