@molecule/app-audio-player-react 1.0.0 → 1.0.2

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.
Files changed (2) hide show
  1. package/README.md +128 -0
  2. package/package.json +16 -9
package/README.md ADDED
@@ -0,0 +1,128 @@
1
+ <!--
2
+ AUTO-GENERATED — DO NOT EDIT THIS FILE.
3
+ Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
4
+ Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
5
+ To change this document, edit the module-level JSDoc in src/index.ts.
6
+ Generated: 2026-08-04T01:50:04.267Z
7
+ -->
8
+
9
+ # @molecule/app-audio-player-react
10
+
11
+ > **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
12
+ > It is written to be read by coding agents as much as by people, and is generated from this
13
+ > package's source — edit `src/index.ts` JSDoc, not this file.
14
+
15
+ HTML5 audio player chrome — play/pause, scrub bar, elapsed/total time,
16
+ and a mute toggle, over a hidden `<audio>` element. Use for podcasts,
17
+ voice notes, music previews, narrated lessons.
18
+
19
+ ## Quick Start
20
+
21
+ ```tsx
22
+ import { AudioPlayer } from '@molecule/app-audio-player-react'
23
+
24
+ ;<AudioPlayer
25
+ src="/audio/episode-42.mp3"
26
+ title="Episode 42: Getting Started"
27
+ subtitle="The Molecule Podcast"
28
+ onPlay={() => console.log('playing')}
29
+ onEnded={() => console.log('finished')}
30
+ />
31
+ ```
32
+
33
+ ## Type
34
+
35
+ `feature`
36
+
37
+ ## Installation
38
+
39
+ ```bash
40
+ npm install @molecule/app-audio-player-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
41
+ npm install -D @types/react
42
+ ```
43
+
44
+ ## API
45
+
46
+ ### Interfaces
47
+
48
+ #### `AudioPlayerProps`
49
+
50
+ Props for {@link AudioPlayer}.
51
+
52
+ ```typescript
53
+ interface AudioPlayerProps {
54
+ src: string
55
+ /** Optional title / track name. */
56
+ title?: ReactNode
57
+ /** Optional artist / source label. */
58
+ subtitle?: ReactNode
59
+ /** Optional waveform / visualizer slot rendered above the controls. */
60
+ visualizer?: ReactNode
61
+ /** Initial muted state. */
62
+ defaultMuted?: boolean
63
+ /** Autoplay (browser may block). */
64
+ autoPlay?: boolean
65
+ /** Callbacks. */
66
+ onPlay?: () => void
67
+ onPause?: () => void
68
+ onEnded?: () => void
69
+ /** Extra classes. */
70
+ className?: string
71
+ }
72
+ ```
73
+
74
+ ### Functions
75
+
76
+ #### `AudioPlayer(props)`
77
+
78
+ HTML5 audio player chrome — play/pause, scrub, time, mute, optional
79
+ visualizer slot. Use for podcasts, voice notes, music previews,
80
+ narrated lessons.
81
+
82
+ ```typescript
83
+ function AudioPlayer({
84
+ src,
85
+ title,
86
+ subtitle,
87
+ visualizer,
88
+ defaultMuted,
89
+ autoPlay,
90
+ onPlay,
91
+ onPause,
92
+ onEnded,
93
+ className,
94
+ }: AudioPlayerProps): JSX.Element
95
+ ```
96
+
97
+ - `props` — Component props (see {@link AudioPlayerProps}).
98
+
99
+ ## Injection Notes
100
+
101
+ ### Requirements
102
+
103
+ Peer dependencies:
104
+
105
+ - `@molecule/app-react` ^1.0.1
106
+ - `@molecule/app-ui` ^1.0.1
107
+ - `@molecule/app-ui-react` ^1.0.1
108
+ - `react` ^18.0.0 || ^19.0.0
109
+
110
+ ### Runtime Dependencies
111
+
112
+ - `@molecule/app-react`
113
+ - `@molecule/app-ui`
114
+ - `@molecule/app-ui-react`
115
+ - `react`
116
+
117
+ There is NO volume slider — only a mute toggle; and no playback-rate
118
+ or skip controls. The optional `visualizer` prop is a free-form node
119
+ slot rendered above the controls (bring your own waveform). `autoPlay`
120
+ is passed to the `<audio>` element and is routinely blocked by
121
+ browsers until user interaction — never rely on it. Duration renders
122
+ `0:00` until `loadedmetadata` fires (`preload="metadata"`).
123
+ Translations come from the companion `@molecule/app-locales-audio-player`
124
+ locale bond.
125
+
126
+ ## Translations
127
+
128
+ Translation strings are provided by `@molecule/app-locales-audio-player`.
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@molecule/app-audio-player-react",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "HTML5 audio player chrome — play/pause, scrub, time, volume, optional waveform slot",
5
+ "homepage": "https://www.molecule.dev/packages/app-audio-player-react",
5
6
  "type": "module",
6
7
  "main": "dist/index.js",
7
8
  "types": "dist/index.d.ts",
@@ -17,7 +18,8 @@
17
18
  }
18
19
  },
19
20
  "files": [
20
- "dist"
21
+ "dist",
22
+ "README.md"
21
23
  ],
22
24
  "keywords": [
23
25
  "molecule",
@@ -25,22 +27,27 @@
25
27
  "react"
26
28
  ],
27
29
  "license": "Apache-2.0",
30
+ "repository": {
31
+ "type": "git",
32
+ "url": "https://github.com/molecule-dev/molecule.git",
33
+ "directory": "packages/app/features/audio-player-react"
34
+ },
28
35
  "peerDependencies": {
29
- "@molecule/app-react": "^1.0.0",
30
- "@molecule/app-ui": "^1.0.0",
31
- "@molecule/app-ui-react": "^1.0.0",
36
+ "@molecule/app-react": "^1.0.1",
37
+ "@molecule/app-ui": "^1.0.1",
38
+ "@molecule/app-ui-react": "^1.0.1",
32
39
  "react": "^18.0.0 || ^19.0.0"
33
40
  },
34
41
  "devDependencies": {
35
- "@molecule/app-react": "1.0.0",
36
- "@molecule/app-ui": "1.0.0",
37
- "@molecule/app-ui-react": "1.0.0",
42
+ "@molecule/app-react": "1.5.1",
43
+ "@molecule/app-ui": "1.1.1",
44
+ "@molecule/app-ui-react": "1.0.2",
38
45
  "@types/node": "26.1.2",
39
46
  "@types/react": "19.2.17",
40
47
  "@types/react-dom": "19.2.3",
41
48
  "react": "19.2.8",
42
49
  "react-dom": "19.2.8",
43
50
  "typescript": "6.0.3",
44
- "vitest": "4.1.10"
51
+ "vitest": "4.1.11"
45
52
  }
46
53
  }