@editframe/elements 0.15.0-beta.17 → 0.15.0-beta.19
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/EF_FRAMEGEN.js +1 -1
- package/dist/elements/EFMedia.d.ts +7 -3
- package/dist/elements/EFMedia.js +45 -90
- package/dist/elements/EFTemporal.browsertest.d.ts +4 -3
- package/dist/elements/EFTemporal.d.ts +14 -11
- package/dist/elements/EFTemporal.js +63 -87
- package/dist/elements/EFTimegroup.d.ts +1 -3
- package/dist/elements/EFTimegroup.js +15 -103
- package/dist/elements/EFVideo.js +3 -1
- package/dist/elements/EFWaveform.d.ts +1 -0
- package/dist/elements/EFWaveform.js +6 -2
- package/dist/elements/durationConverter.d.ts +8 -8
- package/dist/elements/durationConverter.js +2 -2
- package/dist/elements/updateAnimations.d.ts +9 -0
- package/dist/elements/updateAnimations.js +62 -0
- package/dist/gui/EFFilmstrip.js +7 -16
- package/dist/gui/EFFitScale.d.ts +25 -0
- package/dist/gui/EFFitScale.js +123 -0
- package/dist/gui/EFWorkbench.d.ts +1 -5
- package/dist/gui/EFWorkbench.js +6 -55
- package/dist/gui/TWMixin.css.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/style.css +3 -3
- package/package.json +2 -2
- package/src/elements/EFMedia.browsertest.ts +10 -10
- package/src/elements/EFMedia.ts +56 -118
- package/src/elements/EFTemporal.browsertest.ts +64 -31
- package/src/elements/EFTemporal.ts +99 -119
- package/src/elements/EFTimegroup.ts +15 -133
- package/src/elements/EFVideo.ts +3 -1
- package/src/elements/EFWaveform.ts +5 -2
- package/src/elements/durationConverter.ts +9 -4
- package/src/elements/updateAnimations.ts +88 -0
- package/src/gui/EFFilmstrip.ts +7 -16
- package/src/gui/EFFitScale.ts +133 -0
- package/src/gui/EFWorkbench.ts +7 -64
- package/types.json +1 -1
package/dist/EF_FRAMEGEN.js
CHANGED
|
@@ -50,7 +50,7 @@ export declare class EFMedia extends EFMedia_base {
|
|
|
50
50
|
protected executeSeek(seekToMs: number): Promise<void>;
|
|
51
51
|
protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
|
|
52
52
|
get hasOwnDuration(): boolean;
|
|
53
|
-
get
|
|
53
|
+
get intrinsicDurationMs(): number;
|
|
54
54
|
audioBufferTask: Task<readonly [Record<string, File> | undefined, Record<string, {
|
|
55
55
|
segment: TrackSegment;
|
|
56
56
|
track: MP4Box.TrackInfo;
|
|
@@ -68,10 +68,14 @@ export declare class EFMedia extends EFMedia_base {
|
|
|
68
68
|
set fftDecay(value: number);
|
|
69
69
|
get fftSize(): number;
|
|
70
70
|
get fftDecay(): number;
|
|
71
|
+
set interpolateFrequencies(value: boolean);
|
|
72
|
+
get interpolateFrequencies(): boolean;
|
|
71
73
|
get shouldInterpolateFrequencies(): boolean;
|
|
72
74
|
private static readonly DECAY_WEIGHT;
|
|
73
75
|
get FREQ_WEIGHTS(): Float32Array;
|
|
74
|
-
byteTimeDomainTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number], Uint8Array | null>;
|
|
75
|
-
frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number], Uint8Array | null>;
|
|
76
|
+
byteTimeDomainTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
|
|
77
|
+
frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
|
|
78
|
+
set fftGain(value: number);
|
|
79
|
+
get fftGain(): number;
|
|
76
80
|
}
|
|
77
81
|
export {};
|
package/dist/elements/EFMedia.js
CHANGED
|
@@ -8,9 +8,10 @@ import { MP4File } from "@editframe/assets/MP4File.js";
|
|
|
8
8
|
import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
|
|
9
9
|
import { EF_RENDERING } from "../EF_RENDERING.js";
|
|
10
10
|
import { EFSourceMixin } from "./EFSourceMixin.js";
|
|
11
|
-
import { EFTemporal
|
|
11
|
+
import { EFTemporal } from "./EFTemporal.js";
|
|
12
12
|
import { FetchMixin } from "./FetchMixin.js";
|
|
13
13
|
import { EFTargetable } from "./TargetController.js";
|
|
14
|
+
import { updateAnimations } from "./updateAnimations.js";
|
|
14
15
|
var __defProp = Object.defineProperty;
|
|
15
16
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
16
17
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -254,7 +255,9 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
254
255
|
this.audioBufferTask.status,
|
|
255
256
|
this.currentSourceTimeMs,
|
|
256
257
|
this.fftSize,
|
|
257
|
-
this.fftDecay
|
|
258
|
+
this.fftDecay,
|
|
259
|
+
this.fftGain,
|
|
260
|
+
this.shouldInterpolateFrequencies
|
|
258
261
|
],
|
|
259
262
|
task: async () => {
|
|
260
263
|
await this.audioBufferTask.taskComplete;
|
|
@@ -263,7 +266,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
263
266
|
const currentTimeMs = this.currentSourceTimeMs;
|
|
264
267
|
const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
|
|
265
268
|
const audioBuffer = this.audioBufferTask.value.buffer;
|
|
266
|
-
const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
|
|
269
|
+
const smoothedKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftDecay}:${this.fftGain}:${startOffsetMs}:${currentTimeMs}`;
|
|
267
270
|
const cachedData = this.#byteTimeDomainCache.get(smoothedKey);
|
|
268
271
|
if (cachedData) return cachedData;
|
|
269
272
|
const framesData = await Promise.all(
|
|
@@ -273,7 +276,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
273
276
|
0,
|
|
274
277
|
(currentTimeMs - frameOffset - startOffsetMs) / 1e3
|
|
275
278
|
);
|
|
276
|
-
const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
|
|
279
|
+
const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
|
|
277
280
|
const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
|
|
278
281
|
if (cachedFrame) return cachedFrame;
|
|
279
282
|
const audioContext = new OfflineAudioContext(
|
|
@@ -288,7 +291,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
288
291
|
analyser.minDecibels = -90;
|
|
289
292
|
analyser.maxDecibels = -20;
|
|
290
293
|
const gainNode = audioContext.createGain();
|
|
291
|
-
gainNode.gain.value =
|
|
294
|
+
gainNode.gain.value = this.fftGain;
|
|
292
295
|
source.connect(gainNode);
|
|
293
296
|
gainNode.connect(analyser);
|
|
294
297
|
analyser.connect(audioContext.destination);
|
|
@@ -346,9 +349,9 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
346
349
|
this.audioBufferTask.status,
|
|
347
350
|
this.currentSourceTimeMs,
|
|
348
351
|
this.fftSize,
|
|
349
|
-
|
|
350
|
-
this.
|
|
351
|
-
|
|
352
|
+
this.fftDecay,
|
|
353
|
+
this.fftGain,
|
|
354
|
+
this.shouldInterpolateFrequencies
|
|
352
355
|
],
|
|
353
356
|
task: async () => {
|
|
354
357
|
await this.audioBufferTask.taskComplete;
|
|
@@ -357,7 +360,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
357
360
|
const currentTimeMs = this.currentSourceTimeMs;
|
|
358
361
|
const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
|
|
359
362
|
const audioBuffer = this.audioBufferTask.value.buffer;
|
|
360
|
-
const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
|
|
363
|
+
const smoothedKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftDecay}:${this.fftGain}:${startOffsetMs}:${currentTimeMs}`;
|
|
361
364
|
const cachedSmoothedData = this.#frequencyDataCache.get(smoothedKey);
|
|
362
365
|
if (cachedSmoothedData) {
|
|
363
366
|
return cachedSmoothedData;
|
|
@@ -369,7 +372,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
369
372
|
0,
|
|
370
373
|
(currentTimeMs - frameOffset - startOffsetMs) / 1e3
|
|
371
374
|
);
|
|
372
|
-
const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
|
|
375
|
+
const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
|
|
373
376
|
const cachedFrame = this.#frequencyDataCache.get(cacheKey);
|
|
374
377
|
if (cachedFrame) {
|
|
375
378
|
return cachedFrame;
|
|
@@ -384,7 +387,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
384
387
|
analyser.minDecibels = -90;
|
|
385
388
|
analyser.maxDecibels = -10;
|
|
386
389
|
const gainNode = audioContext.createGain();
|
|
387
|
-
gainNode.gain.value =
|
|
390
|
+
gainNode.gain.value = this.fftGain;
|
|
388
391
|
const filter = audioContext.createBiquadFilter();
|
|
389
392
|
filter.type = "bandpass";
|
|
390
393
|
filter.frequency.value = 15e3;
|
|
@@ -488,71 +491,13 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
488
491
|
this.executeSeek(this.currentSourceTimeMs);
|
|
489
492
|
}
|
|
490
493
|
if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
|
|
491
|
-
|
|
492
|
-
if (this.startTimeMs > timelineTimeMs || this.endTimeMs < timelineTimeMs) {
|
|
493
|
-
this.style.display = "none";
|
|
494
|
-
return;
|
|
495
|
-
}
|
|
496
|
-
this.style.display = "";
|
|
497
|
-
const animations = this.getAnimations({ subtree: true });
|
|
498
|
-
this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
|
|
499
|
-
this.style.setProperty(
|
|
500
|
-
"--ef-transition-duration",
|
|
501
|
-
`${this.parentTimegroup?.overlapMs ?? 0}ms`
|
|
502
|
-
);
|
|
503
|
-
this.style.setProperty(
|
|
504
|
-
"--ef-transition-out-start",
|
|
505
|
-
`${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`
|
|
506
|
-
);
|
|
507
|
-
for (const animation of animations) {
|
|
508
|
-
if (animation.playState === "running") {
|
|
509
|
-
animation.pause();
|
|
510
|
-
}
|
|
511
|
-
const effect = animation.effect;
|
|
512
|
-
if (!(effect && effect instanceof KeyframeEffect)) {
|
|
513
|
-
return;
|
|
514
|
-
}
|
|
515
|
-
const target = effect.target;
|
|
516
|
-
if (!target) {
|
|
517
|
-
return;
|
|
518
|
-
}
|
|
519
|
-
if (target.closest("ef-video, ef-audio") !== this) {
|
|
520
|
-
return;
|
|
521
|
-
}
|
|
522
|
-
if (isEFTemporal(target)) {
|
|
523
|
-
const timing = effect.getTiming();
|
|
524
|
-
const duration = Number(timing.duration) ?? 0;
|
|
525
|
-
const delay = Number(timing.delay);
|
|
526
|
-
const newTime = Math.floor(
|
|
527
|
-
Math.min(target.ownCurrentTimeMs, duration - 1 + delay)
|
|
528
|
-
);
|
|
529
|
-
if (Number.isNaN(newTime)) {
|
|
530
|
-
return;
|
|
531
|
-
}
|
|
532
|
-
animation.currentTime = newTime;
|
|
533
|
-
} else if (target) {
|
|
534
|
-
const nearestTimegroup = target.closest("ef-timegroup");
|
|
535
|
-
if (!nearestTimegroup) {
|
|
536
|
-
return;
|
|
537
|
-
}
|
|
538
|
-
const timing = effect.getTiming();
|
|
539
|
-
const duration = Number(timing.duration) ?? 0;
|
|
540
|
-
const delay = Number(timing.delay);
|
|
541
|
-
const newTime = Math.floor(
|
|
542
|
-
Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay)
|
|
543
|
-
);
|
|
544
|
-
if (Number.isNaN(newTime)) {
|
|
545
|
-
return;
|
|
546
|
-
}
|
|
547
|
-
animation.currentTime = newTime;
|
|
548
|
-
}
|
|
549
|
-
}
|
|
494
|
+
updateAnimations(this);
|
|
550
495
|
}
|
|
551
496
|
}
|
|
552
497
|
get hasOwnDuration() {
|
|
553
498
|
return true;
|
|
554
499
|
}
|
|
555
|
-
get
|
|
500
|
+
get intrinsicDurationMs() {
|
|
556
501
|
if (!this.trackFragmentIndexLoader.value) {
|
|
557
502
|
return 0;
|
|
558
503
|
}
|
|
@@ -564,30 +509,18 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
564
509
|
if (durations.length === 0) {
|
|
565
510
|
return 0;
|
|
566
511
|
}
|
|
567
|
-
|
|
568
|
-
return Math.max(this.sourceOutMs - this.sourceInMs);
|
|
569
|
-
}
|
|
570
|
-
if (this.sourceInMs) {
|
|
571
|
-
return Math.max(...durations) - this.trimStartMs - this.trimEndMs - this.sourceInMs;
|
|
572
|
-
}
|
|
573
|
-
if (this.sourceOutMs) {
|
|
574
|
-
return Math.max(...durations) - this.trimStartMs - this.trimEndMs - this.sourceOutMs;
|
|
575
|
-
}
|
|
576
|
-
if (this.sourceInMs && this.sourceOutMs) {
|
|
577
|
-
return Math.max(...durations) - this.trimStartMs - this.trimEndMs - this.sourceOutMs - this.sourceInMs;
|
|
578
|
-
}
|
|
579
|
-
return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
|
|
512
|
+
return Math.max(...durations);
|
|
580
513
|
}
|
|
581
514
|
#audioContext;
|
|
582
515
|
async fetchAudioSpanningTime(fromMs, toMs) {
|
|
583
516
|
if (this.sourceInMs) {
|
|
584
|
-
fromMs -= this.startTimeMs - this.trimStartMs - this.sourceInMs;
|
|
517
|
+
fromMs -= this.startTimeMs - (this.trimStartMs ?? 0) - (this.sourceInMs ?? 0);
|
|
585
518
|
}
|
|
586
519
|
if (this.sourceOutMs) {
|
|
587
|
-
toMs -= this.startTimeMs - this.trimStartMs - this.sourceOutMs;
|
|
520
|
+
toMs -= this.startTimeMs - (this.trimStartMs ?? 0) - (this.sourceOutMs ?? 0);
|
|
588
521
|
}
|
|
589
|
-
fromMs -= this.startTimeMs - this.trimStartMs;
|
|
590
|
-
toMs -= this.startTimeMs - this.trimStartMs;
|
|
522
|
+
fromMs -= this.startTimeMs - (this.trimStartMs ?? 0);
|
|
523
|
+
toMs -= this.startTimeMs - (this.trimStartMs ?? 0);
|
|
591
524
|
await this.trackFragmentIndexLoader.taskComplete;
|
|
592
525
|
const audioTrackId = this.defaultAudioTrackId;
|
|
593
526
|
if (!audioTrackId) {
|
|
@@ -641,8 +574,8 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
641
574
|
});
|
|
642
575
|
return {
|
|
643
576
|
blob: audioBlob,
|
|
644
|
-
startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3 - this.trimStartMs,
|
|
645
|
-
endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - this.trimEndMs
|
|
577
|
+
startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3 - (this.trimStartMs ?? 0),
|
|
578
|
+
endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - (this.trimEndMs ?? 0)
|
|
646
579
|
};
|
|
647
580
|
}
|
|
648
581
|
set fftSize(value) {
|
|
@@ -661,6 +594,14 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
661
594
|
get fftDecay() {
|
|
662
595
|
return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
|
|
663
596
|
}
|
|
597
|
+
set interpolateFrequencies(value) {
|
|
598
|
+
const oldValue = this.interpolateFrequencies;
|
|
599
|
+
this.setAttribute("interpolate-frequencies", String(value));
|
|
600
|
+
this.requestUpdate("interpolate-frequencies", oldValue);
|
|
601
|
+
}
|
|
602
|
+
get interpolateFrequencies() {
|
|
603
|
+
return this.getAttribute("interpolate-frequencies") !== "false";
|
|
604
|
+
}
|
|
664
605
|
get shouldInterpolateFrequencies() {
|
|
665
606
|
if (this.hasAttribute("interpolate-frequencies")) {
|
|
666
607
|
return this.getAttribute("interpolate-frequencies") !== "false";
|
|
@@ -690,6 +631,14 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
|
|
|
690
631
|
}
|
|
691
632
|
#byteTimeDomainCache;
|
|
692
633
|
#frequencyDataCache;
|
|
634
|
+
set fftGain(value) {
|
|
635
|
+
const oldValue = this.fftGain;
|
|
636
|
+
this.setAttribute("fft-gain", String(value));
|
|
637
|
+
this.requestUpdate("fft-gain", oldValue);
|
|
638
|
+
}
|
|
639
|
+
get fftGain() {
|
|
640
|
+
return Number.parseFloat(this.getAttribute("fft-gain") ?? "3.0");
|
|
641
|
+
}
|
|
693
642
|
};
|
|
694
643
|
__decorateClass([
|
|
695
644
|
property({ type: Number })
|
|
@@ -721,6 +670,12 @@ function processFFTData(fftData, zeroThresholdPercent = 0.1) {
|
|
|
721
670
|
}
|
|
722
671
|
const goodData = fftData.slice(0, cutoffIndex);
|
|
723
672
|
const resampledData = interpolateData(goodData, fftData.length);
|
|
673
|
+
const attenuationStartIndex = Math.floor(totalBins * 0.9);
|
|
674
|
+
for (let i = attenuationStartIndex; i < totalBins; i++) {
|
|
675
|
+
const attenuationProgress = (i - attenuationStartIndex) / (totalBins - attenuationStartIndex) + 0.2;
|
|
676
|
+
const attenuationFactor = Math.max(0, 1 - attenuationProgress);
|
|
677
|
+
resampledData[i] = Math.floor(resampledData[i] * attenuationFactor);
|
|
678
|
+
}
|
|
724
679
|
return resampledData;
|
|
725
680
|
}
|
|
726
681
|
function interpolateData(data, targetSize) {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
declare const
|
|
3
|
-
declare class
|
|
2
|
+
declare const TenSeconds_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
|
|
3
|
+
declare class TenSeconds extends TenSeconds_base {
|
|
4
|
+
get intrinsicDurationMs(): number;
|
|
4
5
|
}
|
|
5
6
|
declare global {
|
|
6
7
|
interface HTMLElementTagNameMap {
|
|
7
|
-
"
|
|
8
|
+
"ten-seconds": TenSeconds;
|
|
8
9
|
}
|
|
9
10
|
}
|
|
10
11
|
export {};
|
|
@@ -10,6 +10,7 @@ export declare class TemporalMixinInterface {
|
|
|
10
10
|
* Whether the element has a duration set as an attribute.
|
|
11
11
|
*/
|
|
12
12
|
get hasExplicitDuration(): boolean;
|
|
13
|
+
get sourceStartMs(): number;
|
|
13
14
|
/**
|
|
14
15
|
* Used to trim the start of the media.
|
|
15
16
|
*
|
|
@@ -19,7 +20,7 @@ export declare class TemporalMixinInterface {
|
|
|
19
20
|
*
|
|
20
21
|
* @domAttribute "trimstart"
|
|
21
22
|
*/
|
|
22
|
-
get trimStartMs(): number;
|
|
23
|
+
get trimStartMs(): number | undefined;
|
|
23
24
|
/**
|
|
24
25
|
* Used to trim the end of the media.
|
|
25
26
|
*
|
|
@@ -30,10 +31,10 @@ export declare class TemporalMixinInterface {
|
|
|
30
31
|
* @domAttribute "trimend"
|
|
31
32
|
*/
|
|
32
33
|
get trimEndMs(): number;
|
|
33
|
-
set trimStartMs(value: number);
|
|
34
|
-
set trimEndMs(value: number);
|
|
35
|
-
set trimstart(value: string);
|
|
36
|
-
set trimend(value: string);
|
|
34
|
+
set trimStartMs(value: number | undefined);
|
|
35
|
+
set trimEndMs(value: number | undefined);
|
|
36
|
+
set trimstart(value: string | undefined);
|
|
37
|
+
set trimend(value: string | undefined);
|
|
37
38
|
/**
|
|
38
39
|
* The source in time of the element.
|
|
39
40
|
*
|
|
@@ -53,7 +54,7 @@ export declare class TemporalMixinInterface {
|
|
|
53
54
|
*
|
|
54
55
|
* @domAttribute "sourcein"
|
|
55
56
|
*/
|
|
56
|
-
get sourceInMs(): number;
|
|
57
|
+
get sourceInMs(): number | undefined;
|
|
57
58
|
/**
|
|
58
59
|
* The source out time of the element.
|
|
59
60
|
*
|
|
@@ -75,15 +76,17 @@ export declare class TemporalMixinInterface {
|
|
|
75
76
|
*
|
|
76
77
|
* @domAttribute "sourceout"
|
|
77
78
|
*/
|
|
78
|
-
get sourceOutMs(): number;
|
|
79
|
-
set sourceInMs(value: number);
|
|
80
|
-
set sourceOutMs(value: number);
|
|
81
|
-
set sourcein(value: string);
|
|
82
|
-
set sourceout(value: string);
|
|
79
|
+
get sourceOutMs(): number | undefined;
|
|
80
|
+
set sourceInMs(value: number | undefined);
|
|
81
|
+
set sourceOutMs(value: number | undefined);
|
|
82
|
+
set sourcein(value: string | undefined);
|
|
83
|
+
set sourceout(value: string | undefined);
|
|
83
84
|
/**
|
|
84
85
|
* @domAttribute "duration"
|
|
85
86
|
*/
|
|
86
87
|
get durationMs(): number;
|
|
88
|
+
get explicitDurationMs(): number | undefined;
|
|
89
|
+
get intrinsicDurationMs(): number | undefined;
|
|
87
90
|
/**
|
|
88
91
|
* The start time of the element within its root timegroup in milliseconds.
|
|
89
92
|
*
|
|
@@ -76,8 +76,10 @@ const EFTemporal = (superClass) => {
|
|
|
76
76
|
constructor() {
|
|
77
77
|
super(...arguments);
|
|
78
78
|
this._offsetMs = 0;
|
|
79
|
-
this._trimStartMs = 0;
|
|
80
|
-
this._trimEndMs = 0;
|
|
79
|
+
this._trimStartMs = void 0;
|
|
80
|
+
this._trimEndMs = void 0;
|
|
81
|
+
this._sourceInMs = void 0;
|
|
82
|
+
this._sourceOutMs = void 0;
|
|
81
83
|
this._startOffsetMs = 0;
|
|
82
84
|
this.rootTimegroup = this.getRootTimegroup();
|
|
83
85
|
this.frameTask = new Task(this, {
|
|
@@ -118,75 +120,46 @@ const EFTemporal = (superClass) => {
|
|
|
118
120
|
}
|
|
119
121
|
}
|
|
120
122
|
get trimStartMs() {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
set trimStartMs(value) {
|
|
124
|
-
if (this._trimStartMs === value) {
|
|
125
|
-
return;
|
|
123
|
+
if (this._trimStartMs === void 0) {
|
|
124
|
+
return void 0;
|
|
126
125
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
durationConverter.toAttribute(value / 1e3)
|
|
126
|
+
return Math.min(
|
|
127
|
+
Math.max(this._trimStartMs, 0),
|
|
128
|
+
this.intrinsicDurationMs ?? 0
|
|
131
129
|
);
|
|
132
130
|
}
|
|
133
|
-
set
|
|
134
|
-
|
|
135
|
-
this.setAttribute("trimstart", value);
|
|
136
|
-
} else {
|
|
137
|
-
this.removeAttribute("trimstart");
|
|
138
|
-
}
|
|
131
|
+
set trimStartMs(value) {
|
|
132
|
+
this._trimStartMs = value;
|
|
139
133
|
}
|
|
140
134
|
get trimEndMs() {
|
|
141
|
-
|
|
135
|
+
if (this._trimEndMs === void 0) {
|
|
136
|
+
return void 0;
|
|
137
|
+
}
|
|
138
|
+
return Math.min(this._trimEndMs, this.intrinsicDurationMs ?? 0);
|
|
142
139
|
}
|
|
143
140
|
set trimEndMs(value) {
|
|
144
|
-
if (this._trimEndMs === value) {
|
|
145
|
-
return;
|
|
146
|
-
}
|
|
147
141
|
this._trimEndMs = value;
|
|
148
|
-
this.setAttribute("trimend", durationConverter.toAttribute(value / 1e3));
|
|
149
|
-
}
|
|
150
|
-
set trimend(value) {
|
|
151
|
-
if (value !== void 0) {
|
|
152
|
-
this.setAttribute("trimend", value);
|
|
153
|
-
} else {
|
|
154
|
-
this.removeAttribute("trimend");
|
|
155
|
-
}
|
|
156
142
|
}
|
|
157
143
|
get sourceInMs() {
|
|
158
|
-
|
|
144
|
+
if (this._sourceInMs === void 0) {
|
|
145
|
+
return void 0;
|
|
146
|
+
}
|
|
147
|
+
return Math.max(this._sourceInMs, 0);
|
|
159
148
|
}
|
|
160
149
|
set sourceInMs(value) {
|
|
161
150
|
this._sourceInMs = value;
|
|
162
|
-
value !== void 0 ? this.setAttribute(
|
|
163
|
-
"sourcein",
|
|
164
|
-
durationConverter.toAttribute(value / 1e3)
|
|
165
|
-
) : this.removeAttribute("sourcein");
|
|
166
|
-
}
|
|
167
|
-
set sourcein(value) {
|
|
168
|
-
if (value !== void 0) {
|
|
169
|
-
this.setAttribute("sourcein", value);
|
|
170
|
-
} else {
|
|
171
|
-
this.removeAttribute("sourcein");
|
|
172
|
-
}
|
|
173
151
|
}
|
|
174
152
|
get sourceOutMs() {
|
|
175
|
-
|
|
153
|
+
if (this._sourceOutMs === void 0) {
|
|
154
|
+
return void 0;
|
|
155
|
+
}
|
|
156
|
+
if (this.intrinsicDurationMs && this._sourceOutMs > this.intrinsicDurationMs) {
|
|
157
|
+
return this.intrinsicDurationMs;
|
|
158
|
+
}
|
|
159
|
+
return Math.max(this._sourceOutMs, 0);
|
|
176
160
|
}
|
|
177
161
|
set sourceOutMs(value) {
|
|
178
162
|
this._sourceOutMs = value;
|
|
179
|
-
value !== void 0 ? this.setAttribute(
|
|
180
|
-
"sourceout",
|
|
181
|
-
durationConverter.toAttribute(value / 1e3)
|
|
182
|
-
) : this.removeAttribute("sourceout");
|
|
183
|
-
}
|
|
184
|
-
set sourceout(value) {
|
|
185
|
-
if (value !== void 0) {
|
|
186
|
-
this.setAttribute("sourceout", value);
|
|
187
|
-
} else {
|
|
188
|
-
this.removeAttribute("sourceout");
|
|
189
|
-
}
|
|
190
163
|
}
|
|
191
164
|
get startOffsetMs() {
|
|
192
165
|
return this._startOffsetMs;
|
|
@@ -201,19 +174,41 @@ const EFTemporal = (superClass) => {
|
|
|
201
174
|
get hasExplicitDuration() {
|
|
202
175
|
return this._durationMs !== void 0;
|
|
203
176
|
}
|
|
177
|
+
get explicitDurationMs() {
|
|
178
|
+
if (this.hasExplicitDuration) {
|
|
179
|
+
return this._durationMs;
|
|
180
|
+
}
|
|
181
|
+
return void 0;
|
|
182
|
+
}
|
|
204
183
|
get hasOwnDuration() {
|
|
205
184
|
return false;
|
|
206
185
|
}
|
|
207
|
-
|
|
208
|
-
|
|
186
|
+
get intrinsicDurationMs() {
|
|
187
|
+
return void 0;
|
|
188
|
+
}
|
|
209
189
|
get durationMs() {
|
|
210
|
-
if (this.
|
|
211
|
-
return this._durationMs || this.parentTimegroup?.durationMs || 0
|
|
190
|
+
if (this.intrinsicDurationMs === void 0) {
|
|
191
|
+
return this._durationMs || this.parentTimegroup?.durationMs || 0;
|
|
212
192
|
}
|
|
213
|
-
if (this.
|
|
214
|
-
|
|
193
|
+
if (this.trimStartMs || this.trimEndMs) {
|
|
194
|
+
const trimmedDurationMs = this.intrinsicDurationMs - (this.trimStartMs ?? 0) - (this.trimEndMs ?? 0);
|
|
195
|
+
if (trimmedDurationMs < 0) {
|
|
196
|
+
return 0;
|
|
197
|
+
}
|
|
198
|
+
return trimmedDurationMs;
|
|
199
|
+
}
|
|
200
|
+
if (this.sourceInMs || this.sourceOutMs) {
|
|
201
|
+
const sourceInMs = this.sourceInMs ?? 0;
|
|
202
|
+
const sourceOutMs = this.sourceOutMs ?? this.intrinsicDurationMs;
|
|
203
|
+
if (sourceInMs >= sourceOutMs) {
|
|
204
|
+
return 0;
|
|
205
|
+
}
|
|
206
|
+
return sourceOutMs - sourceInMs;
|
|
215
207
|
}
|
|
216
|
-
return this.
|
|
208
|
+
return this.intrinsicDurationMs;
|
|
209
|
+
}
|
|
210
|
+
get sourceStartMs() {
|
|
211
|
+
return this.trimStartMs ?? this.sourceInMs ?? 0;
|
|
217
212
|
}
|
|
218
213
|
get offsetMs() {
|
|
219
214
|
return this._offsetMs || 0;
|
|
@@ -296,25 +291,8 @@ const EFTemporal = (superClass) => {
|
|
|
296
291
|
* for mapping to internal media time codes for audio/video elements.
|
|
297
292
|
*/
|
|
298
293
|
get currentSourceTimeMs() {
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
return Math.min(
|
|
302
|
-
Math.max(
|
|
303
|
-
0,
|
|
304
|
-
this.rootTimegroup.currentTimeMs - this.startTimeMs + this.trimStartMs + this.sourceInMs
|
|
305
|
-
),
|
|
306
|
-
this.durationMs + Math.abs(this.startOffsetMs) + this.trimStartMs + this.sourceInMs
|
|
307
|
-
);
|
|
308
|
-
}
|
|
309
|
-
return Math.min(
|
|
310
|
-
Math.max(
|
|
311
|
-
0,
|
|
312
|
-
this.rootTimegroup.currentTimeMs - this.startTimeMs + this.trimStartMs
|
|
313
|
-
),
|
|
314
|
-
this.durationMs + Math.abs(this.startOffsetMs) + this.trimStartMs
|
|
315
|
-
);
|
|
316
|
-
}
|
|
317
|
-
return 0;
|
|
294
|
+
const leadingTrimMs = this.sourceInMs || this.trimStartMs || 0;
|
|
295
|
+
return this.ownCurrentTimeMs + leadingTrimMs;
|
|
318
296
|
}
|
|
319
297
|
updated(changedProperties) {
|
|
320
298
|
super.updated(changedProperties);
|
|
@@ -352,30 +330,28 @@ const EFTemporal = (superClass) => {
|
|
|
352
330
|
attribute: "trimstart",
|
|
353
331
|
converter: durationConverter
|
|
354
332
|
})
|
|
355
|
-
], TemporalMixinClass.prototype, "
|
|
333
|
+
], TemporalMixinClass.prototype, "_trimStartMs", 2);
|
|
356
334
|
__decorateClass([
|
|
357
335
|
property({
|
|
358
336
|
type: Number,
|
|
359
337
|
attribute: "trimend",
|
|
360
338
|
converter: durationConverter
|
|
361
339
|
})
|
|
362
|
-
], TemporalMixinClass.prototype, "
|
|
340
|
+
], TemporalMixinClass.prototype, "_trimEndMs", 2);
|
|
363
341
|
__decorateClass([
|
|
364
342
|
property({
|
|
365
343
|
type: Number,
|
|
366
344
|
attribute: "sourcein",
|
|
367
|
-
converter: durationConverter
|
|
368
|
-
reflect: true
|
|
345
|
+
converter: durationConverter
|
|
369
346
|
})
|
|
370
|
-
], TemporalMixinClass.prototype, "
|
|
347
|
+
], TemporalMixinClass.prototype, "_sourceInMs", 2);
|
|
371
348
|
__decorateClass([
|
|
372
349
|
property({
|
|
373
350
|
type: Number,
|
|
374
351
|
attribute: "sourceout",
|
|
375
|
-
converter: durationConverter
|
|
376
|
-
reflect: true
|
|
352
|
+
converter: durationConverter
|
|
377
353
|
})
|
|
378
|
-
], TemporalMixinClass.prototype, "
|
|
354
|
+
], TemporalMixinClass.prototype, "_sourceOutMs", 2);
|
|
379
355
|
__decorateClass([
|
|
380
356
|
property({
|
|
381
357
|
type: Number,
|
|
@@ -17,9 +17,8 @@ export declare class EFTimegroup extends EFTimegroup_base {
|
|
|
17
17
|
maybeLoadTimeFromLocalStorage(): number;
|
|
18
18
|
connectedCallback(): void;
|
|
19
19
|
disconnectedCallback(): void;
|
|
20
|
-
private get displayedParent();
|
|
21
|
-
private updateScale;
|
|
22
20
|
get storageKey(): string;
|
|
21
|
+
get intrinsicDurationMs(): number | undefined;
|
|
23
22
|
get durationMs(): number;
|
|
24
23
|
/**
|
|
25
24
|
* Wait for all media elements to load their initial segments.
|
|
@@ -43,7 +42,6 @@ export declare class EFTimegroup extends EFTimegroup_base {
|
|
|
43
42
|
*/
|
|
44
43
|
shouldWrapWithWorkbench(): boolean;
|
|
45
44
|
wrapWithWorkbench(): void;
|
|
46
|
-
get hasOwnDuration(): boolean;
|
|
47
45
|
get efElements(): Element[];
|
|
48
46
|
renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer>;
|
|
49
47
|
loadMd5Sums(): Promise<void>;
|