Sound Recorder to modern HIG III

GSOC Progress Last Update. New changes and final form of Sound Recorder.

Thu, 27 August 20204 minute read #gnome #gsoc

This is my last GSoC update article.

The application now implements the Design mockups. The whole application is reincarnated. It is now fulfilling GNOME’s modern Human Interface Guidelines with a new cool look. Alongside this, some other issues are also fixed with the help of Bilal Elmoussaoui.

The goal of my GSoC was to bring Sound Recorder to the current Human Interface Guidelines. When I started looking into the app, it turns out it had a very old codebase that was implemented in the imports.lang module via imports.lang.Class and imports.lang.Interface. The application was so simple and small so we decided to completely rewrite it. Now the question is if we gonna rewrite why not make in modern lang like rust? The answer is GNOME has to have an application written in all those languages where GObject bindings existed and the app is simple to understand so newcomers can easily adapt things.

The goal still was to update Sound Recorder to a more modern interface. And the correct way to make an interface with GTK these days is to use GTK Builder. This allows us to have a separate XML file for the UI. It eases development and minor interface tweaks. This is what I did when rewriting the application. I also used libhandy widgets to make the application adaptive to smaller screens.

The mockups provided by the Design team featured a new waveform to visualize the recordings. When implementing that visualization, I had to consider migrating old recordings so they could use this new waveform representation as well.

The application now using flatpak portal for new recordings and it can also transfer your old recordings to xdg data dir, and the transition is even seamless that you won’t even feel it. Here’s good article about XDG Base Directory Specification.

There are also some new features added like Pause/Resume capabilities in recording, playback controls for recorded audio.

image New Recording View image Seek throught playback image Rename Recording UI image Undo deleted recording notification

Most of those are visual changes. During the rewrite, we had to spend time on architecturing the code efficiently. This is a rather technical issue, which I would be happy to discuss with anyone interested in our Matrix channel.

And don’t forget to look at the new options menu in list row, adopting according to your window side.

Here are some changelogs:

  1. All widgets are transferred to GObject Classes with glade UI resources.
  2. Reorganized code structure in recording and recording list class.
  3. Removed preferences dialog and moved settings to the menu button.
  4. Added a separate view for recording.
  5. Pause and cancel the recording functionality added.
  6. HdyApplicationWindow and HdyHeaderBar added for a new look.
  7. HdyClamp is added for clamping it to max-width.
  8. New waveform added for recording view and list row.
  9. HdyWindowHandle added for window dragging during the recording view.
  10. HdySqueezer added to the buttons to make view adaptive.
  11. Recording re-naming functionality added to the row.
  12. Delete and export recording options are added with revealer.
  13. ListRow waveform dragging capability added for the player to seek through along with seeking buttons.
  14. GstPlayer is implemented instead of traditional Gst pipelines.
  15. Flatpak portal (GtkFileChooserNative) implemented for recordings.
  16. Undo deleted recording notification added.
  17. Waveform and whole UI adaptable to the Adwaita-dark theme.

These are the things have done so far in GSoC’20 and issue #40 “Design: Bring Sound Recorder Up To Modern HIG” is now CLOSED.

There can be some bugs, right now we are hunting them down.

Here is link to all my commits :

If you are interested in gjs and GTK application here some learning materials:
GJS: gjs gitlab
Most helpful -> gjs-docs

Here is final look of Sound Recorder.


The whole project is mentored by Bilal Elmoussaoui and Felipe Borges. I appreciate their work and efforts behind me to pull out this project. I feel grateful that got a chance to work with them.

Big thanks to Tobias Bernard for creating such an nice UI for Sound Recorder, Appreciate your help and your work.

Big thanks to Thibault Martin for helping me writing my blogs and appreciating my work during progress.

I learned lots of new things during this journey. Once again Thanks Bilal and Felipe for selecting Me.

It was a great experience.