feat(plugin): Favorite Gif Search (#1386)

Co-authored-by: V <vendicated@riseup.net>
This commit is contained in:
Syncx 2023-07-26 09:50:24 +10:00 committed by GitHub
parent c69c6f8cb7
commit 208371c471
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,241 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2023 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { findByPropsLazy } from "@webpack";
import { useCallback, useEffect, useRef, useState } from "@webpack/common";
interface SearchBarComponentProps {
ref?: React.MutableRefObject<any>;
autoFocus: boolean;
className: string;
size: string;
onChange: (query: string) => void;
onClear: () => void;
query: string;
placeholder: string;
}
type TSearchBarComponent =
React.FC<SearchBarComponentProps> & { Sizes: Record<"SMALL" | "MEDIUM" | "LARGE", string>; };
interface Gif {
format: number;
src: string;
width: number;
height: number;
order: number;
url: string;
}
interface Instance {
dead?: boolean;
state: {
resultType?: string;
};
props: {
favCopy: Gif[],
favorites: Gif[],
},
forceUpdate: () => void;
}
const containerClasses: { searchBar: string; } = findByPropsLazy("searchBar", "searchHeader", "gutterSize");
export const settings = definePluginSettings({
searchOption: {
type: OptionType.SELECT,
description: "The part of the url you want to search",
options: [
{
label: "Entire Url",
value: "url"
},
{
label: "Path Only (/somegif.gif)",
value: "path"
},
{
label: "Host & Path (tenor.com somgif.gif)",
value: "hostandpath",
default: true
}
] as const
}
});
export default definePlugin({
name: "FavoriteGifSearch",
authors: [Devs.Aria],
description: "Adds a search bar for favorite gifs",
patches: [
{
find: "renderCategoryExtras",
replacement: [
{
// https://regex101.com/r/4uHtTE/1
// ($1 renderHeaderContent=function { ... switch (x) ... case FAVORITES:return) ($2) ($3 case default:return r.jsx(($<searchComp>), {...props}))
match: /(renderHeaderContent=function.{1,150}FAVORITES:return)(.{1,150};)(case.{1,200}default:return\(0,\i\.jsx\)\((?<searchComp>\i\.\i))/,
replace: "$1 this.state.resultType === \"Favorites\" ? $self.renderSearchBar(this, $<searchComp>) : $2; $3"
},
{
// to persist filtered favorites when component re-renders.
// when resizing the window the component rerenders and we loose the filtered favorites and have to type in the search bar to get them again
match: /(,suggestions:\i,favorites:)(\i),/,
replace: "$1$self.getFav($2),favCopy:$2,"
}
]
}
],
settings,
getTargetString,
instance: null as Instance | null,
renderSearchBar(instance: Instance, SearchBarComponent: TSearchBarComponent) {
this.instance = instance;
return (
<ErrorBoundary noop={true}>
<SearchBar instance={instance} SearchBarComponent={SearchBarComponent} />
</ErrorBoundary>
);
},
getFav(favorites: Gif[]) {
if (!this.instance || this.instance.dead) return favorites;
const { favorites: filteredFavorites } = this.instance.props;
return filteredFavorites != null && filteredFavorites?.length !== favorites.length ? filteredFavorites : favorites;
}
});
function SearchBar({ instance, SearchBarComponent }: { instance: Instance; SearchBarComponent: TSearchBarComponent; }) {
const [query, setQuery] = useState("");
const ref = useRef<{ containerRef?: React.MutableRefObject<HTMLDivElement>; } | null>(null);
const onChange = useCallback((searchQuery: string) => {
setQuery(searchQuery);
const { props } = instance;
// return early
if (searchQuery === "") {
props.favorites = props.favCopy;
instance.forceUpdate();
return;
}
// scroll back to top
ref.current?.containerRef?.current
.closest("#gif-picker-tab-panel")
?.querySelector("[class|=\"content\"]")
?.firstElementChild?.scrollTo(0, 0);
const result =
props.favCopy
.map(gif => ({
score: fuzzySearch(searchQuery.toLowerCase(), getTargetString(gif.url ?? gif.src).replace(/(%20|[_-])/g, " ").toLowerCase()),
gif,
}))
.filter(m => m.score != null) as { score: number; gif: Gif; }[];
result.sort((a, b) => b.score - a.score);
props.favorites = result.map(e => e.gif);
instance.forceUpdate();
}, [instance.state]);
useEffect(() => {
return () => {
instance.dead = true;
};
}, []);
return (
<SearchBarComponent
ref={ref}
autoFocus={true}
className={containerClasses.searchBar}
size={SearchBarComponent.Sizes.MEDIUM}
onChange={onChange}
onClear={() => {
setQuery("");
if (instance.props.favCopy != null) {
instance.props.favorites = instance.props.favCopy;
instance.forceUpdate();
}
}}
query={query}
placeholder="Search Favorite Gifs"
/>
);
}
export function getTargetString(urlStr: string) {
const url = new URL(urlStr);
switch (settings.store.searchOption) {
case "url":
return url.href;
case "path":
if (url.host === "media.discordapp.net" || url.host === "tenor.com")
// /attachments/899763415290097664/1095711736461537381/attachment-1.gif -> attachment-1.gif
// /view/some-gif-hi-24248063 -> some-gif-hi-24248063
return url.pathname.split("/").at(-1) ?? url.pathname;
return url.pathname;
case "hostandpath":
if (url.host === "media.discordapp.net" || url.host === "tenor.com")
return `${url.host} ${url.pathname.split("/").at(-1) ?? url.pathname}`;
return `${url.host} ${url.pathname}`;
default:
return "";
}
}
function fuzzySearch(searchQuery: string, searchString: string) {
let searchIndex = 0;
let score = 0;
for (let i = 0; i < searchString.length; i++) {
if (searchString[i] === searchQuery[searchIndex]) {
score++;
searchIndex++;
} else {
score--;
}
if (searchIndex === searchQuery.length) {
return score;
}
}
return null;
}