Refactor callbacks and audio params editors code

wip
2021-10-18 17:20:09 +02:00 · 2021-10-18 17:20:09 +02:00 · a7a5dbe4a8
--- a/src/ui/inputs/InputGroup.js
+++ b/src/ui/inputs/InputGroup.js
@ -96,20 +96,9 @@ InputGroupInfo.propTypes = {
  info: PropTypes.string
 };

-export default function InputGroup({
-  name,
-  children,
-  disabled,
-  info,
-  optional,
-  enabled,
-  onEnable,
-  onReset,
-  onResetEnabled,
-  ...rest
-}) {
+export default function InputGroup({ name, children, disabled, info, optional, enabled, onEnable, reset, onReset }) {
  return (
-    <InputGroupContainer disabled={disabled} {...rest}>
+    <InputGroupContainer disabled={disabled}>
      <InputGroupHeader>
        {optional && <BooleanInput value={enabled} onChange={onEnable} />}
        <OptionalGroup disabled={optional && !enabled}>{name && <label>{name}:</label>}</OptionalGroup>
@ -117,7 +106,7 @@ export default function InputGroup({
      <InputGroupContent disabled={optional && !enabled}>
        {children}
        {info && <InputGroupInfo info={info} />}
-        {onReset && <ResetButton disabled={onResetEnabled} onClick={onReset} />}
+        {onReset && <ResetButton disabled={!reset} onClick={onReset} />}
      </InputGroupContent>
    </InputGroupContainer>
  );
@ -133,5 +122,5 @@ InputGroup.propTypes = {
  enabled: PropTypes.bool,
  onEnable: PropTypes.func,
  onReset: PropTypes.func,
-  onResetEnabled: PropTypes.bool
+  reset: PropTypes.bool
 };
--- a/src/ui/inputs/NumericInputGroup.js
+++ b/src/ui/inputs/NumericInputGroup.js
@ -11,11 +11,11 @@ export default function NumericInputGroup({
  className,
  info,
  optional,
+  children,
  enabled,
  onEnable,
-  children,
+  reset,
  onReset,
-  onResetEnabled,
  ...rest
 }) {
  const { displayPrecision, ...scrubberProps } = rest;
@ -31,7 +31,7 @@ export default function NumericInputGroup({
        <NumericInput {...rest} />
        {children}
        {info && <InputGroupInfo info={info} />}
-        {onReset && <ResetButton disabled={onResetEnabled} onClick={onReset} />}
+        {onReset && <ResetButton disabled={!reset} onClick={onReset} />}
      </InputGroupContent>
    </InputGroupContainer>
  );
@ -45,7 +45,6 @@ NumericInputGroup.propTypes = {
  optional: PropTypes.bool,
  enabled: PropTypes.bool,
  onEnable: PropTypes.func,
-  resetButton: PropTypes.any,
  onReset: PropTypes.func,
-  onResetEnabled: PropTypes.bool
+  reset: PropTypes.bool
 };
--- a/src/ui/properties/AudioParamsProperties.js
+++ b/src/ui/properties/AudioParamsProperties.js
@ -4,63 +4,24 @@ import InputGroup from "../inputs/InputGroup";
 import SelectInput from "../inputs/SelectInput";
 import NumericInputGroup from "../inputs/NumericInputGroup";
 import CompoundNumericInput from "../inputs/CompoundNumericInput";
-import {
-  AudioType,
-  AudioTypeOptions,
-  DistanceModelOptions,
-  DistanceModelType,
-  SourceType
-} from "../../editor/objects/AudioParams";
-import { useAudioParamsPropertySelected } from "./useAudioParamsPropertySelected";
+import { AudioType, AudioTypeOptions, DistanceModelOptions, DistanceModelType } from "../../editor/objects/AudioParams";
+import useAudioParams from "./useAudioParams";
 import useSetPropertySelected from "./useSetPropertySelected";
 import BooleanInput from "../inputs/BooleanInput";
-import { useIsAudioPropertyDefault } from "./useIsAudioPropertyDefault";

 export default function AudioParamsProperties({ node, editor, multiEdit, sourceType }) {
  const onChangeOverrideAudioSettings = useSetPropertySelected(editor, "overrideAudioSettings");
-  const [onChangeAudioType, onEnableAudioType, onResetAudioType] = useAudioParamsPropertySelected(
-    editor,
-    sourceType,
-    "audioType"
-  );
-  const [onChangeGain, onEnableGain, onResetGain] = useAudioParamsPropertySelected(editor, sourceType, "gain");
-  const [onChangeDistanceModel, onEnableDistanceModel, onResetDistanceModel] = useAudioParamsPropertySelected(
-    editor,
-    sourceType,
-    "distanceModel"
-  );
-  const [onChangeRolloffFactor, onEnableRolloffFactor, onResetRolloffFactor] = useAudioParamsPropertySelected(
-    editor,
-    sourceType,
-    "rolloffFactor"
-  );
-  const [onChangeRefDistance, onEnableRefDistance, onResetRefDistance] = useAudioParamsPropertySelected(
-    editor,
-    sourceType,
-    "refDistance"
-  );
-  const [onChangeMaxDistance, onEnableMaxDistance, onResetMaxDistance] = useAudioParamsPropertySelected(
-    editor,
-    sourceType,
-    "maxDistance"
-  );
-  const [onChangeConeInnerAngle, onEnableConeInnerAngle, onResetConeInnerAngle] = useAudioParamsPropertySelected(
-    editor,
-    sourceType,
-    "coneInnerAngle"
-  );
-  const [onChangeConeOuterAngle, onEnableConeOuterAngle, onResetConeOuterAngle] = useAudioParamsPropertySelected(
-    editor,
-    sourceType,
-    "coneOuterAngle"
-  );
-  const [onChangeConeOuterGain, onEnableConeOuterGain, onResetConeOuterGain] = useAudioParamsPropertySelected(
-    editor,
-    sourceType,
-    "coneOuterGain"
-  );
-
-  const isAudioPropertyDefault = useIsAudioPropertyDefault(node);
+  const paramProps = {
+    audioType: useAudioParams(node, editor, sourceType, "audioType"),
+    gain: useAudioParams(node, editor, sourceType, "gain"),
+    distanceModel: useAudioParams(node, editor, sourceType, "distanceModel"),
+    rolloffFactor: useAudioParams(node, editor, sourceType, "rolloffFactor"),
+    refDistance: useAudioParams(node, editor, sourceType, "refDistance"),
+    maxDistance: useAudioParams(node, editor, sourceType, "maxDistance"),
+    coneInnerAngle: useAudioParams(node, editor, sourceType, "coneInnerAngle"),
+    coneOuterAngle: useAudioParams(node, editor, sourceType, "coneOuterAngle"),
+    coneOuterGain: useAudioParams(node, editor, sourceType, "coneOuterGain")
+  };

  // TODO: Make node audio settings work with multi-edit

@ -71,25 +32,11 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
      </InputGroup>
      {node.overrideAudioSettings && (
        <>
-          <InputGroup
-            name="Audio Type"
-            optional
-            enabled={node.enabledProperties["audioType"]}
-            onEnable={onEnableAudioType}
-            onReset={onResetAudioType}
-            onResetEnabled={isAudioPropertyDefault("audioType", SourceType.MEDIA_VIDEO)}
-          >
-            <SelectInput options={AudioTypeOptions} value={node.audioType} onChange={onChangeAudioType} />
+          <InputGroup name="Audio Type" optional {...paramProps.audioType}>
+            <SelectInput options={AudioTypeOptions} value={node.audioType} onChange={paramProps.audioType.onChange} />
          </InputGroup>
-          <InputGroup
-            name="Volume"
-            optional
-            enabled={node.enabledProperties["gain"]}
-            onEnable={onEnableGain}
-            onReset={onResetGain}
-            onResetEnabled={isAudioPropertyDefault("gain", SourceType.MEDIA_VIDEO)}
-          >
-            <CompoundNumericInput value={node.gain} onChange={onChangeGain} />
+          <InputGroup name="Volume" optional {...paramProps.gain}>
+            <CompoundNumericInput value={node.gain} onChange={paramProps.gain.onChange} />
          </InputGroup>
          {!multiEdit && node.audioType === AudioType.PannerNode && (
            <>
@ -97,15 +44,12 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
                name="Distance Model"
                info="The algorithim used to calculate audio rolloff."
                optional
-                enabled={node.enabledProperties["distanceModel"]}
-                onEnable={onEnableDistanceModel}
-                onReset={onResetDistanceModel}
-                onResetEnabled={isAudioPropertyDefault("distanceModel", SourceType.MEDIA_VIDEO)}
+                {...paramProps.distanceModel}
              >
                <SelectInput
                  options={DistanceModelOptions}
                  value={node.distanceModel}
-                  onChange={onChangeDistanceModel}
+                  onChange={paramProps.distanceModel.onChange}
                />
              </InputGroup>

@ -114,10 +58,7 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
                  name="Rolloff Factor"
                  info="A double value describing how quickly the volume is reduced as the source moves away from the listener. 0 to 1"
                  optional
-                  enabled={node.enabledProperties["rolloffFactor"]}
-                  onEnable={onEnableRolloffFactor}
-                  onReset={onResetRolloffFactor}
-                  onResetEnabled={isAudioPropertyDefault("rolloffFactor", SourceType.MEDIA_VIDEO)}
+                  {...paramProps.rolloffFactor}
                >
                  <CompoundNumericInput
                    min={0}
@ -126,7 +67,7 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
                    mediumStep={0.01}
                    largeStep={0.1}
                    value={node.rolloffFactor}
-                    onChange={onChangeRolloffFactor}
+                    onChange={paramProps.rolloffFactor.onChange}
                  />
                </InputGroup>
              ) : (
@ -138,12 +79,9 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
                  mediumStep={1}
                  largeStep={10}
                  value={node.rolloffFactor}
-                  onChange={onChangeRolloffFactor}
                  optional
-                  enabled={node.enabledProperties["rolloffFactor"]}
-                  onEnable={onEnableRolloffFactor}
-                  onReset={onResetRolloffFactor}
-                  onResetEnabled={isAudioPropertyDefault("rolloffFactor", SourceType.MEDIA_VIDEO)}
+                  onChange={paramProps.rolloffFactor.onChange}
+                  {...paramProps.rolloffFactor}
                />
              )}
              <NumericInputGroup
@ -154,13 +92,10 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
                mediumStep={1}
                largeStep={10}
                value={node.refDistance}
-                onChange={onChangeRefDistance}
                unit="m"
                optional
-                enabled={node.enabledProperties["refDistance"]}
-                onEnable={onEnableRefDistance}
-                onReset={onResetRefDistance}
-                onResetEnabled={isAudioPropertyDefault("refDistance", SourceType.MEDIA_VIDEO)}
+                onChange={paramProps.refDistance.onChange}
+                {...paramProps.refDistance}
              />
              <NumericInputGroup
                name="Max Distance"
@ -170,13 +105,10 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
                mediumStep={1}
                largeStep={10}
                value={node.maxDistance}
-                onChange={onChangeMaxDistance}
                unit="m"
                optional
-                enabled={node.enabledProperties["maxDistance"]}
-                onEnable={onEnableMaxDistance}
-                onReset={onResetMaxDistance}
-                onResetEnabled={isAudioPropertyDefault("maxDistance", SourceType.MEDIA_VIDEO)}
+                onChange={paramProps.maxDistance.onChange}
+                {...paramProps.maxDistance}
              />
              <NumericInputGroup
                name="Cone Inner Angle"
@ -187,14 +119,11 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
                mediumStep={1}
                largeStep={10}
                value={node.coneInnerAngle}
-                onChange={onChangeConeInnerAngle}
                unit="°"
                disabled={multiEdit}
                optional
-                enabled={node.enabledProperties["coneInnerAngle"]}
-                onEnable={onEnableConeInnerAngle}
-                onReset={onResetConeInnerAngle}
-                onResetEnabled={isAudioPropertyDefault("coneInnerAngle", SourceType.MEDIA_VIDEO)}
+                onChange={paramProps.coneInnerAngle.onChange}
+                {...paramProps.coneInnerAngle}
              />
              <NumericInputGroup
                name="Cone Outer Angle"
@ -205,30 +134,24 @@ export default function AudioParamsProperties({ node, editor, multiEdit, sourceT
                mediumStep={1}
                largeStep={10}
                value={node.coneOuterAngle}
-                onChange={onChangeConeOuterAngle}
                unit="°"
                disabled={multiEdit}
                optional
-                enabled={node.enabledProperties["coneOuterAngle"]}
-                onEnable={onEnableConeOuterAngle}
-                onReset={onResetConeOuterAngle}
-                onResetEnabled={isAudioPropertyDefault("coneOuterAngle", SourceType.MEDIA_VIDEO)}
+                onChange={paramProps.coneOuterAngle.onChange}
+                {...paramProps.coneOuterAngle}
              />
              <InputGroup
                name="Cone Outer Gain"
                info="A double value describing the amount of volume reduction outside the cone defined by the coneOuterAngle attribute. Its default value is 0, meaning that no sound can be heard."
                optional
-                enabled={node.enabledProperties["coneOuterGain"]}
-                onEnable={onEnableConeOuterGain}
-                onReset={onResetConeOuterGain}
-                onResetEnabled={isAudioPropertyDefault("coneOuterGain", SourceType.MEDIA_VIDEO)}
+                {...paramProps.coneOuterGain}
              >
                <CompoundNumericInput
                  min={0}
                  max={1}
                  step={0.01}
                  value={node.coneOuterGain}
-                  onChange={onChangeConeOuterGain}
+                  onChange={paramProps.coneOuterGain.onChange}
                />
              </InputGroup>
            </>
--- a/src/ui/properties/SceneNodeEditor.js
+++ b/src/ui/properties/SceneNodeEditor.js
@ -11,8 +11,7 @@ import SelectInput from "../inputs/SelectInput";
 import useSetPropertySelected from "./useSetPropertySelected";
 import BooleanInput from "../inputs/BooleanInput";
 import { DistanceModelOptions, DistanceModelType, SourceType } from "../../editor/objects/AudioParams";
-import { useAudioParamsPropertySelected } from "./useAudioParamsPropertySelected";
-import { useIsSceneAudioPropertyDefault } from "./useIsAudioPropertyDefault";
+import useAudioParams from "./useAudioParams";

 const FogTypeOptions = [
  {
@ -40,71 +39,22 @@ export default function SceneNodeEditor(props) {
  const onChangeFogDensity = useSetPropertySelected(editor, "fogDensity");

  const onChangeOverrideAudioSettings = useSetPropertySelected(editor, "overrideAudioSettings");
-  const [onChangeMediaVolume, onEnableMediaVolume, onResetMediaGain] = useAudioParamsPropertySelected(
-    editor,
-    SourceType.MEDIA_VIDEO,
-    "gain",
-    "mediaVolume"
-  );
-  const [
-    onChangeMediaDistanceModel,
-    onEnableMediaDistanceModel,
-    onResetMediaDistanceModel
-  ] = useAudioParamsPropertySelected(editor, SourceType.MEDIA_VIDEO, "distanceModel", "mediaDistanceModel");
-  const [
-    onChangeMediaRolloffFactor,
-    onEnableMediaRolloffFactor,
-    onResetMediaRolloffFactor
-  ] = useAudioParamsPropertySelected(editor, SourceType.MEDIA_VIDEO, "rolloffFactor", "mediaRolloffFactor");
-  const [onChangeMediaRefDistance, onEnableMediaRefDistance, onResetMediaRefDistance] = useAudioParamsPropertySelected(
-    editor,
-    SourceType.MEDIA_VIDEO,
-    "refDistance",
-    "mediaRefDistance"
-  );
-  const [onChangeMediaMaxDistance, onEnableMediaMaxDistance, onResetMediaMaxDistance] = useAudioParamsPropertySelected(
-    editor,
-    SourceType.MEDIA_VIDEO,
-    "maxDistance",
-    "mediaMaxDistance"
-  );
-  const [
-    onChangeMediaConeInnerAngle,
-    onEnableMediaConeInnerAngle,
-    onResetMediaConeInnerAngle
-  ] = useAudioParamsPropertySelected(editor, SourceType.MEDIA_VIDEO, "coneInnerAngle", "mediaConeInnerAngle");
-  const [
-    onChangeMediaConeOuterAngle,
-    onEnableMediaConeOuterAngle,
-    onResetMediaConeOuterAngle
-  ] = useAudioParamsPropertySelected(editor, SourceType.MEDIA_VIDEO, "coneOuterAngle", "mediaConeOuterAngle");
-  const [
-    onChangeMediaConeOuterGain,
-    onEnableMediaConeOuterGain,
-    onResetMediaConeOuterGain
-  ] = useAudioParamsPropertySelected(editor, SourceType.MEDIA_VIDEO, "coneOuterGain", "mediaConeOuterGain");
-  const [
-    onChangeAvatarDistanceModel,
-    onEnableAvatarDistanceModel,
-    onResetAvatarDistanceModel
-  ] = useAudioParamsPropertySelected(editor, SourceType.AVATAR_AUDIO_SOURCE, "distanceModel", "avatarDistanceModel");
-  const [
-    onChangeAvatarRolloffFactor,
-    onEnableAvatarRolloffFactor,
-    onResetAvatarRolloffFactor
-  ] = useAudioParamsPropertySelected(editor, SourceType.AVATAR_AUDIO_SOURCE, "rolloffFactor", "avatarRolloffFactor");
-  const [
-    onChangeAvatarRefDistance,
-    onEnableAvatarRefDistance,
-    onResetAvatarRefDistance
-  ] = useAudioParamsPropertySelected(editor, SourceType.AVATAR_AUDIO_SOURCE, "refDistance", "avatarRefDistance");
-  const [
-    onChangeAvatarMaxDistance,
-    onEnableAvatarMaxDistance,
-    onResetAvatarMaxDistance
-  ] = useAudioParamsPropertySelected(editor, SourceType.AVATAR_AUDIO_SOURCE, "maxDistance", "avatarMaxDistance");
-
-  const isAudioPropertyDefault = useIsSceneAudioPropertyDefault(node);
+  const mediaParamProps = {
+    gain: useAudioParams(node, editor, SourceType.MEDIA_VIDEO, "gain", "mediaVolume"),
+    distanceModel: useAudioParams(node, editor, SourceType.MEDIA_VIDEO, "distanceModel", "mediaDistanceModel"),
+    rolloffFactor: useAudioParams(node, editor, SourceType.MEDIA_VIDEO, "rolloffFactor", "mediaRolloffFactor"),
+    refDistance: useAudioParams(node, editor, SourceType.MEDIA_VIDEO, "refDistance", "mediaRefDistance"),
+    maxDistance: useAudioParams(node, editor, SourceType.MEDIA_VIDEO, "maxDistance", "mediaMaxDistance"),
+    coneInnerAngle: useAudioParams(node, editor, SourceType.MEDIA_VIDEO, "coneInnerAngle", "mediaConeInnerAngle"),
+    coneOuterAngle: useAudioParams(node, editor, SourceType.MEDIA_VIDEO, "coneOuterAngle", "mediaConeOuterAngle"),
+    coneOuterGain: useAudioParams(node, editor, SourceType.MEDIA_VIDEO, "coneOuterGain", "mediaConeOuterGain")
+  };
+  const avatarParamProps = {
+    distanceModel: useAudioParams(node, editor, SourceType.AVATAR_AUDIO_SOURCE, "distanceModel", "avatarDistanceModel"),
+    rolloffFactor: useAudioParams(node, editor, SourceType.AVATAR_AUDIO_SOURCE, "rolloffFactor", "avatarRolloffFactor"),
+    refDistance: useAudioParams(node, editor, SourceType.AVATAR_AUDIO_SOURCE, "refDistance", "avatarRefDistance"),
+    maxDistance: useAudioParams(node, editor, SourceType.AVATAR_AUDIO_SOURCE, "maxDistance", "avatarMaxDistance")
+  };

  return (
    <NodeEditor {...props} description={SceneNodeEditor.description}>
@ -161,19 +111,12 @@ export default function SceneNodeEditor(props) {
            name="Avatar Distance Model"
            info="The algorithim used to calculate audio rolloff."
            optional
-            enabled={node.enabledProperties["avatarDistanceModel"]}
-            onEnable={onEnableAvatarDistanceModel}
-            onReset={onResetAvatarDistanceModel}
-            onResetEnabled={isAudioPropertyDefault(
-              "distanceModel",
-              "avatarDistanceModel",
-              SourceType.AVATAR_AUDIO_SOURCE
-            )}
+            {...avatarParamProps.distanceModel}
          >
            <SelectInput
              options={DistanceModelOptions}
              value={node.avatarDistanceModel}
-              onChange={onChangeAvatarDistanceModel}
+              onChange={avatarParamProps.distanceModel.onChange}
            />
          </InputGroup>

@ -182,14 +125,7 @@ export default function SceneNodeEditor(props) {
              name="Avatar Rolloff Factor"
              info="A double value describing how quickly the volume is reduced as the source moves away from the listener. 0 to 1"
              optional
-              enabled={node.enabledProperties["avatarRolloffFactor"]}
-              onEnable={onEnableAvatarRolloffFactor}
-              onReset={onResetAvatarRolloffFactor}
-              onResetEnabled={isAudioPropertyDefault(
-                "rolloffFactor",
-                "avatarRolloffFactor",
-                SourceType.AVATAR_AUDIO_SOURCE
-              )}
+              {...avatarParamProps.rolloffFactor}
            >
              <CompoundNumericInput
                min={0}
@ -198,7 +134,7 @@ export default function SceneNodeEditor(props) {
                mediumStep={0.01}
                largeStep={0.1}
                value={node.avatarRolloffFactor}
-                onChange={onChangeAvatarRolloffFactor}
+                onChange={avatarParamProps.rolloffFactor.onChange}
              />
            </InputGroup>
          ) : (
@ -210,16 +146,9 @@ export default function SceneNodeEditor(props) {
              mediumStep={1}
              largeStep={10}
              value={node.avatarRolloffFactor}
-              onChange={onChangeAvatarRolloffFactor}
              optional
-              enabled={node.enabledProperties["avatarRolloffFactor"]}
-              onEnable={onEnableAvatarRolloffFactor}
-              onReset={onResetAvatarRolloffFactor}
-              onResetEnabled={isAudioPropertyDefault(
-                "rolloffFactor",
-                "avatarRolloffFactor",
-                SourceType.AVATAR_AUDIO_SOURCE
-              )}
+              onChange={avatarParamProps.rolloffFactor.onChange}
+              {...avatarParamProps.rolloffFactor}
            />
          )}
          <NumericInputGroup
@ -230,13 +159,10 @@ export default function SceneNodeEditor(props) {
            mediumStep={1}
            largeStep={10}
            value={node.avatarRefDistance}
-            onChange={onChangeAvatarRefDistance}
            unit="m"
            optional
-            enabled={node.enabledProperties["avatarRefDistance"]}
-            onEnable={onEnableAvatarRefDistance}
-            onReset={onResetAvatarRefDistance}
-            onResetEnabled={isAudioPropertyDefault("refDistance", "avatarRefDistance", SourceType.AVATAR_AUDIO_SOURCE)}
+            onChange={avatarParamProps.refDistance.onChange}
+            {...avatarParamProps.refDistance}
          />
          <NumericInputGroup
            name="Avatar Max Distance"
@ -246,37 +172,24 @@ export default function SceneNodeEditor(props) {
            mediumStep={1}
            largeStep={10}
            value={node.avatarMaxDistance}
-            onChange={onChangeAvatarMaxDistance}
            unit="m"
            optional
-            enabled={node.enabledProperties["avatarMaxDistance"]}
-            onEnable={onEnableAvatarMaxDistance}
-            onReset={onResetAvatarMaxDistance}
-            onResetEnabled={isAudioPropertyDefault("maxDistance", "avatarMaxDistance", SourceType.AVATAR_AUDIO_SOURCE)}
+            onChange={avatarParamProps.maxDistance.onChange}
+            {...avatarParamProps.maxDistance}
          />
-          <InputGroup
-            name="Media Volume"
-            optional
-            enabled={node.enabledProperties["mediaVolume"]}
-            onEnable={onEnableMediaVolume}
-            onReset={onResetMediaGain}
-            onResetEnabled={isAudioPropertyDefault("gain", "mediaVolume", SourceType.MEDIA_VIDEO)}
-          >
-            <CompoundNumericInput value={node.mediaVolume} onChange={onChangeMediaVolume} />
+          <InputGroup name="Media Volume" optional {...mediaParamProps.gain}>
+            <CompoundNumericInput value={node.mediaVolume} onChange={mediaParamProps.gain.onChange} />
          </InputGroup>
          <InputGroup
            name="Media Distance Model"
            info="The algorithim used to calculate audio rolloff."
            optional
-            enabled={node.enabledProperties["mediaDistanceModel"]}
-            onEnable={onEnableMediaDistanceModel}
-            onReset={onResetMediaDistanceModel}
-            onResetEnabled={isAudioPropertyDefault("distanceModel", "mediaDistanceModel", SourceType.MEDIA_VIDEO)}
+            {...mediaParamProps.distanceModel}
          >
            <SelectInput
              options={DistanceModelOptions}
              value={node.mediaDistanceModel}
-              onChange={onChangeMediaDistanceModel}
+              onChange={mediaParamProps.distanceModel.onChange}
            />
          </InputGroup>

@ -285,10 +198,7 @@ export default function SceneNodeEditor(props) {
              name="Media Rolloff Factor"
              info="A double value describing how quickly the volume is reduced as the source moves away from the listener. 0 to 1"
              optional
-              enabled={node.enabledProperties["mediaRolloffFactor"]}
-              onEnable={onEnableMediaRolloffFactor}
-              onReset={onResetMediaRolloffFactor}
-              onResetEnabled={isAudioPropertyDefault("rolloffFactor", "mediaRolloffFactor", SourceType.MEDIA_VIDEO)}
+              {...mediaParamProps.rolloffFactor}
            >
              <CompoundNumericInput
                min={0}
@ -297,7 +207,7 @@ export default function SceneNodeEditor(props) {
                mediumStep={0.01}
                largeStep={0.1}
                value={node.mediaRolloffFactor}
-                onChange={onChangeMediaRolloffFactor}
+                onChange={mediaParamProps.rolloffFactor.onChange}
              />
            </InputGroup>
          ) : (
@ -309,12 +219,9 @@ export default function SceneNodeEditor(props) {
              mediumStep={1}
              largeStep={10}
              value={node.mediaRolloffFactor}
-              onChange={onChangeMediaRolloffFactor}
              optional
-              enabled={node.enabledProperties["mediaRolloffFactor"]}
-              onEnable={onEnableMediaRolloffFactor}
-              onReset={onResetMediaRolloffFactor}
-              onResetEnabled={isAudioPropertyDefault("rolloffFactor", "mediaRolloffFactor", SourceType.MEDIA_VIDEO)}
+              onChange={mediaParamProps.rolloffFactor.onChange}
+              {...mediaParamProps.rolloffFactor}
            />
          )}
          <NumericInputGroup
@ -325,13 +232,10 @@ export default function SceneNodeEditor(props) {
            mediumStep={1}
            largeStep={10}
            value={node.mediaRefDistance}
-            onChange={onChangeMediaRefDistance}
            unit="m"
            optional
-            enabled={node.enabledProperties["mediaRefDistance"]}
-            onEnable={onEnableMediaRefDistance}
-            onReset={onResetMediaRefDistance}
-            onResetEnabled={isAudioPropertyDefault("refDistance", "mediaRefDistance", SourceType.MEDIA_VIDEO)}
+            onChange={mediaParamProps.refDistance.onChange}
+            {...mediaParamProps.refDistance}
          />
          <NumericInputGroup
            name="Media Max Distance"
@ -341,13 +245,10 @@ export default function SceneNodeEditor(props) {
            mediumStep={1}
            largeStep={10}
            value={node.mediaMaxDistance}
-            onChange={onChangeMediaMaxDistance}
            unit="m"
            optional
-            enabled={node.enabledProperties["mediaMaxDistance"]}
-            onEnable={onEnableMediaMaxDistance}
-            onReset={onResetMediaMaxDistance}
-            onResetEnabled={isAudioPropertyDefault("maxDistance", "mediaMaxDistance", SourceType.MEDIA_VIDEO)}
+            onChange={mediaParamProps.maxDistance.onChange}
+            {...mediaParamProps.maxDistance}
          />
          <NumericInputGroup
            name="Media Cone Inner Angle"
@ -358,13 +259,10 @@ export default function SceneNodeEditor(props) {
            mediumStep={1}
            largeStep={10}
            value={node.mediaConeInnerAngle}
-            onChange={onChangeMediaConeInnerAngle}
            unit="°"
            optional
-            enabled={node.enabledProperties["mediaConeInnerAngle"]}
-            onEnable={onEnableMediaConeInnerAngle}
-            onReset={onResetMediaConeInnerAngle}
-            onResetEnabled={isAudioPropertyDefault("coneInnerAngle", "mediaConeInnerAngle", SourceType.MEDIA_VIDEO)}
+            onChange={mediaParamProps.coneInnerAngle.onChange}
+            {...mediaParamProps.coneInnerAngle}
          />
          <NumericInputGroup
            name="Media Cone Outer Angle"
@ -375,29 +273,23 @@ export default function SceneNodeEditor(props) {
            mediumStep={1}
            largeStep={10}
            value={node.mediaConeOuterAngle}
-            onChange={onChangeMediaConeOuterAngle}
            unit="°"
            optional
-            enabled={node.enabledProperties["mediaConeOuterAngle"]}
-            onEnable={onEnableMediaConeOuterAngle}
-            onReset={onResetMediaConeOuterAngle}
-            onResetEnabled={isAudioPropertyDefault("coneOuterAngle", "mediaConeOuterAngle", SourceType.MEDIA_VIDEO)}
+            onChange={mediaParamProps.coneOuterAngle.onChange}
+            {...mediaParamProps.coneOuterAngle}
          />
          <InputGroup
            name="Media Cone Outer Gain"
-            info="A double value describing the amount of volume reduction outside the cone defined by the coneOuterAngle attribute. Its default value is 0, meaning that no sound can be heard."
+            info="A double value describing the amount of volume reduction outside the cone defined by the coneOuterGain attribute. Its default value is 0, meaning that no sound can be heard."
            optional
-            enabled={node.enabledProperties["mediaConeOuterGain"]}
-            onEnable={onEnableMediaConeOuterGain}
-            onReset={onResetMediaConeOuterGain}
-            onResetEnabled={isAudioPropertyDefault("coneOuterGain", "mediaConeOuterGain", SourceType.MEDIA_VIDEO)}
+            {...mediaParamProps.coneOuterGain}
          >
            <CompoundNumericInput
              min={0}
              max={1}
              step={0.01}
              value={node.mediaConeOuterGain}
-              onChange={onChangeMediaConeOuterGain}
+              onChange={mediaParamProps.coneOuterGain.onChange}
            />
          </InputGroup>
        </>
--- a/src/ui/properties/useAudioParams.js
+++ b/src/ui/properties/useAudioParams.js
@ -0,0 +1,21 @@
+import { useCallback } from "react";
+import { Defaults } from "../../editor/objects/AudioParams";
+
+export default function useAudioParams(node, editor, sourceType, propName, scenePropName) {
+  const targetPropName = (scenePropName && scenePropName) || propName;
+  return {
+    onChange: useCallback(value => editor.setPropertySelected(targetPropName, value), [editor, targetPropName]),
+    onEnable: useCallback(value => editor.setPropertySelected("enabledProperties", { [targetPropName]: value }), [
+      editor,
+      targetPropName
+    ]),
+    enabled: node.enabledProperties[targetPropName],
+    onReset: useCallback(() => editor.setPropertySelected(targetPropName, Defaults[sourceType][propName]), [
+      editor,
+      targetPropName,
+      sourceType,
+      propName
+    ]),
+    reset: node[targetPropName] !== Defaults[sourceType][propName]
+  };
+}
--- a/src/ui/properties/useAudioParamsPropertySelected.js
+++ b/src/ui/properties/useAudioParamsPropertySelected.js
@ -1,19 +0,0 @@
-import { useCallback } from "react";
-import { Defaults } from "../../editor/objects/AudioParams";
-
-export function useAudioParamsPropertySelected(editor, sourceType, propName, scenePropName) {
-  const targetPropName = (scenePropName && scenePropName) || propName;
-  return [
-    useCallback(value => editor.setPropertySelected(targetPropName, value), [editor, targetPropName]),
-    useCallback(value => editor.setPropertySelected("enabledProperties", { [targetPropName]: value }), [
-      editor,
-      targetPropName
-    ]),
-    useCallback(() => editor.setPropertySelected(targetPropName, Defaults[sourceType][propName]), [
-      editor,
-      targetPropName,
-      sourceType,
-      propName
-    ])
-  ];
-}
--- a/src/ui/properties/useIsAudioPropertyDefault.js
+++ b/src/ui/properties/useIsAudioPropertyDefault.js
@ -1,20 +0,0 @@
-import { useCallback } from "react";
-import { Defaults } from "../../editor/objects/AudioParams";
-
-export function useIsAudioPropertyDefault(node) {
-  return useCallback(
-    (propName, sourceType) => {
-      return node[propName] === Defaults[sourceType][propName];
-    },
-    [node]
-  );
-}
-
-export function useIsSceneAudioPropertyDefault(node) {
-  return useCallback(
-    (propName, scenePropName, sourceType) => {
-      return node[scenePropName] === Defaults[sourceType][propName];
-    },
-    [node]
-  );
-}