Confusing UI for the speaker panel

[Suzie97]

Screen.record.from.2021-05-18.19.28.58.mp4

As we can see in the video, initially, the icon for displaying the speaker panel is not correct. Also, it is the same icon as the window maximize button. Using a different icon (like a triangle), would make more sense.

Also, it is using a Gtk.Paned, which lets the user adjust the pane for no reason.

I think that the Gtk.Paned should not be adjustable. Users should click on the button to display the speaker panel. Making it adjustable might confuse the user.

Check the video for a more clear visualisation.

[Suzie97]

@syfds, this is one of those issues where having some kind of a speaker simulation (or any other form of testing) would be really helpful.

If I could see the actual content of the speaker panel when a speaker is connected, I could analyze the problem better.

[syfds]

hi @Suzie97 , you are right, the icon is not optimal :-/ which icon do you mean, can you make a suggestion from LookBook (available in AppCenter)?

Also, it is using a Gtk.Paned, which lets the user adjust the pane for no reason.

I think that the Gtk.Paned should not be adjustable. Users should click on the button to display the speaker panel. Making it adjustable might confuse the user.

I agree with you, a fixed pane is a better solution here, I didn't find any simple possibility to do so. Feel free to make a PR with a suggestion!

[Suzie97]

We can use the go-up and go-down 16 px icons. I fixed the bug of the icons. I'm trying to figure out a way to make the pane non adjustable. I'll notify you if I find something. I don't think Gtk.Paned can be made non-adjustable in a simple way.

[Suzie97]

Screen.record.from.2021-05-20.12.39.46.mp4

I ditched the Gtk.Pane and used a Gtk.Grid and a Gtk.Separator. Now its much better.

But I think the main issue is with the way the speaker panel is built.

[Suzie97]

I tried doing it in elementary os 6. And it is actually not that confusing in elementaty OS 6. The app works as expected. I'll submit a pull request. @syfds, please review it for yourself, as I couldn't test the behaviour when the speaker is connected.

[syfds]

Thanks, you can push a PR and I will make a review. To be honest I don't think it is critical issue for now, I would set priority to developing the multi room feature.

[syfds]

I think in the future when the whole API is implemented the design of the whole app should be reworked.

[Suzie97]

Yeah, I had some free time these days and I was bored so I started to work on soundy. Now I won't be able to contribute as much. I will share design discussions though. I'll try to contribute when I can.

[syfds]

hi @Suzie97 , thank your for your contribution and ideas!

[Suzie97]

hi @Suzie97 , thank your for your contribution and ideas!

You are most welome @syfds :)

[Suzie97]

@syfds, I think I've found the solution to this problem. We can extend the window when the button is presses. And for the icon of the button, we can use pan-up and pan-down.

elementary Calculator does something similar:

simplescreenrecorder-2021-07-19_00.05.45.mp4

[syfds]

hi @Suzie97 , good hint! Much better than current approach. Currently I'm fighting with getting auto discovery feature work inside the flatpak and it seem not really good (mDNS isn't working inside of flatpak).

[syfds]

I had no success on revealer but built something similar: https://github.com/syfds/soundy/blob/master/data/screenshot/screenshot-3.png

What do you think about it? The panel is displayed at the bottom (official app has the same behaviour)

[Suzie97]

I had no success on revealer but built something similar: https://github.com/syfds/soundy/blob/master/data/screenshot/screenshot-3.png

What do you think about it? The panel is displayed at the bottom (official app has the same behaviour)

Cool, you might want to change the icon for the toggle button. If something suitable is not available in the elementary pack, I can make you one. Let me know :))