@warpgogol/forge 0.21.0 → 0.22.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/dist/bin/cli.js +0 -0
- package/package.json +60 -162
- package/profiles/editframe-templates/composition.tsx +52 -21
- package/profiles/editframe.yaml +98 -20
package/dist/bin/cli.js
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@warpgogol/forge",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -15,107 +15,107 @@
|
|
|
15
15
|
"framework"
|
|
16
16
|
],
|
|
17
17
|
"homepage": "https://warpgogol.com",
|
|
18
|
-
"main": "./src/index.
|
|
19
|
-
"types": "./src/index.ts",
|
|
18
|
+
"main": "./dist/src/index.js",
|
|
19
|
+
"types": "./dist/src/index.d.ts",
|
|
20
20
|
"bin": {
|
|
21
21
|
"forge": "./bin/cli.js"
|
|
22
22
|
},
|
|
23
23
|
"exports": {
|
|
24
24
|
".": {
|
|
25
|
-
"types": "./src/index.ts",
|
|
26
|
-
"default": "./src/index.
|
|
25
|
+
"types": "./dist/src/index.d.ts",
|
|
26
|
+
"default": "./dist/src/index.js"
|
|
27
27
|
},
|
|
28
28
|
"./types": {
|
|
29
|
-
"types": "./src/types.ts",
|
|
30
|
-
"default": "./src/types.
|
|
29
|
+
"types": "./dist/src/types.d.ts",
|
|
30
|
+
"default": "./dist/src/types.js"
|
|
31
31
|
},
|
|
32
32
|
"./utils": {
|
|
33
|
-
"types": "./src/utils/index.ts",
|
|
34
|
-
"default": "./src/utils/index.
|
|
33
|
+
"types": "./dist/src/utils/index.d.ts",
|
|
34
|
+
"default": "./dist/src/utils/index.js"
|
|
35
35
|
},
|
|
36
36
|
"./config": {
|
|
37
|
-
"types": "./src/config/forge-config.ts",
|
|
38
|
-
"default": "./src/config/forge-config.
|
|
37
|
+
"types": "./dist/src/config/forge-config.d.ts",
|
|
38
|
+
"default": "./dist/src/config/forge-config.js"
|
|
39
39
|
},
|
|
40
40
|
"./os/core": {
|
|
41
|
-
"types": "./os/core/core.module.ts",
|
|
42
|
-
"default": "./os/core/core.module.
|
|
41
|
+
"types": "./dist/os/core/core.module.d.ts",
|
|
42
|
+
"default": "./dist/os/core/core.module.js"
|
|
43
43
|
},
|
|
44
44
|
"./os/compass": {
|
|
45
|
-
"types": "./os/compass/index.ts",
|
|
46
|
-
"default": "./os/compass/index.
|
|
45
|
+
"types": "./dist/os/compass/index.d.ts",
|
|
46
|
+
"default": "./dist/os/compass/index.js"
|
|
47
47
|
},
|
|
48
48
|
"./os/naming": {
|
|
49
|
-
"types": "./os/naming/index.ts",
|
|
50
|
-
"default": "./os/naming/index.
|
|
49
|
+
"types": "./dist/os/naming/index.d.ts",
|
|
50
|
+
"default": "./dist/os/naming/index.js"
|
|
51
51
|
},
|
|
52
52
|
"./os/naming-module": {
|
|
53
|
-
"types": "./os/naming/naming.module.ts",
|
|
54
|
-
"default": "./os/naming/naming.module.
|
|
53
|
+
"types": "./dist/os/naming/naming.module.d.ts",
|
|
54
|
+
"default": "./dist/os/naming/naming.module.js"
|
|
55
55
|
},
|
|
56
56
|
"./os/rfc": {
|
|
57
|
-
"types": "./os/rfc/index.ts",
|
|
58
|
-
"default": "./os/rfc/index.
|
|
57
|
+
"types": "./dist/os/rfc/index.d.ts",
|
|
58
|
+
"default": "./dist/os/rfc/index.js"
|
|
59
59
|
},
|
|
60
60
|
"./os/rfc-module": {
|
|
61
|
-
"types": "./os/rfc/rfc.module.ts",
|
|
62
|
-
"default": "./os/rfc/rfc.module.
|
|
61
|
+
"types": "./dist/os/rfc/rfc.module.d.ts",
|
|
62
|
+
"default": "./dist/os/rfc/rfc.module.js"
|
|
63
63
|
},
|
|
64
64
|
"./os/werkstatt": {
|
|
65
|
-
"types": "./os/werkstatt/index.ts",
|
|
66
|
-
"default": "./os/werkstatt/index.
|
|
65
|
+
"types": "./dist/os/werkstatt/index.d.ts",
|
|
66
|
+
"default": "./dist/os/werkstatt/index.js"
|
|
67
67
|
},
|
|
68
68
|
"./os/workflow": {
|
|
69
|
-
"types": "./os/workflow/index.ts",
|
|
70
|
-
"default": "./os/workflow/index.
|
|
69
|
+
"types": "./dist/os/workflow/index.d.ts",
|
|
70
|
+
"default": "./dist/os/workflow/index.js"
|
|
71
71
|
},
|
|
72
72
|
"./os/workflow-module": {
|
|
73
|
-
"types": "./os/workflow/workflow.module.ts",
|
|
74
|
-
"default": "./os/workflow/workflow.module.
|
|
73
|
+
"types": "./dist/os/workflow/workflow.module.d.ts",
|
|
74
|
+
"default": "./dist/os/workflow/workflow.module.js"
|
|
75
75
|
},
|
|
76
76
|
"./os/spec-module": {
|
|
77
|
-
"types": "./os/spec/spec.module.ts",
|
|
78
|
-
"default": "./os/spec/spec.module.
|
|
77
|
+
"types": "./dist/os/spec/spec.module.d.ts",
|
|
78
|
+
"default": "./dist/os/spec/spec.module.js"
|
|
79
79
|
},
|
|
80
80
|
"./os/adr": {
|
|
81
|
-
"types": "./os/adr/index.ts",
|
|
82
|
-
"default": "./os/adr/index.
|
|
81
|
+
"types": "./dist/os/adr/index.d.ts",
|
|
82
|
+
"default": "./dist/os/adr/index.js"
|
|
83
83
|
},
|
|
84
84
|
"./os/adr-module": {
|
|
85
|
-
"types": "./os/adr/adr.module.ts",
|
|
86
|
-
"default": "./os/adr/adr.module.
|
|
85
|
+
"types": "./dist/os/adr/adr.module.d.ts",
|
|
86
|
+
"default": "./dist/os/adr/adr.module.js"
|
|
87
87
|
},
|
|
88
88
|
"./os/plan": {
|
|
89
|
-
"types": "./os/plan/index.ts",
|
|
90
|
-
"default": "./os/plan/index.
|
|
89
|
+
"types": "./dist/os/plan/index.d.ts",
|
|
90
|
+
"default": "./dist/os/plan/index.js"
|
|
91
91
|
},
|
|
92
92
|
"./os/plan-module": {
|
|
93
|
-
"types": "./os/plan/plan.module.ts",
|
|
94
|
-
"default": "./os/plan/plan.module.
|
|
93
|
+
"types": "./dist/os/plan/plan.module.d.ts",
|
|
94
|
+
"default": "./dist/os/plan/plan.module.js"
|
|
95
95
|
},
|
|
96
96
|
"./os/audit": {
|
|
97
|
-
"types": "./os/audit/index.ts",
|
|
98
|
-
"default": "./os/audit/index.
|
|
97
|
+
"types": "./dist/os/audit/index.d.ts",
|
|
98
|
+
"default": "./dist/os/audit/index.js"
|
|
99
99
|
},
|
|
100
100
|
"./os/audit-module": {
|
|
101
|
-
"types": "./os/audit/audit.module.ts",
|
|
102
|
-
"default": "./os/audit/audit.module.
|
|
101
|
+
"types": "./dist/os/audit/audit.module.d.ts",
|
|
102
|
+
"default": "./dist/os/audit/audit.module.js"
|
|
103
103
|
},
|
|
104
104
|
"./os/session": {
|
|
105
|
-
"types": "./os/session/index.ts",
|
|
106
|
-
"default": "./os/session/index.
|
|
105
|
+
"types": "./dist/os/session/index.d.ts",
|
|
106
|
+
"default": "./dist/os/session/index.js"
|
|
107
107
|
},
|
|
108
108
|
"./os/session-module": {
|
|
109
|
-
"types": "./os/session/session.module.ts",
|
|
110
|
-
"default": "./os/session/session.module.
|
|
109
|
+
"types": "./dist/os/session/session.module.d.ts",
|
|
110
|
+
"default": "./dist/os/session/session.module.js"
|
|
111
111
|
},
|
|
112
112
|
"./os/mission": {
|
|
113
|
-
"types": "./os/mission/index.ts",
|
|
114
|
-
"default": "./os/mission/index.
|
|
113
|
+
"types": "./dist/os/mission/index.d.ts",
|
|
114
|
+
"default": "./dist/os/mission/index.js"
|
|
115
115
|
},
|
|
116
116
|
"./os/mission-module": {
|
|
117
|
-
"types": "./os/mission/mission.module.ts",
|
|
118
|
-
"default": "./os/mission/mission.module.
|
|
117
|
+
"types": "./dist/os/mission/mission.module.d.ts",
|
|
118
|
+
"default": "./dist/os/mission/mission.module.js"
|
|
119
119
|
}
|
|
120
120
|
},
|
|
121
121
|
"files": [
|
|
@@ -129,15 +129,6 @@
|
|
|
129
129
|
"README.md",
|
|
130
130
|
"LICENSE"
|
|
131
131
|
],
|
|
132
|
-
"scripts": {
|
|
133
|
-
"build": "pnpm exec tsc -p tsconfig.json",
|
|
134
|
-
"build:check": "pnpm exec tsc -p tsconfig.json --noEmit",
|
|
135
|
-
"clean": "rm -rf dist",
|
|
136
|
-
"prepublishOnly": "pnpm run clean && pnpm run build && node scripts/publish-check.mjs && node scripts/strip-workspace-deps.mjs",
|
|
137
|
-
"postpublish": "git checkout -- ./package.json",
|
|
138
|
-
"test": "vitest run --passWithNoTests",
|
|
139
|
-
"test:watch": "vitest"
|
|
140
|
-
},
|
|
141
132
|
"dependencies": {
|
|
142
133
|
"@aws-sdk/client-s3": "^3.700.0",
|
|
143
134
|
"trash": "^10.1.1",
|
|
@@ -154,106 +145,13 @@
|
|
|
154
145
|
"node": ">=20.0.0"
|
|
155
146
|
},
|
|
156
147
|
"publishConfig": {
|
|
157
|
-
"access": "public"
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
"
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
"./types": {
|
|
166
|
-
"types": "./dist/src/types.d.ts",
|
|
167
|
-
"default": "./dist/src/types.js"
|
|
168
|
-
},
|
|
169
|
-
"./utils": {
|
|
170
|
-
"types": "./dist/src/utils/index.d.ts",
|
|
171
|
-
"default": "./dist/src/utils/index.js"
|
|
172
|
-
},
|
|
173
|
-
"./config": {
|
|
174
|
-
"types": "./dist/src/config/forge-config.d.ts",
|
|
175
|
-
"default": "./dist/src/config/forge-config.js"
|
|
176
|
-
},
|
|
177
|
-
"./os/core": {
|
|
178
|
-
"types": "./dist/os/core/core.module.d.ts",
|
|
179
|
-
"default": "./dist/os/core/core.module.js"
|
|
180
|
-
},
|
|
181
|
-
"./os/compass": {
|
|
182
|
-
"types": "./dist/os/compass/index.d.ts",
|
|
183
|
-
"default": "./dist/os/compass/index.js"
|
|
184
|
-
},
|
|
185
|
-
"./os/naming": {
|
|
186
|
-
"types": "./dist/os/naming/index.d.ts",
|
|
187
|
-
"default": "./dist/os/naming/index.js"
|
|
188
|
-
},
|
|
189
|
-
"./os/naming-module": {
|
|
190
|
-
"types": "./dist/os/naming/naming.module.d.ts",
|
|
191
|
-
"default": "./dist/os/naming/naming.module.js"
|
|
192
|
-
},
|
|
193
|
-
"./os/rfc": {
|
|
194
|
-
"types": "./dist/os/rfc/index.d.ts",
|
|
195
|
-
"default": "./dist/os/rfc/index.js"
|
|
196
|
-
},
|
|
197
|
-
"./os/rfc-module": {
|
|
198
|
-
"types": "./dist/os/rfc/rfc.module.d.ts",
|
|
199
|
-
"default": "./dist/os/rfc/rfc.module.js"
|
|
200
|
-
},
|
|
201
|
-
"./os/werkstatt": {
|
|
202
|
-
"types": "./dist/os/werkstatt/index.d.ts",
|
|
203
|
-
"default": "./dist/os/werkstatt/index.js"
|
|
204
|
-
},
|
|
205
|
-
"./os/workflow": {
|
|
206
|
-
"types": "./dist/os/workflow/index.d.ts",
|
|
207
|
-
"default": "./dist/os/workflow/index.js"
|
|
208
|
-
},
|
|
209
|
-
"./os/workflow-module": {
|
|
210
|
-
"types": "./dist/os/workflow/workflow.module.d.ts",
|
|
211
|
-
"default": "./dist/os/workflow/workflow.module.js"
|
|
212
|
-
},
|
|
213
|
-
"./os/spec-module": {
|
|
214
|
-
"types": "./dist/os/spec/spec.module.d.ts",
|
|
215
|
-
"default": "./dist/os/spec/spec.module.js"
|
|
216
|
-
},
|
|
217
|
-
"./os/adr": {
|
|
218
|
-
"types": "./dist/os/adr/index.d.ts",
|
|
219
|
-
"default": "./dist/os/adr/index.js"
|
|
220
|
-
},
|
|
221
|
-
"./os/adr-module": {
|
|
222
|
-
"types": "./dist/os/adr/adr.module.d.ts",
|
|
223
|
-
"default": "./dist/os/adr/adr.module.js"
|
|
224
|
-
},
|
|
225
|
-
"./os/plan": {
|
|
226
|
-
"types": "./dist/os/plan/index.d.ts",
|
|
227
|
-
"default": "./dist/os/plan/index.js"
|
|
228
|
-
},
|
|
229
|
-
"./os/plan-module": {
|
|
230
|
-
"types": "./dist/os/plan/plan.module.d.ts",
|
|
231
|
-
"default": "./dist/os/plan/plan.module.js"
|
|
232
|
-
},
|
|
233
|
-
"./os/audit": {
|
|
234
|
-
"types": "./dist/os/audit/index.d.ts",
|
|
235
|
-
"default": "./dist/os/audit/index.js"
|
|
236
|
-
},
|
|
237
|
-
"./os/audit-module": {
|
|
238
|
-
"types": "./dist/os/audit/audit.module.d.ts",
|
|
239
|
-
"default": "./dist/os/audit/audit.module.js"
|
|
240
|
-
},
|
|
241
|
-
"./os/session": {
|
|
242
|
-
"types": "./dist/os/session/index.d.ts",
|
|
243
|
-
"default": "./dist/os/session/index.js"
|
|
244
|
-
},
|
|
245
|
-
"./os/session-module": {
|
|
246
|
-
"types": "./dist/os/session/session.module.d.ts",
|
|
247
|
-
"default": "./dist/os/session/session.module.js"
|
|
248
|
-
},
|
|
249
|
-
"./os/mission": {
|
|
250
|
-
"types": "./dist/os/mission/index.d.ts",
|
|
251
|
-
"default": "./dist/os/mission/index.js"
|
|
252
|
-
},
|
|
253
|
-
"./os/mission-module": {
|
|
254
|
-
"types": "./dist/os/mission/mission.module.d.ts",
|
|
255
|
-
"default": "./dist/os/mission/mission.module.js"
|
|
256
|
-
}
|
|
257
|
-
}
|
|
148
|
+
"access": "public"
|
|
149
|
+
},
|
|
150
|
+
"scripts": {
|
|
151
|
+
"build": "pnpm exec tsc -p tsconfig.json",
|
|
152
|
+
"build:check": "pnpm exec tsc -p tsconfig.json --noEmit",
|
|
153
|
+
"clean": "rm -rf dist",
|
|
154
|
+
"test": "vitest run --passWithNoTests",
|
|
155
|
+
"test:watch": "vitest"
|
|
258
156
|
}
|
|
259
|
-
}
|
|
157
|
+
}
|
|
@@ -10,21 +10,45 @@
|
|
|
10
10
|
- Captions: accessibility captions for speech audio
|
|
11
11
|
Run `editframe preview` to preview, `editframe render` to produce output.
|
|
12
12
|
*/
|
|
13
|
-
import {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
Workbench,
|
|
21
|
-
} from "@editframe/react";
|
|
13
|
+
import { useEffect, useRef } from "react";
|
|
14
|
+
import { Configuration, Timegroup, Text, Workbench } from "@editframe/react";
|
|
15
|
+
|
|
16
|
+
const EFWorkbench = Workbench as any;
|
|
17
|
+
const EFConfiguration = Configuration as any;
|
|
18
|
+
const EFTimegroup = Timegroup as any;
|
|
19
|
+
const EFText = Text as any;
|
|
22
20
|
|
|
23
21
|
export default function Composition() {
|
|
22
|
+
const workbenchRef = useRef<HTMLElement>(null);
|
|
23
|
+
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
const wb = workbenchRef.current;
|
|
26
|
+
if (!wb) return;
|
|
27
|
+
|
|
28
|
+
const fixReplay = () => {
|
|
29
|
+
const config = wb.querySelector("ef-configuration");
|
|
30
|
+
const controller = (config as any)?.playback;
|
|
31
|
+
if (!controller) return;
|
|
32
|
+
|
|
33
|
+
const originalPlay = controller.play.bind(controller);
|
|
34
|
+
controller.play = (opts?: any) => {
|
|
35
|
+
if (!opts?.from && controller.currentTime >= controller.duration) {
|
|
36
|
+
originalPlay({ from: 0, to: opts?.to });
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
originalPlay(opts);
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
fixReplay();
|
|
44
|
+
wb.addEventListener("playback-attached", fixReplay);
|
|
45
|
+
return () => wb.removeEventListener("playback-attached", fixReplay);
|
|
46
|
+
}, []);
|
|
47
|
+
|
|
24
48
|
return (
|
|
25
|
-
<
|
|
26
|
-
<
|
|
27
|
-
<
|
|
49
|
+
<EFWorkbench ref={workbenchRef} resolution="1920x1080">
|
|
50
|
+
<EFConfiguration>
|
|
51
|
+
<EFTimegroup
|
|
28
52
|
id="root"
|
|
29
53
|
duration="10s"
|
|
30
54
|
mode="contain"
|
|
@@ -37,14 +61,21 @@ export default function Composition() {
|
|
|
37
61
|
justifyContent: "center",
|
|
38
62
|
}}
|
|
39
63
|
>
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
64
|
+
<EFText
|
|
65
|
+
duration="10s"
|
|
66
|
+
style={{
|
|
67
|
+
color: "white",
|
|
68
|
+
fontSize: "72px",
|
|
69
|
+
textAlign: "center",
|
|
70
|
+
fontFamily: "ui-sans-serif, system-ui, sans-serif",
|
|
71
|
+
opacity: "min(1, var(--ef-progress, 0) * 5)",
|
|
72
|
+
transform: "scale(min(1, 0.8 + var(--ef-progress, 0) * 0.2))",
|
|
73
|
+
}}
|
|
74
|
+
>
|
|
75
|
+
Hello, Editframe!
|
|
76
|
+
</EFText>
|
|
77
|
+
</EFTimegroup>
|
|
78
|
+
</EFConfiguration>
|
|
79
|
+
</EFWorkbench>
|
|
49
80
|
);
|
|
50
81
|
}
|
package/profiles/editframe.yaml
CHANGED
|
@@ -455,13 +455,45 @@ firstWorkspace:
|
|
|
455
455
|
This file declares a video composition using @editframe/react components.
|
|
456
456
|
Run `editframe preview` to preview, `editframe render` to produce output.
|
|
457
457
|
*/
|
|
458
|
+
import { useEffect, useRef } from "react";
|
|
458
459
|
import { Configuration, Timegroup, Text, Workbench } from "@editframe/react";
|
|
459
460
|
|
|
461
|
+
const EFWorkbench = Workbench as any;
|
|
462
|
+
const EFConfiguration = Configuration as any;
|
|
463
|
+
const EFTimegroup = Timegroup as any;
|
|
464
|
+
const EFText = Text as any;
|
|
465
|
+
|
|
460
466
|
export default function Composition() {
|
|
467
|
+
const workbenchRef = useRef<HTMLElement>(null);
|
|
468
|
+
|
|
469
|
+
useEffect(() => {
|
|
470
|
+
const wb = workbenchRef.current;
|
|
471
|
+
if (!wb) return;
|
|
472
|
+
|
|
473
|
+
const fixReplay = () => {
|
|
474
|
+
const config = wb.querySelector("ef-configuration");
|
|
475
|
+
const controller = (config as any)?.playback;
|
|
476
|
+
if (!controller) return;
|
|
477
|
+
|
|
478
|
+
const originalPlay = controller.play.bind(controller);
|
|
479
|
+
controller.play = (opts?: any) => {
|
|
480
|
+
if (!opts?.from && controller.currentTime >= controller.duration) {
|
|
481
|
+
originalPlay({ from: 0, to: opts?.to });
|
|
482
|
+
return;
|
|
483
|
+
}
|
|
484
|
+
originalPlay(opts);
|
|
485
|
+
};
|
|
486
|
+
};
|
|
487
|
+
|
|
488
|
+
fixReplay();
|
|
489
|
+
wb.addEventListener("playback-attached", fixReplay);
|
|
490
|
+
return () => wb.removeEventListener("playback-attached", fixReplay);
|
|
491
|
+
}, []);
|
|
492
|
+
|
|
461
493
|
return (
|
|
462
|
-
<
|
|
463
|
-
<
|
|
464
|
-
<
|
|
494
|
+
<EFWorkbench ref={workbenchRef} resolution="1920x1080">
|
|
495
|
+
<EFConfiguration>
|
|
496
|
+
<EFTimegroup
|
|
465
497
|
id="root"
|
|
466
498
|
duration="10s"
|
|
467
499
|
mode="contain"
|
|
@@ -474,15 +506,22 @@ firstWorkspace:
|
|
|
474
506
|
justifyContent: "center",
|
|
475
507
|
}}
|
|
476
508
|
>
|
|
477
|
-
<
|
|
478
|
-
duration="
|
|
479
|
-
style={{
|
|
509
|
+
<EFText
|
|
510
|
+
duration="10s"
|
|
511
|
+
style={{
|
|
512
|
+
color: "white",
|
|
513
|
+
fontSize: "72px",
|
|
514
|
+
textAlign: "center",
|
|
515
|
+
fontFamily: "ui-sans-serif, system-ui, sans-serif",
|
|
516
|
+
opacity: "min(1, var(--ef-progress, 0) * 5)",
|
|
517
|
+
transform: "scale(min(1, 0.8 + var(--ef-progress, 0) * 0.2))",
|
|
518
|
+
}}
|
|
480
519
|
>
|
|
481
520
|
Hello, Editframe!
|
|
482
|
-
</
|
|
483
|
-
</
|
|
484
|
-
</
|
|
485
|
-
</
|
|
521
|
+
</EFText>
|
|
522
|
+
</EFTimegroup>
|
|
523
|
+
</EFConfiguration>
|
|
524
|
+
</EFWorkbench>
|
|
486
525
|
);
|
|
487
526
|
}
|
|
488
527
|
install:
|
|
@@ -586,13 +625,45 @@ templates:
|
|
|
586
625
|
This file declares a video composition using @editframe/react components.
|
|
587
626
|
Run `editframe preview` to preview, `editframe render` to produce output.
|
|
588
627
|
*/
|
|
628
|
+
import { useEffect, useRef } from "react";
|
|
589
629
|
import { Configuration, Timegroup, Text, Workbench } from "@editframe/react";
|
|
590
630
|
|
|
631
|
+
const EFWorkbench = Workbench as any;
|
|
632
|
+
const EFConfiguration = Configuration as any;
|
|
633
|
+
const EFTimegroup = Timegroup as any;
|
|
634
|
+
const EFText = Text as any;
|
|
635
|
+
|
|
591
636
|
export default function Composition() {
|
|
637
|
+
const workbenchRef = useRef<HTMLElement>(null);
|
|
638
|
+
|
|
639
|
+
useEffect(() => {
|
|
640
|
+
const wb = workbenchRef.current;
|
|
641
|
+
if (!wb) return;
|
|
642
|
+
|
|
643
|
+
const fixReplay = () => {
|
|
644
|
+
const config = wb.querySelector("ef-configuration");
|
|
645
|
+
const controller = (config as any)?.playback;
|
|
646
|
+
if (!controller) return;
|
|
647
|
+
|
|
648
|
+
const originalPlay = controller.play.bind(controller);
|
|
649
|
+
controller.play = (opts?: any) => {
|
|
650
|
+
if (!opts?.from && controller.currentTime >= controller.duration) {
|
|
651
|
+
originalPlay({ from: 0, to: opts?.to });
|
|
652
|
+
return;
|
|
653
|
+
}
|
|
654
|
+
originalPlay(opts);
|
|
655
|
+
};
|
|
656
|
+
};
|
|
657
|
+
|
|
658
|
+
fixReplay();
|
|
659
|
+
wb.addEventListener("playback-attached", fixReplay);
|
|
660
|
+
return () => wb.removeEventListener("playback-attached", fixReplay);
|
|
661
|
+
}, []);
|
|
662
|
+
|
|
592
663
|
return (
|
|
593
|
-
<
|
|
594
|
-
<
|
|
595
|
-
<
|
|
664
|
+
<EFWorkbench ref={workbenchRef} resolution="1920x1080">
|
|
665
|
+
<EFConfiguration>
|
|
666
|
+
<EFTimegroup
|
|
596
667
|
id="root"
|
|
597
668
|
duration="10s"
|
|
598
669
|
mode="contain"
|
|
@@ -605,15 +676,22 @@ templates:
|
|
|
605
676
|
justifyContent: "center",
|
|
606
677
|
}}
|
|
607
678
|
>
|
|
608
|
-
<
|
|
609
|
-
duration="
|
|
610
|
-
style={{
|
|
679
|
+
<EFText
|
|
680
|
+
duration="10s"
|
|
681
|
+
style={{
|
|
682
|
+
color: "white",
|
|
683
|
+
fontSize: "72px",
|
|
684
|
+
textAlign: "center",
|
|
685
|
+
fontFamily: "ui-sans-serif, system-ui, sans-serif",
|
|
686
|
+
opacity: "min(1, var(--ef-progress, 0) * 5)",
|
|
687
|
+
transform: "scale(min(1, 0.8 + var(--ef-progress, 0) * 0.2))",
|
|
688
|
+
}}
|
|
611
689
|
>
|
|
612
690
|
Hello, Editframe!
|
|
613
|
-
</
|
|
614
|
-
</
|
|
615
|
-
</
|
|
616
|
-
</
|
|
691
|
+
</EFText>
|
|
692
|
+
</EFTimegroup>
|
|
693
|
+
</EFConfiguration>
|
|
694
|
+
</EFWorkbench>
|
|
617
695
|
);
|
|
618
696
|
}
|
|
619
697
|
install:
|