mirror of
https://github.com/Vendicated/Vencord.git
synced 2025-01-10 01:46:23 +00:00
feat(mediaPlaybackSpeed): add settings to set default speeds
This commit is contained in:
D3SOX
parent
308b9a1fef
commit
96df1bbe1e
2 changed files with 92 additions and 40 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
# MediaPlaybackSpeed
|
# MediaPlaybackSpeed
|
||||||
|
|
||||||
Adds an icon to change the playback speed of media embeds
|
Allows changing the (default) playback speed of media embeds
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,26 +6,63 @@
|
||||||
|
|
||||||
import "./styles.css";
|
import "./styles.css";
|
||||||
|
|
||||||
|
import { definePluginSettings } from "@api/Settings";
|
||||||
import { classNameFactory } from "@api/Styles";
|
import { classNameFactory } from "@api/Styles";
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { makeRange } from "@components/PluginSettings/components";
|
import { makeRange } from "@components/PluginSettings/components";
|
||||||
import { Devs } from "@utils/constants";
|
import { Devs } from "@utils/constants";
|
||||||
import definePlugin from "@utils/types";
|
import definePlugin, { OptionType } from "@utils/types";
|
||||||
import { ContextMenuApi, FluxDispatcher, Menu, React, Tooltip } from "@webpack/common";
|
import { ContextMenuApi, FluxDispatcher, Heading, Menu, React, Tooltip, useEffect } from "@webpack/common";
|
||||||
import { RefObject } from "react";
|
import { RefObject } from "react";
|
||||||
|
|
||||||
import SpeedIcon from "./components/SpeedIcon";
|
import SpeedIcon from "./components/SpeedIcon";
|
||||||
|
|
||||||
const cl = classNameFactory("vc-media-playback-speed-");
|
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 <Heading variant="heading-lg/bold" selectable={false}>
|
||||||
|
Default playback speeds
|
||||||
|
</Heading>;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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<HTMLMediaElement> | undefined;
|
||||||
|
|
||||||
export default definePlugin({
|
export default definePlugin({
|
||||||
name: "MediaPlaybackSpeed",
|
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],
|
authors: [Devs.D3SOX],
|
||||||
|
|
||||||
playbackSpeedComponent: (mediaRef: RefObject<HTMLMediaElement> | undefined) => {
|
settings,
|
||||||
|
|
||||||
|
PlaybackSpeedComponent({ mediaRef }: { mediaRef: MediaRef }) {
|
||||||
const changeSpeed = (speed: number) => {
|
const changeSpeed = (speed: number) => {
|
||||||
const media = mediaRef?.current;
|
const media = mediaRef?.current;
|
||||||
if (media) {
|
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 (
|
return (
|
||||||
<ErrorBoundary noop>
|
<Tooltip text="Playback speed">
|
||||||
<Tooltip text="Playback speed">
|
{tooltipProps => (
|
||||||
{tooltipProps => (
|
<button
|
||||||
<button
|
{...tooltipProps}
|
||||||
{...tooltipProps}
|
className={cl("icon")}
|
||||||
className={cl("icon")}
|
onClick={e => {
|
||||||
onClick={e => {
|
ContextMenuApi.openContextMenu(e, () =>
|
||||||
ContextMenuApi.openContextMenu(e, () =>
|
<Menu.Menu
|
||||||
<Menu.Menu
|
navId="vc-playback-speed"
|
||||||
navId="vc-playback-speed"
|
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
|
||||||
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
|
aria-label="Playback speed control"
|
||||||
aria-label="Playback speed control"
|
>
|
||||||
|
<Menu.MenuGroup
|
||||||
|
label="Playback speed"
|
||||||
>
|
>
|
||||||
<Menu.MenuGroup
|
{speeds.map(speed => (
|
||||||
label="Playback speed"
|
<Menu.MenuItem
|
||||||
>
|
key={speed}
|
||||||
{speeds.map(speed => (
|
id={"speed-" + speed}
|
||||||
<Menu.MenuItem
|
label={`${speed}x`}
|
||||||
key={speed}
|
action={() => changeSpeed(speed)}
|
||||||
id={"speed-" + speed}
|
/>
|
||||||
label={`${speed}x`}
|
))}
|
||||||
action={() => changeSpeed(speed)}
|
</Menu.MenuGroup>
|
||||||
/>
|
</Menu.Menu>
|
||||||
))}
|
);
|
||||||
</Menu.MenuGroup>
|
}}>
|
||||||
</Menu.Menu>
|
<SpeedIcon/>
|
||||||
);
|
</button>
|
||||||
}}>
|
)}
|
||||||
<SpeedIcon/>
|
</Tooltip>
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</Tooltip>
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
renderComponent(mediaRef: MediaRef) {
|
||||||
|
return <ErrorBoundary noop>
|
||||||
|
<this.PlaybackSpeedComponent mediaRef={mediaRef} />
|
||||||
|
</ErrorBoundary>;
|
||||||
|
},
|
||||||
|
|
||||||
patches: [
|
patches: [
|
||||||
// voice message embeds
|
// voice message embeds
|
||||||
{
|
{
|
||||||
find: "\"--:--\"",
|
find: "\"--:--\"",
|
||||||
replacement: {
|
replacement: {
|
||||||
match: /onVolumeShow:\i,onVolumeHide:\i\}\)(?<=useCallback\(\(\)=>\{let \i=(\i).current;.+?)/,
|
match: /onVolumeShow:\i,onVolumeHide:\i\}\)(?<=useCallback\(\(\)=>\{let \i=(\i).current;.+?)/,
|
||||||
replace: "$&,$self.playbackSpeedComponent($1)"
|
replace: "$&,$self.renderComponent($1)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// audio & video embeds
|
// audio & video embeds
|
||||||
|
|
@ -92,7 +144,7 @@ export default definePlugin({
|
||||||
find: "AUDIO:\"AUDIO\"",
|
find: "AUDIO:\"AUDIO\"",
|
||||||
replacement: {
|
replacement: {
|
||||||
match: /onVolumeHide:\i,iconClassName:\i.controlIcon,sliderWrapperClassName:\i.volumeSliderWrapper\}\)\}\),/,
|
match: /onVolumeHide:\i,iconClassName:\i.controlIcon,sliderWrapperClassName:\i.volumeSliderWrapper\}\)\}\),/,
|
||||||
replace: "$&$self.playbackSpeedComponent(this.props.mediaRef),"
|
replace: "$&$self.renderComponent(this.props.mediaRef),"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue