@editframe/elements 0.6.0-beta.22 → 0.7.0-beta.1

package/dist/packages/elements/src/elements/EFCaptions.cjs

@@ -139,7 +139,7 @@ exports.EFCaptions = class EFCaptions extends EFSourceMixin.EFSourceMixin(
     }
   }
   get targetElement() {
-    const target = document.querySelector(this.getAttribute("target") ?? "");
+    const target = document.getElementById(this.getAttribute("target") ?? "");
     if (target instanceof EFAudio.EFAudio || target instanceof EFVideo.EFVideo) {
       return target;
     }

package/dist/packages/elements/src/elements/EFCaptions.js

@@ -137,7 +137,7 @@ let EFCaptions = class extends EFSourceMixin(
     }
   }
   get targetElement() {
-    const target = document.querySelector(this.getAttribute("target") ?? "");
+    const target = document.getElementById(this.getAttribute("target") ?? "");
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }

package/dist/packages/elements/src/elements/EFTimegroup.cjs

@@ -228,7 +228,7 @@ exports.EFTimegroup = class EFTimegroup extends EFTemporal.EFTemporal(lit.LitEle
     workbench.append(this);
     const filmstrip = document.createElement("ef-filmstrip");
     filmstrip.setAttribute("slot", "timeline");
-    filmstrip.setAttribute("target", `#${this.id}`);
+    filmstrip.setAttribute("target", this.id);
     workbench.append(filmstrip);
   }
   get hasOwnDuration() {

package/dist/packages/elements/src/elements/EFTimegroup.js

@@ -226,7 +226,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     workbench.append(this);
     const filmstrip = document.createElement("ef-filmstrip");
     filmstrip.setAttribute("slot", "timeline");
-    filmstrip.setAttribute("target", `#${this.id}`);
+    filmstrip.setAttribute("target", this.id);
     workbench.append(filmstrip);
   }
   get hasOwnDuration() {

package/dist/packages/elements/src/elements/EFWaveform.cjs

@@ -44,11 +44,12 @@ exports.EFWaveform = class EFWaveform extends EFTemporal.EFTemporal(TWMixin.TWMi
     this.svgRef = ref_js.createRef();
     this.mode = "bars";
     this.color = "currentColor";
+    this.targetSelector = "";
     this.frameTask = new task.Task(this, {
       autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
-      args: () => [this.target.audioBufferTask.status],
+      args: () => [this.targetElement.audioBufferTask.status],
       task: async () => {
-        await this.target.audioBufferTask.taskComplete;
+        await this.targetElement.audioBufferTask.taskComplete;
       }
     });
   }
@@ -58,10 +59,13 @@ exports.EFWaveform = class EFWaveform extends EFTemporal.EFTemporal(TWMixin.TWMi
   render() {
     return lit.html` <svg ${ref_js.ref(this.svgRef)} class="h-full w-full" store></svg> `;
   }
+  set target(value) {
+    this.targetSelector = value;
+  }
   connectedCallback() {
     super.connectedCallback();
-    if (this.target) {
-      new CrossUpdateController.CrossUpdateController(this.target, this);
+    if (this.targetElement) {
+      new CrossUpdateController.CrossUpdateController(this.targetElement, this);
     }
   }
   drawBars(svg, frequencyData) {
@@ -160,13 +164,13 @@ exports.EFWaveform = class EFWaveform extends EFTemporal.EFTemporal(TWMixin.TWMi
     if (!svg) {
       return;
     }
-    if (!this.target.audioBufferTask.value) {
+    if (!this.targetElement.audioBufferTask.value) {
       return;
     }
-    if (this.target.ownCurrentTimeMs > 0) {
+    if (this.targetElement.ownCurrentTimeMs > 0) {
       const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
       const audioBufferSource = audioContext.createBufferSource();
-      audioBufferSource.buffer = this.target.audioBufferTask.value.buffer;
+      audioBufferSource.buffer = this.targetElement.audioBufferTask.value.buffer;
       const analyser = audioContext.createAnalyser();
       analyser.fftSize = 256;
       audioBufferSource.connect(analyser);
@@ -174,7 +178,7 @@ exports.EFWaveform = class EFWaveform extends EFTemporal.EFTemporal(TWMixin.TWMi
         0,
         Math.max(
           0,
-          (this.target.ownCurrentTimeMs - this.target.audioBufferTask.value.startOffsetMs) / 1e3
+          (this.targetElement.ownCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
         ),
         48e3 / 1e3
       );
@@ -212,8 +216,8 @@ exports.EFWaveform = class EFWaveform extends EFTemporal.EFTemporal(TWMixin.TWMi
       }
     }
   }
-  get target() {
-    const target = document.querySelector(this.getAttribute("target") ?? "");
+  get targetElement() {
+    const target = document.getElementById(this.targetSelector ?? "");
     if (target instanceof EFAudio.EFAudio || target instanceof EFVideo.EFVideo) {
       return target;
     }
@@ -230,6 +234,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String })
 ], exports.EFWaveform.prototype, "color", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "target", reflect: true })
+], exports.EFWaveform.prototype, "targetSelector", 2);
 exports.EFWaveform = __decorateClass([
   decorators_js.customElement("ef-waveform")
 ], exports.EFWaveform);

package/dist/packages/elements/src/elements/EFWaveform.d.ts

@@ -12,6 +12,8 @@ export declare class EFWaveform extends EFWaveform_base {
     render(): import('lit-html').TemplateResult<1>;
     mode: "roundBars" | "bars" | "bricks" | "equalizer" | "curve" | "line" | "pixel" | "wave";
     color: string;
+    targetSelector: string;
+    set target(value: string);
     connectedCallback(): void;
     protected drawBars(svg: SVGElement, frequencyData: Uint8Array): void;
     protected drawBricks(svg: SVGElement, frequencyData: Uint8Array): void;
@@ -23,6 +25,6 @@ export declare class EFWaveform extends EFWaveform_base {
     protected drawWave(svg: SVGElement, frequencyData: Uint8Array): void;
     frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
     protected updated(): Promise<void>;
-    get target(): EFAudio | EFVideo;
+    get targetElement(): EFAudio | EFVideo;
 }
 export {};

package/dist/packages/elements/src/elements/EFWaveform.js

@@ -25,11 +25,12 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     this.svgRef = createRef();
     this.mode = "bars";
     this.color = "currentColor";
+    this.targetSelector = "";
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
-      args: () => [this.target.audioBufferTask.status],
+      args: () => [this.targetElement.audioBufferTask.status],
       task: async () => {
-        await this.target.audioBufferTask.taskComplete;
+        await this.targetElement.audioBufferTask.taskComplete;
       }
     });
   }
@@ -39,10 +40,13 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   render() {
     return html` <svg ${ref(this.svgRef)} class="h-full w-full" store></svg> `;
   }
+  set target(value) {
+    this.targetSelector = value;
+  }
   connectedCallback() {
     super.connectedCallback();
-    if (this.target) {
-      new CrossUpdateController(this.target, this);
+    if (this.targetElement) {
+      new CrossUpdateController(this.targetElement, this);
     }
   }
   drawBars(svg, frequencyData) {
@@ -141,13 +145,13 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     if (!svg) {
       return;
     }
-    if (!this.target.audioBufferTask.value) {
+    if (!this.targetElement.audioBufferTask.value) {
       return;
     }
-    if (this.target.ownCurrentTimeMs > 0) {
+    if (this.targetElement.ownCurrentTimeMs > 0) {
       const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
       const audioBufferSource = audioContext.createBufferSource();
-      audioBufferSource.buffer = this.target.audioBufferTask.value.buffer;
+      audioBufferSource.buffer = this.targetElement.audioBufferTask.value.buffer;
       const analyser = audioContext.createAnalyser();
       analyser.fftSize = 256;
       audioBufferSource.connect(analyser);
@@ -155,7 +159,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
         0,
         Math.max(
           0,
-          (this.target.ownCurrentTimeMs - this.target.audioBufferTask.value.startOffsetMs) / 1e3
+          (this.targetElement.ownCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
         ),
         48e3 / 1e3
       );
@@ -193,8 +197,8 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
       }
     }
   }
-  get target() {
-    const target = document.querySelector(this.getAttribute("target") ?? "");
+  get targetElement() {
+    const target = document.getElementById(this.targetSelector ?? "");
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
@@ -211,6 +215,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], EFWaveform.prototype, "color", 2);
+__decorateClass([
+  property({ type: String, attribute: "target", reflect: true })
+], EFWaveform.prototype, "targetSelector", 2);
 EFWaveform = __decorateClass([
   customElement("ef-waveform")
 ], EFWaveform);

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

@@ -696,7 +696,7 @@ exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement)
   }
   get targetTimegroup() {
     if (this.getAttribute("target")) {
-      const target = document.querySelector(this.getAttribute("target") ?? "");
+      const target = document.getElementById(this.getAttribute("target") ?? "");
       if (target instanceof EFTimegroup.EFTimegroup) {
         return target;
       }

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

@@ -694,7 +694,7 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
   }
   get targetTimegroup() {
     if (this.getAttribute("target")) {
-      const target = document.querySelector(this.getAttribute("target") ?? "");
+      const target = document.getElementById(this.getAttribute("target") ?? "");
       if (target instanceof EFTimegroup) {
         return target;
       }

package/package.json

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

package/src/elements/EFCaptions.ts

@@ -172,7 +172,7 @@ export class EFCaptions extends EFSourceMixin(
   }
 
   get targetElement() {
-    const target = document.querySelector(this.getAttribute("target") ?? "");
+    const target = document.getElementById(this.getAttribute("target") ?? "");
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }

package/src/elements/EFTimegroup.ts

@@ -276,7 +276,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
     const filmstrip = document.createElement("ef-filmstrip");
     filmstrip.setAttribute("slot", "timeline");
-    filmstrip.setAttribute("target", `#${this.id}`);
+    filmstrip.setAttribute("target", this.id);
     workbench.append(filmstrip);
   }
 

package/src/elements/EFWaveform.ts

@@ -39,10 +39,17 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   @property({ type: String })
   color = "currentColor";
 
+  @property({ type: String, attribute: "target", reflect: true })
+  targetSelector = "";
+
+  set target(value: string) {
+    this.targetSelector = value;
+  }
+
   connectedCallback() {
     super.connectedCallback();
-    if (this.target) {
-      new CrossUpdateController(this.target, this);
+    if (this.targetElement) {
+      new CrossUpdateController(this.targetElement, this);
     }
   }
 
@@ -330,9 +337,9 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
 
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
-    args: () => [this.target.audioBufferTask.status] as const,
+    args: () => [this.targetElement.audioBufferTask.status] as const,
     task: async () => {
-      await this.target.audioBufferTask.taskComplete;
+      await this.targetElement.audioBufferTask.taskComplete;
     },
   });
 
@@ -341,13 +348,14 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     if (!svg) {
       return;
     }
-    if (!this.target.audioBufferTask.value) {
+    if (!this.targetElement.audioBufferTask.value) {
       return;
     }
-    if (this.target.ownCurrentTimeMs > 0) {
+    if (this.targetElement.ownCurrentTimeMs > 0) {
       const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
       const audioBufferSource = audioContext.createBufferSource();
-      audioBufferSource.buffer = this.target.audioBufferTask.value.buffer;
+      audioBufferSource.buffer =
+        this.targetElement.audioBufferTask.value.buffer;
       const analyser = audioContext.createAnalyser();
       analyser.fftSize = 256;
       audioBufferSource.connect(analyser);
@@ -356,8 +364,8 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
         0,
         Math.max(
           0,
-          (this.target.ownCurrentTimeMs -
-            this.target.audioBufferTask.value.startOffsetMs) /
+          (this.targetElement.ownCurrentTimeMs -
+            this.targetElement.audioBufferTask.value.startOffsetMs) /
             1000,
         ),
         48000 / 1000,
@@ -399,8 +407,8 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     }
   }
 
-  get target() {
-    const target = document.querySelector(this.getAttribute("target") ?? "");
+  get targetElement() {
+    const target = document.getElementById(this.targetSelector ?? "");
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }

package/src/gui/EFFilmstrip.ts

@@ -847,7 +847,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
 
   get targetTimegroup() {
     if (this.getAttribute("target")) {
-      const target = document.querySelector(this.getAttribute("target") ?? "");
+      const target = document.getElementById(this.getAttribute("target") ?? "");
       if (target instanceof EFTimegroup) {
         return target;
       }