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
    },
    resizable: false
  });

  win.loadFile('index.html');
}

app.on('ready', createWindow);

2. Next, remove the h1 element from the Music Player label as you no longer it. Now, we need to tune the cover image.
3. Declare a new cover-image class in the player.css stylesheet and use the following set of rules to make the image fit the available space nicely:

.cover-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: 300px;
}

The style isn't going to work until you update the index.html file and assign it to the img element, which holds the album cover.

4. Add the cover-image class, as shown in the following code:

<img class="cover-image" data-amplitude-song-info="cover_art_url" />

5. Next, you should wrap up all the time-related elements in the div element using the song-progress-container CSS class. Update the code so that it looks as follows:

<div class="song-progress-container">
      <div>
        <span class="amplitude-current-minutes"></span>:<span
          class="amplitude-current-seconds"
        ></span>
      </div>

      <progress class="amplitude-song-played-progress"></progress>

      <div>
        <span class="amplitude-duration-minutes"></span>:<span
          class="amplitude-duration-seconds"
        ></span>
      </div>
    </div>

6. Append the following styles to the player.css file:

div.song-progress-container {
  display: grid;
  grid-template-columns: 1fr 10fr 1fr;
}

progress.amplitude-song-played-progress {
  width: 100%;
}

7. Now, gather all the metadata fields inside the div contain with the song-info-container class. This allows us to apply styles to all the fields within it:

<div class="song-info-container">
  <div data-amplitude-song-info="name"></div>
  <div data-amplitude-song-info="album"></div>
  <div data-amplitude-song-info="artist"></div>
</div>

8. Append the song-info-container style implementation to the player.css file.

9. For now, we only need to center the text horizontally:

.song-info-container {
  text-align: center;
}

10. Now, our lovely music player application looks like this:

Now we can focus on the features we've implemented and add much more functionality. Don't forget to read the AmplitudeJS documentation and check out all available CSS elements: https://521dimensions.com/open-source/amplitudejs/docs.

In the next section, we are going to review the final structure of our application.