improves media player control

removes media player volume control (will be added later)
adds control for next, previous and play/pause
adds media player cover image
adds media title instead of media player name

UIClasses/MediaPlayer.js

@@ -1,20 +1,58 @@
-class MediaPlayer extends Slider {
-    updateState(state) {
-        console.log(state)
-        this.name = (state.attributes || {}).friendly_name || this.id;
-        this.state = state.attributes.volume_level * 100;
-        this.render();
-      }
-    
-      onSliderMove(event) {
-          super.onSliderMove(event)
-          this.sendNewState()
-      }
+class MediaPlayer extends Base {
+  updateState(state) {
+    this.name = (state.attributes || {}).media_title || (state.attributes || {}).friendly_name || this.id;
+    this.state = state;
+    this.render();
+  }
 
-      sendNewState() {
-        this.mm.sendSocketNotification("SET_MEDIAPLAYER_VOLUME", {
-          entity: this.id,
-          volume_level: this.sliderState / 100,
-        });
-      }
-}
+  getControls() {
+    const controlDiv = document.createElement("div");
+    controlDiv.id = `control-${this.id}`;
+    controlDiv.classList.add("media_player_control");
+
+    const previous = this.getButton("step-backward");
+    previous.onclick = () => {
+      this.mm.sendSocketNotification("MEDIA_PLAYER_PREVIOUS", {
+        entity: this.id,
+      });
+    };
+    controlDiv.appendChild(previous);
+
+    let playPause = this.getButton("play");
+    if (this.state.state === "playing") {
+      playPause = this.getButton("pause");
+    }
+    playPause.onclick = () => {
+      this.mm.sendSocketNotification("MEDIA_PLAYER_PLAYPAUSE", {
+        entity: this.id,
+      });
+    };
+    controlDiv.appendChild(playPause);
+
+    const next = this.getButton("step-forward");
+    next.onclick = () => {
+      this.mm.sendSocketNotification("MEDIA_PLAYER_NEXT", {
+        entity: this.id,
+      });
+    };
+    controlDiv.appendChild(next);
+
+    return controlDiv;
+  }
+
+  getButton(icon) {
+    const button = document.createElement("div");
+    button.innerHTML = `<i class="fas fa-${icon}"></i>`;
+    return button;
+  }
+
+  render() {
+    super.render();
+    const container = document.getElementById(this.id);
+    if (container) {
+      container.appendChild(this.getControls());
+    }
+    console.log(this.state)
+    container.style.backgroundImage = `url("${this.mm.config.host}:${this.mm.config.port}${this.state.attributes.entity_picture}")`
+  }
+}