Rework sound replacement (display file name)

Vendicated · Jan 14, 2025 · 5b6c5c1 · 5b6c5c1
1 parent 7ea2312
commit 5b6c5c1
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 45 deletions.
diff --git a/src/plugins/customSounds/components/SoundOverrideComponent.tsx b/src/plugins/customSounds/components/SoundOverrideComponent.tsx
@@ -60,52 +60,57 @@ 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}
+            <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}
-                    onChange={event => {
-                        event.stopPropagation();
-                        event.preventDefault();
+                    className={cl("file-replace")}
+                >
+                    Replace
+                    <FileInput
+                        ref={fileInputRef}
+                        disabled={!override.enabled}
+                        onChange={event => {
+                            event.stopPropagation();
+                            event.preventDefault();
 
-                        if (!event.currentTarget?.files?.length)
-                            return;
+                            if (!event.currentTarget?.files?.length)
+                                return;
 
-                        const { files } = event.currentTarget;
-                        const file = files[0];
+                            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);
+                            // 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();
                     }}
-                    // 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>
+                    disabled={!(override.enabled && override.url.length !== 0)}
+                    className={cl("file-reset")}
+                >
+                    Reset
+                </Button>
+            </div>
             <Forms.FormTitle>Volume</Forms.FormTitle>
             <Slider
                 markers={makeRange(0, 100, 10)}

diff --git a/src/plugins/customSounds/styles.css b/src/plugins/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 {
-    display: inline;
+.vc-custom-sounds-file-name {
+    flex-grow: 1;
 }
+
+.vc-custom-sounds-file-replace,
+.vc-custom-sounds-file-reset {
+    display: inline;
+}
diff --git a/src/plugins/customSounds/types.ts b/src/plugins/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
     };