Spaces:
Runtime error
Runtime error
File size: 3,355 Bytes
92189dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {CanvasForm, CanvasSpace, Font, Group, Pt, Triangle} from 'pts';
import SelectedFrameHelper from './SelectedFrameHelper';
import {PADDING_BOTTOM, PADDING_TOP} from './VideoFilmstrip';
export function getPointerPosition(
event: React.PointerEvent<HTMLCanvasElement>,
) {
const rect = event.currentTarget.getBoundingClientRect();
return new Pt(event.clientX - rect.left, event.clientY - rect.top);
}
export function drawFilmstrip(
filmstrip: ImageBitmap | null,
space: CanvasSpace | undefined,
form: CanvasForm | undefined,
) {
if (filmstrip == null || space == undefined || form?.ctx == undefined) {
return;
}
const ratio =
filmstrip.width / (filmstrip.height + PADDING_TOP + PADDING_BOTTOM);
form.image(
[
[0, PADDING_TOP],
[space.size.x, space.size.x / ratio],
],
filmstrip,
);
}
export function getTimeFromFrame(frame: number, fps: number): string {
const seconds = Math.floor(frame / fps);
const frameRemaining = frame - fps * seconds;
return `${seconds}:${frameRemaining.toFixed().toString().padStart(2, '0')}`;
}
export function drawMarker(
space: CanvasSpace | undefined,
form: CanvasForm | undefined,
selectedFrameHelper: SelectedFrameHelper,
pointerPosition: Pt | null,
scanLabel: string | false,
fps: number,
) {
if (space == undefined || form?.ctx == undefined) {
return;
}
const marker = Group.fromArray([
[0, PADDING_TOP],
[0, space.height - PADDING_BOTTOM],
]);
const currentMarker = marker
.clone()
.add(Math.max(5, selectedFrameHelper.position), 0);
const getTextPosition = (label: string, marker: Group) => {
const textWidth = form.ctx.measureText(label).width;
return marker[0]
.$subtract(textWidth / 2, 0)
.$min(space.width - textWidth, PADDING_TOP - 10)
.$max(textWidth / 2 - 2, 0);
};
// draw current marker
form
.strokeOnly('#00000066', 5)
.line(currentMarker)
.strokeOnly('#fff', 1)
.line(currentMarker)
.fill('#000')
.polygon(
Triangle.fromCenter(currentMarker[0].$add(0, 10), 5).rotate2D(Math.PI),
);
// draw text
const frameLabel = getTimeFromFrame(selectedFrameHelper.index, fps);
form
.font(new Font(12, 'monospace'))
.fillOnly('#fff')
.text(getTextPosition(frameLabel, currentMarker), frameLabel);
// draw scanning ghost marker
if (
selectedFrameHelper.isScanning &&
pointerPosition != null &&
scanLabel != false
) {
const scanMarker = marker.clone().add(pointerPosition.x, 0);
form.strokeOnly('#ffffff66', 5).line(scanMarker);
form
.font(new Font(12, 'monospace'))
.fillOnly('#8595A4')
.text(getTextPosition(scanLabel, scanMarker), scanLabel);
}
}
|