added PR review comments and helpful tooltips

Thorium-Sim · Oct 4, 2023 · f93270b · f93270b
1 parent 252b9c0
commit f93270b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/server/classes/sound.js b/server/classes/sound.js
@@ -10,6 +10,6 @@ export default class Sound {
     this.playbackRate = params.playbackRate || 1;
     this.channel = params.channel || [0, 1];
     this.looping = params.looping || false;
-    this.preserveChannels = params.preserveChannels || false;
+    this.preserveChannels = params.preserveChannels === false ? false : true;
   }
 }
diff --git a/src/components/macros/playSound.js b/src/components/macros/playSound.js
@@ -1,12 +1,17 @@
 import React from "react";
-import {FormGroup, Label, Input, Button} from "helpers/reactstrap";
+import { FormGroup, Label, Input, Button, Popover, PopoverHeader, PopoverBody } from "helpers/reactstrap";
 import SoundPicker from "helpers/soundPicker";
 import playSoundHOC from "components/generic/SoundPlayer";
 
-function PlaySound({updateArgs, args, stations, clients, playSound}) {
+function PlaySound({ updateArgs, args, stations, clients, playSound }) {
+  let [showChannelPopover, setShowChannelPopover] = React.useState(false);
+  let [showOverridesPopover, setShowOverridesPopover] = React.useState(false);
+  const toggleChannelPopover = () => setShowChannelPopover(!showChannelPopover);
+  const toggleOverridesPopover = () => setShowOverridesPopover(!showOverridesPopover);
+
   const sound = args.sound || {};
   const updateSound = (which, val) => {
-    updateArgs("sound", {...sound, [which]: val});
+    updateArgs("sound", { ...sound, [which]: val });
   };
   React.useEffect(() => {
     if (!args.station) {
@@ -66,9 +71,9 @@ function PlaySound({updateArgs, args, stations, clients, playSound}) {
         </Input>
 
         <Label>Volume</Label>
-        <div style={{display: "flex"}}>
+        <div style={{ display: "flex" }}>
           <Input
-            style={{flex: 1}}
+            style={{ flex: 1 }}
             type="range"
             min={0}
             step={0.01}
@@ -88,23 +93,64 @@ function PlaySound({updateArgs, args, stations, clients, playSound}) {
           value={sound.playbackRate}
           onChange={e => updateSound("playbackRate", e.target.value)}
         />
+        <div style={{ display: "flex", gap: '1rem', padding: '20px', alignItems: 'center' }}>
+          <Label style={{ marginBottom: '0px' }}>
+            <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+              Preserve Surround Channels <small>Advanced</small>
+              <div>
+                <Button id="preserve-surround-channels" onClick={toggleChannelPopover} size="sm" color={'link'}>
+                  <small>Help</small>
+                </Button>
+                <Popover placement={'right'} isOpen={showChannelPopover} target={'preserve-surround-channels'} toggle={toggleChannelPopover}>
+                  <PopoverHeader>Preserve Surround Channels</PopoverHeader>
+                  <PopoverBody>
+                    With this option selected, the audio files will play all channels that they have been built with.
+                    This allows you to use audio files coded for 5.1 and beyond to be played through the sound player. This is the default functionality of the sound player.
+                    <div style={{ marginTop: '0.75rem' }}>
+                      <i>
+                        Note: If this is not selected, Thorium will mix your audio file into a stereo format by using the data from the first 2 channels in your file.
+                        If you are using 5.1 or above files, audio information will be lost.
+                      </i>
+                    </div>
+                  </PopoverBody>
+                </Popover>
+              </div>
+            </div>
+          </Label>
+          <Input
+            style={{ marginBottom: '4px' }}
+            type="checkbox"
+            checked={sound.preserveChannels}
+            onChange={e => updateSound("preserveChannels", e.target.checked)}
+          />
+        </div>
         <Label>
-          Channels <small>Advanced</small>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            Channel Mapping Overrides <small>Advanced</small>
+            <div>
+              <Button id="channel-mapping-overrides" onClick={toggleOverridesPopover} size="sm" color={'link'}>
+                <small>Help</small>
+              </Button>
+              <Popover placement={'right'} isOpen={showOverridesPopover} target={'channel-mapping-overrides'} toggle={toggleOverridesPopover}>
+                <PopoverHeader>Channel Mapping Overrides</PopoverHeader>
+                <PopoverBody>
+                  If you choose not to preserve the surround channels, you can use this option to fix to the stereo format, and then map the audio channels to different speakers in your sim.
+                  This can be useful if you have a sound that you want to play through a specific speaker, but the audio file is not coded for that speaker.
+                  Example: If you have a different room for an engineering bay, and you want to play a sound just to that area. You can use this field to specify it.
+                </PopoverBody>
+              </Popover>
+            </div>
+          </div>
+
         </Label>
         <Input
           type="text"
+          disabled={sound.preserveChannels}
           placeholder="0,1"
           value={sound.channel}
           onChange={e => updateSound("channel", e.target.value.split(","))}
         />
-        <div style={{ display: "flex", gap: '1rem', padding: '20px' }}>
-          <Label>Preserve Audio Channels <small>Advanced</small> </Label>
-          <Input
-            type="checkbox"
-            checked={sound.preserveChannels}
-            onChange={e => updateSound("preserveChannels", e.target.checked)}
-          />
-        </div>
+
         <Label>Looping</Label>
         <Input
           type="checkbox"