library picker lit element w reactive properties

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

@@ -14,7 +14,7 @@ export class PlayerControls extends LitElement {
   <button>
     <img src="/src/assets/images/icons/music/skip-prev-solid.svg"></img>
   </button>
-  <button @click="${this.onPlayPauseButtonClick}">
+  <button @click="${this.onPlayPauseClick}">
     <img src="/src/assets/images/icons/music/play-solid.svg"></img>
   </button>
   <button>
@@ -27,14 +27,13 @@ export class PlayerControls extends LitElement {
 `;
   }
 
-  onPlayPauseButtonClick(event: { target: HTMLButtonElement; }) {
+  onPlayPauseClick(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);
+        console.error("there is an error with playing " + err);
       });
     }
     catch (err) {

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

@@ -8,7 +8,7 @@ const seekBar = () => html`
 @customElement('seek-bar')
 export class SeekBar extends LitElement {
 
-  render() {
+  override render() {
     return seekBar();
   }
 }

frontend/src/components/config/library-picker/library-picker.ts

@@ -0,0 +1,49 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { GetDir, SetDir } from '@go/library/Library.js';
+import { DirectoryPicker } from '@go/frontendbindings/FrontendBindings.js';
+
+@customElement('library-picker')
+export class LibraryPicker extends LitElement {
+
+  @property({ type: String })
+  currentLibraryDirectoryText: string = "No Library Directory selected";
+
+  override render() {
+    return html`
+      <div>
+        <label>${this.currentLibraryDirectoryText}</label>
+        <button @click="${this.onSelectLibraryClick}">Choose Directory...</button>
+      </div>
+    `;
+  }
+
+  constructor() {
+    super();
+    GetDir().
+      then((result) => {
+        if (result.length === 0) { return; }
+        this.currentLibraryDirectoryText = result;
+      }).catch((err) => { console.error(err) })
+  }
+
+  onSelectLibraryClick() {
+    try {
+      DirectoryPicker()
+        .then((result: string) => {
+          SetDir(result).then(() => {
+            this.currentLibraryDirectoryText = result;
+          }).catch((err: string) => {
+            console.error("There is an error with saving selected directory: " + err);
+          });
+        })
+        .catch((err) => {
+          console.error("There is an error with directory picker: " + err);
+        });
+    }
+    catch (err) {
+      console.error(err);
+    }
+  }
+
+}