diff --git a/frontend/index.ts b/frontend/index.ts index 2aaa24c..84bf224 100644 --- a/frontend/index.ts +++ b/frontend/index.ts @@ -1 +1,5 @@ -import '@components/audio-player/audio-player.ts'; \ No newline at end of file +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") diff --git a/frontend/package.json b/frontend/package.json index 0c3aa62..62eb2bb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "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" } } diff --git a/frontend/package.json.md5 b/frontend/package.json.md5 index edbaca1..eeb7c11 100755 --- a/frontend/package.json.md5 +++ b/frontend/package.json.md5 @@ -1 +1 @@ -fe84e1d3c95156e7d4a63999d84646b1 \ No newline at end of file +1f0c68f2bbba06f2a24fb43e1238cb42 \ No newline at end of file diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index ffa6d10..49a5e94 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -27,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) @@ -363,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'} @@ -371,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'} @@ -436,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} @@ -452,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'} @@ -475,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'} @@ -511,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==} @@ -531,6 +568,10 @@ packages: 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==} @@ -604,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: @@ -927,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 @@ -937,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 @@ -1021,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 @@ -1032,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: {} @@ -1046,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: @@ -1089,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: {} @@ -1105,6 +1197,10 @@ snapshots: queue-microtask@1.2.3: {} + readdirp@3.6.0: + dependencies: + picomatch: 2.3.1 + regenerator-runtime@0.14.1: {} require-directory@2.1.1: {} @@ -1192,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 diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.ts b/frontend/src/components/audio-player/seekbar/seek-bar.ts index fb82a71..ba15bcd 100644 --- a/frontend/src/components/audio-player/seekbar/seek-bar.ts +++ b/frontend/src/components/audio-player/seekbar/seek-bar.ts @@ -27,6 +27,9 @@ export class SeekBar extends SignalWatcher(LitElement) { --track-color-inactive: white; --track-height: 6px; } + sl-range::part(form-control-input) { + --sl-color-primary-600: yellow; + } `; override render() { return html` diff --git a/frontend/vite.config.mts b/frontend/vite.config.mts index c2af426..ca48d7a 100644 --- a/frontend/vite.config.mts +++ b/frontend/vite.config.mts @@ -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',