@editframe/elements 0.6.0-beta.18 → 0.6.0-beta.21

package/dist/packages/elements/src/gui/EFFilmstrip.cjs

@@ -499,9 +499,9 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
     __privateAdd(this, _playbackAnimationFrameRequest, null);
     __privateAdd(this, _AUDIO_PLAYBACK_SLICE_MS, 1e3);
     this.advancePlayhead = (tick) => {
-      if (__privateGet(this, _lastTick) && tick && this.target) {
-        this.target.currentTimeMs += tick - __privateGet(this, _lastTick);
-        if (this.target.currentTimeMs >= this.target.durationMs) {
+      if (__privateGet(this, _lastTick) && tick && this.targetTimegroup) {
+        this.targetTimegroup.currentTimeMs += tick - __privateGet(this, _lastTick);
+        if (this.targetTimegroup.currentTimeMs >= this.targetTimegroup.durationMs) {
           this.playing = false;
         }
       }
@@ -516,7 +516,7 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
   }
   connectedCallback() {
     super.connectedCallback();
-    const target = this.target;
+    const target = this.targetTimegroup;
     if (target) {
       this.timegroupController = new TimegroupController.TimegroupController(target, this);
       this.currentTimeMs = target.currentTimeMs;
@@ -551,9 +551,9 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
       return;
     }
     const rect = gutter.getBoundingClientRect();
-    if (this.target) {
+    if (this.targetTimegroup) {
       const layerX = e.pageX - rect.left + gutter.scrollLeft;
-      this.target.currentTimeMs = layerX / this.pixelsPerMs;
+      this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
     }
   }
   startScrub(e) {
@@ -565,9 +565,9 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
         return;
       }
       const rect = gutter.getBoundingClientRect();
-      if (this.target) {
+      if (this.targetTimegroup) {
         const layerX = e.pageX - rect.left + gutter.scrollLeft;
-        this.target.currentTimeMs = layerX / this.pixelsPerMs;
+        this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
       }
     });
     addEventListener(
@@ -579,7 +579,7 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
     );
   }
   scrollScrub(e) {
-    if (this.target && this.gutter && !this.playing) {
+    if (this.targetTimegroup && this.gutter && !this.playing) {
       e.preventDefault();
       if (this.gutterRef.value && this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
         this.gutter.scrollBy(0, e.deltaY);
@@ -591,7 +591,7 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
       }
       if (this) {
         this.gutter.scrollBy(e.deltaX, e.deltaY);
-        this.target.currentTimeMs += e.deltaX / this.pixelsPerMs;
+        this.targetTimegroup.currentTimeMs += e.deltaX / this.pixelsPerMs;
       }
     }
   }
@@ -599,7 +599,7 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
     return this.gutterRef.value;
   }
   render() {
-    const target = this.target;
+    const target = this.targetTimegroup;
     return lit.html` <div
       class="grid h-full bg-slate-100"
       style=${styleMap_js.styleMap({
@@ -685,16 +685,16 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
     super.update(changedProperties);
   }
   updated(changes) {
-    if (!this.target) {
+    if (!this.targetTimegroup) {
       return;
     }
     if (changes.has("currentTimeMs")) {
-      if (this.target.currentTimeMs !== this.currentTimeMs) {
-        this.target.currentTimeMs = this.currentTimeMs;
+      if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
+        this.targetTimegroup.currentTimeMs = this.currentTimeMs;
       }
     }
   }
-  get target() {
+  get targetTimegroup() {
     if (this.getAttribute("target")) {
       const target = document.querySelector(this.getAttribute("target") ?? "");
       if (target instanceof EFTimegroup.EFTimegroup) {
@@ -730,7 +730,7 @@ stopPlayback_fn = async function() {
 };
 startPlayback_fn = async function() {
   await __privateMethod(this, _EFFilmstrip_instances, stopPlayback_fn).call(this);
-  const timegroup = this.target;
+  const timegroup = this.targetTimegroup;
   if (!timegroup) {
     return;
   }
@@ -789,7 +789,7 @@ __decorateClass([
   decorators_js.property({ type: Number })
 ], exports.EFFilmstrip.prototype, "currentTimeMs", 2);
 __decorateClass([
-  decorators_js.property({ type: String, attribute: "target" })
+  decorators_js.property({ type: String, attribute: "target", reflect: true })
 ], exports.EFFilmstrip.prototype, "targetSelector", 2);
 __decorateClass([
   decorators_js.state()

package/dist/packages/elements/src/gui/EFFilmstrip.d.ts

@@ -1,5 +1,8 @@
 import { EFTimegroup } from '../elements/EFTimegroup';
 import { LitElement, nothing, TemplateResult, ReactiveController, PropertyValueMap } from 'lit';
+import { EFImage } from '../elements/EFImage';
+import { EFAudio } from '../elements/EFAudio';
+import { EFVideo } from '../elements/EFVideo';
 import { TemporalMixinInterface } from '../elements/EFTemporal';
 import { TimegroupController } from '../elements/TimegroupController';
 import { FocusContext } from './EFWorkbench';
@@ -69,13 +72,13 @@ declare class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {
     get icon(): string;
     displayLabel(): string | TemplateResult<1> | typeof nothing;
 }
-declare class EFAudioHierarchyItem extends EFHierarchyItem {
+declare class EFAudioHierarchyItem extends EFHierarchyItem<EFAudio> {
     get icon(): string;
-    displayLabel(): any;
+    displayLabel(): string;
 }
-declare class EFVideoHierarchyItem extends EFHierarchyItem {
+declare class EFVideoHierarchyItem extends EFHierarchyItem<EFVideo> {
     get icon(): string;
-    displayLabel(): any;
+    displayLabel(): string;
 }
 declare class EFCaptionsHierarchyItem extends EFHierarchyItem {
     get icon(): string;
@@ -87,9 +90,9 @@ declare class EFWaveformHierarchyItem extends EFHierarchyItem {
     get icon(): string;
     renderChildren(): typeof nothing;
 }
-declare class EFImageHierarchyItem extends EFHierarchyItem {
+declare class EFImageHierarchyItem extends EFHierarchyItem<EFImage> {
     get icon(): string;
-    displayLabel(): any;
+    displayLabel(): string;
 }
 declare class EFHTMLHierarchyItem extends EFHierarchyItem {
     get icon(): TemplateResult<1>;
@@ -119,7 +122,7 @@ export declare class EFFilmstrip extends EFFilmstrip_base {
     render(): TemplateResult<1>;
     update(changedProperties: Map<string | number | symbol, unknown>): void;
     updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    get target(): EFTimegroup | undefined;
+    get targetTimegroup(): EFTimegroup | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/packages/elements/src/gui/EFFilmstrip.js

@@ -497,9 +497,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
     __privateAdd(this, _playbackAnimationFrameRequest, null);
     __privateAdd(this, _AUDIO_PLAYBACK_SLICE_MS, 1e3);
     this.advancePlayhead = (tick) => {
-      if (__privateGet(this, _lastTick) && tick && this.target) {
-        this.target.currentTimeMs += tick - __privateGet(this, _lastTick);
-        if (this.target.currentTimeMs >= this.target.durationMs) {
+      if (__privateGet(this, _lastTick) && tick && this.targetTimegroup) {
+        this.targetTimegroup.currentTimeMs += tick - __privateGet(this, _lastTick);
+        if (this.targetTimegroup.currentTimeMs >= this.targetTimegroup.durationMs) {
           this.playing = false;
         }
       }
@@ -514,7 +514,7 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
   }
   connectedCallback() {
     super.connectedCallback();
-    const target = this.target;
+    const target = this.targetTimegroup;
     if (target) {
       this.timegroupController = new TimegroupController(target, this);
       this.currentTimeMs = target.currentTimeMs;
@@ -549,9 +549,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
       return;
     }
     const rect = gutter.getBoundingClientRect();
-    if (this.target) {
+    if (this.targetTimegroup) {
       const layerX = e.pageX - rect.left + gutter.scrollLeft;
-      this.target.currentTimeMs = layerX / this.pixelsPerMs;
+      this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
     }
   }
   startScrub(e) {
@@ -563,9 +563,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
         return;
       }
       const rect = gutter.getBoundingClientRect();
-      if (this.target) {
+      if (this.targetTimegroup) {
         const layerX = e.pageX - rect.left + gutter.scrollLeft;
-        this.target.currentTimeMs = layerX / this.pixelsPerMs;
+        this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
       }
     });
     addEventListener(
@@ -577,7 +577,7 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
     );
   }
   scrollScrub(e) {
-    if (this.target && this.gutter && !this.playing) {
+    if (this.targetTimegroup && this.gutter && !this.playing) {
       e.preventDefault();
       if (this.gutterRef.value && this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
         this.gutter.scrollBy(0, e.deltaY);
@@ -589,7 +589,7 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
       }
       if (this) {
         this.gutter.scrollBy(e.deltaX, e.deltaY);
-        this.target.currentTimeMs += e.deltaX / this.pixelsPerMs;
+        this.targetTimegroup.currentTimeMs += e.deltaX / this.pixelsPerMs;
       }
     }
   }
@@ -597,7 +597,7 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
     return this.gutterRef.value;
   }
   render() {
-    const target = this.target;
+    const target = this.targetTimegroup;
     return html` <div
       class="grid h-full bg-slate-100"
       style=${styleMap({
@@ -683,16 +683,16 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
     super.update(changedProperties);
   }
   updated(changes) {
-    if (!this.target) {
+    if (!this.targetTimegroup) {
       return;
     }
     if (changes.has("currentTimeMs")) {
-      if (this.target.currentTimeMs !== this.currentTimeMs) {
-        this.target.currentTimeMs = this.currentTimeMs;
+      if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
+        this.targetTimegroup.currentTimeMs = this.currentTimeMs;
       }
     }
   }
-  get target() {
+  get targetTimegroup() {
     if (this.getAttribute("target")) {
       const target = document.querySelector(this.getAttribute("target") ?? "");
       if (target instanceof EFTimegroup) {
@@ -728,7 +728,7 @@ stopPlayback_fn = async function() {
 };
 startPlayback_fn = async function() {
   await __privateMethod(this, _EFFilmstrip_instances, stopPlayback_fn).call(this);
-  const timegroup = this.target;
+  const timegroup = this.targetTimegroup;
   if (!timegroup) {
     return;
   }
@@ -787,7 +787,7 @@ __decorateClass([
   property({ type: Number })
 ], EFFilmstrip.prototype, "currentTimeMs", 2);
 __decorateClass([
-  property({ type: String, attribute: "target" })
+  property({ type: String, attribute: "target", reflect: true })
 ], EFFilmstrip.prototype, "targetSelector", 2);
 __decorateClass([
   state()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.6.0-beta.18",
+  "version": "0.6.0-beta.21",
   "description": "",
   "exports": {
     ".": {
@@ -19,7 +19,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.6.0-beta.18",
+    "@editframe/assets": "0.6.0-beta.21",
     "@lit/context": "^1.1.1",
     "@lit/task": "^1.0.0",
     "d3": "^7.9.0",

package/src/gui/EFFilmstrip.ts

@@ -322,7 +322,7 @@ class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {
 }
 
 @customElement("ef-audio-hierarchy-item")
-class EFAudioHierarchyItem extends EFHierarchyItem {
+class EFAudioHierarchyItem extends EFHierarchyItem<EFAudio> {
   get icon() {
     return "🔊";
   }
@@ -333,7 +333,7 @@ class EFAudioHierarchyItem extends EFHierarchyItem {
 }
 
 @customElement("ef-video-hierarchy-item")
-class EFVideoHierarchyItem extends EFHierarchyItem {
+class EFVideoHierarchyItem extends EFHierarchyItem<EFVideo> {
   get icon() {
     return "📼";
   }
@@ -369,7 +369,7 @@ class EFWaveformHierarchyItem extends EFHierarchyItem {
 }
 
 @customElement("ef-image-hierarchy-item")
-class EFImageHierarchyItem extends EFHierarchyItem {
+class EFImageHierarchyItem extends EFHierarchyItem<EFImage> {
   get icon() {
     return "🖼️";
   }
@@ -488,7 +488,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   @property({ type: Number })
   currentTimeMs = 0;
 
-  @property({ type: String, attribute: "target" })
+  @property({ type: String, attribute: "target", reflect: true })
   targetSelector = "";
 
   @state()
@@ -504,7 +504,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
 
   connectedCallback(): void {
     super.connectedCallback();
-    const target = this.target;
+    const target = this.targetTimegroup;
     if (target) {
       this.timegroupController = new TimegroupController(target, this);
       // Set the current time to the last saved time to avoid a cycle
@@ -583,7 +583,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
 
   async #startPlayback() {
     await this.#stopPlayback();
-    const timegroup = this.target;
+    const timegroup = this.targetTimegroup;
     if (!timegroup) {
       return;
     }
@@ -642,9 +642,11 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   }
 
   advancePlayhead = (tick?: DOMHighResTimeStamp) => {
-    if (this.#lastTick && tick && this.target) {
-      this.target.currentTimeMs += tick - this.#lastTick;
-      if (this.target.currentTimeMs >= this.target.durationMs) {
+    if (this.#lastTick && tick && this.targetTimegroup) {
+      this.targetTimegroup.currentTimeMs += tick - this.#lastTick;
+      if (
+        this.targetTimegroup.currentTimeMs >= this.targetTimegroup.durationMs
+      ) {
         this.playing = false;
       }
     }
@@ -668,9 +670,9 @@ export class EFFilmstrip extends TWMixin(LitElement) {
       return;
     }
     const rect = gutter.getBoundingClientRect();
-    if (this.target) {
+    if (this.targetTimegroup) {
       const layerX = e.pageX - rect.left + gutter.scrollLeft;
-      this.target.currentTimeMs = layerX / this.pixelsPerMs;
+      this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
     }
   }
 
@@ -686,9 +688,9 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         return;
       }
       const rect = gutter.getBoundingClientRect();
-      if (this.target) {
+      if (this.targetTimegroup) {
         const layerX = e.pageX - rect.left + gutter.scrollLeft;
-        this.target.currentTimeMs = layerX / this.pixelsPerMs;
+        this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
       }
     });
     addEventListener(
@@ -702,7 +704,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
 
   @eventOptions({ passive: false })
   scrollScrub(e: WheelEvent) {
-    if (this.target && this.gutter && !this.playing) {
+    if (this.targetTimegroup && this.gutter && !this.playing) {
       e.preventDefault();
       // Avoid over-scrolling to the left
       if (
@@ -726,7 +728,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
 
       if (this) {
         this.gutter.scrollBy(e.deltaX, e.deltaY);
-        this.target.currentTimeMs += e.deltaX / this.pixelsPerMs;
+        this.targetTimegroup.currentTimeMs += e.deltaX / this.pixelsPerMs;
       }
     }
   }
@@ -740,7 +742,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   }
 
   render() {
-    const target = this.target;
+    const target = this.targetTimegroup;
 
     return html` <div
       class="grid h-full bg-slate-100"
@@ -833,17 +835,17 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   }
 
   updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
-    if (!this.target) {
+    if (!this.targetTimegroup) {
       return;
     }
     if (changes.has("currentTimeMs")) {
-      if (this.target.currentTimeMs !== this.currentTimeMs) {
-        this.target.currentTimeMs = this.currentTimeMs;
+      if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
+        this.targetTimegroup.currentTimeMs = this.currentTimeMs;
       }
     }
   }
 
-  get target() {
+  get targetTimegroup() {
     if (this.getAttribute("target")) {
       const target = document.querySelector(this.getAttribute("target") ?? "");
       if (target instanceof EFTimegroup) {