Merge 7274df130d into 6cce8a8bc4

Co-authored-by: Vendicated <vendicated@riseup.net>

src/plugins/appleMusic.desktop/index.tsx

@@ -24,7 +24,7 @@ interface ActivityButton {
 }
 
 interface Activity {
-    state: string;
+    state?: string;
     details?: string;
     timestamps?: {
         start?: number;
@@ -52,8 +52,8 @@ const enum ActivityFlag {
 
 export interface TrackData {
     name: string;
-    album: string;
-    artist: string;
+    album?: string;
+    artist?: string;
 
     appleMusicLink?: string;
     songLink?: string;
@@ -61,8 +61,8 @@ export interface TrackData {
     albumArtwork?: string;
     artistArtwork?: string;
 
-    playerPosition: number;
-    duration: number;
+    playerPosition?: number;
+    duration?: number;
 }
 
 const enum AssetImageType {
@@ -155,8 +155,8 @@ const settings = definePluginSettings({
 function customFormat(formatStr: string, data: TrackData) {
     return formatStr
         .replaceAll("{name}", data.name)
-        .replaceAll("{album}", data.album)
-        .replaceAll("{artist}", data.artist);
+        .replaceAll("{album}", data.album ?? "")
+        .replaceAll("{artist}", data.artist ?? "");
 }
 
 function getImageAsset(type: AssetImageType, data: TrackData) {
@@ -212,14 +212,16 @@ export default definePlugin({
 
         const assets: ActivityAssets = {};
 
+        const isRadio = Number.isNaN(trackData.duration) && (trackData.playerPosition === 0);
+
         if (settings.store.largeImageType !== AssetImageType.Disabled) {
             assets.large_image = largeImageAsset;
-            assets.large_text = customFormat(settings.store.largeTextString, trackData);
+            if (!isRadio) assets.large_text = customFormat(settings.store.largeTextString, trackData);
         }
 
         if (settings.store.smallImageType !== AssetImageType.Disabled) {
             assets.small_image = smallImageAsset;
-            assets.small_text = customFormat(settings.store.smallTextString, trackData);
+            if (!isRadio) assets.small_text = customFormat(settings.store.smallTextString, trackData);
         }
 
         const buttons: ActivityButton[] = [];
@@ -243,17 +245,17 @@ export default definePlugin({
 
             name: customFormat(settings.store.nameString, trackData),
             details: customFormat(settings.store.detailsString, trackData),
-            state: customFormat(settings.store.stateString, trackData),
+            state: isRadio ? undefined : customFormat(settings.store.stateString, trackData),
 
-            timestamps: (settings.store.enableTimestamps ? {
+            timestamps: (trackData.playerPosition && trackData.duration && settings.store.enableTimestamps) ? {
                 start: Date.now() - (trackData.playerPosition * 1000),
                 end: Date.now() - (trackData.playerPosition * 1000) + (trackData.duration * 1000),
-            } : undefined),
+            } : undefined,
 
             assets,
 
-            buttons: buttons.length ? buttons.map(v => v.label) : undefined,
-            metadata: { button_urls: buttons.map(v => v.url) || undefined, },
+            buttons: !isRadio && buttons.length ? buttons.map(v => v.label) : undefined,
+            metadata: !isRadio && buttons.length ? { button_urls: buttons.map(v => v.url) } : undefined,
 
             type: settings.store.activityType,
             flags: ActivityFlag.INSTANCE,

src/plugins/betterSettings/PluginsSubmenu.tsx

@@ -0,0 +1,68 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { openPluginModal } from "@components/PluginSettings/PluginModal";
+import { isObjectEmpty } from "@utils/misc";
+import { Alerts, i18n, Menu, useMemo, useState } from "@webpack/common";
+
+import Plugins from "~plugins";
+
+function onRestartNeeded() {
+    Alerts.show({
+        title: "Restart required",
+        body: <p>You have changed settings that require a restart.</p>,
+        confirmText: "Restart now",
+        cancelText: "Later!",
+        onConfirm: () => location.reload()
+    });
+}
+
+export default function PluginsSubmenu() {
+    const sortedPlugins = useMemo(() => Object.values(Plugins)
+        .sort((a, b) => a.name.localeCompare(b.name)), []);
+    const [query, setQuery] = useState("");
+
+    const search = query.toLowerCase();
+    const include = (p: typeof Plugins[keyof typeof Plugins]) => (
+        Vencord.Plugins.isPluginEnabled(p.name)
+        && p.options && !isObjectEmpty(p.options)
+        && (
+            p.name.toLowerCase().includes(search)
+            || p.description.toLowerCase().includes(search)
+            || p.tags?.some(t => t.toLowerCase().includes(search))
+        )
+    );
+
+    const plugins = sortedPlugins.filter(include);
+
+    return (
+        <>
+            <Menu.MenuControlItem
+                id="vc-plugins-search"
+                control={(props, ref) => (
+                    <Menu.MenuSearchControl
+                        {...props}
+                        query={query}
+                        onChange={setQuery}
+                        ref={ref}
+                        placeholder={i18n.Messages.SEARCH}
+                    />
+                )}
+            />
+
+            {!!plugins.length && <Menu.MenuSeparator />}
+
+            {plugins.map(p => (
+                <Menu.MenuItem
+                    key={p.name}
+                    id={p.name}
+                    label={p.name}
+                    action={() => openPluginModal(p, onRestartNeeded)}
+                />
+            ))}
+        </>
+    );
+}

src/plugins/betterSettings/index.tsx

@@ -13,6 +13,8 @@ import { waitFor } from "@webpack";
 import { ComponentDispatch, FocusLock, i18n, Menu, useEffect, useRef } from "@webpack/common";
 import type { HTMLAttributes, ReactElement } from "react";
 
+import PluginsSubmenu from "./PluginsSubmenu";
+
 type SettingsEntry = { section: string, label: string; };
 
 const cl = classNameFactory("");
@@ -118,13 +120,21 @@ export default definePlugin({
         },
         { // Settings cog context menu
             find: "Messages.USER_SETTINGS_ACTIONS_MENU_LABEL",
-            replacement: {
-                match: /(EXPERIMENTS:.+?)(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
-                replace: "$1$self.wrapMenu($2)"
-            }
-        }
+            replacement: [
+                {
+                    match: /(EXPERIMENTS:.+?)(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
+                    replace: "$1$self.wrapMenu($2)"
+                },
+                {
+                    match: /case \i\.\i\.DEVELOPER_OPTIONS:return \i;/,
+                    replace: "$&case 'VencordPlugins':return $self.PluginsSubmenu();"
+                }
+            ]
+        },
     ],
 
+    PluginsSubmenu,
+
     // This is the very outer layer of the entire ui, so we can't wrap this in an ErrorBoundary
     // without possibly also catching unrelated errors of children.
     //

src/plugins/consoleJanitor/index.ts

@@ -126,7 +126,7 @@ export default definePlugin({
             }
         },
         {
-            find: '"Handling ping: "',
+            find: '"_handleLocalVideoDisabled: ',
             predicate: () => settings.store.disableNoisyLoggers,
             replacement: {
                 match: /new \i\.\i\("RTCConnection\("\.concat.+?\)\)(?=,)/,

src/plugins/experiments/index.tsx

@@ -23,12 +23,13 @@ import { ErrorCard } from "@components/ErrorCard";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByPropsLazy } from "@webpack";
+import { findByPropsLazy, findLazy } from "@webpack";
 import { Forms, React } from "@webpack/common";
 
 import hideBugReport from "./hideBugReport.css?managed";
 
 const KbdStyles = findByPropsLazy("key", "combo");
+const BugReporterExperiment = findLazy(m => m?.definition?.id === "2024-09_bug_reporter");
 
 const settings = definePluginSettings({
     toolbarDevMenu: {
@@ -78,8 +79,8 @@ export default definePlugin({
         {
             find: "toolbar:function",
             replacement: {
-                match: /\i\.isStaff\(\)/,
-                replace: "true"
+                match: /hasBugReporterAccess:(\i)/,
+                replace: "_hasBugReporterAccess:$1=true"
             },
             predicate: () => settings.store.toolbarDevMenu
         },
@@ -91,10 +92,18 @@ export default definePlugin({
                 match: /\i\.isDM\(\)\|\|\i\.isThread\(\)/,
                 replace: "false",
             }
+        },
+        // enable option to always record clips even if you are not streaming
+        {
+            find: "isDecoupledGameClippingEnabled(){",
+            replacement: {
+                match: /\i\.isStaff\(\)/,
+                replace: "true"
+            }
         }
     ],
 
-    start: () => enableStyle(hideBugReport),
+    start: () => !BugReporterExperiment.getCurrentConfig().hasBugReporterAccess && enableStyle(hideBugReport),
     stop: () => disableStyle(hideBugReport),
 
     settingsAboutComponent: () => {

src/plugins/noDefaultHangStatus/README.md

@@ -1,5 +0,0 @@
-# NoDefaultHangStatus
-
-Disable the default hang status when joining voice channels
-
-![Visualization](https://github.com/Vendicated/Vencord/assets/24937357/329a9742-236f-48f7-94ff-c3510eca505a)

src/plugins/noDefaultHangStatus/index.ts

@@ -1,24 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2024 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
-
-export default definePlugin({
-    name: "NoDefaultHangStatus",
-    description: "Disable the default hang status when joining voice channels",
-    authors: [Devs.D3SOX],
-
-    patches: [
-        {
-            find: ".CHILLING)",
-            replacement: {
-                match: /{enableHangStatus:(\i),/,
-                replace: "{_enableHangStatus:$1=false,"
-            }
-        }
-    ]
-});

src/plugins/passwordProtect/README.md

@@ -0,0 +1,5 @@
+# PasswordProtect
+
+Allows you to password protect your dms and channels!
+
+![A popup warning you that a channel is password protected](https://github.com/Vendicated/Vencord/assets/44179559/2424085e-3090-4310-9d56-62667941c57c)

src/plugins/passwordProtect/components/accessModal.tsx

@@ -0,0 +1,22 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { openModalLazy } from "@utils/modal";
+
+import { checkPassword } from "../data";
+import { ModalType, PasswordModal } from "./modal";
+
+export async function openAccessModal(channelId: string, cb: (success: boolean) => void) {
+    await openModalLazy(async () => {
+        return modalProps => <PasswordModal modalProps={modalProps} channelId={channelId} type={ModalType.Access} callback={async password => {
+            if (password) {
+                cb(await checkPassword(password, channelId));
+            } else {
+                cb(false);
+            }
+        }} />;
+    });
+}

src/plugins/passwordProtect/components/contextMenus.tsx

@@ -0,0 +1,71 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
+import { Menu } from "@webpack/common";
+
+import { isPasswordProtected } from "../data";
+import { openLockModal } from "./lockModal";
+import { openUnlockModal } from "./unlockModal";
+
+function createPasswordItem(channelId: string) {
+    const isProtected = isPasswordProtected(channelId);
+
+    return (
+        <Menu.MenuItem
+            id="password-protect"
+            label="Password Protect"
+        >
+            {!isProtected && (
+                <>
+                    <Menu.MenuItem
+                        id="vc-password-protect-lock"
+                        label="Lock"
+                        color="brand"
+                        action={() => openLockModal(channelId)}
+                    />
+                </>
+            )}
+
+            {isProtected && (
+                <>
+                    <Menu.MenuItem
+                        id="vc-password-protect-unlock"
+                        label="Unlock"
+                        color="danger"
+                        action={() => openUnlockModal(channelId)}
+                    />
+                </>
+            )}
+
+        </Menu.MenuItem>
+    );
+}
+
+const GroupDMContext: NavContextMenuPatchCallback = (children, props) => {
+    const container = findGroupChildrenByChildId("leave-channel", children);
+    container?.unshift(createPasswordItem(props.channel.id));
+};
+
+const UserContext: NavContextMenuPatchCallback = (children, props) => {
+    const container = findGroupChildrenByChildId("close-dm", children);
+    if (container) {
+        const idx = container.findIndex(c => c?.props?.id === "close-dm");
+        container.splice(idx, 0, createPasswordItem(props.channel.id));
+    }
+};
+
+const ChannelContect: NavContextMenuPatchCallback = (children, props) => {
+    const container = findGroupChildrenByChildId(["mute-channel", "unmute-channel"], children);
+    container?.unshift(createPasswordItem(props.channel.id));
+};
+
+
+export const contextMenus = {
+    "gdm-context": GroupDMContext,
+    "user-context": UserContext,
+    "channel-context": ChannelContect
+};

src/plugins/passwordProtect/components/lockModal.tsx

@@ -0,0 +1,24 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { openModalLazy } from "@utils/modal";
+
+import { setPassword } from "../data";
+import { isChannelCurrent, reloadChannel } from "../utils";
+import { ModalType, PasswordModal } from "./modal";
+
+export async function openLockModal(channelId: string) {
+    await openModalLazy(async () => {
+        return modalProps => <PasswordModal modalProps={modalProps} channelId={channelId} type={ModalType.Lock} callback={password => {
+            if (password) {
+                setPassword(channelId, password);
+                if (isChannelCurrent(channelId)) {
+                    reloadChannel();
+                }
+            }
+        }} />;
+    });
+}

src/plugins/passwordProtect/components/modal.tsx

@@ -0,0 +1,91 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
+import { Button, Forms, Text, TextInput, useEffect, useState } from "@webpack/common";
+
+import { checkPassword } from "../data";
+
+export enum ModalType {
+    Lock = "Lock",
+    Unlock = "Unlock",
+    Access = "Access"
+}
+
+interface Props {
+    channelId: string;
+    type: ModalType;
+    callback: (password?: string) => void;
+    modalProps: ModalProps;
+}
+
+const cl = classNameFactory("vc-password-modal-");
+
+export function PasswordModal({ channelId, type, callback, modalProps }: Props) {
+
+    const [password, setPassword] = useState("");
+    const [confirmPasswordValue, setConfirmPasswordValue] = useState("");
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        (async () => {
+            if (password !== confirmPasswordValue && [ModalType.Lock, ModalType.Unlock].includes(type)) {
+                setError("Passwords do not match");
+            } else if (password === "") {
+                setError("Please enter a password");
+            }
+            else if (type !== ModalType.Lock && !(await checkPassword(password, channelId))) {
+                setError("Incorrect Password");
+            } else {
+                setError("");
+            }
+        })();
+    }, [password, confirmPasswordValue]);
+
+    const onSubmit = async (e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+        if (error) return callback();
+        modalProps.onClose();
+        callback(password);
+    };
+    return (
+        <ModalRoot {...modalProps}>
+            <ModalHeader>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{type}</Text>
+            </ModalHeader>
+
+            {/* form is here so when you press enter while in the text input it submits */}
+            <form onSubmit={onSubmit}>
+                <ModalContent className={cl("content")}>
+                    <Forms.FormSection>
+                        <Forms.FormTitle>Password</Forms.FormTitle>
+                        <TextInput
+                            type="password"
+                            value={password}
+                            onChange={e => setPassword(e)}
+                        />
+                    </Forms.FormSection>
+                    {[ModalType.Lock, ModalType.Unlock].includes(type) && (
+                        <Forms.FormSection>
+                            <Forms.FormTitle>Confirm Password</Forms.FormTitle>
+                            <TextInput
+                                type="password"
+                                value={confirmPasswordValue}
+                                onChange={e => setConfirmPasswordValue(e)}
+                            />
+                        </Forms.FormSection>
+                    )}
+                    <Forms.FormDivider />
+                    {error && <Text color="text-danger">{error}</Text>}
+                </ModalContent>
+                <ModalFooter>
+                    <Button type="submit" onClick={onSubmit} disabled={!!error}>{type}</Button>
+                </ModalFooter>
+            </form>
+        </ModalRoot>
+    );
+}

src/plugins/passwordProtect/components/unlockModal.tsx

@@ -0,0 +1,26 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { openModalLazy } from "@utils/modal";
+
+import { checkPassword, removePassword } from "../data";
+import { isChannelCurrent, reloadChannel } from "../utils";
+import { ModalType, PasswordModal } from "./modal";
+
+export async function openUnlockModal(channelId: string) {
+    await openModalLazy(async () => {
+        return modalProps => <PasswordModal modalProps={modalProps} channelId={channelId} type={ModalType.Unlock} callback={async password => {
+            if (password) {
+                if (await checkPassword(password, channelId)) {
+                    removePassword(channelId);
+                    if (isChannelCurrent(channelId)) {
+                        reloadChannel();
+                    }
+                }
+            }
+        }} />;
+    });
+}

src/plugins/passwordProtect/data.ts

@@ -0,0 +1,60 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { DataStore } from "@api/index";
+import { Channel } from "discord-types/general";
+
+import { isChannelCurrent, reloadChannel, sha256 } from "./utils";
+
+let data: Record<string, string> = {};
+const accessedChannels: string[] = [];
+
+export async function initData() {
+    const newData = await DataStore.get("passwordProtect");
+    if (newData) {
+        data = newData;
+    }
+}
+
+export async function saveData() {
+    await DataStore.set("passwordProtect", data);
+}
+
+export function isLocked(channelId: string) {
+    if (accessedChannels.includes(channelId)) return false;
+    return isPasswordProtected(channelId);
+}
+
+export function isPasswordProtected(channelId: string) {
+    return data?.[channelId] !== undefined;
+}
+
+export function getPasswordHash(channelId: string) {
+    return data?.[channelId];
+}
+
+export async function setPassword(channelId: string, password: string) {
+    data![channelId] = await sha256(password);
+    await saveData();
+}
+
+export async function removePassword(channelId: string) {
+    delete data![channelId];
+    await saveData();
+}
+
+export async function checkPassword(input: string, channelId: string) {
+    return await sha256(input) === getPasswordHash(channelId);
+}
+
+
+export function accessChannel(channel: Channel) {
+    accessedChannels.push(channel.id);
+    if (isChannelCurrent(channel.id)) reloadChannel();
+    setTimeout(() => {
+        accessedChannels.splice(accessedChannels.indexOf(channel.id), 1);
+    }, 1000);
+}

src/plugins/passwordProtect/index.tsx

@@ -0,0 +1,84 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import { getCurrentChannel } from "@utils/discord";
+import definePlugin from "@utils/types";
+
+import { openAccessModal } from "./components/accessModal";
+import { contextMenus } from "./components/contextMenus";
+import { accessChannel, initData, isLocked, isPasswordProtected, saveData } from "./data";
+
+interface NSFWBlockProps {
+    title: string;
+    description: string;
+    agreement: string;
+    disagreement: string;
+    onAgree: () => void;
+    onDisagree: () => void;
+}
+
+export default definePlugin({
+    name: "PasswordProtect",
+    description: "Passcode protect servers, channels, and dms. WARNING: Disabling the plugin will allow anyone to open the channels!",
+    authors: [Devs.ImLvna],
+
+    contextMenus: contextMenus,
+
+    patches: [
+        {
+            find: "GuildNSFWAgreeStore",
+            replacement: {
+                match: /didAgree\((\i)\){/,
+                replace: "$&if($self.isLocked($1)) return false; if($self.isPasswordProtected($1)) return true;"
+            }
+        },
+        {
+            find: "return this.nsfw",
+            replacement: {
+                match: /return this.nsfw/,
+                replace: "if($self.isLocked(this.id)) return true;$&"
+            }
+        },
+        {
+            find: ".gatedContent,",
+            replacement: {
+                match: /this.props/,
+                replace: "$self.patchProps($&)"
+            }
+        }
+    ],
+
+    patchProps(props: NSFWBlockProps) {
+        const channel = getCurrentChannel();
+        if (!isPasswordProtected(channel.id)) return props;
+        props.title = "This channel is password protected";
+        props.description = "This channel is password protected. Please enter the password to view the content.";
+        props.agreement = "Enter password";
+        props.disagreement = "Cancel";
+        props.onAgree = () => {
+            openAccessModal(channel.id, async success => {
+                console.log(success);
+                if (success) {
+                    accessChannel(channel);
+                }
+            }
+            );
+        };
+        return props;
+    },
+
+    isLocked,
+
+    isPasswordProtected,
+
+    start() {
+        initData();
+    },
+    stop() {
+        saveData();
+    },
+});

src/plugins/passwordProtect/utils.ts

@@ -0,0 +1,26 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { getCurrentChannel } from "@utils/discord";
+import { NavigationRouter } from "@webpack/common";
+
+export async function sha256(message) {
+    const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(message));
+    const array = Array.from(new Uint8Array(buf));
+    const str = array.map(b => b.toString(16).padStart(2, "0")).join("");
+    return str;
+}
+
+export function isChannelCurrent(channelId: string) {
+    return getCurrentChannel()?.id === channelId;
+}
+
+export async function reloadChannel() {
+    const channel = getCurrentChannel();
+    NavigationRouter.transitionTo("/channels/@me");
+    await new Promise(r => setTimeout(r, 0));
+    NavigationRouter.transitionTo(`/channels/${channel.guild_id || "@me"}/${channel.id}`);
+}

src/plugins/reviewDB/index.tsx

@@ -91,7 +91,7 @@ export default definePlugin({
             }
         },
         {
-            find: ".PANEL,isInteractionSource:",
+            find: ".PANEL,interactionType:",
             replacement: {
                 match: /{profileType:\i\.\i\.PANEL,children:\[/,
                 replace: "$&$self.BiteSizeReviewsButton({user:arguments[0].user}),"

src/plugins/userVoiceShow/README.md

@@ -0,0 +1,7 @@
+# User Voice Show
+
+Shows an indicator when a user is in a Voice Channel
+
+![a preview of the indicator in the user profile](https://github.com/user-attachments/assets/48f825e4-fad5-40d7-bb4f-41d5e595aae0)
+
+![a preview of the indicator in the member list](https://github.com/user-attachments/assets/51be081d-7bbb-45c5-8533-d565228e50c1)

src/plugins/userVoiceShow/components.tsx

@@ -0,0 +1,170 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { classes } from "@utils/misc";
+import { findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
+import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, showToast, Text, Toasts, Tooltip, useCallback, useMemo, UserStore, useStateFromStores } from "@webpack/common";
+import { Channel } from "discord-types/general";
+
+const cl = classNameFactory("vc-uvs-");
+
+const { selectVoiceChannel } = findByPropsLazy("selectChannel", "selectVoiceChannel");
+const VoiceStateStore = findStoreLazy("VoiceStateStore");
+const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
+
+interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+
+function SpeakerIcon(props: IconProps) {
+    props.size ??= 16;
+
+    return (
+        <div
+            {...props}
+            role={props.onClick != null ? "button" : undefined}
+            className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined)}
+        >
+            <svg
+                width={props.size}
+                height={props.size}
+                viewBox="0 0 24 24"
+                fill="currentColor"
+            >
+                <path d="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z" />
+                <path d="M15.16 16.51c-.57.28-1.16-.2-1.16-.83v-.14c0-.43.28-.8.63-1.02a3 3 0 0 0 0-5.04c-.35-.23-.63-.6-.63-1.02v-.14c0-.63.59-1.1 1.16-.83a5 5 0 0 1 0 9.02Z" />
+            </svg>
+        </div>
+    );
+}
+
+function LockedSpeakerIcon(props: IconProps) {
+    props.size ??= 16;
+
+    return (
+        <div
+            {...props}
+            role={props.onClick != null ? "button" : undefined}
+            className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined)}
+        >
+            <svg
+                width={props.size}
+                height={props.size}
+                viewBox="0 0 24 24"
+                fill="currentColor"
+            >
+                <path fillRule="evenodd" clipRule="evenodd" d="M16 4h.5v-.5a2.5 2.5 0 0 1 5 0V4h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Zm4-.5V4h-2v-.5a1 1 0 1 1 2 0Z" />
+                <path d="M11 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1h-.06a1 1 0 0 1-.74-.32L5.92 17H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.92l4.28-4.68a1 1 0 0 1 .74-.32H11ZM20.5 12c-.28 0-.5.22-.52.5a7 7 0 0 1-5.13 6.25c-.48.13-.85.55-.85 1.05v.03c0 .6.52 1.06 1.1.92a9 9 0 0 0 6.89-8.25.48.48 0 0 0-.49-.5h-1ZM16.5 12c-.28 0-.5.23-.54.5a3 3 0 0 1-1.33 2.02c-.35.23-.63.6-.63 1.02v.14c0 .63.59 1.1 1.16.83a5 5 0 0 0 2.82-4.01c.02-.28-.2-.5-.48-.5h-1Z" />
+            </svg>
+        </div>
+    );
+}
+
+interface VoiceChannelTooltipProps {
+    channel: Channel;
+}
+
+function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
+    const voiceStates = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStatesForChannel(channel.id));
+    const users = useMemo(
+        () => Object.values<any>(voiceStates).map(voiceState => UserStore.getUser(voiceState.userId)).filter(user => user != null),
+        [voiceStates]
+    );
+
+    const guild = useMemo(
+        () => channel.getGuildId() == null ? undefined : GuildStore.getGuild(channel.getGuildId()),
+        [channel]
+    );
+
+    const guildIcon = useMemo(() => {
+        return guild?.icon == null ? undefined : IconUtils.getGuildIconURL({
+            id: guild.id,
+            icon: guild.icon,
+            size: 30
+        });
+    }, [guild]);
+
+    return (
+        <>
+            {guild != null && (
+                <div className={cl("guild-name")}>
+                    {guildIcon != null && <img className={cl("guild-icon")} src={guildIcon} alt="" />}
+                    <Text variant="text-sm/bold">{guild.name}</Text>
+                </div>
+            )}
+            <Text variant="text-sm/semibold">{channel.name}</Text>
+            <div className={cl("vc-members")}>
+                <SpeakerIcon size={18} />
+                <UserSummaryItem
+                    users={users}
+                    renderIcon={false}
+                    max={7}
+                    size={18}
+                />
+            </div>
+        </>
+    );
+}
+
+interface VoiceChannelIndicatorProps {
+    userId: string;
+}
+
+const clickTimers = {} as Record<string, any>;
+
+export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId }: VoiceChannelIndicatorProps) => {
+    const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
+    const channel = useMemo(() => channelId == null ? undefined : ChannelStore.getChannel(channelId), [channelId]);
+
+    const onClick = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (channel == null || channelId == null) return;
+
+        if (!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel)) {
+            showToast("You cannot view the user's Voice Channel", Toasts.Type.FAILURE);
+            return;
+        }
+
+        clearTimeout(clickTimers[channelId]);
+        delete clickTimers[channelId];
+
+        if (e.detail > 1) {
+            if (!PermissionStore.can(PermissionsBits.CONNECT, channel)) {
+                showToast("You cannot join the user's Voice Channel", Toasts.Type.FAILURE);
+                return;
+            }
+
+            selectVoiceChannel(channelId);
+        } else {
+            clickTimers[channelId] = setTimeout(() => {
+                NavigationRouter.transitionTo(`/channels/${channel.getGuildId() ?? "@me"}/${channelId}`);
+                delete clickTimers[channelId];
+            }, 250);
+        }
+    }, [channelId]);
+
+    const isLocked = useMemo(() => {
+        return !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) || !PermissionStore.can(PermissionsBits.CONNECT, channel);
+    }, [channelId]);
+
+    if (channel == null) return null;
+
+    return (
+        <Tooltip
+            text={<VoiceChannelTooltip channel={channel} />}
+            tooltipClassName={cl("tooltip-container")}
+        >
+            {props =>
+                isLocked ?
+                    <LockedSpeakerIcon {...props} onClick={onClick} />
+                    : <SpeakerIcon {...props} onClick={onClick} />
+            }
+        </Tooltip>
+    );
+}, { noop: true });

src/plugins/userVoiceShow/components/VoiceChannelSection.css

@@ -1,27 +0,0 @@
-.vc-uvs-button>div {
-    white-space: normal !important;
-}
-
-.vc-uvs-button {
-    width: 100%;
-    margin: auto;
-    height: unset;
-}
-
-.vc-uvs-header {
-    color: var(--header-primary);
-    margin-bottom: 6px;
-}
-
-.vc-uvs-modal-margin {
-    margin: 0 12px;
-}
-
-.vc-uvs-modal-margin div {
-    margin-bottom: 0 !important;
-}
-
-.vc-uvs-popout-margin-self>[class^="section"] {
-    padding-top: 0;
-    padding-bottom: 12px;
-}

src/plugins/userVoiceShow/components/VoiceChannelSection.tsx

@@ -1,61 +0,0 @@
-/*
- * 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 "./VoiceChannelSection.css";
-
-import { findByPropsLazy } from "@webpack";
-import { Button, Forms, PermissionStore, Toasts } from "@webpack/common";
-import { Channel } from "discord-types/general";
-
-const ChannelActions = findByPropsLazy("selectChannel", "selectVoiceChannel");
-
-const CONNECT = 1n << 20n;
-
-interface VoiceChannelFieldProps {
-    channel: Channel;
-    label: string;
-    showHeader: boolean;
-}
-
-export const VoiceChannelSection = ({ channel, label, showHeader }: VoiceChannelFieldProps) => (
-    // @TODO The div is supposed to be a UserPopoutSection
-    <div>
-        {showHeader && <Forms.FormTitle className="vc-uvs-header">In a voice channel</Forms.FormTitle>}
-        <Button
-            className="vc-uvs-button"
-            color={Button.Colors.TRANSPARENT}
-            size={Button.Sizes.SMALL}
-
-            onClick={() => {
-                if (PermissionStore.can(CONNECT, channel))
-                    ChannelActions.selectVoiceChannel(channel.id);
-                else
-                    Toasts.show({
-                        message: "Insufficient permissions to enter the channel.",
-                        id: "user-voice-show-insufficient-permissions",
-                        type: Toasts.Type.FAILURE,
-                        options: {
-                            position: Toasts.Position.BOTTOM,
-                        }
-                    });
-            }}
-        >
-            {label}
-        </Button>
-    </div>
-);

src/plugins/userVoiceShow/index.tsx

@@ -16,85 +16,85 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
+import { addDecorator, removeDecorator } from "@api/MemberListDecorators";
 import { definePluginSettings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { findStoreLazy } from "@webpack";
-import { ChannelStore, GuildStore, UserStore } from "@webpack/common";
-import { User } from "discord-types/general";
 
-import { VoiceChannelSection } from "./components/VoiceChannelSection";
-
-const VoiceStateStore = findStoreLazy("VoiceStateStore");
+import { VoiceChannelIndicator } from "./components";
 
 const settings = definePluginSettings({
     showInUserProfileModal: {
         type: OptionType.BOOLEAN,
-        description: "Show a user's voice channel in their profile modal",
+        description: "Show a user's Voice Channel indicator in their profile next to the name",
         default: true,
+        restartNeeded: true
     },
-    showVoiceChannelSectionHeader: {
+    showInVoiceMemberList: {
         type: OptionType.BOOLEAN,
-        description: 'Whether to show "IN A VOICE CHANNEL" above the join button',
+        description: "Show a user's Voice Channel indicator in the member and DMs list",
         default: true,
+        restartNeeded: true
     }
 });
 
-interface UserProps {
-    user: User;
-}
-
-const VoiceChannelField = ErrorBoundary.wrap(({ user }: UserProps) => {
-    const { channelId } = VoiceStateStore.getVoiceStateForUser(user.id) ?? {};
-    if (!channelId) return null;
-
-    const channel = ChannelStore.getChannel(channelId);
-    if (!channel) return null;
-
-    const guild = GuildStore.getGuild(channel.guild_id);
-
-    if (!guild) return null; // When in DM call
-
-    const result = `${guild.name} | ${channel.name}`;
-
-    return (
-        <VoiceChannelSection
-            channel={channel}
-            label={result}
-            showHeader={settings.store.showVoiceChannelSectionHeader}
-        />
-    );
-});
-
 export default definePlugin({
     name: "UserVoiceShow",
-    description: "Shows whether a User is currently in a voice channel somewhere in their profile",
-    authors: [Devs.LordElias],
+    description: "Shows an indicator when a user is in a Voice Channel",
+    authors: [Devs.LordElias, Devs.Nuckyz],
     settings,
 
-    patchModal({ user }: UserProps) {
-        if (!settings.store.showInUserProfileModal)
-            return null;
-
-        return (
-            <div className="vc-uvs-modal-margin">
-                <VoiceChannelField user={user} />
-            </div>
-        );
-    },
-
-    patchProfilePopout: ({ user }: UserProps) => {
-        const isSelfUser = user.id === UserStore.getCurrentUser().id;
-        return (
-            <div className={isSelfUser ? "vc-uvs-popout-margin-self" : ""}>
-                <VoiceChannelField user={user} />
-            </div>
-        );
-    },
-
     patches: [
-        // @TODO Maybe patch UserVoiceShow in simplified profile popout
-        // @TODO Patch new profile modal
+        // User Popout, Full Size Profile, Direct Messages Side Profile
+        {
+            find: ".Messages.USER_PROFILE_LOAD_ERROR",
+            replacement: {
+                match: /(\.fetchError.+?\?)null/,
+                replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId})`
+            },
+            predicate: () => settings.store.showInUserProfileModal
+        },
+        // To use without the MemberList decorator API
+        /* // Guild Members List
+        {
+            find: ".lostPermission)",
+            replacement: {
+                match: /\.lostPermission\).+?(?=avatar:)/,
+                replace: "$&children:[$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})],"
+            },
+            predicate: () => settings.store.showVoiceChannelIndicator
+        },
+        // Direct Messages List
+        {
+            find: "PrivateChannel.renderAvatar",
+            replacement: {
+                match: /\.Messages\.CLOSE_DM.+?}\)(?=])/,
+                replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
+            },
+            predicate: () => settings.store.showVoiceChannelIndicator
+        }, */
+        // Friends List
+        {
+            find: ".avatar,animate:",
+            replacement: {
+                match: /\.subtext,children:.+?}\)\]}\)(?=])/,
+                replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
+            },
+            predicate: () => settings.store.showInVoiceMemberList
+        }
     ],
+
+    start() {
+        if (settings.store.showInVoiceMemberList) {
+            addDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
+        }
+    },
+
+    stop() {
+        removeDecorator("UserVoiceShow");
+    },
+
+    VoiceChannelIndicator
 });

src/plugins/userVoiceShow/style.css

@@ -0,0 +1,37 @@
+.vc-uvs-speaker {
+    color: var(--interactive-normal);
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vc-uvs-clickable {
+    cursor: pointer;
+}
+
+.vc-uvs-clickable:hover {
+    color: var(--interactive-hover);
+}
+
+.vc-uvs-tooltip-container {
+    max-width: 200px;
+}
+
+.vc-uvs-guild-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.vc-uvs-guild-icon {
+    border-radius: 100%;
+    align-self: center;
+}
+
+.vc-uvs-vc-members {
+    display: flex;
+    margin: 8px 0;
+    flex-direction: row;
+    gap: 6px;
+}

src/webpack/common/types/menu.d.ts

@@ -72,6 +72,11 @@ export interface Menu {
         onChange(value: number): void,
         renderValue?(value: number): string,
     }>;
+    MenuSearchControl: RC<{
+        query: string
+        onChange(query: string): void;
+        placeholder?: string;
+    }>;
 }
 
 export interface ContextMenuApi {