Improving the user interface

At this point, you have a draft implementation of the user interface, along with a set of playback control and visualization components. Now is a perfect time to take a break and revisit the look and feel of our application.

In this section, we are going to polish the interface and make it more appealing to our users.

First of all, let's change the default size of the player. You may have already noticed that, in its current form, it takes up less space than the size of the window. Follow these steps to get started:

1. Switch to the main.js file and set its size to 480x500. This should be enough for now. You can use the following code for reference:

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 480,
    height: 500,
    webPreferences: {
      nodeIntegration: true...