mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-01-18 05:13:29 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Update CustomSounds
Some checks are pending
Sync to Codeberg / Sync Codeberg and Github (push) Waiting to run
Details
Test / Test (push) Waiting to run
Details

Browse source
This commit is contained in:
thororen1234 2025-01-17 09:01:28 -05:00
parent 2432364123
commit 806e9330cd
3 changed files with 80 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/equicordplugins/customSounds/components/SoundOverrideComponent.tsx
View file

@ -5,21 +5,21 @@
*/
import { classNameFactory } from "@api/Styles";
import { makeRange } from "@components/PluginSettings/components";
import { Margins } from "@utils/margins";
import { classes } from "@utils/misc";
import { useForceUpdater } from "@utils/react";
import { findByCodeLazy, findLazy } from "@webpack";
import { Button, Card, Forms, Slider, Switch, useRef } from "@webpack/common";
import { Button, Card, Forms, Slider, Switch, Tooltip, useRef } from "@webpack/common";
import { ComponentType, Ref, SyntheticEvent } from "react";
import { SoundOverride, SoundPlayer, SoundType } from "../types";
type FileInput = ComponentType<{
ref: Ref<HTMLInputElement>;
onChange: (e: SyntheticEvent<HTMLInputElement>) => void;
onChange: (event: SyntheticEvent<HTMLInputElement>) => void;
multiple?: boolean;
filters?: { name?: string; extensions: string[]; }[];
disabled?: boolean;
}>;
const playSound: (id: string) => SoundPlayer = findByCodeLazy(".playWithListener().then");
@ -43,8 +43,72 @@ export function SoundOverrideComponent({ type, override, onChange }: { type: Sou
className={Margins.bottom16}
hideBorder={true}
>
{type.name} <span className={cl("id")}>({type.id})</span>
<Tooltip text={type.id}>
{tooltipProps => <span {...tooltipProps}>{type.name}</span>}
</Tooltip>
</Switch>
<Forms.FormTitle>Sound File</Forms.FormTitle>
<div className={classes(cl("file"), Margins.bottom16)} >
<Forms.FormText className={cl("file-name")}>{override.url.length === 0 ? "Discord Default" : (override.fileName || "Custom Sound")}</Forms.FormText>
<Button
color={Button.Colors.PRIMARY}
size={Button.Sizes.SMALL}
disabled={!override.enabled}
className={cl("file-replace")}
>
Replace
<FileInput
ref={fileInputRef}
disabled={!override.enabled}
onChange={event => {
event.stopPropagation();
event.preventDefault();
if (!event.currentTarget?.files?.length)
return;
const { files } = event.currentTarget;
const file = files[0];
// Set override URL to a data URI
const reader = new FileReader;
reader.onload = () => {
override.url = reader.result as string;
override.fileName = file.name;
onChange();
update();
};
reader.readAsDataURL(file);
}}
// Sorry .caf lovers, https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats
filters={[{ extensions: ["mp3", "wav", "ogg", "webm", "flac"] }]}
/>
</Button>
<Button
color={Button.Colors.RED}
size={Button.Sizes.SMALL}
onClick={() => {
override.url = "";
onChange();
update();
}}
disabled={!(override.enabled && override.url.length !== 0)}
className={cl("file-reset")}
>
Reset
</Button>
</div>
<Forms.FormTitle>Volume</Forms.FormTitle>
<Slider
initialValue={override.volume}
onValueChange={value => {
override.volume = value;
onChange();
update();
}}
className={Margins.bottom16}
disabled={!override.enabled}
/>
<Button
color={Button.Colors.PRIMARY}
className={Margins.bottom16}
@ -57,63 +121,6 @@ export function SoundOverrideComponent({ type, override, onChange }: { type: Sou
>
Preview
</Button>
<Forms.FormTitle>Replacement Sound</Forms.FormTitle>
<Button
color={Button.Colors.PRIMARY}
disabled={!override.enabled}
className={classes(Margins.right8, Margins.bottom16, cl("upload"))}
>
Upload
<FileInput
ref={fileInputRef}
onChange={event => {
event.stopPropagation();
event.preventDefault();
if (!event.currentTarget?.files?.length)
return;
const { files } = event.currentTarget;
const file = files[0];
// Set override URL to a data URI
const reader = new FileReader;
reader.onload = () => {
override.url = reader.result as string;
onChange();
update();
};
reader.readAsDataURL(file);
}}
// Sorry .caf lovers, https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats
filters={[{ extensions: ["mp3", "wav", "ogg", "webm", "flac"] }]}
/>
</Button>
<Button
color={Button.Colors.RED}
onClick={() => {
override.url = "";
onChange();
update();
}}
disabled={!(override.enabled && override.url.length !== 0)}
style={{ display: "inline" }}
className={classes(Margins.right8, Margins.bottom16)}
>
Clear
</Button>
<Forms.FormTitle>Volume</Forms.FormTitle>
<Slider
markers={makeRange(0, 100, 10)}
initialValue={override.volume}
onValueChange={value => {
override.volume = value;
onChange();
update();
}}
className={Margins.bottom16}
disabled={!override.enabled}
/>
</Card>
);
}

13
src/equicordplugins/customSounds/styles.css
View file

@ -2,10 +2,17 @@
padding: 1em 1em 0;
}
.vc-custom-sounds-id {
color: var(--text-muted);
.vc-custom-sounds-file {
display: flex;
align-items: center;
gap: 0.5em;
}
.vc-custom-sounds-upload {
.vc-custom-sounds-file-name {
flex-grow: 1;
}
.vc-custom-sounds-file-replace,
.vc-custom-sounds-file-reset {
display: inline;
}

2
src/equicordplugins/customSounds/types.ts
View file

@ -11,6 +11,7 @@ export interface SoundType {
export interface SoundOverride {
enabled: boolean;
fileName: string;
url: string;
volume: number;
}
@ -51,6 +52,7 @@ export const soundTypes: readonly SoundType[] = [
export function makeEmptyOverride(): SoundOverride {
return {
enabled: false,
fileName: "",
url: "",
volume: 100
};