@editframe/elements 0.16.7-beta.0 → 0.17.6-beta.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.
Files changed (101) hide show
  1. package/README.md +30 -0
  2. package/dist/DecoderResetFrequency.test.d.ts +1 -0
  3. package/dist/DecoderResetRecovery.test.d.ts +1 -0
  4. package/dist/DelayedLoadingState.d.ts +48 -0
  5. package/dist/DelayedLoadingState.integration.test.d.ts +1 -0
  6. package/dist/DelayedLoadingState.js +113 -0
  7. package/dist/DelayedLoadingState.test.d.ts +1 -0
  8. package/dist/EF_FRAMEGEN.d.ts +10 -1
  9. package/dist/EF_FRAMEGEN.js +199 -179
  10. package/dist/EF_INTERACTIVE.js +2 -6
  11. package/dist/EF_RENDERING.js +1 -3
  12. package/dist/JitTranscodingClient.browsertest.d.ts +1 -0
  13. package/dist/JitTranscodingClient.d.ts +167 -0
  14. package/dist/JitTranscodingClient.js +373 -0
  15. package/dist/JitTranscodingClient.test.d.ts +1 -0
  16. package/dist/LoadingDebounce.test.d.ts +1 -0
  17. package/dist/LoadingIndicator.browsertest.d.ts +0 -0
  18. package/dist/ManualScrubTest.test.d.ts +1 -0
  19. package/dist/ScrubResolvedFlashing.test.d.ts +1 -0
  20. package/dist/ScrubTrackIntegration.test.d.ts +1 -0
  21. package/dist/ScrubTrackManager.d.ts +96 -0
  22. package/dist/ScrubTrackManager.js +216 -0
  23. package/dist/ScrubTrackManager.test.d.ts +1 -0
  24. package/dist/SegmentSwitchLoading.test.d.ts +1 -0
  25. package/dist/VideoSeekFlashing.browsertest.d.ts +0 -0
  26. package/dist/VideoStuckDiagnostic.test.d.ts +1 -0
  27. package/dist/elements/CrossUpdateController.js +13 -15
  28. package/dist/elements/EFAudio.browsertest.d.ts +0 -0
  29. package/dist/elements/EFAudio.d.ts +1 -1
  30. package/dist/elements/EFAudio.js +30 -43
  31. package/dist/elements/EFCaptions.js +337 -373
  32. package/dist/elements/EFImage.js +64 -90
  33. package/dist/elements/EFMedia.d.ts +98 -33
  34. package/dist/elements/EFMedia.js +1169 -678
  35. package/dist/elements/EFSourceMixin.js +31 -48
  36. package/dist/elements/EFTemporal.d.ts +1 -0
  37. package/dist/elements/EFTemporal.js +266 -360
  38. package/dist/elements/EFTimegroup.d.ts +3 -1
  39. package/dist/elements/EFTimegroup.js +262 -323
  40. package/dist/elements/EFVideo.browsertest.d.ts +0 -0
  41. package/dist/elements/EFVideo.d.ts +90 -2
  42. package/dist/elements/EFVideo.js +408 -111
  43. package/dist/elements/EFWaveform.js +375 -411
  44. package/dist/elements/FetchMixin.js +14 -24
  45. package/dist/elements/MediaController.d.ts +30 -0
  46. package/dist/elements/TargetController.js +130 -156
  47. package/dist/elements/TimegroupController.js +17 -19
  48. package/dist/elements/durationConverter.js +15 -4
  49. package/dist/elements/parseTimeToMs.js +4 -10
  50. package/dist/elements/printTaskStatus.d.ts +2 -0
  51. package/dist/elements/printTaskStatus.js +11 -0
  52. package/dist/elements/updateAnimations.js +39 -59
  53. package/dist/getRenderInfo.js +58 -67
  54. package/dist/gui/ContextMixin.js +203 -288
  55. package/dist/gui/EFConfiguration.js +27 -43
  56. package/dist/gui/EFFilmstrip.js +440 -620
  57. package/dist/gui/EFFitScale.js +112 -135
  58. package/dist/gui/EFFocusOverlay.js +45 -61
  59. package/dist/gui/EFPreview.js +30 -49
  60. package/dist/gui/EFScrubber.js +78 -99
  61. package/dist/gui/EFTimeDisplay.js +49 -70
  62. package/dist/gui/EFToggleLoop.js +17 -34
  63. package/dist/gui/EFTogglePlay.js +37 -58
  64. package/dist/gui/EFWorkbench.js +66 -88
  65. package/dist/gui/TWMixin.js +2 -48
  66. package/dist/gui/TWMixin2.js +31 -0
  67. package/dist/gui/efContext.js +2 -6
  68. package/dist/gui/fetchContext.js +1 -3
  69. package/dist/gui/focusContext.js +1 -3
  70. package/dist/gui/focusedElementContext.js +2 -6
  71. package/dist/gui/playingContext.js +1 -4
  72. package/dist/index.js +5 -30
  73. package/dist/msToTimeCode.js +11 -13
  74. package/dist/style.css +2 -1
  75. package/package.json +3 -3
  76. package/src/elements/EFAudio.browsertest.ts +569 -0
  77. package/src/elements/EFAudio.ts +4 -6
  78. package/src/elements/EFCaptions.browsertest.ts +0 -1
  79. package/src/elements/EFImage.browsertest.ts +0 -1
  80. package/src/elements/EFMedia.browsertest.ts +147 -115
  81. package/src/elements/EFMedia.ts +1339 -307
  82. package/src/elements/EFTemporal.browsertest.ts +0 -1
  83. package/src/elements/EFTemporal.ts +11 -0
  84. package/src/elements/EFTimegroup.ts +73 -10
  85. package/src/elements/EFVideo.browsertest.ts +680 -0
  86. package/src/elements/EFVideo.ts +729 -50
  87. package/src/elements/EFWaveform.ts +4 -4
  88. package/src/elements/MediaController.ts +108 -0
  89. package/src/elements/__screenshots__/EFMedia.browsertest.ts/EFMedia-JIT-audio-playback-audioBufferTask-should-work-in-JIT-mode-without-URL-errors-1.png +0 -0
  90. package/src/elements/printTaskStatus.ts +16 -0
  91. package/src/elements/updateAnimations.ts +6 -0
  92. package/src/gui/TWMixin.ts +10 -3
  93. package/test/EFVideo.frame-tasks.browsertest.ts +524 -0
  94. package/test/EFVideo.framegen.browsertest.ts +118 -0
  95. package/test/createJitTestClips.ts +293 -0
  96. package/test/useAssetMSW.ts +49 -0
  97. package/test/useMSW.ts +31 -0
  98. package/types.json +1 -1
  99. package/dist/gui/TWMixin.css.js +0 -4
  100. /package/dist/elements/{TargetController.test.d.ts → TargetController.browsertest.d.ts} +0 -0
  101. /package/src/elements/{TargetController.test.ts → TargetController.browsertest.ts} +0 -0
@@ -1,28 +1,18 @@
1
+ import { fetchContext } from "../gui/fetchContext.js";
1
2
  import { consume } from "@lit/context";
3
+ import _decorate from "@oxc-project/runtime/helpers/decorate";
2
4
  import { state } from "lit/decorators/state.js";
3
- import { fetchContext } from "../gui/fetchContext.js";
4
- var __defProp = Object.defineProperty;
5
- var __decorateClass = (decorators, target, key, kind) => {
6
- var result = void 0;
7
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
8
- if (decorator = decorators[i])
9
- result = decorator(target, key, result) || result;
10
- if (result) __defProp(target, key, result);
11
- return result;
12
- };
13
5
  function FetchMixin(superClass) {
14
- class FetchElement extends superClass {
15
- constructor() {
16
- super(...arguments);
17
- this.fetch = fetch.bind(window);
18
- }
19
- }
20
- __decorateClass([
21
- consume({ context: fetchContext, subscribe: true }),
22
- state()
23
- ], FetchElement.prototype, "fetch");
24
- return FetchElement;
6
+ class FetchElement extends superClass {
7
+ constructor(..._args) {
8
+ super(..._args);
9
+ this.fetch = fetch.bind(window);
10
+ }
11
+ }
12
+ _decorate([consume({
13
+ context: fetchContext,
14
+ subscribe: true
15
+ }), state()], FetchElement.prototype, "fetch", void 0);
16
+ return FetchElement;
25
17
  }
26
- export {
27
- FetchMixin
28
- };
18
+ export { FetchMixin };
@@ -0,0 +1,30 @@
1
+ import { ReactiveController, ReactiveControllerHost } from 'lit';
2
+ export declare class MediaController implements ReactiveController {
3
+ #private;
4
+ private host;
5
+ constructor(host: ReactiveControllerHost & {
6
+ src: string;
7
+ assetId: string | null;
8
+ mode: "asset" | "jit-transcode" | "auto";
9
+ });
10
+ get mode(): "asset" | "jit-transcode";
11
+ get src(): string | null;
12
+ set src(value: string | null);
13
+ get assetId(): string | null;
14
+ set assetId(value: string | null);
15
+ changes: Map<string, {
16
+ oldValue: any;
17
+ newValue: any;
18
+ }> | null;
19
+ updatePending: boolean;
20
+ trackUpdate(key: string, oldValue: any, newValue: any): void;
21
+ endUpdate(): void;
22
+ handleUpdate(changes: Map<string, {
23
+ oldValue: any;
24
+ newValue: any;
25
+ }>): void;
26
+ hostUpdated(): void;
27
+ hostConnected(): void;
28
+ hostDisconnected(): void;
29
+ updated(): void;
30
+ }
@@ -1,164 +1,138 @@
1
1
  import { LitElement } from "lit";
2
2
  const EF_TARGETABLE = Symbol("EF_TARGETABLE");
3
- class TargetRegistry {
4
- constructor() {
5
- this.idMap = /* @__PURE__ */ new Map();
6
- this.callbacks = /* @__PURE__ */ new Map();
7
- }
8
- subscribe(id, callback) {
9
- this.callbacks.set(id, this.callbacks.get(id) ?? /* @__PURE__ */ new Set());
10
- this.callbacks.get(id)?.add(callback);
11
- }
12
- unsubscribe(id, callback) {
13
- if (id === null) {
14
- return;
15
- }
16
- this.callbacks.get(id)?.delete(callback);
17
- if (this.callbacks.get(id)?.size === 0) {
18
- this.callbacks.delete(id);
19
- }
20
- }
21
- get(id) {
22
- return this.idMap.get(id);
23
- }
24
- register(id, target) {
25
- this.idMap.set(id, target);
26
- for (const callback of this.callbacks.get(id) ?? []) {
27
- callback(target);
28
- }
29
- }
30
- unregister(id) {
31
- for (const callback of this.callbacks.get(id) ?? []) {
32
- callback(void 0);
33
- }
34
- this.idMap.delete(id);
35
- this.callbacks.delete(id);
36
- }
37
- }
3
+ var TargetRegistry = class {
4
+ constructor() {
5
+ this.idMap = /* @__PURE__ */ new Map();
6
+ this.callbacks = /* @__PURE__ */ new Map();
7
+ }
8
+ subscribe(id, callback) {
9
+ this.callbacks.set(id, this.callbacks.get(id) ?? /* @__PURE__ */ new Set());
10
+ this.callbacks.get(id)?.add(callback);
11
+ }
12
+ unsubscribe(id, callback) {
13
+ if (id === null) return;
14
+ this.callbacks.get(id)?.delete(callback);
15
+ if (this.callbacks.get(id)?.size === 0) this.callbacks.delete(id);
16
+ }
17
+ get(id) {
18
+ return this.idMap.get(id);
19
+ }
20
+ register(id, target) {
21
+ this.idMap.set(id, target);
22
+ for (const callback of this.callbacks.get(id) ?? []) callback(target);
23
+ }
24
+ unregister(id) {
25
+ for (const callback of this.callbacks.get(id) ?? []) callback(void 0);
26
+ this.idMap.delete(id);
27
+ this.callbacks.delete(id);
28
+ }
29
+ };
38
30
  const documentRegistries = /* @__PURE__ */ new WeakMap();
39
31
  const getRegistry = (root) => {
40
- let registry = documentRegistries.get(root);
41
- if (!registry) {
42
- registry = new TargetRegistry();
43
- documentRegistries.set(root, registry);
44
- }
45
- return registry;
32
+ let registry = documentRegistries.get(root);
33
+ if (!registry) {
34
+ registry = new TargetRegistry();
35
+ documentRegistries.set(root, registry);
36
+ }
37
+ return registry;
46
38
  };
47
39
  const EFTargetable = (superClass) => {
48
- class TargetableElement extends superClass {
49
- #registry = null;
50
- static get observedAttributes() {
51
- const parentAttributes = superClass.observedAttributes || [];
52
- return [.../* @__PURE__ */ new Set([...parentAttributes, "id"])];
53
- }
54
- updateRegistry(oldValue, newValue) {
55
- if (!this.#registry) return;
56
- if (oldValue === newValue) return;
57
- if (oldValue) {
58
- this.#registry.unregister(oldValue);
59
- }
60
- if (newValue) {
61
- this.#registry.register(newValue, this);
62
- }
63
- }
64
- connectedCallback() {
65
- super.connectedCallback();
66
- this.#registry = getRegistry(this.getRootNode());
67
- const initialId = this.getAttribute("id");
68
- if (initialId) {
69
- this.updateRegistry("", initialId);
70
- }
71
- }
72
- attributeChangedCallback(name, old, value) {
73
- super.attributeChangedCallback(name, old, value);
74
- if (name === "id") {
75
- this.updateRegistry(old ?? "", value ?? "");
76
- }
77
- }
78
- disconnectedCallback() {
79
- if (this.#registry) {
80
- this.updateRegistry(this.id, "");
81
- this.#registry = null;
82
- }
83
- super.disconnectedCallback();
84
- }
85
- }
86
- Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, {
87
- value: true
88
- });
89
- return TargetableElement;
40
+ class TargetableElement extends superClass {
41
+ #registry = null;
42
+ static get observedAttributes() {
43
+ const parentAttributes = superClass.observedAttributes || [];
44
+ return [...new Set([...parentAttributes, "id"])];
45
+ }
46
+ updateRegistry(oldValue, newValue) {
47
+ if (!this.#registry) return;
48
+ if (oldValue === newValue) return;
49
+ if (oldValue) this.#registry.unregister(oldValue);
50
+ if (newValue) this.#registry.register(newValue, this);
51
+ }
52
+ connectedCallback() {
53
+ super.connectedCallback();
54
+ this.#registry = getRegistry(this.getRootNode());
55
+ const initialId = this.getAttribute("id");
56
+ if (initialId) this.updateRegistry("", initialId);
57
+ }
58
+ attributeChangedCallback(name, old, value) {
59
+ super.attributeChangedCallback(name, old, value);
60
+ if (name === "id") this.updateRegistry(old ?? "", value ?? "");
61
+ }
62
+ disconnectedCallback() {
63
+ if (this.#registry) {
64
+ this.updateRegistry(this.id, "");
65
+ this.#registry = null;
66
+ }
67
+ super.disconnectedCallback();
68
+ }
69
+ }
70
+ Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, { value: true });
71
+ return TargetableElement;
72
+ };
73
+ var TargetUpdateController = class {
74
+ constructor(host) {
75
+ this.host = host;
76
+ }
77
+ hostConnected() {
78
+ this.host.requestUpdate();
79
+ }
80
+ hostDisconnected() {
81
+ this.host.requestUpdate();
82
+ }
83
+ hostUpdate() {
84
+ this.host.requestUpdate();
85
+ }
90
86
  };
91
- class TargetUpdateController {
92
- constructor(host) {
93
- this.host = host;
94
- }
95
- hostConnected() {
96
- this.host.requestUpdate();
97
- }
98
- hostDisconnected() {
99
- this.host.requestUpdate();
100
- }
101
- hostUpdate() {
102
- this.host.requestUpdate();
103
- }
104
- }
105
- class TargetController {
106
- constructor(host) {
107
- this.targetController = null;
108
- this.currentTargetString = null;
109
- this.registryCallback = (target) => {
110
- this.host.targetElement = target ?? null;
111
- };
112
- this.host = host;
113
- this.host.addController(this);
114
- this.currentTargetString = this.host.target;
115
- if (this.currentTargetString) {
116
- this.registry.subscribe(this.currentTargetString, this.registryCallback);
117
- }
118
- }
119
- updateTarget() {
120
- const newTarget = this.registry.get(this.host.target);
121
- if (this.host.targetElement !== newTarget) {
122
- this.disconnectFromTarget();
123
- this.host.targetElement = newTarget ?? null;
124
- this.connectToTarget();
125
- }
126
- }
127
- connectToTarget() {
128
- if (this.host.targetElement instanceof LitElement) {
129
- this.targetController = new TargetUpdateController(this.host);
130
- this.host.targetElement.addController(this.targetController);
131
- }
132
- }
133
- disconnectFromTarget() {
134
- if (this.host.targetElement instanceof LitElement && this.targetController) {
135
- this.host.targetElement.removeController(this.targetController);
136
- this.targetController = null;
137
- }
138
- }
139
- get registry() {
140
- const root = this.host.getRootNode();
141
- return getRegistry(root);
142
- }
143
- hostDisconnected() {
144
- this.disconnectFromTarget();
145
- }
146
- hostConnected() {
147
- this.updateTarget();
148
- }
149
- hostUpdate() {
150
- if (this.currentTargetString !== this.host.target) {
151
- this.registry.unsubscribe(
152
- this.currentTargetString,
153
- this.registryCallback
154
- );
155
- this.registry.subscribe(this.host.target, this.registryCallback);
156
- this.updateTarget();
157
- this.currentTargetString = this.host.target;
158
- }
159
- }
160
- }
161
- export {
162
- EFTargetable,
163
- TargetController
87
+ var TargetController = class {
88
+ constructor(host) {
89
+ this.targetController = null;
90
+ this.currentTargetString = null;
91
+ this.registryCallback = (target) => {
92
+ this.host.targetElement = target ?? null;
93
+ };
94
+ this.host = host;
95
+ this.host.addController(this);
96
+ this.currentTargetString = this.host.target;
97
+ if (this.currentTargetString) this.registry.subscribe(this.currentTargetString, this.registryCallback);
98
+ }
99
+ updateTarget() {
100
+ const newTarget = this.registry.get(this.host.target);
101
+ if (this.host.targetElement !== newTarget) {
102
+ this.disconnectFromTarget();
103
+ this.host.targetElement = newTarget ?? null;
104
+ this.connectToTarget();
105
+ }
106
+ }
107
+ connectToTarget() {
108
+ if (this.host.targetElement instanceof LitElement) {
109
+ this.targetController = new TargetUpdateController(this.host);
110
+ this.host.targetElement.addController(this.targetController);
111
+ }
112
+ }
113
+ disconnectFromTarget() {
114
+ if (this.host.targetElement instanceof LitElement && this.targetController) {
115
+ this.host.targetElement.removeController(this.targetController);
116
+ this.targetController = null;
117
+ }
118
+ }
119
+ get registry() {
120
+ const root = this.host.getRootNode();
121
+ return getRegistry(root);
122
+ }
123
+ hostDisconnected() {
124
+ this.disconnectFromTarget();
125
+ }
126
+ hostConnected() {
127
+ this.updateTarget();
128
+ }
129
+ hostUpdate() {
130
+ if (this.currentTargetString !== this.host.target) {
131
+ this.registry.unsubscribe(this.currentTargetString, this.registryCallback);
132
+ this.registry.subscribe(this.host.target, this.registryCallback);
133
+ this.updateTarget();
134
+ this.currentTargetString = this.host.target;
135
+ }
136
+ }
164
137
  };
138
+ export { EFTargetable, TargetController };
@@ -1,20 +1,18 @@
1
- class TimegroupController {
2
- constructor(host, child) {
3
- this.host = host;
4
- this.child = child;
5
- this.host.addController(this);
6
- }
7
- remove() {
8
- this.host.removeController(this);
9
- }
10
- hostDisconnected() {
11
- this.host.removeController(this);
12
- }
13
- hostUpdated() {
14
- this.child.requestUpdate();
15
- this.child.currentTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
16
- }
17
- }
18
- export {
19
- TimegroupController
1
+ var TimegroupController = class {
2
+ constructor(host, child) {
3
+ this.host = host;
4
+ this.child = child;
5
+ this.host.addController(this);
6
+ }
7
+ remove() {
8
+ this.host.removeController(this);
9
+ }
10
+ hostDisconnected() {
11
+ this.host.removeController(this);
12
+ }
13
+ hostUpdated() {
14
+ this.child.requestUpdate();
15
+ this.child.currentTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
16
+ }
20
17
  };
18
+ export { TimegroupController };
@@ -1,8 +1,19 @@
1
1
  import { parseTimeToMs } from "./parseTimeToMs.js";
2
2
  const durationConverter = {
3
- fromAttribute: (value) => value === null ? null : parseTimeToMs(value),
4
- toAttribute: (value) => value === null ? null : `${value}s`
3
+ fromAttribute: (value) => value === null ? null : parseTimeToMs(value),
4
+ toAttribute: (value) => value === null ? null : `${value}s`
5
5
  };
6
- export {
7
- durationConverter
6
+ const positiveDurationConverter = (error) => {
7
+ return {
8
+ fromAttribute: (value) => {
9
+ if (value === null) return null;
10
+ if (value.startsWith("-")) throw new Error(error);
11
+ return parseTimeToMs(value);
12
+ },
13
+ toAttribute: (value) => value === null ? null : `${value}s`
14
+ };
8
15
  };
16
+ const trimDurationConverter = positiveDurationConverter("Trimstart & trimend must be a positive value in milliseconds or seconds (1s, 1000ms)");
17
+ const imageDurationConverter = positiveDurationConverter("Image duration must be a positive value in milliseconds or seconds (1s, 1000ms)");
18
+ const sourceDurationConverter = positiveDurationConverter("Sourcein & sourceout must be a positive value in milliseconds or seconds (1s, 1000ms)");
19
+ export { durationConverter };
@@ -1,12 +1,6 @@
1
1
  const parseTimeToMs = (time) => {
2
- if (time.endsWith("ms")) {
3
- return Number.parseFloat(time);
4
- }
5
- if (time.endsWith("s")) {
6
- return Number.parseFloat(time) * 1e3;
7
- }
8
- throw new Error("Time must be in milliseconds or seconds (10s, 10000ms)");
9
- };
10
- export {
11
- parseTimeToMs
2
+ if (time.endsWith("ms")) return Number.parseFloat(time);
3
+ if (time.endsWith("s")) return Number.parseFloat(time) * 1e3;
4
+ throw new Error("Time must be in milliseconds or seconds (10s, 10000ms)");
12
5
  };
6
+ export { parseTimeToMs };
@@ -0,0 +1,2 @@
1
+ import { TaskStatus } from '@lit/task';
2
+ export declare const printTaskStatus: (status: TaskStatus) => "INITIAL" | "ERROR" | "PENDING" | "COMPLETE" | "UNKNOWN";
@@ -0,0 +1,11 @@
1
+ import { TaskStatus } from "@lit/task";
2
+ const printTaskStatus = (status) => {
3
+ switch (status) {
4
+ case TaskStatus.INITIAL: return "INITIAL";
5
+ case TaskStatus.ERROR: return "ERROR";
6
+ case TaskStatus.PENDING: return "PENDING";
7
+ case TaskStatus.COMPLETE: return "COMPLETE";
8
+ default: return "UNKNOWN";
9
+ }
10
+ };
11
+ export { printTaskStatus };
@@ -1,62 +1,42 @@
1
1
  import { isEFTemporal } from "./EFTemporal.js";
2
2
  const updateAnimations = (element) => {
3
- element.style.setProperty(
4
- "--ef-progress",
5
- `${Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)) * 100}%`
6
- );
7
- const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
8
- if (element.startTimeMs > timelineTimeMs || element.endTimeMs < timelineTimeMs) {
9
- element.style.display = "none";
10
- return;
11
- }
12
- element.style.display = "";
13
- const animations = element.getAnimations({ subtree: true });
14
- element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
15
- element.style.setProperty(
16
- "--ef-transition-duration",
17
- `${element.parentTimegroup?.overlapMs ?? 0}ms`
18
- );
19
- element.style.setProperty(
20
- "--ef-transition-out-start",
21
- `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`
22
- );
23
- for (const animation of animations) {
24
- if (animation.playState === "running") {
25
- animation.pause();
26
- }
27
- const effect = animation.effect;
28
- if (!(effect && effect instanceof KeyframeEffect)) {
29
- continue;
30
- }
31
- const target = effect.target;
32
- if (!target) {
33
- continue;
34
- }
35
- if (target.closest("ef-timegroup") !== element) {
36
- continue;
37
- }
38
- const timing = effect.getTiming();
39
- const duration = Number(timing.duration) ?? 0;
40
- const delay = Number(timing.delay) ?? 0;
41
- const iterations = Number(timing.iterations) ?? 1;
42
- const timeTarget = isEFTemporal(target) ? target : target.closest("ef-timegroup");
43
- if (!timeTarget) {
44
- continue;
45
- }
46
- const currentTime = timeTarget.ownCurrentTimeMs;
47
- if (currentTime < delay) {
48
- animation.currentTime = 0;
49
- continue;
50
- }
51
- const currentIteration = Math.floor((currentTime - delay) / duration);
52
- const currentIterationTime = (currentTime - delay) % duration;
53
- if (currentIteration >= iterations) {
54
- animation.currentTime = duration - 0.01;
55
- continue;
56
- }
57
- animation.currentTime = Math.min(currentIterationTime, duration - 0.01) + delay;
58
- }
59
- };
60
- export {
61
- updateAnimations
3
+ element.style.setProperty("--ef-progress", `${Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)) * 100}%`);
4
+ const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
5
+ if (element.startTimeMs > timelineTimeMs || element.endTimeMs < timelineTimeMs) {
6
+ element.style.display = "none";
7
+ return;
8
+ }
9
+ element.style.display = "";
10
+ if (typeof element.getAnimations !== "function") return;
11
+ const animations = element.getAnimations({ subtree: true });
12
+ element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
13
+ element.style.setProperty("--ef-transition-duration", `${element.parentTimegroup?.overlapMs ?? 0}ms`);
14
+ element.style.setProperty("--ef-transition-out-start", `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`);
15
+ for (const animation of animations) {
16
+ if (animation.playState === "running") animation.pause();
17
+ const effect = animation.effect;
18
+ if (!(effect && effect instanceof KeyframeEffect)) continue;
19
+ const target = effect.target;
20
+ if (!target) continue;
21
+ if (target.closest("ef-timegroup") !== element) continue;
22
+ const timing = effect.getTiming();
23
+ const duration = Number(timing.duration) ?? 0;
24
+ const delay = Number(timing.delay) ?? 0;
25
+ const iterations = Number(timing.iterations) ?? 1;
26
+ const timeTarget = isEFTemporal(target) ? target : target.closest("ef-timegroup");
27
+ if (!timeTarget) continue;
28
+ const currentTime = timeTarget.ownCurrentTimeMs;
29
+ if (currentTime < delay) {
30
+ animation.currentTime = 0;
31
+ continue;
32
+ }
33
+ const currentIteration = Math.floor((currentTime - delay) / duration);
34
+ const currentIterationTime = (currentTime - delay) % duration;
35
+ if (currentIteration >= iterations) {
36
+ animation.currentTime = duration - .01;
37
+ continue;
38
+ }
39
+ animation.currentTime = Math.min(currentIterationTime, duration - .01) + delay;
40
+ }
62
41
  };
42
+ export { updateAnimations };