Add title tags to controls

src/components/player/player.ts

@@ -561,32 +561,41 @@ export class Album extends LitElement {
       <button
         class="btn"
         @click=${() => this._previous()}
-        aria-label="previous track"
+        aria-label="Previous track"
+        title="Previous track"
       >
         ${previousIcon}
       </button>
       <button
         class="btn"
         @click=${() => this._togglePlayPause()}
-        aria-label="play or pause"
+        aria-label="${this.isPlaying ? 'Pause' : 'Play'} track"
+        title="${this.isPlaying ? 'Pause' : 'Play'} track"
       >
         ${this.isPlaying ? pauseIcon : playIcon}
       </button>
-      <button class="btn" @click=${() => this._next()} aria-label="next track">
+      <button
+        class="btn"
+        @click=${() => this._next()}
+        aria-label="next track"
+        title="Next track"
+      >
         ${nextIcon}
       </button>
       <button class="btn" style="display:none">${volumeIcon}</button>
       <button
         class="btn md-up ${this.isLoved ? 'active' : ''}"
         @click=${() => this._toggleLoved()}
-        aria-label="love or unlove track"
+        aria-label="${this.isLoved ? 'un' : ''}love track"
+        title="${this.isLoved ? 'un' : ''}love track"
       >
         ${heartIcon}
       </button>
       <button
         class="btn md-up ${this.isShuffled ? 'active' : ''}"
         @click=${() => this._toggleShuffled()}
-        aria-label="shuffle or unshuffle playlist"
+        aria-label="${this.isShuffled ? 'un' : ''}shuffle playlist"
+        title="${this.isShuffled ? 'un' : ''}shuffle playlist"
       >
         ${randomIcon}
       </button>

src/styles/controls.ts

@@ -18,6 +18,7 @@ export default css`
       opacity 0.2s ease-in-out;
     height: 100%;
     position: relative;
+    opacity: 0.5;
   }
   .controls .btn svg {
     margin: 0 1px;
@@ -29,10 +30,12 @@ export default css`
     color: var(--primary);
     background: var(--background3);
     outline: none;
+    opacity: 1;
   }
   .controls .btn.active {
     background: var(--primary) !important;
     color: var(--letter-color) !important;
+    opacity: 1;
   }
   .controls .btn:hover:before {
     content: '';