mirror of
https://github.com/Equicord/Equicord.git
synced 2025-06-10 23:23:04 -04:00
Temp Fix Better Folders
This commit is contained in:
parent
3821775385
commit
6e79bb51b9
6 changed files with 54 additions and 190 deletions
|
@ -8,8 +8,7 @@ import { NavContextMenuPatchCallback } from "@api/ContextMenu";
|
|||
import { openModal } from "@utils/modal";
|
||||
import { ChannelStore, FluxDispatcher, Menu } from "@webpack/common";
|
||||
|
||||
import { SetCustomWallpaperModal, SetDiscordWallpaperModal } from "./modal";
|
||||
import { ChatWallpaperStore, fetchWallpapers } from "./util";
|
||||
import { SetWallpaperModal } from "./modal";
|
||||
|
||||
|
||||
const addWallpaperMenu = (channelId?: string, guildId?: string) => {
|
||||
|
@ -22,25 +21,18 @@ const addWallpaperMenu = (channelId?: string, guildId?: string) => {
|
|||
url,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu.MenuItem label="Wallpaper Free" key="vc-wpfree-menu" id="vc-wpfree-menu">
|
||||
<Menu.MenuItem
|
||||
label="Set custom wallpaper"
|
||||
id="vc-wpfree-set-custom"
|
||||
action={() => openModal(props => <SetCustomWallpaperModal props={props} onSelect={setWallpaper} />)}
|
||||
/>
|
||||
<Menu.MenuItem
|
||||
label="Set a Discord wallpaper"
|
||||
id="vc-wpfree-set-discord"
|
||||
action={async () => {
|
||||
ChatWallpaperStore.shouldFetchWallpapers && await fetchWallpapers();
|
||||
openModal(props => <SetDiscordWallpaperModal props={props} onSelect={setWallpaper} />);
|
||||
}}
|
||||
label="Set Wallpaper"
|
||||
id="vc-wpfree-set-wallpaper"
|
||||
action={() => openModal(props => <SetWallpaperModal props={props} onSelect={setWallpaper} />)}
|
||||
/>
|
||||
<Menu.MenuSeparator />
|
||||
<Menu.MenuItem
|
||||
label="Remove Custom Wallpaper"
|
||||
id="vc-wpfree-remove"
|
||||
label="Remove Wallpaper"
|
||||
id="vc-wpfree-remove-wallpaper"
|
||||
color="danger"
|
||||
action={() => setWallpaper(void 0)}
|
||||
/>
|
||||
|
|
|
@ -5,38 +5,37 @@
|
|||
*/
|
||||
|
||||
import { ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
|
||||
import { Button, lodash, Text, TextInput, useState, useStateFromStores } from "@webpack/common";
|
||||
|
||||
import { ChatWallpaperStore, Wallpaper } from "./util";
|
||||
import { Button, Text, TextInput, useState } from "@webpack/common";
|
||||
|
||||
interface Props {
|
||||
props: ModalProps;
|
||||
onSelect: (url: string) => void;
|
||||
}
|
||||
|
||||
export function SetCustomWallpaperModal({ props, onSelect }: Props) {
|
||||
export function SetWallpaperModal({ props, onSelect }: Props) {
|
||||
const [url, setUrl] = useState("");
|
||||
|
||||
return (
|
||||
<ModalRoot {...props} size={ModalSize.SMALL}>
|
||||
<ModalHeader>
|
||||
<Text variant="heading-lg/normal" style={{ marginBottom: 8 }}>
|
||||
Set a custom wallpaper
|
||||
Set wallpaper
|
||||
</Text>
|
||||
</ModalHeader>
|
||||
<ModalContent>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
||||
|
||||
<Text>The image url</Text>
|
||||
<TextInput
|
||||
placeholder="The image url"
|
||||
value={url}
|
||||
onChange={setUrl}
|
||||
onChange={u => {
|
||||
setUrl(u);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
{url && (
|
||||
<img
|
||||
alt=""
|
||||
src={url}
|
||||
alt="Wallpaper preview"
|
||||
style={{
|
||||
display: "block",
|
||||
width: "100%",
|
||||
|
@ -60,57 +59,6 @@ export function SetCustomWallpaperModal({ props, onSelect }: Props) {
|
|||
</div>
|
||||
</div>
|
||||
</ModalContent>
|
||||
</ModalRoot>
|
||||
</ModalRoot >
|
||||
);
|
||||
}
|
||||
|
||||
export function SetDiscordWallpaperModal({ props, onSelect }: Props) {
|
||||
const discordWallpapers: Wallpaper[] = useStateFromStores([ChatWallpaperStore], () => ChatWallpaperStore.wallpapers);
|
||||
|
||||
return (
|
||||
<ModalRoot {...props} size={ModalSize.MEDIUM}>
|
||||
<ModalHeader>
|
||||
<Text variant="heading-lg/normal" style={{ marginBottom: 8 }}>
|
||||
Choose a Discord Wallpaper
|
||||
</Text>
|
||||
</ModalHeader>
|
||||
<ModalContent>
|
||||
<div className="vc-wpfree-discord-wp-modal">
|
||||
{lodash.chunk(discordWallpapers, 2).map(group => {
|
||||
const main = group[0];
|
||||
return (
|
||||
<div key={main.id} className="vc-wpfree-discord-wp-icon-container">
|
||||
<figure style={{ margin: 0, textAlign: "center" }}>
|
||||
<img
|
||||
className="vc-wpfree-discord-wp-icon-img"
|
||||
src={`https://cdn.discordapp.com/assets/content/${main.default.icon}`}
|
||||
alt={main.label}
|
||||
/>
|
||||
<figcaption>
|
||||
<Text variant="text-md/normal">{main.label}</Text>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<div className="vc-wpfree-discord-set-buttons">
|
||||
{group.map(wp => (
|
||||
<Button
|
||||
key={wp.id}
|
||||
size={Button.Sizes.SMALL}
|
||||
color={Button.Colors.BRAND}
|
||||
onClick={() => {
|
||||
onSelect(`https://cdn.discordapp.com/assets/content/${wp.default.asset}`);
|
||||
props.onClose();
|
||||
}}
|
||||
>
|
||||
{wp.isBlurred ? "Blurred" : "Normal"}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ModalContent>
|
||||
</ModalRoot>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -6,13 +6,9 @@
|
|||
|
||||
import { openModal } from "@utils/modal";
|
||||
import { makeCodeblock } from "@utils/text";
|
||||
import { findByCodeLazy, findStoreLazy } from "@webpack";
|
||||
import { Button, FluxDispatcher, Parser } from "@webpack/common";
|
||||
|
||||
import { SetCustomWallpaperModal, SetDiscordWallpaperModal } from "./modal";
|
||||
|
||||
export const ChatWallpaperStore = findStoreLazy("ChatWallpaperStore");
|
||||
export const fetchWallpapers = findByCodeLazy('type:"FETCH_CHAT_WALLPAPERS_SUCCESS"');
|
||||
import { SetWallpaperModal } from "./modal";
|
||||
|
||||
export function GlobalDefaultComponent() {
|
||||
const setGlobal = (url?: string) => {
|
||||
|
@ -26,13 +22,8 @@ export function GlobalDefaultComponent() {
|
|||
return (
|
||||
<>
|
||||
<Button onClick={() => {
|
||||
openModal(props => <SetCustomWallpaperModal props={props} onSelect={setGlobal} />);
|
||||
}}>Set a global custom wallpaper</Button>
|
||||
|
||||
<Button onClick={async () => {
|
||||
ChatWallpaperStore.shouldFetchWallpapers && await fetchWallpapers();
|
||||
openModal(props => <SetDiscordWallpaperModal props={props} onSelect={setGlobal} />);
|
||||
}}>Set a global Discord wallpaper</Button>
|
||||
openModal(props => <SetWallpaperModal props={props} onSelect={setGlobal} />);
|
||||
}}>Set a global wallpaper</Button>
|
||||
|
||||
<Button
|
||||
color={Button.Colors.RED}
|
||||
|
@ -52,30 +43,10 @@ export function GlobalDefaultComponent() {
|
|||
|
||||
export function TipsComponent() {
|
||||
const tipText = `
|
||||
[class^=wallpaperContainer] {
|
||||
.vc-wpfree-wp-container {
|
||||
transform: scaleX(-1); /* flip it horizontally */
|
||||
filter: blur(4px); /* apply a blur */
|
||||
opacity: 0.7; /* self-explanatory */
|
||||
}`;
|
||||
return Parser.parse(makeCodeblock(tipText, "css"));
|
||||
}
|
||||
|
||||
export interface Wallpaper {
|
||||
id: string;
|
||||
label: string;
|
||||
default: Default;
|
||||
variants: Variants;
|
||||
isBlurred: boolean;
|
||||
designGroupId: string;
|
||||
}
|
||||
|
||||
export interface Default {
|
||||
asset: string;
|
||||
icon: string;
|
||||
thumbhash: string;
|
||||
opacity?: number;
|
||||
}
|
||||
|
||||
export interface Variants {
|
||||
dark: Default;
|
||||
}
|
||||
|
|
|
@ -7,59 +7,47 @@
|
|||
import "./styles.css";
|
||||
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { ErrorBoundary } from "@components/index";
|
||||
import { Devs } from "@utils/constants";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { useStateFromStores } from "@webpack/common";
|
||||
import { Channel } from "discord-types/general";
|
||||
|
||||
import { ChannelContextPatch, GuildContextPatch, UserContextPatch } from "./components/ctxmenu";
|
||||
import { GlobalDefaultComponent, TipsComponent, Wallpaper } from "./components/util";
|
||||
import { GlobalDefaultComponent, TipsComponent } from "./components/util";
|
||||
import { WallpaperFreeStore } from "./store";
|
||||
|
||||
|
||||
const settings = definePluginSettings({
|
||||
forceReplace: {
|
||||
description: "If a dm wallpaper is already set, your custom wallpaper will be used instead.",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false,
|
||||
export const settings = definePluginSettings({
|
||||
globalDefault: {
|
||||
description: "Set a global default wallpaper for all channels.",
|
||||
type: OptionType.COMPONENT,
|
||||
component: GlobalDefaultComponent
|
||||
},
|
||||
stylingTips: {
|
||||
description: "",
|
||||
type: OptionType.COMPONENT,
|
||||
component: TipsComponent,
|
||||
},
|
||||
globalDefault: {
|
||||
description: "Set a global default wallpaper for all channels.",
|
||||
type: OptionType.COMPONENT,
|
||||
component: GlobalDefaultComponent
|
||||
}
|
||||
});
|
||||
|
||||
export default definePlugin({
|
||||
name: "WallpaperFree",
|
||||
authors: [Devs.Joona],
|
||||
description: "Use the DM wallpapers anywhere or set a custom wallpaper",
|
||||
description: "Recreation of the old DM wallpaper experiment; Set a background image for any channel or server.",
|
||||
patches: [
|
||||
{
|
||||
find: ".wallpaperContainer,",
|
||||
find: ".handleSendMessage,onResize",
|
||||
group: true,
|
||||
replacement: [
|
||||
{
|
||||
match: /return null==(\i).+?\?null:/,
|
||||
replace: "const vcWpFreeCustom = $self.customWallpaper(arguments[0].channel,$1);return !($1||vcWpFreeCustom)?null:"
|
||||
match: /return.{1,150},(?=keyboardModeEnabled)/,
|
||||
replace: "const vcWallpaperFreeUrl=$self.WallpaperState(arguments[0].channel);$&vcWallpaperFreeUrl,"
|
||||
},
|
||||
{
|
||||
match: /,{chatWallpaperState:/,
|
||||
replace: "$&vcWpFreeCustom||"
|
||||
},
|
||||
{
|
||||
match: /(\i)=(.{1,50}asset.+?(?=,\i=))(?=.+?concat\(\1)/,
|
||||
replace: "$1=arguments[0].chatWallpaperState.vcWallpaperUrl||($2)"
|
||||
},
|
||||
{
|
||||
match: /(\i\.isViewable&&)(null!=\i)/,
|
||||
replace: "$1($2||arguments[0].chatWallpaperState.vcWallpaperUrl)"
|
||||
},
|
||||
match: /}\)]}\)](?=.{1,30}messages-)/,
|
||||
replace: "$&.toSpliced(0,0,$self.Wallpaper({url:this.props.vcWallpaperFreeUrl}))"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
@ -71,21 +59,17 @@ export default definePlugin({
|
|||
"guild-context": GuildContextPatch,
|
||||
"gdm-context": ChannelContextPatch,
|
||||
},
|
||||
customWallpaper(channel: Channel, wp: Wallpaper | undefined) {
|
||||
const { forceReplace } = settings.use(["forceReplace"]);
|
||||
const url = useStateFromStores([WallpaperFreeStore], () => WallpaperFreeStore.getUrl(channel));
|
||||
Wallpaper({ url }: { url: string; }) {
|
||||
// no we cant place the hook here
|
||||
if (!url) return null;
|
||||
|
||||
if (!forceReplace && wp?.id)
|
||||
return wp;
|
||||
|
||||
if (url) {
|
||||
return {
|
||||
wallpaperId: "id",
|
||||
vcWallpaperUrl: url,
|
||||
isViewable: true,
|
||||
};
|
||||
}
|
||||
|
||||
return void 0;
|
||||
return <ErrorBoundary noop>
|
||||
<div className="wallpaperContainer vc-wpfree-wp-container" style={{
|
||||
backgroundImage: `url(${url})`,
|
||||
}}></div>
|
||||
</ErrorBoundary>;
|
||||
},
|
||||
WallpaperState(channel: Channel) {
|
||||
return useStateFromStores([WallpaperFreeStore], () => WallpaperFreeStore.getUrl(channel));
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,30 +1,8 @@
|
|||
.vc-wpfree-discord-wp-modal {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 24px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.vc-wpfree-discord-wp-icon-container {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.vc-wpfree-discord-wp-icon-img {
|
||||
width: 120px;
|
||||
height: 68px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--background-modifier-accent);
|
||||
}
|
||||
|
||||
.vc-wpfree-discord-set-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px
|
||||
.vc-wpfree-wp-container,
|
||||
.wallpaperContainer {
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
|
@ -20,7 +20,6 @@ import "./style.css";
|
|||
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { Devs } from "@utils/constants";
|
||||
import { getIntlMessage } from "@utils/discord";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
|
||||
import { FluxDispatcher } from "@webpack/common";
|
||||
|
@ -350,7 +349,7 @@ export default definePlugin({
|
|||
}
|
||||
|
||||
try {
|
||||
return child?.props?.["aria-label"] === getIntlMessage("SERVERS");
|
||||
return child?.props?.renderTreeNode !== null;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return true;
|
||||
|
@ -365,7 +364,7 @@ export default definePlugin({
|
|||
}
|
||||
|
||||
try {
|
||||
return filterTreeWithTargetNode(child, child => child?.props?.renderTreeNode != null);
|
||||
return filterTreeWithTargetNode(child, child => child?.props?.role === "tree");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return true;
|
||||
|
@ -390,14 +389,6 @@ export default definePlugin({
|
|||
}
|
||||
},
|
||||
|
||||
makeNewButtonFilter(isBetterFolders: boolean) {
|
||||
return child => {
|
||||
if (!isBetterFolders) return true;
|
||||
|
||||
return !child?.props?.barClassName;
|
||||
};
|
||||
},
|
||||
|
||||
shouldShowTransition(props: any) {
|
||||
// Pending guilds
|
||||
if (props?.folderNode?.id === 1) return true;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue