feat(audioPlaybackSpeed): add new plugin

src/plugins/audioPlaybackSpeed/README.md

@@ -0,0 +1,5 @@
+# AudioPlaybackSpeed
+
+Adds an icon to change the playback speed of voice message and audio embeds
+
+![New icon with menu to change the playback speed](https://github.com/Vendicated/Vencord/assets/24937357/21792b09-8d6a-45be-a6e8-916cdd67a477)

src/plugins/audioPlaybackSpeed/components/SpeedIcon.tsx

@@ -0,0 +1,21 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+function SpeedIcon() {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="#e8eaed"
+            viewBox="0 -960 960 960"
+        >
+            <path d="M418-340q24 24 62 23.5t56-27.5l224-336-336 224q-27 18-28.5 55t22.5 61zm62-460q59 0 113.5 16.5T696-734l-76 48q-33-17-68.5-25.5T480-720q-133 0-226.5 93.5T160-400q0 42 11.5 83t32.5 77h552q23-38 33.5-79t10.5-85q0-36-8.5-70T766-540l48-76q30 47 47.5 100T880-406q1 57-13 109t-41 99q-11 18-30 28t-40 10H204q-21 0-40-10t-30-28q-26-45-40-95.5T80-400q0-83 31.5-155.5t86-127Q252-737 325-768.5T480-800zm7 313z"></path>
+        </svg>
+    );
+}
+
+export default SpeedIcon;

src/plugins/audioPlaybackSpeed/index.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 "./styles.css";
+
+import { classNameFactory } from "@api/Styles";
+import { makeRange } from "@components/PluginSettings/components";
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { ContextMenuApi, FluxDispatcher, Menu, React } from "@webpack/common";
+import { RefObject } from "react";
+
+import SpeedIcon from "./components/SpeedIcon";
+
+const cl = classNameFactory("vc-audio-playback-speed-");
+
+const speeds = makeRange(0.25, 3.5, 0.25);
+
+export default definePlugin({
+    name: "AudioPlaybackSpeed",
+    description: "Adds an icon to change the playback speed of voice message and audio embeds",
+    authors: [Devs.D3SOX],
+
+    playbackSpeedComponent(audioRef: RefObject<HTMLAudioElement>) {
+        const changeSpeed = (speed: number) => {
+            const audio = audioRef.current;
+            if (audio) {
+                audio.playbackRate = speed;
+            }
+        };
+
+        return (
+            <button className={cl("icon")} onClick={e => {
+                ContextMenuApi.openContextMenu(e, () =>
+                    <Menu.Menu
+                        navId="playback-speed"
+                        onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
+                        aria-label="Playback speed control"
+                        style={{ zIndex: 2 }}
+                    >
+                        <Menu.MenuGroup
+                            label="Playback speed"
+                        >
+                            {speeds.map(speed => (
+                                <Menu.MenuItem
+                                    key={speed}
+                                    id={"speed-" + speed}
+                                    label={`${speed}x`}
+                                    action={() => changeSpeed(speed)}
+                                />
+                            ))}
+                        </Menu.MenuGroup>
+
+                    </Menu.Menu>
+                );
+            }}>
+                <SpeedIcon />
+            </button>
+        );
+    },
+
+    patches: [
+        // voice message embeds
+        {
+            find: "ComponentActions.VOICE_MESSAGE_PLAYBACK_STARTED",
+            replacement: {
+                match: /useCallback\(\(\)=>\{let \i=(\i).current;.{2300,2800}onVolumeShow:\i,onVolumeHide:\i\}\)/,
+                replace: "$&,$self.playbackSpeedComponent($1)"
+            }
+        },
+        // audio embeds
+        {
+            // need to pass media ref via props to make it easily accessible from inside controls
+            find: "renderControls(){",
+            replacement: {
+                match: /onToggleMuted:this.toggleMuted,/,
+                replace: "$&mediaRef:this.mediaRef,"
+            }
+        },
+        {
+            find: "AUDIO:\"AUDIO\"",
+            replacement: {
+                match: /onVolumeHide:\i,iconClassName:\i.controlIcon,sliderWrapperClassName:\i.volumeSliderWrapper\}\)\}\),/,
+                replace: "$&$self.playbackSpeedComponent(this.props.mediaRef),"
+            }
+        }
+    ]
+});

src/plugins/audioPlaybackSpeed/styles.css

@@ -0,0 +1,5 @@
+.vc-audio-playback-speed-icon {
+    background-color: transparent;
+    height: 100%;
+    z-index: 2;
+}