mirror of
https://github.com/Vendicated/Vencord.git
synced 2024-09-19 22:20:34 +00:00
Compare commits
25 commits
f2b0ddd06e
...
bd8582a406
Author | SHA1 | Date | |
---|---|---|---|
|
bd8582a406 | ||
|
a015cf96f6 | ||
|
a3db3faba6 | ||
|
96df1bbe1e | ||
|
308b9a1fef | ||
|
777b5dde69 | ||
|
bf71bbc979 | ||
|
c9459e9cf7 | ||
|
a8eea4dc7a | ||
|
b24c50d213 | ||
|
d2efeff84f | ||
|
aec59be3f5 | ||
|
065575718d | ||
|
3fb8e433e9 | ||
|
b4e71fe412 | ||
|
7708172b12 | ||
|
19896ef59e | ||
|
6e6ee4db68 | ||
|
d8524b087c | ||
|
78fd37a4c6 | ||
|
64d519b54d | ||
|
8846d70247 | ||
|
5347356634 | ||
|
28767d97f4 | ||
|
c9b29127c9 |
7 changed files with 213 additions and 29 deletions
5
src/plugins/mediaPlaybackSpeed/README.md
Normal file
5
src/plugins/mediaPlaybackSpeed/README.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
# MediaPlaybackSpeed
|
||||
|
||||
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)
|
19
src/plugins/mediaPlaybackSpeed/components/SpeedIcon.tsx
Normal file
19
src/plugins/mediaPlaybackSpeed/components/SpeedIcon.tsx
Normal file
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2024 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
export default function SpeedIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
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>
|
||||
);
|
||||
}
|
151
src/plugins/mediaPlaybackSpeed/index.tsx
Normal file
151
src/plugins/mediaPlaybackSpeed/index.tsx
Normal file
|
@ -0,0 +1,151 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2024 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
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, { 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 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({
|
||||
name: "MediaPlaybackSpeed",
|
||||
description: "Allows changing the (default) playback speed of media embeds",
|
||||
authors: [Devs.D3SOX],
|
||||
|
||||
settings,
|
||||
|
||||
PlaybackSpeedComponent({ mediaRef }: { mediaRef: MediaRef }) {
|
||||
const changeSpeed = (speed: number) => {
|
||||
const media = mediaRef?.current;
|
||||
if (media) {
|
||||
media.playbackRate = speed;
|
||||
}
|
||||
};
|
||||
|
||||
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 (
|
||||
<Tooltip text="Playback speed">
|
||||
{tooltipProps => (
|
||||
<button
|
||||
{...tooltipProps}
|
||||
className={cl("icon")}
|
||||
onClick={e => {
|
||||
ContextMenuApi.openContextMenu(e, () =>
|
||||
<Menu.Menu
|
||||
navId="vc-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>
|
||||
);
|
||||
},
|
||||
|
||||
renderComponent(mediaRef: MediaRef) {
|
||||
return <ErrorBoundary noop>
|
||||
<this.PlaybackSpeedComponent mediaRef={mediaRef} />
|
||||
</ErrorBoundary>;
|
||||
},
|
||||
|
||||
patches: [
|
||||
// voice message embeds
|
||||
{
|
||||
find: "\"--:--\"",
|
||||
replacement: {
|
||||
match: /onVolumeShow:\i,onVolumeHide:\i\}\)(?<=useCallback\(\(\)=>\{let \i=(\i).current;.+?)/,
|
||||
replace: "$&,$self.renderComponent($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,iconColor:"currentColor",sliderWrapperClassName:\i.volumeSliderWrapper\}\)\}\),/,
|
||||
replace: "$&$self.renderComponent(this.props.mediaRef),"
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
10
src/plugins/mediaPlaybackSpeed/styles.css
Normal file
10
src/plugins/mediaPlaybackSpeed/styles.css
Normal file
|
@ -0,0 +1,10 @@
|
|||
.vc-media-playback-speed-icon {
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
color: var(--interactive-normal);
|
||||
}
|
||||
|
||||
.vc-media-playback-speed-icon:hover {
|
||||
color: var(--interactive-active);
|
||||
}
|
|
@ -8,7 +8,7 @@ import { classNameFactory } from "@api/Styles";
|
|||
import ErrorBoundary from "@components/ErrorBoundary";
|
||||
import { classes } from "@utils/misc";
|
||||
import { findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
|
||||
import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, showToast, Text, Toasts, Tooltip, useCallback, useMemo, UserStore, useStateFromStores } from "@webpack/common";
|
||||
import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, React, showToast, Text, Toasts, Tooltip, useMemo, UserStore, useStateFromStores } from "@webpack/common";
|
||||
import { Channel } from "discord-types/general";
|
||||
|
||||
const cl = classNameFactory("vc-uvs-");
|
||||
|
@ -17,7 +17,7 @@ const { selectVoiceChannel } = findByPropsLazy("selectChannel", "selectVoiceChan
|
|||
const VoiceStateStore = findStoreLazy("VoiceStateStore");
|
||||
const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
|
||||
|
||||
interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
interface IconProps extends React.ComponentPropsWithoutRef<"div"> {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
|
@ -71,23 +71,18 @@ interface VoiceChannelTooltipProps {
|
|||
|
||||
function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
|
||||
const voiceStates = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStatesForChannel(channel.id));
|
||||
|
||||
const users = useMemo(
|
||||
() => Object.values<any>(voiceStates).map(voiceState => UserStore.getUser(voiceState.userId)).filter(user => user != null),
|
||||
[voiceStates]
|
||||
);
|
||||
|
||||
const guild = useMemo(
|
||||
() => channel.getGuildId() == null ? undefined : GuildStore.getGuild(channel.getGuildId()),
|
||||
[channel]
|
||||
);
|
||||
|
||||
const guildIcon = useMemo(() => {
|
||||
return guild?.icon == null ? undefined : IconUtils.getGuildIconURL({
|
||||
id: guild.id,
|
||||
icon: guild.icon,
|
||||
size: 30
|
||||
});
|
||||
}, [guild]);
|
||||
const guild = channel.getGuildId() == null ? undefined : GuildStore.getGuild(channel.getGuildId());
|
||||
const guildIcon = guild?.icon == null ? undefined : IconUtils.getGuildIconURL({
|
||||
id: guild.id,
|
||||
icon: guild.icon,
|
||||
size: 30
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -103,7 +98,7 @@ function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
|
|||
<UserSummaryItem
|
||||
users={users}
|
||||
renderIcon={false}
|
||||
max={7}
|
||||
max={13}
|
||||
size={18}
|
||||
/>
|
||||
</div>
|
||||
|
@ -119,11 +114,14 @@ const clickTimers = {} as Record<string, any>;
|
|||
|
||||
export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId }: VoiceChannelIndicatorProps) => {
|
||||
const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
|
||||
const channel = useMemo(() => channelId == null ? undefined : ChannelStore.getChannel(channelId), [channelId]);
|
||||
|
||||
const onClick = useCallback((e: React.MouseEvent) => {
|
||||
const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId);
|
||||
if (channel == null) return null;
|
||||
|
||||
function onClick(e: React.MouseEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (channel == null || channelId == null) return;
|
||||
|
||||
if (!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel)) {
|
||||
|
@ -147,18 +145,15 @@ export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId }: VoiceChanne
|
|||
delete clickTimers[channelId];
|
||||
}, 250);
|
||||
}
|
||||
}, [channelId]);
|
||||
}
|
||||
|
||||
const isLocked = useMemo(() => {
|
||||
return !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) || !PermissionStore.can(PermissionsBits.CONNECT, channel);
|
||||
}, [channelId]);
|
||||
|
||||
if (channel == null) return null;
|
||||
const isLocked = !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) || !PermissionStore.can(PermissionsBits.CONNECT, channel);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
text={<VoiceChannelTooltip channel={channel} />}
|
||||
tooltipClassName={cl("tooltip-container")}
|
||||
tooltipContentClassName={cl("tooltip-content")}
|
||||
>
|
||||
{props =>
|
||||
isLocked ?
|
||||
|
|
|
@ -32,7 +32,7 @@ const settings = definePluginSettings({
|
|||
default: true,
|
||||
restartNeeded: true
|
||||
},
|
||||
showInVoiceMemberList: {
|
||||
showInMemberList: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Show a user's Voice Channel indicator in the member and DMs list",
|
||||
default: true,
|
||||
|
@ -82,12 +82,12 @@ export default definePlugin({
|
|||
match: /\.subtext,children:.+?}\)\]}\)(?=])/,
|
||||
replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
|
||||
},
|
||||
predicate: () => settings.store.showInVoiceMemberList
|
||||
predicate: () => settings.store.showInMemberList
|
||||
}
|
||||
],
|
||||
|
||||
start() {
|
||||
if (settings.store.showInVoiceMemberList) {
|
||||
if (settings.store.showInMemberList) {
|
||||
addDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
|
||||
}
|
||||
},
|
||||
|
|
|
@ -15,7 +15,13 @@
|
|||
}
|
||||
|
||||
.vc-uvs-tooltip-container {
|
||||
max-width: 200px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.vc-uvs-tooltip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.vc-uvs-guild-name {
|
||||
|
@ -31,7 +37,5 @@
|
|||
|
||||
.vc-uvs-vc-members {
|
||||
display: flex;
|
||||
margin: 8px 0;
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue