Rename AudioPlaybackSpeed to MediaPlaybackSpeed, add Tooltip

README.md

@@ -8,9 +8,6 @@
 These are all my Vencord plugins that are not yet in the [official Vencord repository](https://vencord.dev/plugins#d3sox). Some of them have [pending PRs](https://github.com/Vendicated/Vencord/pulls/d3sox).
 See the plugin folders for screenshots
 
-⏩ [**AudioPlaybackSpeed**](./audioPlaybackSpeed) 
-Adds an icon to change the playback speed of voice message and audio embeds
-
 🎡 [**BetterActivities**](./betterActivities) 
 Shows activity icons in the member list and allows showing all activities
 
@@ -23,6 +20,9 @@ Adds a follow option in the user context menu to always be in the same VC as the
 😒 [**IgnoreTerms**](./ignoreTerms) 
 Ignore Discord's new terms of service
 
+⏩ [**MediaPlaybackSpeed**](./mediaPlaybackSpeed) 
+Adds an icon to change the playback speed of media embeds
+
 🔔 [**NotifyUserChanges**](./notifyUserChanges) 
 Adds a notify option in the user context menu to get notified when a user changes voice channels or online status
 

index.ts

@@ -14,7 +14,7 @@ export const Native = getNative();
 import Plugins from "~plugins";
 
 const PLUGINS = [
- require("./audioPlaybackSpeed").default,
+ require("./mediaPlaybackSpeed").default,
  require("./betterActivities").default,
  require("./blockKrisp").default,
  require("./d3soxUpdater").default,

audioPlaybackSpeed/README.md → mediaPlaybackSpeed/README.md

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

mediaPlaybackSpeed/index.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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, Tooltip } from "@webpack/common";
+import { RefObject } from "react";
+
+import SpeedIcon from "./components/SpeedIcon";
+
+const cl = classNameFactory("vc-media-playback-speed-");
+
+const speeds = makeRange(0.25, 3.5, 0.25);
+
+export default definePlugin({
+ name: "MediaPlaybackSpeed",
+ description: "Adds an icon to change the playback speed of media embeds",
+ authors: [Devs.D3SOX],
+
+ playbackSpeedComponent(mediaRef: RefObject<HTMLMediaElement>) {
+ const changeSpeed = (speed: number) => {
+ const media = mediaRef.current;
+ if (media) {
+ media.playbackRate = speed;
+ }
+ };
+
+ return (
+ <Tooltip text="Playback speed">
+ {({ onMouseEnter, onMouseLeave }) => (
+ <button
+ className={cl("icon")}
+ onMouseEnter={onMouseEnter}
+ onMouseLeave={onMouseLeave}
+ onClick={e => {
+ ContextMenuApi.openContextMenu(e, () =>
+ <Menu.Menu
+ navId="playback-speed"
+ onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
+ aria-label="Playback speed control"
+ >
+ <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>
+ )}
+ </Tooltip>
+ );
+ },
+
+ patches: [
+ // voice message embeds
+ {
+ find: "ComponentActions.VOICE_MESSAGE_PLAYBACK_STARTED",
+ replacement: {
+ match: /useCallback\(\(\)=>\{let \i=(\i).current;.{2300,3000}onVolumeShow:\i,onVolumeHide:\i\}\)/,
+ replace: "$&,$self.playbackSpeedComponent($1)"
+ }
+ },
+ // audio & video 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),"
+ }
+ }
+ ]
+});

audioPlaybackSpeed/styles.css → mediaPlaybackSpeed/styles.css

@@ -1,10 +1,10 @@
-.vc-audio-playback-speed-icon {
+.vc-media-playback-speed-icon {
  background-color: transparent;
  height: 100%;
  z-index: 2;
  color: var(--interactive-normal);
 }
 
-.vc-audio-playback-speed-icon:hover {
+.vc-media-playback-speed-icon:hover {
  color: var(--interactive-active);
 }