cswimr/Vencord
1
0
Fork 0
forked from CoastalCommitsArchival/github.com-Vendicated-Vencord
Code Pull requests Packages 1 Wiki Activity

ReverseImageSearch: add support for image modal

Browse source
This commit is contained in:
Vendicated 2024-01-05 23:51:49 +01:00
parent 4d198e46bc
commit 13961a4ba5
No known key found for this signature in database
GPG key ID: D66986BAF75ECF18
1 changed files with 62 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/plugins/reverseImageSearch/index.tsx
View file

@ -36,62 +36,68 @@ function search(src: string, engine: string) {
open(engine + encodeURIComponent(src), "_blank"); open(engine + encodeURIComponent(src), "_blank");
} }
const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => { function makeSearchItem(src: string) {
if (!props) return; return (
const { reverseImageSearchType, itemHref, itemSrc } = props; <Menu.MenuItem
label="Search Image"
key="search-image"
id="search-image"
>
{Object.keys(Engines).map((engine, i) => {
const key = "search-image-" + engine;
return (
<Menu.MenuItem
key={key}
id={key}
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])}
/>
);
})}
<Menu.MenuItem
key="search-image-all"
id="search-image-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>
);
}
if (!reverseImageSearchType || reverseImageSearchType !== "img") return; const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
if (props?.reverseImageSearchType !== "img") return;
const src = itemHref ?? itemSrc; const src = props.itemHref ?? props.itemSrc;
const group = findGroupChildrenByChildId("copy-link", children); const group = findGroupChildrenByChildId("copy-link", children);
if (group) { group?.push(makeSearchItem(src));
group.push(( };
<Menu.MenuItem
label="Search Image" const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
key="search-image" if (!props?.src) return;
id="search-image"
> const group = findGroupChildrenByChildId("copy-native-link", children) ?? children;
{Object.keys(Engines).map((engine, i) => { group.push(makeSearchItem(props.src));
const key = "search-image-" + engine;
return (
<Menu.MenuItem
key={key}
id={key}
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])}
/>
);
})}
<Menu.MenuItem
key="search-image-all"
id="search-image-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>
));
}
}; };
export default definePlugin({ export default definePlugin({
@ -111,10 +117,12 @@ export default definePlugin({
], ],
start() { start() {
addContextMenuPatch("message", imageContextMenuPatch); addContextMenuPatch("message", messageContextMenuPatch);
addContextMenuPatch("image-context", imageContextMenuPatch);
}, },
stop() { stop() {
removeContextMenuPatch("message", imageContextMenuPatch); removeContextMenuPatch("message", messageContextMenuPatch);
removeContextMenuPatch("image-context", imageContextMenuPatch);
} }
}); });