Update CustomSounds

src/equicordplugins/customSounds/components/SoundOverrideComponent.tsx

@@ -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,29 +43,23 @@ 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}
-                className={Margins.bottom16}
-                onClick={() => {
-                    if (sound.current != null)
-                        sound.current.stop();
-                    sound.current = playSound(type.id);
-                }}
+                    size={Button.Sizes.SMALL}
                     disabled={!override.enabled}
+                    className={cl("file-replace")}
                 >
-                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
+                    Replace
                     <FileInput
                         ref={fileInputRef}
+                        disabled={!override.enabled}
                         onChange={event => {
                             event.stopPropagation();
                             event.preventDefault();
@@ -80,6 +74,7 @@ export function SoundOverrideComponent({ type, override, onChange }: { type: Sou
                             const reader = new FileReader;
                             reader.onload = () => {
                                 override.url = reader.result as string;
+                                override.fileName = file.name;
                                 onChange();
                                 update();
                             };
@@ -91,20 +86,20 @@ export function SoundOverrideComponent({ type, override, onChange }: { type: Sou
                 </Button>
                 <Button
                     color={Button.Colors.RED}
+                    size={Button.Sizes.SMALL}
                     onClick={() => {
                         override.url = "";
                         onChange();
                         update();
                     }}
                     disabled={!(override.enabled && override.url.length !== 0)}
-                style={{ display: "inline" }}
-                className={classes(Margins.right8, Margins.bottom16)}
+                    className={cl("file-reset")}
                 >
-                Clear
+                    Reset
                 </Button>
+            </div>
             <Forms.FormTitle>Volume</Forms.FormTitle>
             <Slider
-                markers={makeRange(0, 100, 10)}
                 initialValue={override.volume}
                 onValueChange={value => {
                     override.volume = value;
@@ -114,6 +109,18 @@ export function SoundOverrideComponent({ type, override, onChange }: { type: Sou
                 className={Margins.bottom16}
                 disabled={!override.enabled}
             />
+            <Button
+                color={Button.Colors.PRIMARY}
+                className={Margins.bottom16}
+                onClick={() => {
+                    if (sound.current != null)
+                        sound.current.stop();
+                    sound.current = playSound(type.id);
+                }}
+                disabled={!override.enabled}
+            >
+                Preview
+            </Button>
         </Card>
     );
 }

src/equicordplugins/customSounds/styles.css

@@ -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;
 }

src/equicordplugins/customSounds/types.ts

@@ -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
     };