fix(traceViewer): calculate the number of filmstrip frames correctly (#10757)

We now fit evenly-spaced frames into available width (as intended before),
and then add one more last frame that could be cropped at the right.
This commit is contained in:
Dmitry Gozman 2021-12-07 11:58:20 -08:00 committed by GitHub
parent 00bc2ab531
commit 6698f3277a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -87,12 +87,12 @@ const FilmStripLane: React.FunctionComponent<{
const gapLeft = (startTime - boundaries.minimum) / boundariesDuration * width;
const gapRight = (boundaries.maximum - endTime) / boundariesDuration * width;
const effectiveWidth = (endTime - startTime) / boundariesDuration * width;
const frameCount = effectiveWidth / (frameSize.width + 2 * frameMargin) | 0 + 1;
const frameCount = (effectiveWidth / (frameSize.width + 2 * frameMargin)) | 0;
const frameDuration = (endTime - startTime) / frameCount;
const frames: JSX.Element[] = [];
let i = 0;
for (let time = startTime; startTime && frameDuration && time <= endTime; time += frameDuration, ++i) {
for (let i = 0; startTime && frameDuration && i < frameCount; ++i) {
const time = startTime + frameDuration * i;
const index = upperBound(screencastFrames, time, timeComparator) - 1;
frames.push(<div className='film-strip-frame' key={i} style={{
width: frameSize.width,
@ -104,7 +104,7 @@ const FilmStripLane: React.FunctionComponent<{
}} />);
}
// Always append last frame to show endgame.
frames.push(<div className='film-strip-frame' key={i} style={{
frames.push(<div className='film-strip-frame' key={frames.length} style={{
width: frameSize.width,
height: frameSize.height,
backgroundImage: `url(sha1/${screencastFrames[screencastFrames.length - 1].sha1})`,