@omnimedia/omnitool
Version:
open source video processing tools
69 lines • 2.71 kB
JavaScript
import { Filmstrip } from "../../timeline/parts/filmstrip.js";
export async function filmstripTest(file, root) {
const rangeSlider = root.querySelector(".range");
const rangeView = root.querySelector(".range-view");
const rangeSizeSlider = root.querySelector(".range-size");
const frequencySlider = root.querySelector(".frequency");
const frequencyView = root.querySelector(".frequency-view");
const container = root.querySelector(".filmstrip");
const FPS_10 = 1 / 10;
let rangeSize = 0.5;
let frequency = FPS_10;
container.replaceChildren();
const filmstrip = await Filmstrip.init(file, {
onChange(tiles) {
// Sort by time (optional, for clean ordering)
const sorted = tiles.sort((a, b) => a.time - b.time);
// Clear previous thumbnails
container.replaceChildren(...sorted.map(({ time, canvas }) => createLabeledCanvas(time, canvas.canvas)));
},
frequency: FPS_10,
canvasSinkOptions: {
width: 80,
height: 50,
fit: "fill"
}
});
const update = () => {
const start = +rangeSlider.value;
filmstrip.update({ range: [start, start + rangeSize], frequency });
};
rangeSizeSlider.oninput = () => {
rangeSize = +rangeSizeSlider.value;
const start = +rangeSlider.value;
rangeView.textContent = `visible time range: [${start}, ${start + rangeSize}]`;
update();
};
rangeSlider.oninput = () => {
const start = +rangeSlider.value;
rangeView.textContent = `visible time range: [${start}, ${start + rangeSize}]`;
update();
};
frequencySlider.oninput = () => {
frequency = 1 / +frequencySlider.value;
frequencyView.textContent = `frame every ${frequency.toFixed(3)} second (${frequencySlider.value} frames per second)`;
update();
};
update();
}
function createLabeledCanvas(time, canvas) {
const wrapper = document.createElement('div');
wrapper.style.position = 'relative';
wrapper.style.display = 'inline-block';
wrapper.style.marginRight = '4px';
wrapper.appendChild(canvas);
const label = document.createElement('div');
label.textContent = `${time.toFixed(2)}s`;
label.style.position = 'absolute';
label.style.top = '2px';
label.style.right = '4px';
label.style.fontSize = '10px';
label.style.color = 'white';
label.style.background = 'rgba(0,0,0,0.6)';
label.style.padding = '2px 4px';
label.style.borderRadius = '4px';
label.style.pointerEvents = 'none';
wrapper.appendChild(label);
return wrapper;
}
//# sourceMappingURL=filmstrip-test.js.map