From be2fad3190dce256eb2587f73007edfeeee1df06 Mon Sep 17 00:00:00 2001 From: Caleb Allen Date: Thu, 10 Apr 2025 19:08:57 -0400 Subject: [PATCH 1/5] slowly adding seek bar, now it can increment over time. --- backend/player/player.go | 6 +- frontend/package.json | 2 + frontend/package.json.md5 | 2 +- frontend/pnpm-lock.yaml | 108 ++++++++++++++++++ .../audio-player/seekbar/seek-bar.ts | 74 ++++++++++-- frontend/wailsjs/go/player/Player.d.ts | 6 + frontend/wailsjs/go/player/Player.js | 12 ++ 7 files changed, 199 insertions(+), 11 deletions(-) diff --git a/backend/player/player.go b/backend/player/player.go index 356902b..1be6729 100644 --- a/backend/player/player.go +++ b/backend/player/player.go @@ -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 diff --git a/frontend/package.json b/frontend/package.json index 617c590..0c3aa62 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,6 +5,8 @@ "preview": "vite preview" }, "dependencies": { + "@lit-labs/signals": "^0.1.2", + "@shoelace-style/shoelace": "^2.20.1", "lit": "^3.2.1" }, "devDependencies": { diff --git a/frontend/package.json.md5 b/frontend/package.json.md5 index ff4b82a..edbaca1 100755 --- a/frontend/package.json.md5 +++ b/frontend/package.json.md5 @@ -1 +1 @@ -ca82a2e81936c5ea9427701a4c3665d9 \ No newline at end of file +fe84e1d3c95156e7d4a63999d84646b1 \ No newline at end of file diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index a50355a..ffa6d10 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -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 @@ -31,6 +37,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 +194,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 +329,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==} @@ -348,6 +388,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'} @@ -477,6 +525,9 @@ 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==} @@ -499,6 +550,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'} @@ -658,6 +712,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 +791,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 +889,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': {} @@ -857,6 +955,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 @@ -997,6 +1101,8 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 + qr-creator@1.0.0: {} + queue-microtask@1.2.3: {} regenerator-runtime@0.14.1: {} @@ -1035,6 +1141,8 @@ snapshots: dependencies: queue-microtask: 1.2.3 + signal-polyfill@0.2.2: {} + source-map-js@1.2.1: {} string-width@4.2.3: diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.ts b/frontend/src/components/audio-player/seekbar/seek-bar.ts index 53b9112..1db3a7b 100644 --- a/frontend/src/components/audio-player/seekbar/seek-bar.ts +++ b/frontend/src/components/audio-player/seekbar/seek-bar.ts @@ -1,14 +1,74 @@ -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` - -`; +const progress = signal(20); @customElement('seek-bar') -export class SeekBar extends LitElement { +export class SeekBar extends SignalWatcher(LitElement) { + @property() + trackLengthSeconds: number = 100; + @property() + isPlaying: boolean = true; + + timerID: number = -1; + private rangeRef = createRef(); + + constructor(){ + super(); + this.startProgress(); + } + static override styles = css` + sl-range::part(base) { + --track-color-active: yellow; + --track-color-inactive: white; + --track-height: 6px; + --track-width: 50% + } + `; override render() { - return seekBar(); + return html` + + `; + } + + init(trackLength: number){ + this.trackLengthSeconds = trackLength; + } + + getSeekBarUpdateIntervalMillis(){ + return this.trackLengthSeconds * 10; + } + + // update progress update interval timer thing + // protected override update(changedProperties: PropertyValues): void { + // if (changedProperties.has("trackLengthSeconds")){ + // this.stopProgress(); + // this.startProgress(); + // } + // if(changedProperties.has("isPlaying")){ + // if(this.isPlaying){ + // this.startProgress(); + // } + // else{ + // this.stopProgress(); + // } + // } + // } + + stopProgress(){ + clearInterval(this.timerID); + } + + startProgress(){ + this.timerID = setInterval(this.incrementProgressValue, this.getSeekBarUpdateIntervalMillis()); + } + + async incrementProgressValue(){ + progress.set(progress.get() + 1); } } + diff --git a/frontend/wailsjs/go/player/Player.d.ts b/frontend/wailsjs/go/player/Player.d.ts index 61e1358..5ef53d3 100755 --- a/frontend/wailsjs/go/player/Player.d.ts +++ b/frontend/wailsjs/go/player/Player.d.ts @@ -5,6 +5,8 @@ import {player} from '../models'; export function ChangeVolume(arg1:number):Promise; +export function CurrentPosition():Promise; + export function Init(arg1:context.Context):Promise; export function LoadFile(arg1:string):Promise; @@ -17,4 +19,8 @@ export function Play():Promise; export function Resume():Promise; +export function Seek(arg1:number):Promise; + export function SetVolume(arg1:player.UserVolume):Promise; + +export function TrackLengthInSeconds():Promise; diff --git a/frontend/wailsjs/go/player/Player.js b/frontend/wailsjs/go/player/Player.js index ffc039f..30d250d 100755 --- a/frontend/wailsjs/go/player/Player.js +++ b/frontend/wailsjs/go/player/Player.js @@ -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'](); +} From 18ac5ddc28998083bc122b7f96dae8dcf17f48da Mon Sep 17 00:00:00 2001 From: Caleb Allen Date: Sun, 13 Apr 2025 12:25:05 -0400 Subject: [PATCH 2/5] improved seek bar functionality. --- frontend/index.ts | 2 +- .../components/audio-player/audio-player.ts | 8 ++- .../audio-player/seekbar/seek-bar.ts | 53 +++++++++---------- 3 files changed, 33 insertions(+), 30 deletions(-) diff --git a/frontend/index.ts b/frontend/index.ts index 01636ff..2aaa24c 100644 --- a/frontend/index.ts +++ b/frontend/index.ts @@ -1 +1 @@ -import '@components/audio-player/audio-player.ts'; +import '@components/audio-player/audio-player.ts'; \ No newline at end of file diff --git a/frontend/src/components/audio-player/audio-player.ts b/frontend/src/components/audio-player/audio-player.ts index c0e990e..ece91a7 100644 --- a/frontend/src/components/audio-player/audio-player.ts +++ b/frontend/src/components/audio-player/audio-player.ts @@ -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`
- +
+ +
+
`; diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.ts b/frontend/src/components/audio-player/seekbar/seek-bar.ts index 1db3a7b..fb82a71 100644 --- a/frontend/src/components/audio-player/seekbar/seek-bar.ts +++ b/frontend/src/components/audio-player/seekbar/seek-bar.ts @@ -9,7 +9,7 @@ const progress = signal(20); @customElement('seek-bar') export class SeekBar extends SignalWatcher(LitElement) { @property() - trackLengthSeconds: number = 100; + progressIntervalMillis: number = 1000; @property() isPlaying: boolean = true; @@ -23,52 +23,49 @@ export class SeekBar extends SignalWatcher(LitElement) { } static override styles = css` sl-range::part(base) { - --track-color-active: yellow; + --track-color-active: red; --track-color-inactive: white; --track-height: 6px; - --track-width: 50% } `; override render() { return html` - + `; } - init(trackLength: number){ - this.trackLengthSeconds = trackLength; + init(interval: number, playing: boolean){ + this.progressIntervalMillis = interval; + if(playing)this.startProgress } - - getSeekBarUpdateIntervalMillis(){ - return this.trackLengthSeconds * 10; - } - - // update progress update interval timer thing - // protected override update(changedProperties: PropertyValues): void { - // if (changedProperties.has("trackLengthSeconds")){ - // this.stopProgress(); - // this.startProgress(); - // } - // if(changedProperties.has("isPlaying")){ - // if(this.isPlaying){ - // this.startProgress(); - // } - // else{ - // this.stopProgress(); - // } - // } - // } stopProgress(){ + this.isPlaying = false; clearInterval(this.timerID); } startProgress(){ - this.timerID = setInterval(this.incrementProgressValue, this.getSeekBarUpdateIntervalMillis()); + this.isPlaying = 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(){ - progress.set(progress.get() + 1); + if(progress.get() <100) + { + progress.set(progress.get() + 1); + } } } From 819e14a65697b4190caa1920d5b4990ddab5185c Mon Sep 17 00:00:00 2001 From: Logan Jones Date: Sun, 13 Apr 2025 14:50:41 -0500 Subject: [PATCH 3/5] fixed shoelace static dependencies w/ vite --- frontend/index.ts | 6 +- frontend/package.json | 1 + frontend/package.json.md5 | 2 +- frontend/pnpm-lock.yaml | 107 ++++++++++++++++++ .../audio-player/seekbar/seek-bar.ts | 3 + frontend/vite.config.mts | 25 +++- 6 files changed, 141 insertions(+), 3 deletions(-) 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', From 71f707b5c228495b80e04eef68793a54a7be2a66 Mon Sep 17 00:00:00 2001 From: Caleb Allen Date: Sun, 13 Apr 2025 17:59:13 -0400 Subject: [PATCH 4/5] fixed seek bar holding behavior --- .../audio-player/seekbar/seek-bar.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.ts b/frontend/src/components/audio-player/seekbar/seek-bar.ts index ba15bcd..8e01de4 100644 --- a/frontend/src/components/audio-player/seekbar/seek-bar.ts +++ b/frontend/src/components/audio-player/seekbar/seek-bar.ts @@ -12,14 +12,14 @@ export class SeekBar extends SignalWatcher(LitElement) { progressIntervalMillis: number = 1000; @property() - isPlaying: boolean = true; + isPlaying: boolean = false; timerID: number = -1; private rangeRef = createRef(); constructor(){ super(); - this.startProgress(); + this.stopProgress(); } static override styles = css` sl-range::part(base) { @@ -33,9 +33,19 @@ export class SeekBar extends SignalWatcher(LitElement) { `; override render() { return html` - + if(this.isPlaying) this.startProgress(); + else this.stopProgress(); + }}" + @sl-input="${() => { + var playing = this.isPlaying; + this.stopProgress(); + this.isPlaying = playing; + }}"> `; } From a2fb2162ff7f0618d386e9d85ad75120186111b5 Mon Sep 17 00:00:00 2001 From: Caleb Allen Date: Sun, 13 Apr 2025 18:04:53 -0400 Subject: [PATCH 5/5] renamed isPlaying to isProgressing --- .../src/components/audio-player/seekbar/seek-bar.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.ts b/frontend/src/components/audio-player/seekbar/seek-bar.ts index 8e01de4..56ea427 100644 --- a/frontend/src/components/audio-player/seekbar/seek-bar.ts +++ b/frontend/src/components/audio-player/seekbar/seek-bar.ts @@ -12,7 +12,7 @@ export class SeekBar extends SignalWatcher(LitElement) { progressIntervalMillis: number = 1000; @property() - isPlaying: boolean = false; + isProgressing: boolean = false; timerID: number = -1; private rangeRef = createRef(); @@ -38,13 +38,13 @@ export class SeekBar extends SignalWatcher(LitElement) { ${ref(this.rangeRef)} @sl-change="${(event: CustomEvent) => { this.setProgressValue((event.target as SlRange).value); - if(this.isPlaying) this.startProgress(); + if(this.isProgressing) this.startProgress(); else this.stopProgress(); }}" @sl-input="${() => { - var playing = this.isPlaying; + var progressing = this.isProgressing; this.stopProgress(); - this.isPlaying = playing; + this.isProgressing = progressing; }}"> `; } @@ -55,12 +55,12 @@ export class SeekBar extends SignalWatcher(LitElement) { } stopProgress(){ - this.isPlaying = false; + this.isProgressing = false; clearInterval(this.timerID); } startProgress(){ - this.isPlaying = true; + this.isProgressing = true; this.timerID = setInterval(this.incrementProgressValue, this.progressIntervalMillis); }