removed pico, play button toggles

frontend/src/components/audio-player/controls/player-controls.ts

@@ -1,43 +1,50 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { Play } from '@go/player/Player';
+import { customElement, property } from 'lit/decorators.js';
+import { Play, Pause } from '@go/player/Player';
 
 @customElement('player-controls')
 export class PlayerControls extends LitElement {
 
+  @property({ type: Boolean })
+  isPlaying = false
+
   override render() {
+    var imagePath = this.isPlaying ? 
+      "/src/assets/images/icons/music/pause-solid.svg" : "/src/assets/images/icons/music/play-solid.svg"
     return html`
-<div>
-  <button>
-    <img src="/src/assets/images/icons/music/shuffle.svg"></img>
-  </button>
-  <button>
-    <img src="/src/assets/images/icons/music/skip-prev-solid.svg"></img>
-  </button>
-  <button @click="${this.onPlayPauseClick}">
-    <img src="/src/assets/images/icons/music/play-solid.svg"></img>
-  </button>
-  <button>
-    <img src="/src/assets/images/icons/music/skip-next-solid.svg"></img>
-  </button>
-  <button>
-    <img src="/src/assets/images/icons/music/repeat.svg"></img>
-  </button>
-</div>
-`;
+    <div>
+      <button>
+        <img src="/src/assets/images/icons/music/shuffle.svg"></img>
+      </button>
+      <button>
+        <img src="/src/assets/images/icons/music/skip-prev-solid.svg"></img>
+      </button>
+      <button @click="${this.onPlayPauseClick}">
+        <img src="${imagePath}"></img>
+      </button>
+      <button>
+        <img src="/src/assets/images/icons/music/skip-next-solid.svg"></img>
+      </button>
+      <button>
+        <img src="/src/assets/images/icons/music/repeat.svg"></img>
+      </button>
+    </div>
+    `;
   }
 
-  onPlayPauseClick(event: { target: HTMLButtonElement; }) {
-    try {
-      Play().then((result) => {
-        console.log(result)
-        event.target.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
+  onPlayPauseClick() {
+    if (this.isPlaying) {
+      Play().then(() => {
       }).catch((err) => {
         console.error("there is an error with playing " + err);
       });
+    } else {
+      Pause().then(() => {
+      }).catch((err) => {
+        console.error("there is an error with pausing " + err);
+      });
+
     }
-    catch (err) {
-      console.error(err);
-    }
+    this.isPlaying = !this.isPlaying
   }
 }