feat(memberListActivities): add new plugin

src/plugins/memberListActivities/README.md

@@ -0,0 +1,5 @@
+# MemberListActivities
+
+Shows activity icons in the member list
+
+![Screenshot](screenshot.png)

src/plugins/memberListActivities/components/SpotifyIcon.tsx

@@ -0,0 +1,11 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import type { SVGProps } from "react";
+
+export function SpotifyIcon(props: SVGProps<SVGSVGElement>) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}><path fill="#1ed760" d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128c70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644c-30.053-18.357-67.885-22.515-112.44-12.335a7.981 7.981 0 0 1-9.552-6.007a7.968 7.968 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276c3.76 2.308 4.952 7.215 2.644 10.975m15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289c-34.406-21.148-86.853-27.273-127.548-14.92c-5.278 1.594-10.852-1.38-12.454-6.649c-1.59-5.278 1.386-10.842 6.655-12.446c46.485-14.106 104.275-7.273 143.787 17.007c4.692 2.89 6.175 9.034 3.286 13.72zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978c-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405c-3.362 5.69-10.73 7.565-16.4 4.187z"></path></svg>);
+}

src/plugins/memberListActivities/index.tsx

@@ -0,0 +1,123 @@
+/*
+ * 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 "./styles.css";
+
+import { definePluginSettings } from "@api/Settings";
+import { classNameFactory } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+import { SpotifyIcon } from "./components/SpotifyIcon";
+
+export const settings = definePluginSettings({
+});
+
+interface Activity {
+    created_at: number;
+    id: string;
+    name: string;
+    state: string;
+    type: number;
+    flags?: number;
+    sync_id?: string;
+    details?: string;
+    application_id?: string;
+    assets?: {
+        large_text?: string;
+        large_image?: string;
+        small_text?: string;
+        small_image?: string;
+    };
+}
+
+const cl = classNameFactory("vc-mla-");
+
+export default definePlugin({
+    name: "MemberListActivities",
+    description: "Shows activity icons in the member list",
+    authors: [Devs.D3SOX],
+    tags: ["activity"],
+    settings,
+
+    patchActivityList: (activities: Activity[]) => {
+        const icons: JSX.Element[] = [];
+
+        if (activities.some(activity => activity.name === "Spotify")) {
+            icons.push(<SpotifyIcon />);
+        }
+
+        const applications = activities.filter(activity => activity.application_id);
+        applications.forEach(activity => {
+            const { assets } = activity;
+            if (assets) {
+
+                const addImage = (image: string, alt: string) => {
+                    if (image.startsWith("mp:external/")) {
+                        const externalLink = image.replace(/mp:external\/.{0,43}\//, "").replaceAll("https/", "https://");
+                        console.log("patch activity list external link", image, externalLink);
+                        if (externalLink) {
+                            icons.push(<img src={externalLink} alt={alt}/>);
+                        }
+                    } else {
+                        const src = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${image}.png`;
+                        icons.push(<img src={src} alt={alt}/>);
+                    }
+                };
+
+                // Prefer small image
+                const smallImage = assets.small_image;
+                if (smallImage) {
+                    addImage(smallImage, assets.small_text ?? "Small Text");
+                } else {
+                    const largeImage = assets.large_image;
+                    if (largeImage) {
+                        addImage(largeImage, assets.large_text ?? "Large Text");
+                    }
+                }
+
+            }
+        });
+
+        if (icons.length) {
+            return <ErrorBoundary noop>
+                <div className={cl("row")}>
+                    {icons.map((icon, i) => (
+                        <div key={i} className={cl("icon")}>
+                            {icon}
+                        </div>
+                    ))}
+                </div>
+            </ErrorBoundary>;
+        }
+
+        return false;
+    },
+
+    patches: [
+        {
+            // Patch activity icons
+            find: "default.getHangStatusActivity():null!",
+            replacement: {
+                match: /(\i).some\((\i).default\)\?/,
+                replace: "$&$self.patchActivityList(l,d,_)?$self.patchActivityList(l,d,_):"
+            }
+        },
+    ],
+});

src/plugins/memberListActivities/styles.css

@@ -0,0 +1,20 @@
+.vc-mla-row {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin-left: 5px;
+    text-align: center;
+    gap: 3px;
+}
+
+.vc-mla-icon {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+}
+
+.vc-mla-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}