\\` element)\n- show the whole thumbnail on click (instead of a slit tear)?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2322,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2326,"value":"defaultValues = ({\n frameAt: () => html`<canvas>`,\n aspectRatio: 2\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2335,"value":"function validateFrameAt(value, { defaultValue, mandatory = false }) {\n const definedValue = getDefinedValue({ value, defaultValue, mandatory });\n if (typeof definedValue !== 'function') {\n throw new Error('must be a function');\n }\n // Ensure this is a promise (thenable)\n return t => Promise.resolve(definedValue(t));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2330,"value":"function validateAspectRatio(value, { defaultValue, mandatory = false }) {\n const definedValue = getDefinedValue({ value, defaultValue, mandatory });\n if (!isFinite(definedValue) || definedValue <= 0) {\n throw new Error('must be a strictly positive number');\n }\n return definedValue;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"function validate(options) {\n return {\n ...validateCommon(options),\n frameAt: validateFrameAt(options.frameAt, {\n mandatory: false,\n defaultValue: defaultValues.frameAt\n }),\n aspectRatio: validateAspectRatio(options.aspectRatio, {\n mandatory: false,\n defaultValue: defaultValues.aspectRatio\n })\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2015,"value":"import {\n validate as validateCommon,\n getDefinedValue\n} from 'f48b7d02f25f093c'","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2403,"value":"import { intrinsicHeight, intrinsicWidth } from '@severo/canvasimagesource'","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"import { createState } from '70f545ce6ecf7963'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2681,"value":"import { disposal } from '@mbostock/disposal'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"} </article></body></html>

30:T5bf,md`# Thumbnails Timeline A control to show a thumbnails from a video or an animation, and select a time instant. Mouse-scroll when hovering the timeline to zoom in or out, click on a thumbnail to select the time. This control implements the [Zoomable Timeline specification](https://observablehq.com/d/f48b7d02f25f093c). Install ~~~js import {thumbnails} from '@severo/thumbnails-timeline' ~~~ Use ~~~js viewof t = thumbnails(options) ~~~ --- ### Options All properties in [Zoomable Timeline specification](https://observablehq.com/d/f48b7d02f25f093c) and:

\`frameAt\`: an async function that fetches a frame at time t and returns a [CanvasImageSource](https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource): \`const image = await frameAt(t)\`. \`frameAt\` is responsible to memoize the value. Defaults to a function that returns an empty canvas
\`aspectRatio\`: the frame aspect ratio. It's assumed to be constant along time. A small value will extract the center vertical band of every thumbnail, creating [slit tears](https://www.researchgate.net/publication/221516841_Exploring_video_streams_using_slit-tear_visualizations). Defaults to 2

### Returns The control. It's an Observable "view": it has a \`value\` getter, and it dispatches an \`input\` event whenever the value changes. ### Events See [Zoomable Timeline specification](https://observablehq.com/d/f48b7d02f25f093c) `31:T1487,function thumbnails(options = {}) { // Validation const { value: currentValue, min, max, step, width, zoomRange, zoomTranslateExtent, zoomScaleExtent, zoomDisabled, frameAt, aspectRatio } = validate(options); const height = 60; const pixelRange = [0, width]; // We use the state as an intermediary to throttle the interactions const initState = { value: { currentValue, zoomRange }, timeout: 0 }; const state = createState(initState); function updateCurrentValue(value, by) { if (value !== state.currentValue) { state.set('currentValue', value, { by }); } } function updateZoomRange(value, by) { if (state.zoomRange.some((d, i) => d !== value[i])) { state.set('zoomRange', value, { by }); } } function clamp(v) { return Math.min(Math.max(v, min), max); } function snap(v) { const reference = min === -Infinity ? 0 : min; const n = Math.round((v - reference) / step); const u = reference + n * step; return u > max ? u - step : u; } const restrictValue = step === 'any' ? clamp : v => snap(clamp(v)); const zoomedScale = d3.scaleLinear().range(pixelRange); function getZoomRangeFromTransform(transform) { const { k, x: tx } = transform; const za = -tx / k; const zb = (width - tx) / k; return [za, zb]; } function getTransformFromZoomRange(zoomRange) { const [za, zb] = zoomRange; const k = width / (zb - za); const tx = -za * k; return d3.zoomIdentity.translate(tx, 0).scale(k); } // Create the control const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr('width', width) .attr('height', height) .classed('thumbnails', true); const id = DOM.uid().id; svg.attr('id', id); svg.node().appendChild(html` `); const control = svg.node(); const controlInvalidation = disposal(control); const zoomBehavior = d3 .zoom() .scaleExtent(zoomScaleExtent) .translateExtent([ [zoomTranslateExtent[0], 0], [zoomTranslateExtent[1], 0] ]); function drawThumbnails() { createThumbnails(svg, { zoomRange: state.zoomRange, height, min, max, width, frameAt, aspectRatio }); } function updateZoom() { const transform = getTransformFromZoomRange(state.zoomRange); svg.call(zoomBehavior.transform, transform); } // init updateZoom(); drawThumbnails(); // React to changes in the state function onStateCurrentValue(event) { // send an event if the update comes from the control's interactions if (event.detail.by !== 'outside') { control.dispatchEvent(new CustomEvent("input")); } // nothing to redraw } state.addEventListener('currentValue', onStateCurrentValue); controlInvalidation.then(() => state.removeEventListener('currentValue', onStateCurrentValue) ); function onStateZoomRange(event) { // send an event if the update comes from the control's interactions if (event.detail.by !== 'outside') { control.dispatchEvent(new CustomEvent("zoomed")); } if (event.detail.by !== zoomBehavior) { updateZoom(); } drawThumbnails(); } state.addEventListener('zoomRange', onStateZoomRange); controlInvalidation.then(() => state.removeEventListener('zoomRange', onStateZoomRange) ); // Interactions that modify the current value (click, setter) function onSvgClick(event) { // ignore the click if a drag has been started - https://observablehq.com/@d3/click-vs-drag if (event.defaultPrevented) return; // dragged const originalElement = d3.select(event.target.closest('g')); if (originalElement.size() !== 1) return; updateCurrentValue(restrictValue(originalElement.datum()), 'click'); // animate the selected element originalElement .select('foreignObject') .transition() .attr("transform", function() { const scale = 1.5; return `translate(${((1 - scale) / 2) * this.width.baseVal .value}, ${((1 - scale) / 2) * this.height.baseVal.value}) scale(${scale})`; }) .transition() .attr("transform", ""); } svg.on("click", onSvgClick); controlInvalidation.then(() => svg.on('click', null)); Object.defineProperty(control, 'value', { enumerable: true, get: () => state.currentValue, set: value => { updateCurrentValue(value, 'outside'); } }); // Interactions that change the zoom range (zoom, setter) if (!zoomDisabled) { function onZoomBehaviorZoom(event) { updateZoomRange(getZoomRangeFromTransform(event.transform), zoomBehavior); } zoomBehavior.on("zoom", onZoomBehaviorZoom); controlInvalidation.then(() => zoomBehavior.on("zoom", null)); svg.call(zoomBehavior); } Object.defineProperty(control, 'zoomRange', { enumerable: true, get: () => state.zoomRange, set: value => { updateZoomRange(value, 'outside'); } }); // Return the control return control; }32:T1a38,createThumbnails = { // one cache per svg. Garbage collected svgs will be removed automatically from the weak map const caches = new WeakMap(); return function createThumbnails( svg, { zoomRange, height, min, max, width, frameAt, aspectRatio } ) { if (!caches.has(svg)) { caches.set(svg, new WeakMap()); } const cache = caches.get(svg); const scale = d3 .scaleLinear() .domain(zoomRange) .range([0, width]); // arbitrarily: no gap between frames if height * aspectRatio corresponds to one second // zoom-in: multiply the number of frames by two // zoom-out: divide the number of frames by two, keeping t=0 const thumbnailHeight = height; const thumbnailWidth = thumbnailHeight * aspectRatio; const t0 = zoomRange[0]; const t1 = zoomRange[1]; // step must be a (positive or negative) power of two const rawStep = scale.invert(thumbnailWidth) - t0; if (rawStep <= 0) { throw new Error('step must be strictly positive'); } const step = Math.pow(2, Math.ceil(Math.log2(rawStep))); // remove times that are outside [min, max] function isInsideMinMax(t) { return t >= min && t <= max; } const fgTimes = d3 .range( Math.floor(t0 / step) * step - step, Math.ceil(t1 / step) * step + 2 * step, step ) .filter(isInsideMinMax); const bgTimes = fgTimes .slice(1) .map(d => d - step / 2) .filter(isInsideMinMax); function frameToCanvas(frame, { force = false } = {}) { if (frame instanceof HTMLCanvasElement && !force) { return frame; } // if the frame is a CanvasImageSource but not a canvas, we draw it onto a new canvas const w = intrinsicWidth(frame); const h = intrinsicHeight(frame); const ctx = DOM.canvas(w, h).getContext('2d'); ctx.drawImage(frame, 0, 0, ctx.canvas.width, ctx.canvas.height); return ctx.canvas; } function canvasToThumbnail(canvasPromise) { const w = thumbnailWidth; const h = thumbnailHeight; const dpr = window.devicePixelRatio; const ctx = DOM.context2d(w, h, dpr); ctx.scale(1 / dpr, 1 / dpr); // the thumbnail will be filled when the canvas promise resolves // or fail silently canvasPromise.then(canvas => { const sh = canvas.height; const sw = sh * aspectRatio; ctx.drawImage( canvas, // canvas.width / 2 - w / 2, // 0, // w, // canvas.height, // 0, // 0, // canvas.width, // canvas.height, (canvas.width - sw) / 2, 0, sw, sh, 0, 0, ctx.canvas.width, ctx.canvas.height ); }); return ctx.canvas; } function canvasToTypedArray(canvas) { // see https://observablehq.com/@severo/canvas-equality-by-value // If the canvas has no 2d context, which is the case if the canvas // is rendered with WebGL for example (three.js) // we have to copy it to another canvas (TODO: we might reuse the temporary canvases of the same size) const ctx = canvas.getContext('2d') || frameToCanvas(canvas, { force: true }).getContext('2d'); // Note that it might generate an exception: // "The operation is insecure" return new Uint32Array( ctx.getImageData(0, 0, canvas.width, canvas.height).data.buffer ); } const bg = svg .selectAll('g.bg') .data([bgTimes]) .join(enter => enter.append('g').classed('bg', true)); const fg = svg .selectAll('g.fg') .data([fgTimes]) .join(enter => enter.append('g').classed('fg', true)); // TODO: remove duplicate code (d3.merge?) // TODO: reuse the canvas when bg goes to fg bg.selectAll('g') .data(d => d, t => t) .join( enter => { const foreignObject = enter .append('g') .classed('thumbnail', true) .classed('background-layer', true) .attr('transform', t => `translate(${scale(t)}, 0)`) .append('foreignObject') .attr('width', thumbnailWidth) .attr('height', thumbnailHeight); foreignObject.append('title').text(t => `${t}`); return foreignObject.append(function(t) { const canvasPromise = frameAt(t).then(frameToCanvas); cache.set( this.closest('.thumbnail'), // add the array to the cache, in order to further compare the values canvasPromise.then(canvasToTypedArray) ); return canvasToThumbnail(canvasPromise); }); }, update => update.attr('transform', t => `translate(${scale(t)},0)`), exit => exit.remove() ); fg.selectAll('g') .data(d => d, t => t) .join( enter => { const foreignObject = enter .append('g') .classed('thumbnail', true) .attr('transform', t => `translate(${scale(t)}, 0)`) .append('foreignObject') .attr('width', thumbnailWidth) .attr('height', thumbnailHeight); foreignObject.append('title').text(t => `${t}`); return foreignObject.append(function(t) { const canvasPromise = frameAt(t).then(frameToCanvas); cache.set( this.closest('.thumbnail'), // add the array to the cache, in order to further compare the values canvasPromise.then(canvasToTypedArray) ); return canvasToThumbnail(canvasPromise); }); }, update => update.attr('transform', t => `translate(${scale(t)},0)`), exit => exit.remove() ) // when two successive frames resolve, if both are equal, blur the second one .each(function() { const currentArrayPromise = cache.get(this.closest('.thumbnail')); const previousArrayPromise = cache.get( this.closest('.thumbnail').previousElementSibling ); if (!previousArrayPromise || !currentArrayPromise) return; Promise.all([ previousArrayPromise, currentArrayPromise ]).then(([previousArray, currentArray]) => d3 .select(this.closest('.thumbnail')) .classed( 'sameFrame', previousArray && currentArray && previousArray.length === currentArray.length && previousArray.every((d, i) => d === currentArray[i]) ) ); }); }; }33:[] 2e:{"title":"Thumbnails Timeline","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1995,"value":"md`## Examples\n\nControl with default options:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"viewof t1 = thumbnails()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2004,"value":"t1","pinned":true,"hidden":false,"mode":"ojs"},{"id":2007,"value":"md`Control with all options on a canvas animation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"viewof t2 = thumbnails({\n value: 5.72,\n min: -2,\n max: 10,\n step: 0.1,\n width: 600,\n zoomRange: [3.7, 5.3],\n zoomTranslateExtent: [-5, 11],\n zoomScaleExtent: [100, 10000],\n zoomDisabled: false,\n frameAt: t => {\n // see https://observablehq.com/@mourner/canvas-recorder\n const ctx = DOM.context2d(160, 90);\n ctx.font = '48px sans-serif';\n ctx.textAlign = 'center';\n ctx.fillStyle = `limegreen`;\n ctx.fillRect(0, 0, 160, 90);\n ctx.fillStyle = 'white';\n ctx.fillText(Math.floor(t), 80, 60);\n return ctx.canvas;\n },\n aspectRatio: 16 / 9\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"t2","pinned":true,"hidden":false,"mode":"ojs"},{"id":2289,"value":"md`Video control:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2294,"value":"viewof t3 = thumbnails({\n value: 5.72,\n min: 0,\n max: video.duration,\n step: 0.1,\n width,\n zoomRange: [0, video.duration],\n zoomScaleExtent: [width / video.duration, 30000],\n zoomDisabled: false,\n frameAt: t => frameAt(video.currentSrc, t, { crossOrigin: 'anonymous' }),\n aspectRatio: (video.videoWidth / video.videoHeight) * 0.2 // setting a smaller aspectRatio generates \"slit-tears\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2798,"value":"(viewof t3.zoomRange = [10, 20])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2583,"value":"t3","pinned":true,"hidden":false,"mode":"ojs"},{"id":2572,"value":"video = html`