@markgrafhq/markgraf-react 0.1.0
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/LICENSE +21 -0
- package/README.md +90 -0
- package/dist/markgraf-react.css +288 -0
- package/dist/markgraf-react.d.ts +80 -0
- package/dist/markgraf-react.js +16000 -0
- package/package.json +42 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Mark Eibes
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# @markgrafhq/markgraf-react
|
|
2
|
+
|
|
3
|
+
React hook + component for embedding [markgraf](https://github.com/i-am-the-slime/markgraf) animations. Drives play/pause/seek imperatively and exposes `time`, `currentKeyframe`, and `playing` as reactive state.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @markgrafhq/markgraf-react
|
|
9
|
+
# or: npm install @markgrafhq/markgraf-react
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Also pull in the embed CSS for canvas styling:
|
|
13
|
+
|
|
14
|
+
```js
|
|
15
|
+
import "@markgrafhq/markgraf-embed/css";
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## `<MarkgrafPlayer src=... />`
|
|
19
|
+
|
|
20
|
+
Headless component — renders a `<canvas>` (default) or `<svg>` with the scene drawn directly into it. Bring your own controls.
|
|
21
|
+
|
|
22
|
+
```jsx
|
|
23
|
+
import { MarkgrafPlayer } from "@markgrafhq/markgraf-react";
|
|
24
|
+
|
|
25
|
+
const src = `seed 1
|
|
26
|
+
frame v1 {
|
|
27
|
+
+node client "Client"
|
|
28
|
+
+node api "API"
|
|
29
|
+
+edge client api
|
|
30
|
+
client -> api "GET"
|
|
31
|
+
}`;
|
|
32
|
+
|
|
33
|
+
export default function App() {
|
|
34
|
+
return <MarkgrafPlayer src={src} />;
|
|
35
|
+
// Or: <MarkgrafPlayer src={src} renderer="svg" />
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## `useMarkgraf(src, opts?)` — custom UI
|
|
40
|
+
|
|
41
|
+
```jsx
|
|
42
|
+
import { useMarkgraf } from "@markgrafhq/markgraf-react";
|
|
43
|
+
|
|
44
|
+
export function Player({ src }) {
|
|
45
|
+
const api = useMarkgraf(src); // canvas
|
|
46
|
+
// const api = useMarkgraf(src, { renderer: "svg" });
|
|
47
|
+
return (
|
|
48
|
+
<div>
|
|
49
|
+
<canvas ref={api.elementRef} style={{ width: 600 }} />
|
|
50
|
+
<button onClick={api.toggle}>{api.playing ? "Pause" : "Play"}</button>
|
|
51
|
+
<input
|
|
52
|
+
type="range"
|
|
53
|
+
min={0}
|
|
54
|
+
max={api.duration}
|
|
55
|
+
step={0.01}
|
|
56
|
+
value={api.time}
|
|
57
|
+
onChange={(e) => api.seek(parseFloat(e.target.value))}
|
|
58
|
+
/>
|
|
59
|
+
<span>
|
|
60
|
+
{api.time.toFixed(2)} / {api.duration.toFixed(2)} — {api.keyframe || "—"}
|
|
61
|
+
</span>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Returned API
|
|
68
|
+
|
|
69
|
+
| Field | Type | Notes |
|
|
70
|
+
| -------------- | ------------------------------------- | -------------------------------------------------- |
|
|
71
|
+
| `elementRef` | `Ref<HTMLCanvasElement \| SVGSVGElement>` | attach to a `<canvas>` (default) or `<svg>` |
|
|
72
|
+
| `time` | `number` | seconds, updates each animation frame |
|
|
73
|
+
| `keyframe` | `string` | name of the current scene span |
|
|
74
|
+
| `playing` | `boolean` | |
|
|
75
|
+
| `duration` | `number` | total seconds; 0 until `ready` |
|
|
76
|
+
| `ready` | `boolean` | true after parse + layout + first render |
|
|
77
|
+
| `play()` | `() => void` | |
|
|
78
|
+
| `pause()` | `() => void` | |
|
|
79
|
+
| `toggle()` | `() => void` | |
|
|
80
|
+
| `seek(t)` | `(seconds: number) => void` | clamped to `[0, duration]`, pauses playback |
|
|
81
|
+
| `setSpeed(x)` | `(speed: number) => void` | `1.0` is normal |
|
|
82
|
+
|
|
83
|
+
### Renderer choice
|
|
84
|
+
|
|
85
|
+
- **`canvas`** (default) — Canvas2D with DPR-aware scaling and label springs. Fastest, best for many tokens.
|
|
86
|
+
- **`svg`** — Inline SVG. Easier to inspect/style, scales crisply at any zoom, no DPR concerns. No spring labels.
|
|
87
|
+
|
|
88
|
+
## License
|
|
89
|
+
|
|
90
|
+
MIT
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'Ioskeley Mono';
|
|
3
|
+
src: url('./IoskeleyMono-Regular.woff2') format('woff2');
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
font-display: swap;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.markgraf-embed {
|
|
9
|
+
--mg-bg: #ffffff;
|
|
10
|
+
--mg-fg: #111111;
|
|
11
|
+
--mg-bar-bg: #111111;
|
|
12
|
+
--mg-bar-fg: #ffffff;
|
|
13
|
+
--mg-muted: #9a9a9a;
|
|
14
|
+
--mg-accent: #ffffff;
|
|
15
|
+
--mg-track: #111111;
|
|
16
|
+
--mg-track-hover: #111111;
|
|
17
|
+
position: relative;
|
|
18
|
+
border-radius: 10px;
|
|
19
|
+
background: transparent;
|
|
20
|
+
color: var(--mg-fg);
|
|
21
|
+
font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.markgraf-embed canvas[data-mg="stage"] {
|
|
26
|
+
width: 100%;
|
|
27
|
+
display: block;
|
|
28
|
+
max-height: var(--mg-max-height, 90svh);
|
|
29
|
+
object-fit: contain;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.markgraf-embed :focus,
|
|
33
|
+
.markgraf-embed :focus-visible {
|
|
34
|
+
outline: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Big centered play hint shown while paused. Hidden as soon as a play
|
|
38
|
+
button anywhere in the embed flips to data-mg-playing="1". */
|
|
39
|
+
.markgraf-embed [data-mg="play-overlay"] {
|
|
40
|
+
position: absolute;
|
|
41
|
+
inset: 0;
|
|
42
|
+
margin: auto;
|
|
43
|
+
width: 72px;
|
|
44
|
+
height: 72px;
|
|
45
|
+
border-radius: 50%;
|
|
46
|
+
background: rgba(0, 0, 0, 0.55);
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
opacity: 0;
|
|
49
|
+
transform: scale(0.85);
|
|
50
|
+
transition: opacity 0.12s ease, transform 0.12s ease;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.markgraf-embed [data-mg="play-overlay"]::before {
|
|
54
|
+
content: "";
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
margin: auto;
|
|
58
|
+
width: 32px;
|
|
59
|
+
height: 32px;
|
|
60
|
+
background: #fff;
|
|
61
|
+
-webkit-mask: var(--mg-icon-play) center / contain no-repeat;
|
|
62
|
+
mask: var(--mg-icon-play) center / contain no-repeat;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.markgraf-embed:has([data-mg="play"][data-mg-playing="0"]) [data-mg="play-overlay"] {
|
|
66
|
+
opacity: 1;
|
|
67
|
+
transform: scale(1);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.markgraf-embed [data-mg="bar"] {
|
|
71
|
+
position: absolute;
|
|
72
|
+
left: 0;
|
|
73
|
+
right: 0;
|
|
74
|
+
bottom: 0;
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
gap: 8px;
|
|
78
|
+
padding: 6px 8px;
|
|
79
|
+
background: rgba(255, 255, 255, 0.92);
|
|
80
|
+
color: var(--mg-fg);
|
|
81
|
+
opacity: 0;
|
|
82
|
+
transform: translateY(2px);
|
|
83
|
+
transition: opacity 0.08s ease, transform 0.08s ease;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.markgraf-embed:hover [data-mg="bar"],
|
|
88
|
+
.markgraf-embed:focus-within [data-mg="bar"] {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
transform: translateY(0);
|
|
91
|
+
pointer-events: auto;
|
|
92
|
+
transition: opacity 0.16s ease, transform 0.16s ease;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.markgraf-embed [data-mg="play"] {
|
|
96
|
+
background: transparent;
|
|
97
|
+
color: var(--mg-fg);
|
|
98
|
+
border: 0;
|
|
99
|
+
border-radius: 999px;
|
|
100
|
+
width: 22px;
|
|
101
|
+
height: 22px;
|
|
102
|
+
padding: 0;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
display: inline-flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
transition: background 0.1s ease;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.markgraf-embed [data-mg="play"]:hover {
|
|
111
|
+
background: rgba(0, 0, 0, 0.08);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Heroicons v2 solid play / pause, rendered as a mask so the icon picks up
|
|
115
|
+
currentColor (light-mode black, dark-mode white via the bar override). */
|
|
116
|
+
.markgraf-embed [data-mg="play"]::before {
|
|
117
|
+
content: "";
|
|
118
|
+
display: block;
|
|
119
|
+
width: 14px;
|
|
120
|
+
height: 14px;
|
|
121
|
+
background: currentColor;
|
|
122
|
+
-webkit-mask: var(--mg-icon-play) center / contain no-repeat;
|
|
123
|
+
mask: var(--mg-icon-play) center / contain no-repeat;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.markgraf-embed [data-mg="play"][data-mg-playing="1"]::before {
|
|
127
|
+
-webkit-mask: var(--mg-icon-pause) center / contain no-repeat;
|
|
128
|
+
mask: var(--mg-icon-pause) center / contain no-repeat;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.markgraf-embed {
|
|
132
|
+
--mg-icon-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653Z'/></svg>");
|
|
133
|
+
--mg-icon-pause: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z'/></svg>");
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.markgraf-embed [data-mg="time"] {
|
|
137
|
+
font-variant-numeric: tabular-nums;
|
|
138
|
+
font-size: 11px;
|
|
139
|
+
color: var(--mg-fg);
|
|
140
|
+
white-space: nowrap;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.markgraf-embed [data-mg="speed"] {
|
|
144
|
+
background: transparent;
|
|
145
|
+
border: 1px solid currentColor;
|
|
146
|
+
border-radius: 4px;
|
|
147
|
+
padding: 1px 4px;
|
|
148
|
+
color: var(--mg-fg);
|
|
149
|
+
font: 11px/1 inherit;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.markgraf-embed [data-mg="speed"] option {
|
|
154
|
+
color: var(--mg-fg);
|
|
155
|
+
background: var(--mg-bg);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.markgraf-embed [data-mg="scrub-wrap"] {
|
|
159
|
+
position: relative;
|
|
160
|
+
flex: 1;
|
|
161
|
+
display: flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.markgraf-embed [data-mg="ticks"] {
|
|
166
|
+
position: absolute;
|
|
167
|
+
left: 7px;
|
|
168
|
+
right: 7px;
|
|
169
|
+
top: 50%;
|
|
170
|
+
transform: translateY(-50%);
|
|
171
|
+
height: 18px;
|
|
172
|
+
pointer-events: none;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.markgraf-embed .mg-tick {
|
|
176
|
+
position: absolute;
|
|
177
|
+
top: 50%;
|
|
178
|
+
width: 4px;
|
|
179
|
+
height: 4px;
|
|
180
|
+
margin-left: -2px;
|
|
181
|
+
margin-top: -2px;
|
|
182
|
+
border-radius: 50%;
|
|
183
|
+
background: #fff;
|
|
184
|
+
opacity: 0.7;
|
|
185
|
+
pointer-events: auto;
|
|
186
|
+
cursor: pointer;
|
|
187
|
+
transition: transform 0.1s ease, opacity 0.1s ease;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.markgraf-embed .mg-tick:hover {
|
|
191
|
+
opacity: 1;
|
|
192
|
+
transform: scale(1.6);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.markgraf-embed .mg-tick::after {
|
|
196
|
+
content: attr(data-label);
|
|
197
|
+
position: absolute;
|
|
198
|
+
bottom: 100%;
|
|
199
|
+
left: 50%;
|
|
200
|
+
transform: translate(-50%, -4px);
|
|
201
|
+
background: rgba(15, 23, 42, 0.95);
|
|
202
|
+
color: #fff;
|
|
203
|
+
font-size: 11px;
|
|
204
|
+
padding: 2px 6px;
|
|
205
|
+
border-radius: 4px;
|
|
206
|
+
white-space: nowrap;
|
|
207
|
+
opacity: 0;
|
|
208
|
+
pointer-events: none;
|
|
209
|
+
transition: opacity 0.1s ease;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.markgraf-embed .mg-tick:hover::after {
|
|
213
|
+
opacity: 1;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Custom-styled scrubber. Cross-browser range inputs are notoriously ugly,
|
|
217
|
+
so we strip the native chrome and rebuild from CSS primitives. */
|
|
218
|
+
.markgraf-embed [data-mg="scrub"] {
|
|
219
|
+
-webkit-appearance: none;
|
|
220
|
+
appearance: none;
|
|
221
|
+
width: 100%;
|
|
222
|
+
height: 18px;
|
|
223
|
+
background: transparent;
|
|
224
|
+
cursor: pointer;
|
|
225
|
+
margin: 0;
|
|
226
|
+
position: relative;
|
|
227
|
+
z-index: 1;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-runnable-track {
|
|
231
|
+
height: 4px;
|
|
232
|
+
background: var(--mg-track);
|
|
233
|
+
border-radius: 999px;
|
|
234
|
+
transition: background 0.15s ease;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.markgraf-embed [data-mg="scrub"]:hover::-webkit-slider-runnable-track {
|
|
238
|
+
background: var(--mg-track-hover);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-track {
|
|
242
|
+
height: 4px;
|
|
243
|
+
background: var(--mg-track);
|
|
244
|
+
border-radius: 999px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-thumb {
|
|
248
|
+
-webkit-appearance: none;
|
|
249
|
+
appearance: none;
|
|
250
|
+
width: 14px;
|
|
251
|
+
height: 14px;
|
|
252
|
+
border-radius: 50%;
|
|
253
|
+
background: #111;
|
|
254
|
+
border: 2px solid #fff;
|
|
255
|
+
margin-top: -5px;
|
|
256
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
257
|
+
transition: transform 0.08s ease;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.markgraf-embed [data-mg="scrub"]:hover::-webkit-slider-thumb {
|
|
261
|
+
transform: scale(1.15);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-thumb {
|
|
265
|
+
width: 14px;
|
|
266
|
+
height: 14px;
|
|
267
|
+
border-radius: 50%;
|
|
268
|
+
background: #111;
|
|
269
|
+
border: 2px solid #fff;
|
|
270
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
@media (prefers-color-scheme: dark) {
|
|
274
|
+
.markgraf-embed {
|
|
275
|
+
--mg-bg: #111111;
|
|
276
|
+
--mg-fg: #ffffff;
|
|
277
|
+
--mg-track: #ffffff;
|
|
278
|
+
--mg-track-hover: #ffffff;
|
|
279
|
+
}
|
|
280
|
+
.markgraf-embed [data-mg="bar"] {
|
|
281
|
+
background: rgba(17, 17, 17, 0.92);
|
|
282
|
+
}
|
|
283
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-thumb,
|
|
284
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-thumb {
|
|
285
|
+
background: #fff;
|
|
286
|
+
border-color: #111;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
// Type definitions for @markgrafhq/markgraf-react
|
|
2
|
+
// Hand-written — the underlying implementation is compiled from PureScript.
|
|
3
|
+
|
|
4
|
+
import type { FC, MutableRefObject } from "react";
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Reactive view of a mounted markgraf player. `time`, `keyframe`, and
|
|
8
|
+
* `playing` update on every animation frame; the imperative methods are
|
|
9
|
+
* stable across renders.
|
|
10
|
+
*
|
|
11
|
+
* `elementRef` is typed by the renderer you chose:
|
|
12
|
+
* - default / `"canvas"` → `Ref<HTMLCanvasElement | null>`
|
|
13
|
+
* - `"svg"` → `Ref<SVGSVGElement | null>`
|
|
14
|
+
*/
|
|
15
|
+
export interface MarkgrafApi<E extends Element = HTMLCanvasElement> {
|
|
16
|
+
/**
|
|
17
|
+
* Attach to a `<canvas>` (default) or `<svg>` element. The player
|
|
18
|
+
* draws directly into the element — no wrapper div.
|
|
19
|
+
*/
|
|
20
|
+
readonly elementRef: MutableRefObject<E | null>;
|
|
21
|
+
/** Seconds since the start of the animation. */
|
|
22
|
+
readonly time: number;
|
|
23
|
+
/** Name of the scene span currently being rendered. Empty before `ready`. */
|
|
24
|
+
readonly keyframe: string;
|
|
25
|
+
readonly playing: boolean;
|
|
26
|
+
/** Total seconds. `0` until `ready` is `true`. */
|
|
27
|
+
readonly duration: number;
|
|
28
|
+
/** `true` once parse + layout + first render have completed. */
|
|
29
|
+
readonly ready: boolean;
|
|
30
|
+
play(): void;
|
|
31
|
+
pause(): void;
|
|
32
|
+
toggle(): void;
|
|
33
|
+
/** Clamped to `[0, duration]`. Pauses the player. */
|
|
34
|
+
seek(seconds: number): void;
|
|
35
|
+
/** `1.0` is normal playback speed. */
|
|
36
|
+
setSpeed(speed: number): void;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export interface UseMarkgrafOptions<R extends "canvas" | "svg" = "canvas"> {
|
|
40
|
+
/** `"canvas"` (default) or `"svg"`. Determines the type of `elementRef`. */
|
|
41
|
+
renderer?: R;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Mount a markgraf player and drive it imperatively.
|
|
46
|
+
*
|
|
47
|
+
* ```tsx
|
|
48
|
+
* // Canvas (default)
|
|
49
|
+
* const api = useMarkgraf(src);
|
|
50
|
+
* return <canvas ref={api.elementRef} />;
|
|
51
|
+
*
|
|
52
|
+
* // SVG
|
|
53
|
+
* const api = useMarkgraf(src, { renderer: "svg" });
|
|
54
|
+
* return <svg ref={api.elementRef} />;
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
* When `src` or `renderer` changes the player is torn down and re-mounted.
|
|
58
|
+
*/
|
|
59
|
+
export function useMarkgraf(src: string): MarkgrafApi<HTMLCanvasElement>;
|
|
60
|
+
export function useMarkgraf(
|
|
61
|
+
src: string,
|
|
62
|
+
opts: UseMarkgrafOptions<"canvas">,
|
|
63
|
+
): MarkgrafApi<HTMLCanvasElement>;
|
|
64
|
+
export function useMarkgraf(
|
|
65
|
+
src: string,
|
|
66
|
+
opts: UseMarkgrafOptions<"svg">,
|
|
67
|
+
): MarkgrafApi<SVGSVGElement>;
|
|
68
|
+
|
|
69
|
+
export interface MarkgrafPlayerProps {
|
|
70
|
+
src: string;
|
|
71
|
+
/** `"canvas"` (default) or `"svg"`. */
|
|
72
|
+
renderer?: "canvas" | "svg";
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Minimal player component — renders the canvas or svg element directly with
|
|
77
|
+
* the markgraf scene drawn into it. Bring your own controls via
|
|
78
|
+
* `useMarkgraf` for anything richer.
|
|
79
|
+
*/
|
|
80
|
+
export const MarkgrafPlayer: FC<MarkgrafPlayerProps>;
|