@editframe/elements 0.8.0-beta.2 → 0.8.0-beta.4

package/dist/elements/EFCaptions.d.ts

@@ -16,11 +16,12 @@ export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
 declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
 export declare class EFCaptions extends EFCaptions_base {
     static styles: import('lit').CSSResult[];
-    target: null;
+    targetSelector: string;
+    set target(value: string);
     wordStyle: string;
     activeWordContainers: HTMLCollectionOf<EFCaptionsActiveWord>;
     captionsPath(): string;
-    protected md5SumLoader: Task<readonly [null, typeof fetch], string | undefined>;
+    protected md5SumLoader: Task<readonly [string, typeof fetch], string | undefined>;
     private captionsDataTask;
     frameTask: Task<import('@lit/task').TaskStatus[], void>;
     connectedCallback(): void;

package/dist/elements/EFTemporal.d.ts

@@ -7,11 +7,14 @@ export declare const timegroupContext: {
 };
 export declare class TemporalMixinInterface {
     get hasOwnDuration(): boolean;
+    get trimStartMs(): number;
+    get trimEndMs(): number;
     get durationMs(): number;
     get startTimeMs(): number;
     get startTimeWithinParentMs(): number;
     get endTimeMs(): number;
     get ownCurrentTimeMs(): number;
+    get trimAdjustedOwnCurrentTimeMs(): number;
     set duration(value: string);
     get duration(): string;
     parentTimegroup?: EFTimegroup;

package/dist/elements/EFTimegroup.d.ts

@@ -8,17 +8,15 @@ export declare class EFTimegroup extends EFTimegroup_base {
     static styles: import('lit').CSSResult;
     _timeGroupContext: this;
     mode: "fixed" | "sequence" | "contain";
+    overlapMs: number;
     set currentTime(time: number);
     get currentTime(): number;
     get currentTimeMs(): number;
     set currentTimeMs(ms: number);
-    crossoverMs: number;
     render(): import('lit-html').TemplateResult<1>;
     maybeLoadTimeFromLocalStorage(): number;
     connectedCallback(): void;
     get storageKey(): string;
-    get crossoverStartMs(): number;
-    get crossoverEndMs(): number;
     get durationMs(): number;
     waitForMediaDurations(): Promise<(Record<number, import('packages/assets/dist/Probe.js').TrackFragmentIndex> | undefined)[]>;
     get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];

package/dist/elements/durationConverter.d.ts

@@ -2,3 +2,11 @@ export declare const durationConverter: {
     fromAttribute: (value: string) => number;
     toAttribute: (value: number) => string;
 };
+export declare const trimDurationConverter: {
+    fromAttribute: (value: string) => number;
+    toAttribute: (value: number) => string;
+};
+export declare const imageDurationConverter: {
+    fromAttribute: (value: string) => number;
+    toAttribute: (value: number) => string;
+};

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

@@ -60,7 +60,7 @@ let EFCaptions = class extends EFSourceMixin(
 ) {
   constructor() {
     super(...arguments);
-    this.target = null;
+    this.targetSelector = "";
     this.wordStyle = "";
     this.activeWordContainers = this.getElementsByTagName("ef-captions-active-word");
     this.md5SumLoader = new Task(this, {
@@ -88,6 +88,9 @@ let EFCaptions = class extends EFSourceMixin(
       }
     });
   }
+  set target(value) {
+    this.targetSelector = value;
+  }
   captionsPath() {
     const targetSrc = this.targetElement.src;
     if (targetSrc.startsWith("editframe://") || targetSrc.startsWith("http")) {
@@ -120,9 +123,9 @@ let EFCaptions = class extends EFSourceMixin(
     let startMs = 0;
     let endMs = 0;
     for (const segment of caption.segments) {
-      if (this.targetElement.ownCurrentTimeMs >= segment.start * 1e3 && this.targetElement.ownCurrentTimeMs <= segment.end * 1e3) {
+      if (this.targetElement.trimAdjustedOwnCurrentTimeMs >= segment.start * 1e3 && this.targetElement.trimAdjustedOwnCurrentTimeMs <= segment.end * 1e3) {
         for (const word of segment.words) {
-          if (this.targetElement.ownCurrentTimeMs >= word.start * 1e3 && this.targetElement.ownCurrentTimeMs <= word.end * 1e3) {
+          if (this.targetElement.trimAdjustedOwnCurrentTimeMs >= word.start * 1e3 && this.targetElement.trimAdjustedOwnCurrentTimeMs <= word.end * 1e3) {
             words.push(word.text);
             startMs = word.start * 1e3;
             endMs = word.end * 1e3;
@@ -137,11 +140,11 @@ let EFCaptions = class extends EFSourceMixin(
     }
   }
   get targetElement() {
-    const target = document.getElementById(this.getAttribute("target") ?? "");
+    const target = document.getElementById(this.targetSelector ?? "");
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio  or EFVideo element");
+    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
 };
 EFCaptions.styles = [
@@ -152,8 +155,8 @@ EFCaptions.styles = [
     `
 ];
 __decorateClass([
-  property({ type: String, attribute: "target" })
-], EFCaptions.prototype, "target", 2);
+  property({ type: String, attribute: "target", reflect: true })
+], EFCaptions.prototype, "targetSelector", 2);
 __decorateClass([
   property({ attribute: "word-style" })
 ], EFCaptions.prototype, "wordStyle", 2);

package/dist/elements/src/elements/EFMedia.js

@@ -255,7 +255,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   }
   updated(changedProperties) {
     if (changedProperties.has("ownCurrentTimeMs")) {
-      this.executeSeek(this.ownCurrentTimeMs);
+      this.executeSeek(this.trimAdjustedOwnCurrentTimeMs);
     }
   }
   get hasOwnDuration() {
@@ -273,15 +273,15 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (durations.length === 0) {
       return 0;
     }
-    return Math.max(...durations);
+    return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
   }
   get startTimeMs() {
     return getStartTimeMs(this);
   }
   #audioContext;
   async fetchAudioSpanningTime(fromMs, toMs) {
-    fromMs -= this.startTimeMs;
-    toMs -= this.startTimeMs;
+    fromMs -= this.startTimeMs - this.trimStartMs;
+    toMs -= this.startTimeMs - this.trimStartMs;
     await this.trackFragmentIndexLoader.taskComplete;
     const audioTrackId = this.defaultAudioTrackId;
     if (!audioTrackId) {
@@ -335,8 +335,8 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     });
     return {
       blob: audioBlob,
-      startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3,
-      endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3
+      startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3 - this.trimStartMs,
+      endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - this.trimEndMs
     };
   }
 }

package/dist/elements/src/elements/EFTemporal.js

@@ -85,6 +85,9 @@ const EFTemporal = (superClass) => {
     constructor() {
       super(...arguments);
       this._offsetMs = 0;
+      this._trimStartMs = 0;
+      this._trimEndMs = 0;
+      this._startOffsetMs = 0;
       this.rootTimegroup = this.getRootTimegroup();
       this.frameTask = new Task(this, {
         autoRun: EF_INTERACTIVE,
@@ -112,6 +115,15 @@ const EFTemporal = (superClass) => {
     get parentTimegroup() {
       return this.#parentTimegroup;
     }
+    get trimStartMs() {
+      return this._trimStartMs;
+    }
+    get trimEndMs() {
+      return this._trimEndMs;
+    }
+    get startOffsetMs() {
+      return this._startOffsetMs;
+    }
     getRootTimegroup() {
       let parent = this.tagName === "EF-TIMEGROUP" ? this : this.parentTimegroup;
       while (parent?.parentTimegroup) {
@@ -169,9 +181,9 @@ const EFTemporal = (superClass) => {
           }
           startTimeMsCache.set(
             this,
-            previous.startTimeMs + previous.durationMs
+            previous.startTimeMs + previous.durationMs - parentTimegroup.overlapMs
           );
-          return previous.startTimeMs + previous.durationMs;
+          return previous.startTimeMs + previous.durationMs - parentTimegroup.overlapMs;
         }
         case "contain":
         case "fixed":
@@ -196,6 +208,22 @@ const EFTemporal = (superClass) => {
       }
       return 0;
     }
+    /**
+     * Used to calculate the internal currentTimeMs of the element. This is useful
+     * for mapping to internal media time codes for audio/video elements.
+     */
+    get trimAdjustedOwnCurrentTimeMs() {
+      if (this.rootTimegroup) {
+        return Math.min(
+          Math.max(
+            0,
+            this.rootTimegroup.currentTimeMs - this.startTimeMs + this.trimStartMs
+          ),
+          this.durationMs + Math.abs(this.startOffsetMs) + this.trimStartMs
+        );
+      }
+      return 0;
+    }
   }
   __decorateClass([
     consume({ context: timegroupContext, subscribe: true }),
@@ -215,6 +243,27 @@ const EFTemporal = (superClass) => {
       converter: durationConverter
     })
   ], TemporalMixinClass.prototype, "_durationMs", 2);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "trimstart",
+      converter: durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_trimStartMs", 2);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "trimend",
+      converter: durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_trimEndMs", 2);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "startoffset",
+      converter: durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_startOffsetMs", 2);
   __decorateClass([
     state()
   ], TemporalMixinClass.prototype, "rootTimegroup", 2);

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

@@ -7,6 +7,7 @@ import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext
 import { TimegroupController } from "./TimegroupController.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { deepGetMediaElements } from "./EFMedia.js";
+import { durationConverter } from "./durationConverter.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -44,7 +45,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     this._timeGroupContext = this;
     __privateAdd(this, _currentTime, 0);
     this.mode = "sequence";
-    this.crossoverMs = 0;
+    this.overlapMs = 0;
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
@@ -110,29 +111,18 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     }
     return `ef-timegroup-${this.id}`;
   }
-  get crossoverStartMs() {
-    const parentTimeGroup = this.parentTimegroup;
-    if (!parentTimeGroup || !this.previousElementSibling) {
-      return 0;
-    }
-    return parentTimeGroup.crossoverMs;
-  }
-  get crossoverEndMs() {
-    const parentTimeGroup = this.parentTimegroup;
-    if (!parentTimeGroup || !this.nextElementSibling) {
-      return 0;
-    }
-    return parentTimeGroup.crossoverMs;
-  }
   get durationMs() {
     switch (this.mode) {
       case "fixed":
         return super.durationMs;
       case "sequence": {
         let duration = 0;
-        for (const node of this.childTemporals) {
+        this.childTemporals.forEach((node, index) => {
+          if (index > 0) {
+            duration -= this.overlapMs;
+          }
           duration += node.durationMs;
-        }
+        });
         return duration;
       }
       case "contain": {
@@ -168,9 +158,14 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       }
       this.style.display = "";
       const animations = this.getAnimations({ subtree: true });
+      this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
+      this.style.setProperty(
+        "--ef-transition--duration",
+        `${this.parentTimegroup?.overlapMs ?? 0}ms`
+      );
       this.style.setProperty(
-        "--ef-duration",
-        `${this.durationMs + this.crossoverEndMs + this.crossoverStartMs}ms`
+        "--ef-transition-out-start",
+        `${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`
       );
       for (const animation of animations) {
         if (animation.playState === "running") {
@@ -311,7 +306,7 @@ EFTimegroup.styles = css`
       display: block;
       width: 100%;
       height: 100%;
-      position: relative;
+      position: absolute;
       top: 0;
     }
   `;
@@ -324,28 +319,16 @@ __decorateClass([
     attribute: "mode"
   })
 ], EFTimegroup.prototype, "mode", 2);
-__decorateClass([
-  property({ type: Number })
-], EFTimegroup.prototype, "currentTime", 1);
 __decorateClass([
   property({
-    attribute: "crossover",
-    converter: {
-      fromAttribute: (value) => {
-        if (value.endsWith("ms")) {
-          return Number.parseFloat(value);
-        }
-        if (value.endsWith("s")) {
-          return Number.parseFloat(value) * 1e3;
-        }
-        throw new Error(
-          "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)"
-        );
-      },
-      toAttribute: (value) => `${value}ms`
-    }
+    type: Number,
+    converter: durationConverter,
+    attribute: "overlap"
   })
-], EFTimegroup.prototype, "crossoverMs", 2);
+], EFTimegroup.prototype, "overlapMs", 2);
+__decorateClass([
+  property({ type: Number })
+], EFTimegroup.prototype, "currentTime", 1);
 EFTimegroup = __decorateClass([
   customElement("ef-timegroup")
 ], EFTimegroup);

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

@@ -148,7 +148,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     if (!this.targetElement.audioBufferTask.value) {
       return;
     }
-    if (this.targetElement.ownCurrentTimeMs > 0) {
+    if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
       const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
       const audioBufferSource = audioContext.createBufferSource();
       audioBufferSource.buffer = this.targetElement.audioBufferTask.value.buffer;
@@ -159,7 +159,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
         0,
         Math.max(
           0,
-          (this.targetElement.ownCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
+          (this.targetElement.trimAdjustedOwnCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
         ),
         48e3 / 1e3
       );
@@ -202,7 +202,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio element");
+    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
 };
 EFWaveform.styles = [];

package/dist/elements/src/elements/parseTimeToMs.js

@@ -1,4 +1,5 @@
 const parseTimeToMs = (time) => {
+  console.log("parseTimeToMs", time);
   if (time.endsWith("ms")) {
     return Number.parseFloat(time);
   }

package/dist/elements/src/gui/ContextMixin.js

@@ -3,9 +3,9 @@ import { state, property } from "lit/decorators.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { fetchContext } from "./fetchContext.js";
-import { apiHostContext } from "./apiHostContext.js";
 import { createRef } from "lit/directives/ref.js";
-import { playingContext } from "./playingContext.js";
+import { playingContext, loopContext } from "./playingContext.js";
+import { efContext } from "./efContext.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -20,17 +20,12 @@ function ContextMixin(superClass) {
     constructor() {
       super(...arguments);
       this.focusContext = this;
+      this.efContext = this;
       this.fetch = async (url, init = {}) => {
         init.headers ||= {};
         Object.assign(init.headers, {
           "Content-Type": "application/json"
         });
-        const bearerToken = this.apiToken;
-        if (bearerToken) {
-          Object.assign(init.headers, {
-            Authorization: `Bearer ${bearerToken}`
-          });
-        }
         if (this.signingURL) {
           if (!this.#URLTokens[url]) {
             this.#URLTokens[url] = fetch(this.signingURL, {
@@ -53,7 +48,6 @@ function ContextMixin(superClass) {
         return fetch(url, init);
       };
       this.#URLTokens = {};
-      this.apiHost = "";
       this.playing = false;
       this.loop = false;
       this.stageScale = 1;
@@ -65,7 +59,10 @@ function ContextMixin(superClass) {
         if (this.isConnected && !this.rendering) {
           const canvasElement = this.canvasRef.value;
           const stageElement = this.stageRef.value;
-          if (stageElement && canvasElement) {
+          const canvasChild = canvasElement?.assignedElements()[0];
+          if (stageElement && canvasElement && canvasChild) {
+            canvasElement.style.width = `${canvasChild.clientWidth}px`;
+            canvasElement.style.height = `${canvasChild.clientHeight}px`;
             const stageWidth = stageElement.clientWidth;
             const stageHeight = stageElement.clientHeight;
             const canvasWidth = canvasElement.clientWidth;
@@ -76,12 +73,14 @@ function ContextMixin(superClass) {
               const scale = stageHeight / canvasHeight;
               if (this.stageScale !== scale) {
                 canvasElement.style.transform = `scale(${scale})`;
+                canvasElement.style.transformOrigin = "top";
               }
               this.stageScale = scale;
             } else {
               const scale = stageWidth / canvasWidth;
               if (this.stageScale !== scale) {
                 canvasElement.style.transform = `scale(${scale})`;
+                canvasElement.style.transformOrigin = "top";
               }
               this.stageScale = scale;
             }
@@ -118,6 +117,12 @@ function ContextMixin(superClass) {
     get targetTimegroup() {
       return this.querySelector("ef-timegroup");
     }
+    play() {
+      this.playing = true;
+    }
+    pause() {
+      this.playing = false;
+    }
     #playbackAudioContext;
     #playbackAnimationFrameRequest;
     #AUDIO_PLAYBACK_SLICE_MS;
@@ -182,7 +187,15 @@ function ContextMixin(superClass) {
         source.onended = () => {
           bufferCount--;
           if (endMs >= toMs) {
-            this.playing = false;
+            this.pause();
+            if (this.loop) {
+              this.updateComplete.then(() => {
+                this.currentTimeMs = 0;
+                this.updateComplete.then(() => {
+                  this.play();
+                });
+              });
+            }
           } else {
             fillBuffer();
           }
@@ -200,24 +213,21 @@ function ContextMixin(superClass) {
     provide({ context: focusedElementContext }),
     state()
   ], ContextElement.prototype, "focusedElement");
+  __decorateClass([
+    provide({ context: efContext })
+  ], ContextElement.prototype, "efContext");
   __decorateClass([
     provide({ context: fetchContext })
   ], ContextElement.prototype, "fetch");
   __decorateClass([
     property({ type: String })
   ], ContextElement.prototype, "signingURL");
-  __decorateClass([
-    property({ type: String })
-  ], ContextElement.prototype, "apiToken");
-  __decorateClass([
-    provide({ context: apiHostContext }),
-    property({ type: String })
-  ], ContextElement.prototype, "apiHost");
   __decorateClass([
     provide({ context: playingContext }),
     property({ type: Boolean, reflect: true })
   ], ContextElement.prototype, "playing");
   __decorateClass([
+    provide({ context: loopContext }),
     property({ type: Boolean, reflect: true })
   ], ContextElement.prototype, "loop");
   __decorateClass([

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

@@ -14,7 +14,7 @@ import { TWMixin } from "./TWMixin.js";
 import { msToTimeCode } from "../msToTimeCode.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { focusContext } from "./focusContext.js";
-import { playingContext } from "./playingContext.js";
+import { playingContext, loopContext } from "./playingContext.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -73,17 +73,23 @@ class FilmstripItem extends TWMixin(LitElement) {
   get isFocused() {
     return this.element && this.focusContext?.focusedElement === this.element;
   }
-  get styles() {
+  get gutterStyles() {
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * this.element.startTimeWithinParentMs}px`,
-      width: `${this.pixelsPerMs * this.element.durationMs}px`
+      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
+      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`
+    };
+  }
+  get trimPortionStyles() {
+    return {
+      width: `${this.pixelsPerMs * this.element.durationMs}px`,
+      left: `${this.pixelsPerMs * this.element.trimStartMs}px`
     };
   }
   render() {
-    return html` <div class="" style=${styleMap(this.styles)}>
+    return html`<div style=${styleMap(this.gutterStyles)}>
       <div
-        class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 hover:bg-blue-400 text-sm data-[focused]:bg-slate-400"
+        class="bg-slate-300"
         ?data-focused=${this.isFocused}
         @mouseenter=${() => {
       if (this.focusContext) {
@@ -96,7 +102,13 @@ class FilmstripItem extends TWMixin(LitElement) {
       }
     }}
       >
-        ${this.animations()}
+        <div
+          ?data-focused=${this.isFocused}
+          class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 text-sm data-[focused]:bg-slate-400"
+          style=${styleMap(this.trimPortionStyles)}
+        >
+          ${this.animations()}
+        </div>
       </div>
       ${this.renderChildren()}
     </div>`;
@@ -480,8 +492,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
     this.currentTimeMs = 0;
     __privateAdd(this, _handleKeyPress, (event) => {
       if (event.key === " ") {
+        const [target] = event.composedPath();
         const interactiveSelector = "input, textarea, button, select, a, [contenteditable]";
-        const closestInteractive = event.target?.closest(
+        const closestInteractive = target?.closest(
           interactiveSelector
         );
         if (closestInteractive) {
@@ -602,23 +615,8 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
         />
         <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
         <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
-        ${this.playing ? html`<button
-              @click=${() => {
-      if (__privateGet(this, _EFFilmstrip_instances, contextElement_get)) {
-        __privateGet(this, _EFFilmstrip_instances, contextElement_get).playing = false;
-      }
-    }}
-            >
-              ⏸️
-            </button>` : html`<button
-              @click=${() => {
-      if (__privateGet(this, _EFFilmstrip_instances, contextElement_get)) {
-        __privateGet(this, _EFFilmstrip_instances, contextElement_get).playing = true;
-      }
-    }}
-            >
-              ▶️
-            </button>`}
+        <ef-toggle-play><button>${this.playing ? "⏸️" : "▶️"}</button></ef-toggle-play>
+        <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50">🔁</span>`}</button></ef-toggle-loop>
       </div>
       <div
         class="z-10 pl-1 pr-1 pt-2 shadow shadow-slate-600 overflow-auto"
@@ -696,6 +694,10 @@ __decorateClass([
   consume({ context: playingContext, subscribe: true }),
   state()
 ], EFFilmstrip.prototype, "playing", 2);
+__decorateClass([
+  consume({ context: loopContext, subscribe: true }),
+  state()
+], EFFilmstrip.prototype, "loop", 2);
 __decorateClass([
   state()
 ], EFFilmstrip.prototype, "currentTimeMs", 2);

package/dist/elements/src/gui/EFToggleLoop.js

@@ -0,0 +1,39 @@
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { consume } from "@lit/context";
+import { efContext } from "./efContext.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let EFToggleLoop = class extends LitElement {
+  render() {
+    return html`
+      <slot @click=${() => {
+      if (this.context) {
+        this.context.loop = !this.context.loop;
+      }
+    }}></slot>
+    `;
+  }
+};
+EFToggleLoop.styles = [
+  css`
+      :host {}
+    `
+];
+__decorateClass([
+  consume({ context: efContext })
+], EFToggleLoop.prototype, "context", 2);
+EFToggleLoop = __decorateClass([
+  customElement("ef-toggle-loop")
+], EFToggleLoop);
+export {
+  EFToggleLoop
+};