CustomSounds: Fix CSS
This commit is contained in:
thororen1234
parent
18fd4fb4ef
commit
5570c85974
3 changed files with 79 additions and 68 deletions
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
|
||||
import { AudioPlayerInterface, playAudio } from "@api/AudioPlayer";
|
||||
import { Button } from "@components/Button";
|
||||
import { Card } from "@components/Card";
|
||||
import { FormSwitch } from "@components/FormSwitch";
|
||||
import { Heading } from "@components/Heading";
|
||||
|
|
@ -13,7 +14,7 @@ import { Margins } from "@utils/margins";
|
|||
import { useForceUpdater } from "@utils/react";
|
||||
import { makeRange } from "@utils/types";
|
||||
import { findLazy } from "@webpack";
|
||||
import { Button, React, Select, showToast, Slider } from "@webpack/common";
|
||||
import { React, Select, showToast, Slider } from "@webpack/common";
|
||||
import { ComponentType, Ref, SyntheticEvent } from "react";
|
||||
|
||||
import { deleteAudio, getAllAudio, saveAudio, StoredAudioFile } from "./audioStore";
|
||||
|
|
@ -177,100 +178,103 @@ export function SoundOverrideComponent({ type, override, onChange }: {
|
|||
|
||||
{override.enabled && (
|
||||
<>
|
||||
<div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
|
||||
<div className={cl("override-controls")}>
|
||||
<Button
|
||||
color={Button.Colors.GREEN}
|
||||
variant="positive"
|
||||
onClick={previewSound}
|
||||
>
|
||||
Preview
|
||||
</Button>
|
||||
<Button
|
||||
color={Button.Colors.RED}
|
||||
variant="dangerPrimary"
|
||||
onClick={() => sound.current?.stop()}
|
||||
>
|
||||
Stop
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Heading>Volume</Heading>
|
||||
<Slider
|
||||
markers={makeRange(0, 100, 10)}
|
||||
initialValue={override.volume}
|
||||
onValueChange={val => {
|
||||
sound.current && (sound.current.volume = val);
|
||||
override.volume = val;
|
||||
saveAndNotify();
|
||||
}}
|
||||
className={Margins.bottom16}
|
||||
disabled={!override.enabled}
|
||||
/>
|
||||
<div className={Margins.bottom16}>
|
||||
<Heading>Volume</Heading>
|
||||
<Slider
|
||||
markers={makeRange(0, 100, 10)}
|
||||
initialValue={override.volume}
|
||||
onValueChange={val => {
|
||||
sound.current && (sound.current.volume = val);
|
||||
override.volume = val;
|
||||
saveAndNotify();
|
||||
}}
|
||||
disabled={!override.enabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Heading>Sound Source</Heading>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "default", label: "Default" },
|
||||
...(type.seasonal?.map(id => ({ value: id, label: capitalizeWords(id) })) ?? []),
|
||||
{ value: "custom", label: "Custom" }
|
||||
]}
|
||||
isSelected={v => v === override.selectedSound}
|
||||
select={async v => {
|
||||
override.selectedSound = v;
|
||||
<div className={Margins.bottom16}>
|
||||
<Heading>Sound Source</Heading>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "default", label: "Default" },
|
||||
...(type.seasonal?.map(id => ({ value: id, label: capitalizeWords(id) })) ?? []),
|
||||
{ value: "custom", label: "Custom" }
|
||||
]}
|
||||
isSelected={v => v === override.selectedSound}
|
||||
select={async v => {
|
||||
override.selectedSound = v;
|
||||
|
||||
if (v === "custom" && override.selectedFileId) {
|
||||
try {
|
||||
await ensureDataURICached(override.selectedFileId);
|
||||
} catch (error) {
|
||||
console.error(`[CustomSounds] Failed to cache data URI for ${type.id}:`, error);
|
||||
showToast("Error loading custom sound file");
|
||||
if (v === "custom" && override.selectedFileId) {
|
||||
try {
|
||||
await ensureDataURICached(override.selectedFileId);
|
||||
} catch (error) {
|
||||
console.error(`[CustomSounds] Failed to cache data URI for ${type.id}:`, error);
|
||||
showToast("Error loading custom sound file");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
await saveAndNotify();
|
||||
}}
|
||||
serialize={opt => opt.value}
|
||||
className={Margins.bottom16}
|
||||
/>
|
||||
await saveAndNotify();
|
||||
}}
|
||||
serialize={opt => opt.value}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{override.selectedSound === "custom" && (
|
||||
<>
|
||||
<Heading>Custom File</Heading>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "", label: "Select a file..." },
|
||||
...customFileOptions
|
||||
]}
|
||||
isSelected={v => v === (override.selectedFileId || "")}
|
||||
select={async id => {
|
||||
if (!id) {
|
||||
override.selectedFileId = undefined;
|
||||
} else {
|
||||
override.selectedFileId = id;
|
||||
await ensureDataURICached(id);
|
||||
}
|
||||
<div className={Margins.bottom8}>
|
||||
<Heading>Custom File</Heading>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "", label: "Select a file..." },
|
||||
...customFileOptions
|
||||
]}
|
||||
isSelected={v => v === (override.selectedFileId || "")}
|
||||
select={async id => {
|
||||
if (!id) {
|
||||
override.selectedFileId = undefined;
|
||||
} else {
|
||||
override.selectedFileId = id;
|
||||
await ensureDataURICached(id);
|
||||
}
|
||||
|
||||
await saveAndNotify();
|
||||
}}
|
||||
serialize={opt => opt.value}
|
||||
className={Margins.bottom8}
|
||||
/>
|
||||
await saveAndNotify();
|
||||
}}
|
||||
serialize={opt => opt.value}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
className={cl("file-input")}
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".mp3,.wav,.ogg,.m4a,.flac,.aac,.webm,.wma,.mp4"
|
||||
style={{ display: "none" }}
|
||||
onChange={uploadFile}
|
||||
/>
|
||||
<div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
|
||||
<div className={cl("override-controls")}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
color={Button.Colors.BRAND}
|
||||
>
|
||||
Upload New
|
||||
</Button>
|
||||
|
||||
{override.selectedFileId && files[override.selectedFileId] && (
|
||||
<Button
|
||||
color={Button.Colors.RED}
|
||||
variant="dangerPrimary"
|
||||
onClick={() => deleteFile(override.selectedFileId!)}
|
||||
>
|
||||
Delete Selected File
|
||||
|
|
|
|||
|
|
@ -9,11 +9,12 @@ import "./styles.css";
|
|||
import { AudioProcessor, PreprocessAudioData } from "@api/AudioPlayer";
|
||||
import { get as getFromDataStore } from "@api/DataStore";
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { Button } from "@components/Button";
|
||||
import { Heading } from "@components/Heading";
|
||||
import { Devs } from "@utils/constants";
|
||||
import { classNameFactory } from "@utils/css";
|
||||
import definePlugin, { OptionType, StartAt } from "@utils/types";
|
||||
import { Button, React, showToast, TextInput } from "@webpack/common";
|
||||
import { React, showToast, TextInput } from "@webpack/common";
|
||||
|
||||
import { getAllAudio, getAudioDataURI } from "./audioStore";
|
||||
import { SoundOverrideComponent } from "./SoundOverrideComponent";
|
||||
|
|
@ -325,15 +326,15 @@ const settings = definePluginSettings({
|
|||
return (
|
||||
<div>
|
||||
<div className="vc-custom-sounds-buttons">
|
||||
<Button color={Button.Colors.BRAND} onClick={triggerFileUpload}>Import</Button>
|
||||
<Button color={Button.Colors.PRIMARY} onClick={downloadSettings}>Export</Button>
|
||||
<Button color={Button.Colors.RED} onClick={resetOverrides}>Reset All</Button>
|
||||
<Button color={Button.Colors.WHITE} onClick={debugCustomSounds}>Debug</Button>
|
||||
<Button variant="primary" onClick={triggerFileUpload}>Import</Button>
|
||||
<Button variant="secondary" onClick={downloadSettings}>Export</Button>
|
||||
<Button variant="dangerPrimary" onClick={resetOverrides}>Reset All</Button>
|
||||
<Button variant="overlayPrimary" onClick={debugCustomSounds}>Debug</Button>
|
||||
<input
|
||||
className={cl("file-input")}
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".json"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleSettingsUpload}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,12 @@
|
|||
gap: 16px;
|
||||
}
|
||||
|
||||
.vc-custom-sounds-preview-controls {
|
||||
.vc-custom-sounds-override-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.vc-custom-sounds-file-input {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue