@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.
- package/CHANGELOG.md +7 -0
- package/package.json +1 -1
- package/postcss.config.cjs +12 -0
- package/{dist/packages/elements/src/EF_FRAMEGEN.js → src/EF_FRAMEGEN.ts} +113 -32
- package/src/EF_INTERACTIVE.ts +2 -0
- package/src/elements.css +22 -0
- package/src/index.ts +33 -0
- package/tailwind.config.ts +10 -0
- package/tsconfig.json +4 -0
- package/vite.config.ts +8 -0
- package/dist/lib/av/EncodedAsset.cjs +0 -577
- package/dist/lib/av/EncodedAsset.js +0 -560
- package/dist/lib/av/MP4File.cjs +0 -187
- package/dist/lib/av/MP4File.js +0 -170
- package/dist/lib/av/msToTimeCode.cjs +0 -15
- package/dist/lib/av/msToTimeCode.js +0 -15
- package/dist/lib/util/awaitMicrotask.cjs +0 -4
- package/dist/lib/util/awaitMicrotask.js +0 -4
- package/dist/lib/util/memoize.cjs +0 -14
- package/dist/lib/util/memoize.js +0 -14
- package/dist/packages/elements/src/EF_FRAMEGEN.cjs +0 -197
- package/dist/packages/elements/src/EF_FRAMEGEN.d.ts +0 -44
- package/dist/packages/elements/src/EF_INTERACTIVE.cjs +0 -4
- package/dist/packages/elements/src/EF_INTERACTIVE.d.ts +0 -1
- package/dist/packages/elements/src/EF_INTERACTIVE.js +0 -4
- package/dist/packages/elements/src/elements/CrossUpdateController.cjs +0 -16
- package/dist/packages/elements/src/elements/CrossUpdateController.d.ts +0 -9
- package/dist/packages/elements/src/elements/CrossUpdateController.js +0 -16
- package/dist/packages/elements/src/elements/EFAudio.cjs +0 -53
- package/dist/packages/elements/src/elements/EFAudio.d.ts +0 -10
- package/dist/packages/elements/src/elements/EFAudio.js +0 -54
- package/dist/packages/elements/src/elements/EFCaptions.cjs +0 -164
- package/dist/packages/elements/src/elements/EFCaptions.d.ts +0 -38
- package/dist/packages/elements/src/elements/EFCaptions.js +0 -166
- package/dist/packages/elements/src/elements/EFImage.cjs +0 -79
- package/dist/packages/elements/src/elements/EFImage.d.ts +0 -14
- package/dist/packages/elements/src/elements/EFImage.js +0 -80
- package/dist/packages/elements/src/elements/EFMedia.cjs +0 -336
- package/dist/packages/elements/src/elements/EFMedia.d.ts +0 -61
- package/dist/packages/elements/src/elements/EFMedia.js +0 -336
- package/dist/packages/elements/src/elements/EFSourceMixin.cjs +0 -55
- package/dist/packages/elements/src/elements/EFSourceMixin.d.ts +0 -12
- package/dist/packages/elements/src/elements/EFSourceMixin.js +0 -55
- package/dist/packages/elements/src/elements/EFTemporal.cjs +0 -199
- package/dist/packages/elements/src/elements/EFTemporal.d.ts +0 -38
- package/dist/packages/elements/src/elements/EFTemporal.js +0 -199
- package/dist/packages/elements/src/elements/EFTimegroup.browsertest.d.ts +0 -12
- package/dist/packages/elements/src/elements/EFTimegroup.cjs +0 -352
- package/dist/packages/elements/src/elements/EFTimegroup.d.ts +0 -39
- package/dist/packages/elements/src/elements/EFTimegroup.js +0 -353
- package/dist/packages/elements/src/elements/EFVideo.cjs +0 -109
- package/dist/packages/elements/src/elements/EFVideo.d.ts +0 -14
- package/dist/packages/elements/src/elements/EFVideo.js +0 -110
- package/dist/packages/elements/src/elements/EFWaveform.cjs +0 -242
- package/dist/packages/elements/src/elements/EFWaveform.d.ts +0 -30
- package/dist/packages/elements/src/elements/EFWaveform.js +0 -226
- package/dist/packages/elements/src/elements/FetchMixin.cjs +0 -28
- package/dist/packages/elements/src/elements/FetchMixin.d.ts +0 -8
- package/dist/packages/elements/src/elements/FetchMixin.js +0 -28
- package/dist/packages/elements/src/elements/TimegroupController.cjs +0 -20
- package/dist/packages/elements/src/elements/TimegroupController.d.ts +0 -14
- package/dist/packages/elements/src/elements/TimegroupController.js +0 -20
- package/dist/packages/elements/src/elements/durationConverter.cjs +0 -8
- package/dist/packages/elements/src/elements/durationConverter.d.ts +0 -4
- package/dist/packages/elements/src/elements/durationConverter.js +0 -8
- package/dist/packages/elements/src/elements/parseTimeToMs.cjs +0 -12
- package/dist/packages/elements/src/elements/parseTimeToMs.d.ts +0 -1
- package/dist/packages/elements/src/elements/parseTimeToMs.js +0 -12
- package/dist/packages/elements/src/elements/util.cjs +0 -11
- package/dist/packages/elements/src/elements/util.d.ts +0 -4
- package/dist/packages/elements/src/elements/util.js +0 -11
- package/dist/packages/elements/src/gui/EFFilmstrip.cjs +0 -825
- package/dist/packages/elements/src/gui/EFFilmstrip.d.ts +0 -147
- package/dist/packages/elements/src/gui/EFFilmstrip.js +0 -833
- package/dist/packages/elements/src/gui/EFWorkbench.cjs +0 -214
- package/dist/packages/elements/src/gui/EFWorkbench.d.ts +0 -45
- package/dist/packages/elements/src/gui/EFWorkbench.js +0 -215
- package/dist/packages/elements/src/gui/TWMixin.cjs +0 -28
- package/dist/packages/elements/src/gui/TWMixin.css.cjs +0 -3
- package/dist/packages/elements/src/gui/TWMixin.css.js +0 -4
- package/dist/packages/elements/src/gui/TWMixin.d.ts +0 -3
- package/dist/packages/elements/src/gui/TWMixin.js +0 -28
- package/dist/packages/elements/src/index.cjs +0 -50
- package/dist/packages/elements/src/index.d.ts +0 -10
- package/dist/packages/elements/src/index.js +0 -23
- 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 {};
|