added pnpm, lit, manually load runtime on frontend

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

@@ -0,0 +1,5 @@
+<section>
+  <button onclick="onPlayPauseButtonClick()">
+    <img src="/src/assets/images/icons/music/play-solid.svg" id="playPauseButtonIcon" />
+  </button>
+</section>

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

@@ -0,0 +1,39 @@
+import { LitElement, html } from 'lit';
+import { Play } from '/wailsjs/go/player/Player';
+
+export class Player extends LitElement {
+  static properties = {
+    version: {},
+  };
+
+  constructor() {
+    super();
+    this.version = 'STARTING';
+  }
+
+  render() {
+    return html`
+    <p>Welcome to the Lit tutorial!</p>
+    <p>This is the ${this.version} code.</p>
+    `;
+  }
+
+  onPlayPauseButtonClick = function() {
+    let playPauseButtonIcon = document.getElementById("playPauseButtonIcon");
+    try {
+      Play().then((result) => {
+        console.log(result)
+        playPauseButtonIcon.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
+      }).catch((err) => {
+        console.log("There is an error with playing")
+        console.error(err);
+      });
+    }
+    catch (err) {
+      console.error(err);
+    }
+  }
+}
+customElements.define('player-controls', Player);
+
+

frontend/src/components/player.js

@@ -1,21 +0,0 @@
-import {LitElement, html} from 'lit';
-
-export class Player extends LitElement {
-  static properties = {
-    version: {},
-  };
-
-  constructor() {
-    super();
-    this.version = 'STARTING';
-  }
-
-  render() {
-    return html`
-    <p>Welcome to the Lit tutorial!</p>
-    <p>This is the ${this.version} code.</p>
-    `;
-  }
-}
-customElements.define('player-controls', Player);
-