diff --git a/src/plugins/mediaPlaybackSpeed/README.md b/src/plugins/mediaPlaybackSpeed/README.md
index 066a24061..5e8387544 100644
--- a/src/plugins/mediaPlaybackSpeed/README.md
+++ b/src/plugins/mediaPlaybackSpeed/README.md
@@ -1,5 +1,5 @@
# MediaPlaybackSpeed
-Adds an icon to change the playback speed of media embeds
+Allows changing the (default) 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)
diff --git a/src/plugins/mediaPlaybackSpeed/index.tsx b/src/plugins/mediaPlaybackSpeed/index.tsx
index 99b8a3fa0..f1daf94da 100644
--- a/src/plugins/mediaPlaybackSpeed/index.tsx
+++ b/src/plugins/mediaPlaybackSpeed/index.tsx
@@ -6,26 +6,63 @@
import "./styles.css";
+import { definePluginSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
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 definePlugin, { OptionType } from "@utils/types";
+import { ContextMenuApi, FluxDispatcher, Heading, Menu, React, Tooltip, useEffect } 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);
+const min = 0.25;
+const max = 3.5;
+const speeds = makeRange(min, max, 0.25);
+
+const settings = definePluginSettings({
+ test: {
+ type: OptionType.COMPONENT,
+ description: "",
+ component() {
+ return
+ Default playback speeds
+ ;
+ }
+ },
+ defaultVoiceMessageSpeed: {
+ type: OptionType.SLIDER,
+ default: 1,
+ description: "Voice messages",
+ markers: speeds,
+ },
+ defaultVideoSpeed: {
+ type: OptionType.SLIDER,
+ default: 1,
+ description: "Videos",
+ markers: speeds,
+ },
+ defaultAudioSpeed: {
+ type: OptionType.SLIDER,
+ default: 1,
+ description: "Audios",
+ markers: speeds,
+ },
+});
+
+type MediaRef = RefObject | undefined;
export default definePlugin({
name: "MediaPlaybackSpeed",
- description: "Adds an icon to change the playback speed of media embeds",
+ description: "Allows changing the (default) playback speed of media embeds",
authors: [Devs.D3SOX],
- playbackSpeedComponent: (mediaRef: RefObject | undefined) => {
+ settings,
+
+ PlaybackSpeedComponent({ mediaRef }: { mediaRef: MediaRef }) {
const changeSpeed = (speed: number) => {
const media = mediaRef?.current;
if (media) {
@@ -33,50 +70,65 @@ export default definePlugin({
}
};
+ useEffect(() => {
+ if (!mediaRef?.current) return;
+ const media = mediaRef.current;
+ if (media.tagName === "AUDIO") {
+ const isVoiceMessage = media.className.includes("audioElement_");
+ changeSpeed(isVoiceMessage ? settings.store.defaultVoiceMessageSpeed : settings.store.defaultAudioSpeed);
+ } else if (media.tagName === "VIDEO") {
+ changeSpeed(settings.store.defaultVideoSpeed);
+ }
+ }, [mediaRef]);
+
return (
-
-
- {tooltipProps => (
-
+ {speeds.map(speed => (
+ changeSpeed(speed)}
+ />
+ ))}
+
+
+ );
+ }}>
+
+
+ )}
+
);
},
+ renderComponent(mediaRef: MediaRef) {
+ return
+
+ ;
+ },
+
patches: [
// voice message embeds
{
find: "\"--:--\"",
replacement: {
match: /onVolumeShow:\i,onVolumeHide:\i\}\)(?<=useCallback\(\(\)=>\{let \i=(\i).current;.+?)/,
- replace: "$&,$self.playbackSpeedComponent($1)"
+ replace: "$&,$self.renderComponent($1)"
}
},
// audio & video embeds
@@ -92,7 +144,7 @@ export default definePlugin({
find: "AUDIO:\"AUDIO\"",
replacement: {
match: /onVolumeHide:\i,iconClassName:\i.controlIcon,sliderWrapperClassName:\i.volumeSliderWrapper\}\)\}\),/,
- replace: "$&$self.playbackSpeedComponent(this.props.mediaRef),"
+ replace: "$&$self.renderComponent(this.props.mediaRef),"
}
}
]