@ghchinoy/lit-audio-ui 0.4.16 → 0.4.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENT_SKILL.md +23 -0
- package/README.md +8 -0
- package/custom-elements.json +1701 -1670
- package/dist/components/atoms/ui-audio-progress-slider.js +3 -1
- package/dist/components/atoms/ui-audio-volume-slider.js +101 -2
- package/dist/components/molecules/ui-scrolling-waveform.js +3 -3
- package/dist/components/molecules/ui-waveform.js +3 -3
- package/dist/components/providers/ui-audio-provider.js +4 -3
- package/dist/scream-audio-ui.umd.js +117 -25
- package/dist/src/components/atoms/ui-audio-volume-slider.d.ts +2 -0
- package/dist/src/components/molecules/ui-scrolling-waveform.d.ts +1 -0
- package/dist/src/components/molecules/ui-waveform.d.ts +1 -0
- package/dist/standalone/scream-audio-ui.standalone.js +2591 -2305
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/dist/_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js +0 -7
package/AGENT_SKILL.md
CHANGED
|
@@ -55,3 +55,26 @@ For development without microphone access, enable the `simulation` property on `
|
|
|
55
55
|
- **CORS:** Ensure `crossorigin="anonymous"` is set on audio/video tags.
|
|
56
56
|
- **Layout:** Use `positioning="popover"` for `md-menu` inside 3D containers.
|
|
57
57
|
- **Performance:** In plain HTML projects, prefer the single-file `.es.js` bundle to minimize network waterfall.
|
|
58
|
+
|
|
59
|
+
### 7. Explicit Typings for Strict Mode (GTS)
|
|
60
|
+
When integrating into strict TypeScript environments, explicitly type your providers to avoid `Unexpected any` errors.
|
|
61
|
+
```ts
|
|
62
|
+
import type { AudioProviderElement, SpeechProviderElement } from '@ghchinoy/lit-audio-ui';
|
|
63
|
+
|
|
64
|
+
const audioEl = document.querySelector('ui-audio-provider') as AudioProviderElement;
|
|
65
|
+
if (audioEl.state.isPlaying) {
|
|
66
|
+
audioEl.pause();
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### 8. Required Fonts & Icons
|
|
71
|
+
Do not forget to inject the Material Symbols font into the host document's `<head>`, otherwise icons (play, pause, volume) will render as fallback text:
|
|
72
|
+
```html
|
|
73
|
+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
### 9. Component API Enhancements (v0.4.17+)
|
|
78
|
+
- **Streaming Audio Waveforms:** For long/streamed audio where the browser cannot decode the full buffer, use the `peaks` property on `<ui-waveform>` and `<ui-scrolling-waveform>`. Provide a lightweight array of floats (0.0 to 1.0) generated by your backend to bypass client-side decoding.
|
|
79
|
+
- **Vertical Volume Slider:** Use `<ui-audio-volume-slider variant="popover">` to conserve horizontal space in compact music players.
|
|
80
|
+
|
package/README.md
CHANGED
|
@@ -34,6 +34,14 @@ import '@ghchinoy/lit-audio-ui/atoms/ui-audio-play-button.js';
|
|
|
34
34
|
import '@ghchinoy/lit-audio-ui/molecules/ui-live-waveform.js';
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
+
### 4. Required Fonts & Icons
|
|
38
|
+
This library utilizes [Material Symbols](https://fonts.google.com/icons) for iconography. Ensure you include the font in your document `<head>`:
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
|
|
37
45
|
### 3. Use in HTML
|
|
38
46
|
Once imported, custom elements are registered and used like standard HTML tags:
|
|
39
47
|
|