@hyperframes/studio 0.7.70 → 0.7.71
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/dist/assets/{hyperframes-player-DpKeYLEo.js → hyperframes-player-C1X90psg.js} +1 -1
- package/dist/assets/{index-CAeU317U.js → index-CSCh2Vrp.js} +115 -115
- package/dist/assets/{index-CbX-xoud.js → index-DzxDHPR1.js} +1 -1
- package/dist/assets/{index-DXjAllII.js → index-nY4lLBqM.js} +1 -1
- package/dist/index.html +1 -1
- package/package.json +7 -7
- package/src/components/editor/colorGradingScopePatch.test.ts +3 -3
- package/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx +2 -2
- package/src/components/editor/propertyPanelFlatPrimitives.test.tsx +5 -5
- package/src/components/editor/useColorGradingController.test.ts +28 -28
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as P}from"./index-
|
|
1
|
+
import{g as P}from"./index-CSCh2Vrp.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
|
package/dist/index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
7
7
|
<title>HyperFrames Studio</title>
|
|
8
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-CSCh2Vrp.js"></script>
|
|
9
9
|
<link rel="stylesheet" crossorigin href="/assets/index-Ceyz8Qt2.css">
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hyperframes/studio",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.71",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"gsap": "^3.13.0",
|
|
47
47
|
"marked": "^14.1.4",
|
|
48
48
|
"mediabunny": "^1.45.3",
|
|
49
|
-
"@hyperframes/core": "0.7.
|
|
50
|
-
"@hyperframes/
|
|
51
|
-
"@hyperframes/player": "0.7.
|
|
52
|
-
"@hyperframes/
|
|
53
|
-
"@hyperframes/
|
|
49
|
+
"@hyperframes/core": "0.7.71",
|
|
50
|
+
"@hyperframes/parsers": "0.7.71",
|
|
51
|
+
"@hyperframes/player": "0.7.71",
|
|
52
|
+
"@hyperframes/sdk": "0.7.71",
|
|
53
|
+
"@hyperframes/studio-server": "0.7.71"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@types/react": "19",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"vite": "^6.4.2",
|
|
66
66
|
"vitest": "^3.2.4",
|
|
67
67
|
"zustand": "^5.0.0",
|
|
68
|
-
"@hyperframes/producer": "0.7.
|
|
68
|
+
"@hyperframes/producer": "0.7.71"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
71
|
"react": "19",
|
|
@@ -5,15 +5,15 @@ describe("patchMediaColorGradingInHtml", () => {
|
|
|
5
5
|
it("adds color grading to video and image tags only", () => {
|
|
6
6
|
const { html, count } = patchMediaColorGradingInHtml(
|
|
7
7
|
`<div><video id="v"></video><img id="i" /><audio id="a"></audio></div>`,
|
|
8
|
-
`{"preset":"
|
|
8
|
+
`{"preset":"warm-daylight"}`,
|
|
9
9
|
);
|
|
10
10
|
|
|
11
11
|
expect(count).toBe(2);
|
|
12
12
|
expect(html).toContain(
|
|
13
|
-
`video id="v" data-color-grading="{"preset":"
|
|
13
|
+
`video id="v" data-color-grading="{"preset":"warm-daylight"}"`,
|
|
14
14
|
);
|
|
15
15
|
expect(html).toContain(
|
|
16
|
-
`img id="i" data-color-grading="{"preset":"
|
|
16
|
+
`img id="i" data-color-grading="{"preset":"warm-daylight"}"`,
|
|
17
17
|
);
|
|
18
18
|
expect(html).toContain(`<audio id="a"></audio>`);
|
|
19
19
|
});
|
|
@@ -243,11 +243,11 @@ describe("FlatColorGradingSection — Preset + LUT", () => {
|
|
|
243
243
|
// needs its own accessible name via the dedicated ariaLabel prop.
|
|
244
244
|
expect(presetSelect.getAttribute("aria-label")).toBe("Preset");
|
|
245
245
|
act(() => {
|
|
246
|
-
presetSelect.value = "
|
|
246
|
+
presetSelect.value = "bright-pop";
|
|
247
247
|
presetSelect.dispatchEvent(new Event("change", { bubbles: true }));
|
|
248
248
|
});
|
|
249
249
|
expect(onCommitColorGrading).toHaveBeenCalledTimes(1);
|
|
250
|
-
expect(onCommitColorGrading.mock.calls[0][0].preset).toBe("
|
|
250
|
+
expect(onCommitColorGrading.mock.calls[0][0].preset).toBe("bright-pop");
|
|
251
251
|
act(() => root.unmount());
|
|
252
252
|
});
|
|
253
253
|
|
|
@@ -1159,20 +1159,20 @@ describe("FlatSelectRow — label/value options", () => {
|
|
|
1159
1159
|
const { host, root } = renderInto(
|
|
1160
1160
|
<FlatSelectRow
|
|
1161
1161
|
label="Preset"
|
|
1162
|
-
value="
|
|
1162
|
+
value="clean-studio"
|
|
1163
1163
|
options={[
|
|
1164
1164
|
{ value: "neutral", label: "Neutral" },
|
|
1165
|
-
{ value: "
|
|
1166
|
-
{ value: "
|
|
1165
|
+
{ value: "clean-studio", label: "Clean Studio" },
|
|
1166
|
+
{ value: "bright-pop", label: "Bright Pop" },
|
|
1167
1167
|
]}
|
|
1168
1168
|
tier="explicitCustom"
|
|
1169
1169
|
onChange={vi.fn()}
|
|
1170
1170
|
/>,
|
|
1171
1171
|
);
|
|
1172
1172
|
const select = host.querySelector("select");
|
|
1173
|
-
expect(select?.value).toBe("
|
|
1173
|
+
expect(select?.value).toBe("clean-studio");
|
|
1174
1174
|
const options = Array.from(host.querySelectorAll("option")).map((o) => o.textContent);
|
|
1175
|
-
expect(options).toEqual(["Neutral", "
|
|
1175
|
+
expect(options).toEqual(["Neutral", "Clean Studio", "Bright Pop"]);
|
|
1176
1176
|
act(() => root.unmount());
|
|
1177
1177
|
});
|
|
1178
1178
|
|
|
@@ -7,15 +7,15 @@ import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
|
|
|
7
7
|
import { useColorGradingController } from "./useColorGradingController";
|
|
8
8
|
import type { DomEditSelection } from "./domEditing";
|
|
9
9
|
|
|
10
|
-
function
|
|
11
|
-
const next = normalizeHfColorGrading({ preset: "
|
|
12
|
-
if (!next) throw new Error("expected
|
|
10
|
+
function brightPopGrading() {
|
|
11
|
+
const next = normalizeHfColorGrading({ preset: "bright-pop", intensity: 1 });
|
|
12
|
+
if (!next) throw new Error("expected bright-pop preset to normalize");
|
|
13
13
|
return next;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
function
|
|
17
|
-
const next = normalizeHfColorGrading({ preset: "
|
|
18
|
-
if (!next) throw new Error("expected
|
|
16
|
+
function warmDaylightGrading() {
|
|
17
|
+
const next = normalizeHfColorGrading({ preset: "warm-daylight", intensity: 1 });
|
|
18
|
+
if (!next) throw new Error("expected warm-daylight preset to normalize");
|
|
19
19
|
return next;
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -120,9 +120,9 @@ describe("useColorGradingController", () => {
|
|
|
120
120
|
const onSetAttributeLive = vi.fn();
|
|
121
121
|
const { root, getState } = renderHook(onSetAttributeLive);
|
|
122
122
|
act(() => {
|
|
123
|
-
getState().commitColorGrading(
|
|
123
|
+
getState().commitColorGrading(brightPopGrading());
|
|
124
124
|
});
|
|
125
|
-
expect(getState().grading.preset).toBe("
|
|
125
|
+
expect(getState().grading.preset).toBe("bright-pop");
|
|
126
126
|
expect(onSetAttributeLive).not.toHaveBeenCalled();
|
|
127
127
|
act(() => {
|
|
128
128
|
vi.advanceTimersByTime(400);
|
|
@@ -130,7 +130,7 @@ describe("useColorGradingController", () => {
|
|
|
130
130
|
expect(onSetAttributeLive).toHaveBeenCalledTimes(1);
|
|
131
131
|
const [attr, value] = onSetAttributeLive.mock.calls[0] as [string, string];
|
|
132
132
|
expect(attr).toBe("color-grading");
|
|
133
|
-
expect(value).toContain("
|
|
133
|
+
expect(value).toContain("bright-pop");
|
|
134
134
|
act(() => root.unmount());
|
|
135
135
|
vi.useRealTimers();
|
|
136
136
|
});
|
|
@@ -149,9 +149,9 @@ describe("useColorGradingController", () => {
|
|
|
149
149
|
);
|
|
150
150
|
const { root, getState } = renderHook(onSetAttributeLive);
|
|
151
151
|
act(() => {
|
|
152
|
-
getState().commitColorGrading(
|
|
152
|
+
getState().commitColorGrading(brightPopGrading());
|
|
153
153
|
});
|
|
154
|
-
expect(getState().grading.preset).toBe("
|
|
154
|
+
expect(getState().grading.preset).toBe("bright-pop");
|
|
155
155
|
act(() => {
|
|
156
156
|
vi.advanceTimersByTime(400);
|
|
157
157
|
});
|
|
@@ -170,9 +170,9 @@ describe("useColorGradingController", () => {
|
|
|
170
170
|
const onSetAttributeLive = vi.fn().mockRejectedValue(new Error("disk full"));
|
|
171
171
|
const { root, getState } = renderHook(onSetAttributeLive);
|
|
172
172
|
act(() => {
|
|
173
|
-
getState().commitColorGrading(
|
|
173
|
+
getState().commitColorGrading(brightPopGrading());
|
|
174
174
|
});
|
|
175
|
-
expect(getState().grading.preset).toBe("
|
|
175
|
+
expect(getState().grading.preset).toBe("bright-pop");
|
|
176
176
|
act(() => {
|
|
177
177
|
vi.advanceTimersByTime(400);
|
|
178
178
|
});
|
|
@@ -182,7 +182,7 @@ describe("useColorGradingController", () => {
|
|
|
182
182
|
await Promise.resolve();
|
|
183
183
|
});
|
|
184
184
|
// Reverted to "neutral" (the last confirmed-good value, from before this
|
|
185
|
-
// commit) instead of permanently showing "
|
|
185
|
+
// commit) instead of permanently showing "bright-pop" as if it had saved.
|
|
186
186
|
expect(getState().grading.preset).toBe("neutral");
|
|
187
187
|
expect(getState().runtimeStatus.state).toBe("unavailable");
|
|
188
188
|
act(() => root.unmount());
|
|
@@ -206,7 +206,7 @@ describe("useColorGradingController", () => {
|
|
|
206
206
|
makeElement({ id: "s1-bg" }),
|
|
207
207
|
);
|
|
208
208
|
act(() => {
|
|
209
|
-
getState().commitColorGrading(
|
|
209
|
+
getState().commitColorGrading(brightPopGrading());
|
|
210
210
|
});
|
|
211
211
|
// Let the debounce fire while still on s1-bg — the persist call is now
|
|
212
212
|
// genuinely in flight (its promise won't settle until resolveA() below).
|
|
@@ -243,7 +243,7 @@ describe("useColorGradingController", () => {
|
|
|
243
243
|
let capturedOnSettledA: ((ok: boolean) => void) | undefined;
|
|
244
244
|
const onSetAttributeLive = vi
|
|
245
245
|
.fn()
|
|
246
|
-
// Edit A (
|
|
246
|
+
// Edit A (bright-pop): captures its onSettled and never resolves until
|
|
247
247
|
// resolveA() is called below — simulates a slow persist.
|
|
248
248
|
.mockImplementationOnce(
|
|
249
249
|
(_attr: string, _value: string | null, onSettled?: (ok: boolean) => void) => {
|
|
@@ -253,7 +253,7 @@ describe("useColorGradingController", () => {
|
|
|
253
253
|
});
|
|
254
254
|
},
|
|
255
255
|
)
|
|
256
|
-
// Edit B (
|
|
256
|
+
// Edit B (warm-daylight): settles immediately and successfully.
|
|
257
257
|
.mockImplementationOnce(
|
|
258
258
|
(_attr: string, _value: string | null, onSettled?: (ok: boolean) => void) => {
|
|
259
259
|
onSettled?.(true);
|
|
@@ -263,7 +263,7 @@ describe("useColorGradingController", () => {
|
|
|
263
263
|
const { root, getState } = renderHook(onSetAttributeLive);
|
|
264
264
|
|
|
265
265
|
act(() => {
|
|
266
|
-
getState().commitColorGrading(
|
|
266
|
+
getState().commitColorGrading(brightPopGrading());
|
|
267
267
|
});
|
|
268
268
|
act(() => {
|
|
269
269
|
vi.advanceTimersByTime(400);
|
|
@@ -272,13 +272,13 @@ describe("useColorGradingController", () => {
|
|
|
272
272
|
|
|
273
273
|
// B commits on the SAME element before A's persist has settled.
|
|
274
274
|
act(() => {
|
|
275
|
-
getState().commitColorGrading(
|
|
275
|
+
getState().commitColorGrading(warmDaylightGrading());
|
|
276
276
|
});
|
|
277
277
|
act(() => {
|
|
278
278
|
vi.advanceTimersByTime(400);
|
|
279
279
|
});
|
|
280
280
|
expect(onSetAttributeLive).toHaveBeenCalledTimes(2); // B's persist has already settled (mock resolves sync)
|
|
281
|
-
expect(getState().grading.preset).toBe("
|
|
281
|
+
expect(getState().grading.preset).toBe("warm-daylight");
|
|
282
282
|
|
|
283
283
|
// NOW A's stale persist finally settles as a FAILURE — must not revert
|
|
284
284
|
// `grading` (which now correctly shows B's newer edit) back to the
|
|
@@ -292,7 +292,7 @@ describe("useColorGradingController", () => {
|
|
|
292
292
|
await Promise.resolve();
|
|
293
293
|
await Promise.resolve();
|
|
294
294
|
});
|
|
295
|
-
expect(getState().grading.preset).toBe("
|
|
295
|
+
expect(getState().grading.preset).toBe("warm-daylight");
|
|
296
296
|
act(() => root.unmount());
|
|
297
297
|
vi.useRealTimers();
|
|
298
298
|
});
|
|
@@ -300,7 +300,7 @@ describe("useColorGradingController", () => {
|
|
|
300
300
|
it("resetGrading returns to the neutral preset", () => {
|
|
301
301
|
const { root, getState } = renderHook(vi.fn());
|
|
302
302
|
act(() => {
|
|
303
|
-
getState().commitColorGrading(
|
|
303
|
+
getState().commitColorGrading(brightPopGrading());
|
|
304
304
|
});
|
|
305
305
|
act(() => {
|
|
306
306
|
getState().resetGrading();
|
|
@@ -315,9 +315,9 @@ describe("useColorGradingController", () => {
|
|
|
315
315
|
makeElement({ id: "s1-bg" }),
|
|
316
316
|
);
|
|
317
317
|
act(() => {
|
|
318
|
-
getState().commitColorGrading(
|
|
318
|
+
getState().commitColorGrading(brightPopGrading());
|
|
319
319
|
});
|
|
320
|
-
expect(getState().grading.preset).toBe("
|
|
320
|
+
expect(getState().grading.preset).toBe("bright-pop");
|
|
321
321
|
// A different element, with no persisted grading of its own — without a
|
|
322
322
|
// reset, this hook (unlike the legacy component it was extracted from,
|
|
323
323
|
// which remounts via a `key={selectionIdentityKey}`) would keep showing
|
|
@@ -337,9 +337,9 @@ describe("useColorGradingController", () => {
|
|
|
337
337
|
makeElement({ id: "bg", sourceFile: "index.html" }),
|
|
338
338
|
);
|
|
339
339
|
act(() => {
|
|
340
|
-
getState().commitColorGrading(
|
|
340
|
+
getState().commitColorGrading(brightPopGrading());
|
|
341
341
|
});
|
|
342
|
-
expect(getState().grading.preset).toBe("
|
|
342
|
+
expect(getState().grading.preset).toBe("bright-pop");
|
|
343
343
|
rerenderWithElement(makeElement({ id: "bg", sourceFile: "sub-comp.html" }));
|
|
344
344
|
expect(getState().grading.preset).toBe("neutral");
|
|
345
345
|
act(() => root.unmount());
|
|
@@ -353,7 +353,7 @@ describe("useColorGradingController", () => {
|
|
|
353
353
|
makeElement({ id: "s1-bg" }),
|
|
354
354
|
);
|
|
355
355
|
act(() => {
|
|
356
|
-
getState().commitColorGrading(
|
|
356
|
+
getState().commitColorGrading(brightPopGrading());
|
|
357
357
|
});
|
|
358
358
|
// Switch selection before the 350ms debounce fires — the in-flight edit
|
|
359
359
|
// must be written immediately (targeting the OUTGOING element's own
|
|
@@ -366,7 +366,7 @@ describe("useColorGradingController", () => {
|
|
|
366
366
|
expect(onSetAttributeLive).toHaveBeenCalledTimes(1);
|
|
367
367
|
const [attr, value] = onSetAttributeLive.mock.calls[0] as [string, string];
|
|
368
368
|
expect(attr).toBe("color-grading");
|
|
369
|
-
expect(value).toContain("
|
|
369
|
+
expect(value).toContain("bright-pop");
|
|
370
370
|
// And it must not ALSO fire again once the (now-cleared) original timer
|
|
371
371
|
// window would have elapsed.
|
|
372
372
|
act(() => {
|