player skeleton frontend

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

@@ -1,9 +1,14 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { Play } from '@go/player/Player';
+import './controls/player-controls';
+import './seekbar/seek-bar';
 
 const audioPlayer = () => html`
-<h1>Hello World</h1>
+<div>
+<player-controls></player-controls>
+<seek-bar></seek-bar>
+</div>
 `;
 
 @customElement('audio-player')
@@ -13,19 +18,4 @@ export class AudioPlayer extends LitElement {
     return audioPlayer();
   }
 
-  onPlayPauseButtonClick()  {
-    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);
-    }
-  }
 }

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

@@ -1,5 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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/audio-player/controls/player-controls.ts

@@ -0,0 +1,44 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Play } from '@go/player/Player';
+
+@customElement('player-controls')
+export class PlayerControls extends LitElement {
+
+  render() {
+    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.onPlayPauseButtonClick}">
+    <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>
+`;
+  }
+
+  onPlayPauseButtonClick(event: { target: HTMLButtonElement; }) {
+    try {
+      Play().then((result) => {
+        console.log(result)
+        event.target.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);
+    }
+  }
+}

frontend/src/components/audio-player/seekbar/seek-bar.ts

@@ -0,0 +1,14 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+const seekBar = () => html`
+<progress></progress>
+`;
+
+@customElement('seek-bar')
+export class SeekBar extends LitElement {
+
+  render() {
+    return seekBar();
+  }
+}