@editframe/elements 0.7.0-beta.8 → 0.7.0-beta.9

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 (86) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/postcss.config.cjs +12 -0
  4. package/{dist/packages/elements/src/EF_FRAMEGEN.js → src/EF_FRAMEGEN.ts} +113 -32
  5. package/src/EF_INTERACTIVE.ts +2 -0
  6. package/src/elements.css +22 -0
  7. package/src/index.ts +33 -0
  8. package/tailwind.config.ts +10 -0
  9. package/tsconfig.json +4 -0
  10. package/vite.config.ts +8 -0
  11. package/dist/lib/av/EncodedAsset.cjs +0 -577
  12. package/dist/lib/av/EncodedAsset.js +0 -560
  13. package/dist/lib/av/MP4File.cjs +0 -187
  14. package/dist/lib/av/MP4File.js +0 -170
  15. package/dist/lib/av/msToTimeCode.cjs +0 -15
  16. package/dist/lib/av/msToTimeCode.js +0 -15
  17. package/dist/lib/util/awaitMicrotask.cjs +0 -4
  18. package/dist/lib/util/awaitMicrotask.js +0 -4
  19. package/dist/lib/util/memoize.cjs +0 -14
  20. package/dist/lib/util/memoize.js +0 -14
  21. package/dist/packages/elements/src/EF_FRAMEGEN.cjs +0 -197
  22. package/dist/packages/elements/src/EF_FRAMEGEN.d.ts +0 -44
  23. package/dist/packages/elements/src/EF_INTERACTIVE.cjs +0 -4
  24. package/dist/packages/elements/src/EF_INTERACTIVE.d.ts +0 -1
  25. package/dist/packages/elements/src/EF_INTERACTIVE.js +0 -4
  26. package/dist/packages/elements/src/elements/CrossUpdateController.cjs +0 -16
  27. package/dist/packages/elements/src/elements/CrossUpdateController.d.ts +0 -9
  28. package/dist/packages/elements/src/elements/CrossUpdateController.js +0 -16
  29. package/dist/packages/elements/src/elements/EFAudio.cjs +0 -53
  30. package/dist/packages/elements/src/elements/EFAudio.d.ts +0 -10
  31. package/dist/packages/elements/src/elements/EFAudio.js +0 -54
  32. package/dist/packages/elements/src/elements/EFCaptions.cjs +0 -164
  33. package/dist/packages/elements/src/elements/EFCaptions.d.ts +0 -38
  34. package/dist/packages/elements/src/elements/EFCaptions.js +0 -166
  35. package/dist/packages/elements/src/elements/EFImage.cjs +0 -79
  36. package/dist/packages/elements/src/elements/EFImage.d.ts +0 -14
  37. package/dist/packages/elements/src/elements/EFImage.js +0 -80
  38. package/dist/packages/elements/src/elements/EFMedia.cjs +0 -336
  39. package/dist/packages/elements/src/elements/EFMedia.d.ts +0 -61
  40. package/dist/packages/elements/src/elements/EFMedia.js +0 -336
  41. package/dist/packages/elements/src/elements/EFSourceMixin.cjs +0 -55
  42. package/dist/packages/elements/src/elements/EFSourceMixin.d.ts +0 -12
  43. package/dist/packages/elements/src/elements/EFSourceMixin.js +0 -55
  44. package/dist/packages/elements/src/elements/EFTemporal.cjs +0 -199
  45. package/dist/packages/elements/src/elements/EFTemporal.d.ts +0 -38
  46. package/dist/packages/elements/src/elements/EFTemporal.js +0 -199
  47. package/dist/packages/elements/src/elements/EFTimegroup.browsertest.d.ts +0 -12
  48. package/dist/packages/elements/src/elements/EFTimegroup.cjs +0 -352
  49. package/dist/packages/elements/src/elements/EFTimegroup.d.ts +0 -39
  50. package/dist/packages/elements/src/elements/EFTimegroup.js +0 -353
  51. package/dist/packages/elements/src/elements/EFVideo.cjs +0 -109
  52. package/dist/packages/elements/src/elements/EFVideo.d.ts +0 -14
  53. package/dist/packages/elements/src/elements/EFVideo.js +0 -110
  54. package/dist/packages/elements/src/elements/EFWaveform.cjs +0 -242
  55. package/dist/packages/elements/src/elements/EFWaveform.d.ts +0 -30
  56. package/dist/packages/elements/src/elements/EFWaveform.js +0 -226
  57. package/dist/packages/elements/src/elements/FetchMixin.cjs +0 -28
  58. package/dist/packages/elements/src/elements/FetchMixin.d.ts +0 -8
  59. package/dist/packages/elements/src/elements/FetchMixin.js +0 -28
  60. package/dist/packages/elements/src/elements/TimegroupController.cjs +0 -20
  61. package/dist/packages/elements/src/elements/TimegroupController.d.ts +0 -14
  62. package/dist/packages/elements/src/elements/TimegroupController.js +0 -20
  63. package/dist/packages/elements/src/elements/durationConverter.cjs +0 -8
  64. package/dist/packages/elements/src/elements/durationConverter.d.ts +0 -4
  65. package/dist/packages/elements/src/elements/durationConverter.js +0 -8
  66. package/dist/packages/elements/src/elements/parseTimeToMs.cjs +0 -12
  67. package/dist/packages/elements/src/elements/parseTimeToMs.d.ts +0 -1
  68. package/dist/packages/elements/src/elements/parseTimeToMs.js +0 -12
  69. package/dist/packages/elements/src/elements/util.cjs +0 -11
  70. package/dist/packages/elements/src/elements/util.d.ts +0 -4
  71. package/dist/packages/elements/src/elements/util.js +0 -11
  72. package/dist/packages/elements/src/gui/EFFilmstrip.cjs +0 -825
  73. package/dist/packages/elements/src/gui/EFFilmstrip.d.ts +0 -147
  74. package/dist/packages/elements/src/gui/EFFilmstrip.js +0 -833
  75. package/dist/packages/elements/src/gui/EFWorkbench.cjs +0 -214
  76. package/dist/packages/elements/src/gui/EFWorkbench.d.ts +0 -45
  77. package/dist/packages/elements/src/gui/EFWorkbench.js +0 -215
  78. package/dist/packages/elements/src/gui/TWMixin.cjs +0 -28
  79. package/dist/packages/elements/src/gui/TWMixin.css.cjs +0 -3
  80. package/dist/packages/elements/src/gui/TWMixin.css.js +0 -4
  81. package/dist/packages/elements/src/gui/TWMixin.d.ts +0 -3
  82. package/dist/packages/elements/src/gui/TWMixin.js +0 -28
  83. package/dist/packages/elements/src/index.cjs +0 -50
  84. package/dist/packages/elements/src/index.d.ts +0 -10
  85. package/dist/packages/elements/src/index.js +0 -23
  86. package/dist/style.css +0 -791
@@ -1,336 +0,0 @@
1
- import { css, LitElement } from "lit";
2
- import { property, state } from "lit/decorators.js";
3
- import { deepArrayEquals } from "@lit/task/deep-equals.js";
4
- import { Task } from "@lit/task";
5
- import { consume } from "@lit/context";
6
- import debug from "debug";
7
- import { MP4File } from "../../../../lib/av/MP4File.js";
8
- import { EFTemporal } from "./EFTemporal.js";
9
- import { VideoAsset } from "../../../../lib/av/EncodedAsset.js";
10
- import { FetchMixin } from "./FetchMixin.js";
11
- import { apiHostContext } from "../gui/EFWorkbench.js";
12
- import { EFSourceMixin } from "./EFSourceMixin.js";
13
- import { getStartTimeMs } from "./util.js";
14
- import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
15
- var __defProp = Object.defineProperty;
16
- var __decorateClass = (decorators, target, key, kind) => {
17
- var result = void 0;
18
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
19
- if (decorator = decorators[i])
20
- result = decorator(target, key, result) || result;
21
- if (result) __defProp(target, key, result);
22
- return result;
23
- };
24
- const log = debug("ef:elements:EFMedia");
25
- const deepGetMediaElements = (element, medias = []) => {
26
- for (const child of Array.from(element.children)) {
27
- if (child instanceof EFMedia) {
28
- medias.push(child);
29
- } else {
30
- deepGetMediaElements(child, medias);
31
- }
32
- }
33
- return medias;
34
- };
35
- class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
36
- assetType: "isobmff_files"
37
- }) {
38
- constructor() {
39
- super(...arguments);
40
- this.currentTimeMs = 0;
41
- this.trackFragmentIndexLoader = new Task(this, {
42
- args: () => [this.fragmentIndexPath(), this.fetch],
43
- task: async ([fragmentIndexPath, fetch], { signal }) => {
44
- const response = await fetch(fragmentIndexPath, { signal });
45
- return await response.json();
46
- },
47
- onComplete: () => {
48
- this.requestUpdate("ownCurrentTimeMs");
49
- this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
50
- }
51
- });
52
- this.initSegmentsLoader = new Task(this, {
53
- autoRun: EF_INTERACTIVE,
54
- args: () => [this.trackFragmentIndexLoader.value, this.src, this.fetch],
55
- task: async ([fragmentIndex, _src, fetch], { signal }) => {
56
- if (!fragmentIndex) {
57
- return;
58
- }
59
- return await Promise.all(
60
- Object.entries(fragmentIndex).map(async ([trackId, track]) => {
61
- const start = track.initSegment.offset;
62
- const end = track.initSegment.offset + track.initSegment.size - 1;
63
- const response = await fetch(this.fragmentTrackPath(trackId), {
64
- signal,
65
- headers: { Range: `bytes=${start}-${end}` }
66
- });
67
- const buffer = await response.arrayBuffer();
68
- buffer.fileStart = 0;
69
- const mp4File = new MP4File();
70
- mp4File.appendBuffer(buffer, true);
71
- mp4File.flush();
72
- await mp4File.readyPromise;
73
- return { trackId, buffer, mp4File };
74
- })
75
- );
76
- }
77
- });
78
- this.seekTask = new Task(this, {
79
- autoRun: EF_INTERACTIVE,
80
- args: () => [
81
- this.desiredSeekTimeMs,
82
- this.trackFragmentIndexLoader.value,
83
- this.initSegmentsLoader.value
84
- ],
85
- task: async ([seekToMs, fragmentIndex, initSegments], { signal: _signal }) => {
86
- if (fragmentIndex === void 0) {
87
- return;
88
- }
89
- if (initSegments === void 0) {
90
- return;
91
- }
92
- const result = {};
93
- for (const index of Object.values(fragmentIndex)) {
94
- const track = initSegments.find((segment2) => segment2.trackId === String(index.track))?.mp4File.getInfo().tracks[0];
95
- if (!track) {
96
- throw new Error("Could not finding matching track");
97
- }
98
- const segment = index.segments.toReversed().find((segment2) => {
99
- return segment2.dts / track.timescale * 1e3 <= seekToMs;
100
- });
101
- if (!segment) {
102
- return;
103
- }
104
- result[index.track] = { segment, track };
105
- }
106
- return result;
107
- }
108
- });
109
- this.fetchSeekTask = new Task(this, {
110
- autoRun: EF_INTERACTIVE,
111
- argsEqual: deepArrayEquals,
112
- args: () => [this.initSegmentsLoader.value, this.seekTask.value, this.fetch],
113
- task: async ([initSegments, seekResult, fetch], { signal }) => {
114
- if (!initSegments) {
115
- return;
116
- }
117
- if (!seekResult) {
118
- return;
119
- }
120
- const files = {};
121
- for (const [trackId, { segment, track }] of Object.entries(seekResult)) {
122
- const start = segment.offset;
123
- const end = segment.offset + segment.size;
124
- const response = await fetch(this.fragmentTrackPath(trackId), {
125
- signal,
126
- headers: { Range: `bytes=${start}-${end}` }
127
- });
128
- const initSegment = Object.values(initSegments).find(
129
- (initSegment2) => initSegment2.trackId === String(track.id)
130
- );
131
- if (!initSegment) {
132
- throw new Error("Could not find matching init segment");
133
- }
134
- const initBuffer = initSegment.buffer;
135
- const mediaBuffer = await response.arrayBuffer();
136
- files[trackId] = new File([initBuffer, mediaBuffer], "video.mp4", {
137
- type: "video/mp4"
138
- });
139
- }
140
- return files;
141
- }
142
- });
143
- this.videoAssetTask = new Task(this, {
144
- autoRun: EF_INTERACTIVE,
145
- args: () => [this.fetchSeekTask.value],
146
- task: async ([files], { signal: _signal }) => {
147
- if (!files) {
148
- return;
149
- }
150
- if (!this.defaultVideoTrackId) {
151
- return;
152
- }
153
- const videoFile = files[this.defaultVideoTrackId];
154
- if (!videoFile) {
155
- return;
156
- }
157
- for (const frame of this.videoAssetTask.value?.decodedFrames || []) {
158
- frame.close();
159
- }
160
- this.videoAssetTask.value?.videoDecoder?.close();
161
- return await VideoAsset.createFromReadableStream(
162
- "video.mp4",
163
- videoFile.stream(),
164
- videoFile
165
- );
166
- }
167
- });
168
- this.desiredSeekTimeMs = 0;
169
- this.#audioContext = new OfflineAudioContext(2, 48e3 / 30, 48e3);
170
- this.audioBufferTask = new Task(this, {
171
- autoRun: EF_INTERACTIVE,
172
- args: () => [this.fetchSeekTask.value, this.seekTask.value],
173
- task: async ([files, segments], { signal: _signal }) => {
174
- if (!files) {
175
- return;
176
- }
177
- if (!segments) {
178
- return;
179
- }
180
- if (!this.defaultAudioTrackId) {
181
- return;
182
- }
183
- const segment = segments[this.defaultAudioTrackId];
184
- if (!segment) {
185
- return;
186
- }
187
- const audioFile = files[this.defaultAudioTrackId];
188
- if (!audioFile) {
189
- return;
190
- }
191
- return {
192
- buffer: await this.#audioContext.decodeAudioData(
193
- await audioFile.arrayBuffer()
194
- ),
195
- startOffsetMs: segment.segment.cts / segment.track.timescale * 1e3
196
- };
197
- }
198
- });
199
- }
200
- static {
201
- this.styles = [
202
- css`
203
- :host {
204
- display: block;
205
- position: relative;
206
- overflow: hidden;
207
- }
208
- `
209
- ];
210
- }
211
- fragmentIndexPath() {
212
- if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
213
- return `${this.src}/index`;
214
- }
215
- return `/@ef-track-fragment-index/${this.src ?? ""}`;
216
- }
217
- fragmentTrackPath(trackId) {
218
- if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
219
- return `${this.src.replace("files", "tracks")}/${trackId}`;
220
- }
221
- return `/@ef-track/${this.src ?? ""}?trackId=${trackId}`;
222
- }
223
- get defaultVideoTrackId() {
224
- return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
225
- (track) => track.type === "video"
226
- )?.track;
227
- }
228
- get defaultAudioTrackId() {
229
- return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
230
- (track) => track.type === "audio"
231
- )?.track;
232
- }
233
- async executeSeek(seekToMs) {
234
- this.desiredSeekTimeMs = seekToMs;
235
- }
236
- updated(changedProperties) {
237
- if (changedProperties.has("ownCurrentTimeMs")) {
238
- this.executeSeek(this.ownCurrentTimeMs);
239
- }
240
- }
241
- get hasOwnDuration() {
242
- return true;
243
- }
244
- get durationMs() {
245
- if (!this.trackFragmentIndexLoader.value) {
246
- return 0;
247
- }
248
- const durations = Object.values(this.trackFragmentIndexLoader.value).map(
249
- (track) => {
250
- return track.duration / track.timescale * 1e3;
251
- }
252
- );
253
- if (durations.length === 0) {
254
- return 0;
255
- }
256
- return Math.max(...durations);
257
- }
258
- get startTimeMs() {
259
- return getStartTimeMs(this);
260
- }
261
- #audioContext;
262
- async fetchAudioSpanningTime(fromMs, toMs) {
263
- fromMs -= this.startTimeMs;
264
- toMs -= this.startTimeMs;
265
- await this.trackFragmentIndexLoader.taskComplete;
266
- const audioTrackId = this.defaultAudioTrackId;
267
- if (!audioTrackId) {
268
- log("No audio track found");
269
- return;
270
- }
271
- const audioTrackIndex = this.trackFragmentIndexLoader.value?.[audioTrackId];
272
- if (!audioTrackIndex) {
273
- log("No audio track found");
274
- return;
275
- }
276
- const start = audioTrackIndex.initSegment.offset;
277
- const end = audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size - 1;
278
- const audioInitFragmentRequest = this.fetch(
279
- this.fragmentTrackPath(String(audioTrackId)),
280
- {
281
- headers: { Range: `bytes=${start}-${end}` }
282
- }
283
- );
284
- const fragments = Object.values(audioTrackIndex.segments).filter(
285
- (segment) => {
286
- const segmentStartsBeforeEnd = segment.dts <= toMs * audioTrackIndex.timescale / 1e3;
287
- const segmentEndsAfterStart = segment.dts + segment.duration >= fromMs * audioTrackIndex.timescale / 1e3;
288
- return segmentStartsBeforeEnd && segmentEndsAfterStart;
289
- }
290
- );
291
- const firstFragment = fragments[0];
292
- if (!firstFragment) {
293
- log("No audio fragments found");
294
- return;
295
- }
296
- const lastFragment = fragments[fragments.length - 1];
297
- if (!lastFragment) {
298
- log("No audio fragments found");
299
- return;
300
- }
301
- const fragmentStart = firstFragment.offset;
302
- const fragmentEnd = lastFragment.offset + lastFragment.size - 1;
303
- const audioFragmentRequest = this.fetch(
304
- this.fragmentTrackPath(String(audioTrackId)),
305
- {
306
- headers: { Range: `bytes=${fragmentStart}-${fragmentEnd}` }
307
- }
308
- );
309
- const initResponse = await audioInitFragmentRequest;
310
- const dataResponse = await audioFragmentRequest;
311
- const initBuffer = await initResponse.arrayBuffer();
312
- const dataBuffer = await dataResponse.arrayBuffer();
313
- const audioBlob = new Blob([initBuffer, dataBuffer], {
314
- type: "audio/mp4"
315
- });
316
- return {
317
- blob: audioBlob,
318
- startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3,
319
- endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3
320
- };
321
- }
322
- }
323
- __decorateClass([
324
- property({ type: Number })
325
- ], EFMedia.prototype, "currentTimeMs");
326
- __decorateClass([
327
- consume({ context: apiHostContext, subscribe: true }),
328
- state()
329
- ], EFMedia.prototype, "efHost");
330
- __decorateClass([
331
- state()
332
- ], EFMedia.prototype, "desiredSeekTimeMs");
333
- export {
334
- EFMedia,
335
- deepGetMediaElements
336
- };
@@ -1,55 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const context = require("@lit/context");
4
- const EFWorkbench = require("../gui/EFWorkbench.cjs");
5
- const state_js = require("lit/decorators/state.js");
6
- const task = require("@lit/task");
7
- const property_js = require("lit/decorators/property.js");
8
- var __defProp = Object.defineProperty;
9
- var __decorateClass = (decorators, target, key, kind) => {
10
- var result = void 0;
11
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
12
- if (decorator = decorators[i])
13
- result = decorator(target, key, result) || result;
14
- if (result) __defProp(target, key, result);
15
- return result;
16
- };
17
- function EFSourceMixin(superClass, options) {
18
- class EFSourceElement extends superClass {
19
- constructor() {
20
- super(...arguments);
21
- this.src = "";
22
- this.md5SumLoader = new task.Task(this, {
23
- autoRun: false,
24
- args: () => [this.src],
25
- task: async ([src], { signal }) => {
26
- const md5Path = `/@ef-asset/${src}`;
27
- const response = await fetch(md5Path, { method: "HEAD", signal });
28
- return response.headers.get("etag") ?? void 0;
29
- }
30
- });
31
- }
32
- productionSrc() {
33
- if (!this.md5SumLoader.value) {
34
- throw new Error(
35
- `MD5 sum not available for ${this}. Cannot generate production URL`
36
- );
37
- }
38
- if (!this.efHost) {
39
- throw new Error(
40
- `efHost not available for ${this}. Cannot generate production URL`
41
- );
42
- }
43
- return `${this.efHost}/api/video2/${options.assetType}/${this.md5SumLoader.value}`;
44
- }
45
- }
46
- __decorateClass([
47
- context.consume({ context: EFWorkbench.apiHostContext, subscribe: true }),
48
- state_js.state()
49
- ], EFSourceElement.prototype, "efHost");
50
- __decorateClass([
51
- property_js.property({ type: String })
52
- ], EFSourceElement.prototype, "src");
53
- return EFSourceElement;
54
- }
55
- exports.EFSourceMixin = EFSourceMixin;
@@ -1,12 +0,0 @@
1
- import { LitElement } from 'lit';
2
-
3
- export declare class EFSourceMixinInterface {
4
- productionSrc(): string;
5
- src: string;
6
- }
7
- interface EFSourceMixinOptions {
8
- assetType: string;
9
- }
10
- type Constructor<T = {}> = new (...args: any[]) => T;
11
- export declare function EFSourceMixin<T extends Constructor<LitElement>>(superClass: T, options: EFSourceMixinOptions): Constructor<EFSourceMixinInterface> & T;
12
- export {};
@@ -1,55 +0,0 @@
1
- import { consume } from "@lit/context";
2
- import { apiHostContext } from "../gui/EFWorkbench.js";
3
- import { state } from "lit/decorators/state.js";
4
- import { Task } from "@lit/task";
5
- import { property } from "lit/decorators/property.js";
6
- var __defProp = Object.defineProperty;
7
- var __decorateClass = (decorators, target, key, kind) => {
8
- var result = void 0;
9
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
10
- if (decorator = decorators[i])
11
- result = decorator(target, key, result) || result;
12
- if (result) __defProp(target, key, result);
13
- return result;
14
- };
15
- function EFSourceMixin(superClass, options) {
16
- class EFSourceElement extends superClass {
17
- constructor() {
18
- super(...arguments);
19
- this.src = "";
20
- this.md5SumLoader = new Task(this, {
21
- autoRun: false,
22
- args: () => [this.src],
23
- task: async ([src], { signal }) => {
24
- const md5Path = `/@ef-asset/${src}`;
25
- const response = await fetch(md5Path, { method: "HEAD", signal });
26
- return response.headers.get("etag") ?? void 0;
27
- }
28
- });
29
- }
30
- productionSrc() {
31
- if (!this.md5SumLoader.value) {
32
- throw new Error(
33
- `MD5 sum not available for ${this}. Cannot generate production URL`
34
- );
35
- }
36
- if (!this.efHost) {
37
- throw new Error(
38
- `efHost not available for ${this}. Cannot generate production URL`
39
- );
40
- }
41
- return `${this.efHost}/api/video2/${options.assetType}/${this.md5SumLoader.value}`;
42
- }
43
- }
44
- __decorateClass([
45
- consume({ context: apiHostContext, subscribe: true }),
46
- state()
47
- ], EFSourceElement.prototype, "efHost");
48
- __decorateClass([
49
- property({ type: String })
50
- ], EFSourceElement.prototype, "src");
51
- return EFSourceElement;
52
- }
53
- export {
54
- EFSourceMixin
55
- };
@@ -1,199 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const context = require("@lit/context");
4
- const decorators_js = require("lit/decorators.js");
5
- const durationConverter = require("./durationConverter.cjs");
6
- const task = require("@lit/task");
7
- const EF_INTERACTIVE = require("../EF_INTERACTIVE.cjs");
8
- var __defProp = Object.defineProperty;
9
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
10
- var __decorateClass = (decorators, target, key, kind) => {
11
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
12
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
13
- if (decorator = decorators[i])
14
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
15
- if (kind && result) __defProp(target, key, result);
16
- return result;
17
- };
18
- const timegroupContext = context.createContext(
19
- Symbol("timeGroupContext")
20
- );
21
- const isEFTemporal = (obj) => obj[EF_TEMPORAL];
22
- const EF_TEMPORAL = Symbol("EF_TEMPORAL");
23
- const deepGetTemporalElements = (element, temporals = []) => {
24
- for (const child of element.children) {
25
- if (isEFTemporal(child)) {
26
- temporals.push(child);
27
- }
28
- deepGetTemporalElements(child, temporals);
29
- }
30
- return temporals;
31
- };
32
- const deepGetElementsWithFrameTasks = (element, elements = []) => {
33
- for (const child of element.children) {
34
- if ("frameTask" in child && child.frameTask instanceof task.Task) {
35
- elements.push(child);
36
- }
37
- deepGetElementsWithFrameTasks(child, elements);
38
- }
39
- return elements;
40
- };
41
- const shallowGetTemporalElements = (element, temporals = []) => {
42
- for (const child of element.children) {
43
- if (isEFTemporal(child)) {
44
- temporals.push(child);
45
- } else {
46
- shallowGetTemporalElements(child, temporals);
47
- }
48
- }
49
- return temporals;
50
- };
51
- class OwnCurrentTimeController {
52
- constructor(host, temporal) {
53
- this.host = host;
54
- this.temporal = temporal;
55
- host.addController(this);
56
- }
57
- hostUpdated() {
58
- this.temporal.requestUpdate("ownCurrentTimeMs");
59
- }
60
- remove() {
61
- this.host.removeController(this);
62
- }
63
- }
64
- const EFTemporal = (superClass) => {
65
- class TemporalMixinClass extends superClass {
66
- constructor() {
67
- super(...arguments);
68
- this._offsetMs = 0;
69
- this.rootTimegroup = this.getRootTimegroup();
70
- this.frameTask = new task.Task(this, {
71
- autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
72
- args: () => [this.ownCurrentTimeMs],
73
- task: async ([], { signal: _signal }) => {
74
- let fullyUpdated = await this.updateComplete;
75
- while (!fullyUpdated) {
76
- fullyUpdated = await this.updateComplete;
77
- }
78
- }
79
- });
80
- }
81
- #parentTimegroup;
82
- set parentTimegroup(value) {
83
- this.#parentTimegroup = value;
84
- this.ownCurrentTimeController?.remove();
85
- this.rootTimegroup = this.getRootTimegroup();
86
- if (this.rootTimegroup) {
87
- this.ownCurrentTimeController = new OwnCurrentTimeController(
88
- this.rootTimegroup,
89
- this
90
- );
91
- }
92
- }
93
- get parentTimegroup() {
94
- return this.#parentTimegroup;
95
- }
96
- getRootTimegroup() {
97
- let parent = this.tagName === "EF-TIMEGROUP" ? this : this.parentTimegroup;
98
- while (parent?.parentTimegroup) {
99
- parent = parent.parentTimegroup;
100
- }
101
- return parent;
102
- }
103
- get hasOwnDuration() {
104
- return false;
105
- }
106
- // Defining this as a getter to a private property allows us to
107
- // override it classes that include this mixin.
108
- get durationMs() {
109
- return this._durationMs || this.parentTimegroup?.durationMs || 0;
110
- }
111
- get offsetMs() {
112
- return this._offsetMs || 0;
113
- }
114
- get parentTemporal() {
115
- let parent = this.parentElement;
116
- while (parent && !isEFTemporal(parent)) {
117
- parent = parent.parentElement;
118
- }
119
- return parent;
120
- }
121
- get startTimeWithinParentMs() {
122
- if (!this.parentTemporal) {
123
- return 0;
124
- }
125
- return this.startTimeMs - this.parentTemporal.startTimeMs;
126
- }
127
- get startTimeMs() {
128
- const parentTimegroup = this.parentTimegroup;
129
- if (!parentTimegroup) {
130
- return 0;
131
- }
132
- switch (parentTimegroup.mode) {
133
- case "sequence": {
134
- const siblingTemorals = shallowGetTemporalElements(parentTimegroup);
135
- const ownIndex = siblingTemorals.indexOf(
136
- this
137
- );
138
- if (ownIndex === 0) {
139
- return parentTimegroup.startTimeMs;
140
- }
141
- const previous = siblingTemorals[ownIndex - 1];
142
- if (!previous) {
143
- throw new Error("Previous temporal element not found");
144
- }
145
- return previous.startTimeMs + previous.durationMs;
146
- }
147
- case "contain":
148
- case "fixed":
149
- return parentTimegroup.startTimeMs + this.offsetMs;
150
- default:
151
- throw new Error(`Invalid time mode: ${parentTimegroup.mode}`);
152
- }
153
- }
154
- get endTimeMs() {
155
- return this.startTimeMs + this.durationMs;
156
- }
157
- get ownCurrentTimeMs() {
158
- if (this.rootTimegroup) {
159
- return Math.min(
160
- Math.max(0, this.rootTimegroup.currentTimeMs - this.startTimeMs),
161
- this.durationMs
162
- );
163
- }
164
- return 0;
165
- }
166
- }
167
- __decorateClass([
168
- context.consume({ context: timegroupContext, subscribe: true }),
169
- decorators_js.property({ attribute: false })
170
- ], TemporalMixinClass.prototype, "parentTimegroup", 1);
171
- __decorateClass([
172
- decorators_js.property({
173
- type: String,
174
- attribute: "offset",
175
- converter: durationConverter.durationConverter
176
- })
177
- ], TemporalMixinClass.prototype, "_offsetMs", 2);
178
- __decorateClass([
179
- decorators_js.property({
180
- type: Number,
181
- attribute: "duration",
182
- converter: durationConverter.durationConverter
183
- })
184
- ], TemporalMixinClass.prototype, "_durationMs", 2);
185
- __decorateClass([
186
- decorators_js.state()
187
- ], TemporalMixinClass.prototype, "rootTimegroup", 2);
188
- Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {
189
- value: true
190
- });
191
- return TemporalMixinClass;
192
- };
193
- exports.EFTemporal = EFTemporal;
194
- exports.OwnCurrentTimeController = OwnCurrentTimeController;
195
- exports.deepGetElementsWithFrameTasks = deepGetElementsWithFrameTasks;
196
- exports.deepGetTemporalElements = deepGetTemporalElements;
197
- exports.isEFTemporal = isEFTemporal;
198
- exports.shallowGetTemporalElements = shallowGetTemporalElements;
199
- exports.timegroupContext = timegroupContext;
@@ -1,38 +0,0 @@
1
- import { LitElement, ReactiveController } from 'lit';
2
- import { EFTimegroup } from './EFTimegroup';
3
- import { Task } from '@lit/task';
4
-
5
- export declare const timegroupContext: {
6
- __context__: EFTimegroup;
7
- };
8
- export declare class TemporalMixinInterface {
9
- get hasOwnDuration(): boolean;
10
- get durationMs(): number;
11
- get startTimeMs(): number;
12
- get startTimeWithinParentMs(): number;
13
- get endTimeMs(): number;
14
- get ownCurrentTimeMs(): number;
15
- set duration(value: string);
16
- get duration(): string;
17
- parentTimegroup?: EFTimegroup;
18
- rootTimegroup?: EFTimegroup;
19
- frameTask: Task<readonly unknown[], unknown>;
20
- }
21
- export declare const isEFTemporal: (obj: any) => obj is TemporalMixinInterface;
22
- export declare const deepGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
23
- export declare const deepGetElementsWithFrameTasks: (element: Element, elements?: Array<HTMLElement & {
24
- frameTask: Task;
25
- }>) => (HTMLElement & {
26
- frameTask: Task;
27
- })[];
28
- export declare const shallowGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
29
- export declare class OwnCurrentTimeController implements ReactiveController {
30
- private host;
31
- private temporal;
32
- constructor(host: EFTimegroup, temporal: TemporalMixinInterface & LitElement);
33
- hostUpdated(): void;
34
- remove(): void;
35
- }
36
- type Constructor<T = {}> = new (...args: any[]) => T;
37
- export declare const EFTemporal: <T extends Constructor<LitElement>>(superClass: T) => Constructor<TemporalMixinInterface> & T;
38
- export {};