Merge branch 'dev' into database

2025-04-13 17:34:13 -05:00
parent 3c193209b9 a2fb2162ff
commit d4473f98b6
10 changed files with 352 additions and 13 deletions
@@ -174,9 +174,9 @@ func (p *Player) MuteToggle() error {
 }

 // return the current position as an int between 0 and 100 to work with progress bar easily.
-func (p *Player) CurrentPosition() (float64, error) {
-	pos := 100.0 * float64(p.seeker.Position()) / float64(p.seeker.Len())
-	return pos, nil
+func (p *Player) CurrentPosition() (int, error) {
+	pos := math.Round(100.0 * float64(p.seeker.Position()) / float64(p.seeker.Len()))
+	return int(pos), nil
 }

 // TODO: double check best type for percentage parameter
@@ -1 +1,5 @@
 import '@components/audio-player/audio-player.ts';
+import '@node_modules/@shoelace-style/shoelace/dist/themes/light.css';
+import { setBasePath } from '@node_modules/@shoelace-style/shoelace/dist/utilities/base-path';
+
+setBasePath("dist/shoelace")
@@ -5,12 +5,15 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@lit-labs/signals": "^0.1.2",
+		"@shoelace-style/shoelace": "^2.20.1",
 		"lit": "^3.2.1"
 	},
 	"devDependencies": {
 		"ts-lit-plugin": "^2.0.2",
 		"typescript-lit-html-plugin": "^0.9.0",
 		"vite": "^6.2.3",
+		"vite-plugin-static-copy": "^2.3.1",
 		"vite-tsconfig-paths": "^5.1.4"
 	}
 }
@@ -1 +1 @@
-ca82a2e81936c5ea9427701a4c3665d9
+1f0c68f2bbba06f2a24fb43e1238cb42
@@ -8,6 +8,12 @@ importers:

  .:
    dependencies:
+      '@lit-labs/signals':
+        specifier: ^0.1.2
+        version: 0.1.2
+      '@shoelace-style/shoelace':
+        specifier: ^2.20.1
+        version: 2.20.1(@floating-ui/utils@0.2.9)(@types/react@19.1.0)
      lit:
        specifier: ^3.2.1
        version: 3.2.1
@@ -21,6 +27,9 @@ importers:
      vite:
        specifier: ^6.2.3
        version: 6.2.3
+      vite-plugin-static-copy:
+        specifier: ^2.3.1
+        version: 2.3.1(vite@6.2.3)
      vite-tsconfig-paths:
        specifier: ^5.1.4
        version: 5.1.4(typescript@5.2.2)(vite@6.2.3)
@@ -31,6 +40,10 @@ packages:
    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
    engines: {node: '>=6.9.0'}

+  '@ctrl/tinycolor@4.1.0':
+    resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==}
+    engines: {node: '>=14'}
+
  '@emmetio/extract-abbreviation@0.1.6':
    resolution: {integrity: sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw==}

@@ -184,9 +197,26 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@floating-ui/core@1.6.9':
+    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
+
+  '@floating-ui/dom@1.6.13':
+    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
+
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
+  '@lit-labs/signals@0.1.2':
+    resolution: {integrity: sha512-hkOL0ua4ILeHlaJ8IqFKS+Y+dpYznWaDhdikzwt3zJ1/LPz3Etft4OPIMoltzbBJS5pyXPRseD/uWRlET3ImEA==}
+
  '@lit-labs/ssr-dom-shim@1.3.0':
    resolution: {integrity: sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==}

+  '@lit/react@1.0.7':
+    resolution: {integrity: sha512-cencnwwLXQKiKxjfFzSgZRngcWJzUDZi/04E0fSaF86wZgchMdvTyu+lE36DrUfvuus3bH8+xLPrhM1cTjwpzw==}
+    peerDependencies:
+      '@types/react': 17 || 18 || 19
+
  '@lit/reactive-element@2.0.4':
    resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==}

@@ -302,9 +332,22 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@shoelace-style/animations@1.2.0':
+    resolution: {integrity: sha512-avvo1xxkLbv2dgtabdewBbqcJfV0e0zCwFqkPMnHFGbJbBHorRFfMAHh1NG9ymmXn0jW95ibUVH03E1NYXD6Gw==}
+
+  '@shoelace-style/localize@3.2.1':
+    resolution: {integrity: sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA==}
+
+  '@shoelace-style/shoelace@2.20.1':
+    resolution: {integrity: sha512-FSghU95jZPGbwr/mybVvk66qRZYpx5FkXL+vLNpy1Vp8UsdwSxXjIHE3fsvMbKWTKi9UFfewHTkc5e7jAqRYoQ==}
+    engines: {node: '>=14.17.0'}
+
  '@types/estree@1.0.6':
    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}

+  '@types/react@19.1.0':
+    resolution: {integrity: sha512-UaicktuQI+9UKyA4njtDOGBD/67t8YEBt2xdfqu8+gP9hqPUPsiXlNPcpS2gVdjmis5GKPG3fCxbQLVgxsQZ8w==}
+
  '@types/trusted-types@2.0.7':
    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}

@@ -323,6 +366,14 @@ packages:
    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
    engines: {node: '>=8'}

+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
  braces@3.0.3:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
    engines: {node: '>=8'}
@@ -331,6 +382,10 @@ packages:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
    engines: {node: '>=4'}

+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
  cliui@8.0.1:
    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
    engines: {node: '>=12'}
@@ -348,6 +403,14 @@ packages:
  color-name@1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}

+  composed-offset-position@0.0.6:
+    resolution: {integrity: sha512-Q7dLompI6lUwd7LWyIcP66r4WcS9u7AL2h8HaeipiRfCRPLMWqRx8fYsjb4OHi6UQFifO7XtNC2IlEJ1ozIFxw==}
+    peerDependencies:
+      '@floating-ui/utils': ^0.2.5
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
  debug@4.4.0:
    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
    engines: {node: '>=6.0'}
@@ -388,6 +451,10 @@ packages:
    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
    engines: {node: '>=8'}

+  fs-extra@11.3.0:
+    resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==}
+    engines: {node: '>=14.14'}
+
  fsevents@2.3.3:
    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -404,10 +471,17 @@ packages:
  globrex@0.1.2:
    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}

+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
  has-flag@3.0.0:
    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
    engines: {node: '>=4'}

+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
  is-extglob@2.1.1:
    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
    engines: {node: '>=0.10.0'}
@@ -427,6 +501,9 @@ packages:
  jsonc-parser@1.0.3:
    resolution: {integrity: sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g==}

+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+
  leven@3.1.0:
    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
    engines: {node: '>=6'}
@@ -463,6 +540,14 @@ packages:
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true

+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  p-map@7.0.3:
+    resolution: {integrity: sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==}
+    engines: {node: '>=18'}
+
  parse5@5.1.0:
    resolution: {integrity: sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==}

@@ -477,9 +562,16 @@ packages:
    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
    engines: {node: ^10 || ^12 || >=14}

+  qr-creator@1.0.0:
+    resolution: {integrity: sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ==}
+
  queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}

+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
  regenerator-runtime@0.14.1:
    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}

@@ -499,6 +591,9 @@ packages:
  run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}

+  signal-polyfill@0.2.2:
+    resolution: {integrity: sha512-p63Y4Er5/eMQ9RHg0M0Y64NlsQKpiu6MDdhBXpyywRuWiPywhJTpKJ1iB5K2hJEbFZ0BnDS7ZkJ+0AfTuL37Rg==}
+
  source-map-js@1.2.1:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}
@@ -550,6 +645,16 @@ packages:
    engines: {node: '>=14.17'}
    hasBin: true

+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  vite-plugin-static-copy@2.3.1:
+    resolution: {integrity: sha512-EfsPcBm3ewg3UMG8RJaC0ADq6/qnUZnokXx4By4+2cAcipjT9i0Y0owIJGqmZI7d6nxk4qB1q5aXOwNuSyPdyA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+
  vite-tsconfig-paths@5.1.4:
    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
    peerDependencies:
@@ -658,6 +763,8 @@ snapshots:
    dependencies:
      regenerator-runtime: 0.14.1

+  '@ctrl/tinycolor@4.1.0': {}
+
  '@emmetio/extract-abbreviation@0.1.6': {}

  '@esbuild/aix-ppc64@0.25.1':
@@ -735,8 +842,28 @@ snapshots:
  '@esbuild/win32-x64@0.25.1':
    optional: true

+  '@floating-ui/core@1.6.9':
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/dom@1.6.13':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/utils@0.2.9': {}
+
+  '@lit-labs/signals@0.1.2':
+    dependencies:
+      lit: 3.2.1
+      signal-polyfill: 0.2.2
+
  '@lit-labs/ssr-dom-shim@1.3.0': {}

+  '@lit/react@1.0.7(@types/react@19.1.0)':
+    dependencies:
+      '@types/react': 19.1.0
+
  '@lit/reactive-element@2.0.4':
    dependencies:
      '@lit-labs/ssr-dom-shim': 1.3.0
@@ -813,8 +940,30 @@ snapshots:
  '@rollup/rollup-win32-x64-msvc@4.37.0':
    optional: true

+  '@shoelace-style/animations@1.2.0': {}
+
+  '@shoelace-style/localize@3.2.1': {}
+
+  '@shoelace-style/shoelace@2.20.1(@floating-ui/utils@0.2.9)(@types/react@19.1.0)':
+    dependencies:
+      '@ctrl/tinycolor': 4.1.0
+      '@floating-ui/dom': 1.6.13
+      '@lit/react': 1.0.7(@types/react@19.1.0)
+      '@shoelace-style/animations': 1.2.0
+      '@shoelace-style/localize': 3.2.1
+      composed-offset-position: 0.0.6(@floating-ui/utils@0.2.9)
+      lit: 3.2.1
+      qr-creator: 1.0.0
+    transitivePeerDependencies:
+      - '@floating-ui/utils'
+      - '@types/react'
+
  '@types/estree@1.0.6': {}

+  '@types/react@19.1.0':
+    dependencies:
+      csstype: 3.1.3
+
  '@types/trusted-types@2.0.7': {}

  '@vscode/web-custom-data@0.4.13': {}
@@ -829,6 +978,13 @@ snapshots:
    dependencies:
      color-convert: 2.0.1

+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  binary-extensions@2.3.0: {}
+
  braces@3.0.3:
    dependencies:
      fill-range: 7.1.1
@@ -839,6 +995,18 @@ snapshots:
      escape-string-regexp: 1.0.5
      supports-color: 5.5.0

+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
  cliui@8.0.1:
    dependencies:
      string-width: 4.2.3
@@ -857,6 +1025,12 @@ snapshots:

  color-name@1.1.4: {}

+  composed-offset-position@0.0.6(@floating-ui/utils@0.2.9):
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  csstype@3.1.3: {}
+
  debug@4.4.0:
    dependencies:
      ms: 2.1.3
@@ -917,6 +1091,12 @@ snapshots:
    dependencies:
      to-regex-range: 5.0.1

+  fs-extra@11.3.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
  fsevents@2.3.3:
    optional: true

@@ -928,8 +1108,14 @@ snapshots:

  globrex@0.1.2: {}

+  graceful-fs@4.2.11: {}
+
  has-flag@3.0.0: {}

+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
  is-extglob@2.1.1: {}

  is-fullwidth-code-point@3.0.0: {}
@@ -942,6 +1128,12 @@ snapshots:

  jsonc-parser@1.0.3: {}

+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
  leven@3.1.0: {}

  lit-analyzer@2.0.3:
@@ -985,6 +1177,10 @@ snapshots:

  nanoid@3.3.11: {}

+  normalize-path@3.0.0: {}
+
+  p-map@7.0.3: {}
+
  parse5@5.1.0: {}

  picocolors@1.1.1: {}
@@ -997,8 +1193,14 @@ snapshots:
      picocolors: 1.1.1
      source-map-js: 1.2.1

+  qr-creator@1.0.0: {}
+
  queue-microtask@1.2.3: {}

+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
  regenerator-runtime@0.14.1: {}

  require-directory@2.1.1: {}
@@ -1035,6 +1237,8 @@ snapshots:
    dependencies:
      queue-microtask: 1.2.3

+  signal-polyfill@0.2.2: {}
+
  source-map-js@1.2.1: {}

  string-width@4.2.3:
@@ -1084,6 +1288,17 @@ snapshots:

  typescript@5.2.2: {}

+  universalify@2.0.1: {}
+
+  vite-plugin-static-copy@2.3.1(vite@6.2.3):
+    dependencies:
+      chokidar: 3.6.0
+      fast-glob: 3.3.3
+      fs-extra: 11.3.0
+      p-map: 7.0.3
+      picocolors: 1.1.1
+      vite: 6.2.3
+
  vite-tsconfig-paths@5.1.4(typescript@5.2.2)(vite@6.2.3):
    dependencies:
      debug: 4.4.0
@@ -2,11 +2,17 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import './controls/player-controls';
 import './seekbar/seek-bar';
+import '@go/player/Player';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+

 const audioPlayer = () => html`
 <div>
  <player-controls></player-controls>
-  <seek-bar></seek-bar>
+  <div style="width: 50%">
+    <seek-bar></seek-bar>
+  </div>
+  <sl-icon name="alarm"></sl-icon>
 </div>
 `;

@@ -1,14 +1,84 @@
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { LitElement, html, css, type PropertyValues } from 'lit';
+import { customElement, property} from 'lit/decorators.js';
+import {SignalWatcher, watch, signal} from '@lit-labs/signals';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { SlRange } from '@node_modules/@shoelace-style/shoelace/dist/shoelace';

-const seekBar = () => html`
-<progress></progress>
-`;
+const progress = signal(20);

@customElement('seek-bar')
-export class SeekBar extends LitElement {
+export class SeekBar extends SignalWatcher(LitElement) {
+  @property()
+  progressIntervalMillis: number = 1000;

+  @property()
+  isProgressing: boolean = false;
+
+  timerID: number = -1;
+  private rangeRef = createRef<SlRange>();
+
+  constructor(){
+    super();
+    this.stopProgress();
+  }
+  static override styles = css`
+  sl-range::part(base) {
+    --track-color-active: red;
+    --track-color-inactive: white;
+    --track-height: 6px;
+  }
+  sl-range::part(form-control-input) {
+    --sl-color-primary-600: yellow;
+  }
+  `;
  override render() {
-    return seekBar();
+    return html`
+    <sl-range
+    value="${progress.get()}"
+    ${ref(this.rangeRef)}
+    @sl-change="${(event: CustomEvent) => {
+      this.setProgressValue((event.target as SlRange).value);
+      if(this.isProgressing) this.startProgress();
+      else this.stopProgress();
+      }}"
+    @sl-input="${() => {
+      var progressing = this.isProgressing;
+      this.stopProgress();
+      this.isProgressing = progressing;
+    }}"></sl-range>
+    `;
+  }
+
+  init(interval: number, playing: boolean){
+    this.progressIntervalMillis = interval;
+    if(playing)this.startProgress
+  }
+
+  stopProgress(){
+    this.isProgressing = false;
+    clearInterval(this.timerID);
+  }
+
+  startProgress(){
+    this.isProgressing = true;
+    this.timerID = setInterval(this.incrementProgressValue, this.progressIntervalMillis);
+  }
+
+  setProgressValue(val: number){
+    if(val < 0) val = 0;
+    if(val > 100) val = 100;
+    progress.set(val);
+  }
+
+  setProgressInterval(intervalMillis: number){
+    if(intervalMillis < 10) intervalMillis = 10;
+    
+  }
+  async incrementProgressValue(){
+    if(progress.get() <100)
+    {
+      progress.set(progress.get() + 1);
+    }
  }
 }
+
@@ -1,8 +1,31 @@
 import { defineConfig } from "vite";
 import tsConfigPaths from "vite-tsconfig-paths";
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const shoelaceThemePath = 'node_modules/@shoelace-style/shoelace/dist/themes';
+const shoelaceIconAssetPath = 'node_modules/@shoelace-style/shoelace/dist/assets';
+const shoelaceRangePath = 'node_modules/@shoelace-style/shoelace/dist/components/range';

 export default defineConfig({
-  plugins: [tsConfigPaths()],
+  plugins: [
+    tsConfigPaths(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: shoelaceThemePath,
+          dest: 'shoelace',
+        },
+        {
+          src: shoelaceIconAssetPath,
+          dest: 'shoelace',
+        },
+        {
+          src: shoelaceRangePath,
+          dest: 'shoelace/components',
+        },
+      ],
+    }),
+  ],
    server: {
    hmr: {
      host: 'localhost',
@@ -5,6 +5,8 @@ import {player} from '../models';

 export function ChangeVolume(arg1:number):Promise<void>;

+export function CurrentPosition():Promise<number>;
+
 export function Init(arg1:context.Context):Promise<void>;

 export function LoadFile(arg1:string):Promise<void>;
@@ -17,4 +19,8 @@ export function Play():Promise<void>;

 export function Resume():Promise<void>;

+export function Seek(arg1:number):Promise<void>;
+
 export function SetVolume(arg1:player.UserVolume):Promise<void>;
+
+export function TrackLengthInSeconds():Promise<number>;
@@ -6,6 +6,10 @@ export function ChangeVolume(arg1) {
  return window['go']['player']['Player']['ChangeVolume'](arg1);
 }

+export function CurrentPosition() {
+  return window['go']['player']['Player']['CurrentPosition']();
+}
+
 export function Init(arg1) {
  return window['go']['player']['Player']['Init'](arg1);
 }
@@ -30,6 +34,14 @@ export function Resume() {
  return window['go']['player']['Player']['Resume']();
 }

+export function Seek(arg1) {
+  return window['go']['player']['Player']['Seek'](arg1);
+}
+
 export function SetVolume(arg1) {
  return window['go']['player']['Player']['SetVolume'](arg1);
 }
+
+export function TrackLengthInSeconds() {
+  return window['go']['player']['Player']['TrackLengthInSeconds']();
+}