import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { EFImage } from "../../../elements/EFImage.js";
import { TrackItem } from "./TrackItem.js";
import { html, nothing } from "lit";
import { customElement } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";

//#region src/gui/timeline/tracks/ImageTrack.ts
let EFImageTrack = class EFImageTrack$1 extends TrackItem {
	contents() {
		const image = this.element;
		if (!(image instanceof EFImage)) return nothing;
		const src = image.getAttribute("src") || image.src;
		const trackWidth = (image.durationMs ?? 0) * this.pixelsPerMs;
		const thumbnailHeight = 18;
		const thumbnailWidth = Math.min(32, trackWidth);
		if (!src || thumbnailWidth < 8) return nothing;
		const thumbnailCount = Math.max(1, Math.floor((trackWidth - 8) / (thumbnailWidth + 2)));
		return html`
      <div style=${styleMap({
			position: "absolute",
			left: "4px",
			right: "4px",
			top: "2px",
			bottom: "2px",
			display: "flex",
			alignItems: "center",
			gap: "2px",
			overflow: "hidden"
		})}>
        ${Array.from({ length: thumbnailCount }, () => html`
          <img
            src="${src}"
            alt=""
            style=${styleMap({
			height: `${thumbnailHeight}px`,
			width: `${thumbnailWidth}px`,
			objectFit: "cover",
			borderRadius: "2px",
			opacity: "0.75",
			pointerEvents: "none",
			flexShrink: "0"
		})}
          />
        `)}
      </div>
    `;
	}
};
EFImageTrack = __decorate([customElement("ef-image-track")], EFImageTrack);

//#endregion
//# sourceMappingURL=ImageTrack.js.map