Adds Input to Volume Module

[painerp]

• Introduced a toggleable option to show the input in the volume module, allowing it to be displayed alongside or independently of the output volume.
• Added a toggle feature for the output volume.
• Implemented an option to hide the label for both output and input when muted.
• Updated themes to reflect these changes.

[Jas-SinghFSU]

We should try to minimize nesting bindings as much as possible. This is because for every top level binding change, the child binding is executed as a multiple of the parent.

So for instance, imagine we have a top level bind called parent (ex: parent.hook(...))... then inside that hook we have a child hook that's nested. For every parent change N, the child changes M times.

So if the parent hook is executed 100 times, the child is executed 100 times as well, then the total execution will be 100 * 100 - which combines for a 1000 executions. Essentially is O(n^2) and causes runaway memory consumption which will inevitably crash AGS.

You can see this if you put let total = 0; at the top of the file, then inside the volPctUpdate function put:

        total += 1;
        console.log(total);

The more and more you start changing the volume, because there is so much hook/binding nesting, the number grows out of control to a point where every single change in volume is executing the hook - and calling the function - 2000 times. And this number will continue to grow.

What we can do here is move all the bindings to the top level and simple pass the value down to the children and dependencies.

Also it seems that the split styling is broken with the double module enabled. There's a divider and a rounded border even when the icon is not on the outer edge. We'll have to determine the best UI approach for this.

[painerp]

Oh my bad I forgot to fix the hooks.
I rewrote this multiple times since there were always some pain points I couldn't work around. Worked fine on my pc but my laptop is struggling for sure.

Regarding the split style, I tried some different ways but couldn't settle on one so I left it looking like the others for now. Specifically making the right icon squared instead of rounded or moving it all the way to the right.
So if you have any input for that I would greatly appreciate it.

[painerp]

I will get back to you next week with some possible design options. So that we can brainstorm a suitable design for the split style.

Do you think the current version is adequate for you function wise or does anything else need changing?

Thanks for your thorough explanation btw!

[Jas-SinghFSU]

Overall, this is much much nicer! After this we should discuss how we want to handle the split style and it should be good to merge. Though one thing we need to change is that we shouldn't be able to disable both playback and microphone sections and hide the entire module. Maybe we add a side-effect to enable the other if one is disabled.

[painerp]

I've removed the hooks and moved everything to the main function. I assumed using the hooks takes less processing since they only change the text/icon instead of redrawing the whole box but it seems to make a negligible difference and hiding them is more consistent as well. So Thanks for the great suggestion!

I've also refactored some of the more complex checks to improve readability.

Regarding the option side effect: I've looked into it and couldn't find an existing implementation. I created a quick POC which works but is pretty rough around the edges. Could you give me a hint on how you would implement this?

[painerp]

Some more split options :)

[Jas-SinghFSU]

Ooo I like the second one. Side-effects just mean a secondary action that occurs as a consequence of a primary action.

To give you an example, if we had 3 switches in which only one could be enabled, the side-effect of enabling SwitchA would be to disable SwitchB and SwitchC. Now, in such a case we should probably go with a enumerator instead of a switch and just switch between the different styles rather than having 3 different switches.

For a simple example you can look at modules/bar/SideEffects.ts, where for example if showIcon emits the event that it changed and got disabled, AND we determine that showTime is ALSO disabled, that's a bad state that we should NOT be in. At least one item should be visible, so the side-effect there is that we enable showTime.value and set it to true. So at any given moment you will AT LEAST have one section visible (or both).

[painerp]

I've implemented the toggle side effects and the right icon for the split style. Do you think we should make the right icon optional for the other styles as well?

Thanks for the example I must have missed the file when I was looking for it. Feel free to let me know if you spot anything else!

[Jas-SinghFSU]

We may actually end up going with no icon tbh. The reason being is that while it looks cool, the more that I think about it, the more I realize that it goes against the standard design of icon@left label@right. We can keep the input label with a divider which looks great, but leave the icon out.

A better approach may be to later on implement the ability to switch the icon between input or playback.

[painerp]

I agree that was also my initial feeling with the right icon style.

Do you dislike the default/wave style (output icon -> label -> separator -> input icon -> label) as well or just the right icon in split style?

If it's the broader concern, I think separating the input into its own module could be a good solution. This would alleviate our consistency concerns and would also provide a better experience especially with your recent changes (#278), which would make it possible to use the scroll wheel to control the volume of both output and input. I also feel like otherwise it would break the hide muted label option since spotting which label is shown would make it harder without the icon next to it.

Alternatively, we could keep the current style and make the input icon toggleable.
When on, it would behave like it is currently for all styles except split, where it would replace the speaker icon instead as you mentioned.

I'm down to implement either approach. Let me know which one you'd prefer to move forward with

[Jas-SinghFSU]

My bigger concern is with the double icon. I think having a single icon is the way to go but we can still have split style. Just let the user pick what icon they want to show (either mic or speaker).

So it would be [Icon of choice][vol][split][input]

[painerp]

Alright, I will work on this in the coming days!

[painerp]

Okay finally got to it. Sorry for the wait.

[Jas-SinghFSU]

No worries, I'll review it this weekend. Thank you!