timescale.info#112 · Show images behind durations
- timeline-app
- pull request
Closes #94. ## Plugin - A new official plugin, **Duration backgrounds** (`duration-backgrounds` v1), adds a `backgroundUrl` image URL field to durations. Its URL rules match moment icons: public HTTPS, no credentials, no referrer, anonymous CORS. - The manifest API gains a duration-only component, `background: { kind: "image", metadataKey }`. Without `targets`, a plugin with a background applies only to durations. Duration editors now accept `image-url` fields. - `pluginBackground(plugins, metadata)` returns the last enabled plugin's valid URL; an invalid later value falls back to an earlier one, as with icons. ## Rendering (`src/app.ts`, `renderDurationBackgrounds`) - **Layer:** a `#duration-backgrounds` layer sits at the bottom of the stage, below the axis, bands and markers, in stage pixels. It doesn't move with the vertical pan or the content scale. - **Visible part:** for each duration band with a background, the element covers the visible part of the duration, `[max(0, start), min(stageWidth, end)]`, at full height. - **The image:** an ` ` sized to the whole stage with `object-fit: cover`, so it fills the timeline's width and height while keeping its aspect ratio, centered vertically. - Horizontally, it's centered between the visible start and end. If an end lies beyond the view, the view's edge stands in for it. - If both ends lie beyond the view, the image fills the timeline. - It follows window resizes and orientation changes through the existing ResizeObserver. - **Collapsed durations:** these are summaries, not bands, so they show no background. - **Stacking:** `z-index` follows exact extent, so smaller durations sit above larger ones. - **Edges:** an edge inside the view fades to transparency over `min(64px, width/4)` using `mask-image`. An edge where the duration continues past the view doesn't fade. - **Persistence:** elements are kept per duration, so images keep loading while the view moves. - **Offline:** exports embed duration images, including backgrounds, like moment icons. ## Limitation Duration bands carry string metadata of at most 256 characters in all three stores (browser, PostgreSQL, SQLite). That's an existing shared limit, so a background URL longer than 256 characters shows nothing, and the duration dialog says so. Raising the limit would mean changing and rebuilding the band indexes in every store. ## Tests - **Unit tests** (`test/plugins.test.mjs`) cover: - targets and validation; - duration-only fields; - which URL wins, including fallback when a later one is invalid; - the official plugin list. - **Browser test** (`test/duration-backgrounds-browser.mjs`, added to `browser.mjs`) uses a view where one duration's ends are both inside and another's are both outside. It checks: - full-stage image size, horizontal centring and coverage; - the inner duration matching its band and centred between its ends, with both edges fading; - smaller durations above larger; - a collapsed duration showing nothing; - with the start beyond the view: centring between the view's edge and the end, with only the end fading; - resize; - disabling the plugin. - Passes in Chromium, Firefox and WebKit; the full Chromium suite passes locally.