labo-components/app/components/resourceviewer/mediaColumn/timeline/Cursor.jsx

B&G UI components

import React from 'react';
import { timeToString } from './_timeHelpers';
import classNames from 'classnames';

import IDUtil from '../../../../util/IDUtil';

// Render the cursor that is shown on the current position
const Cursor = ({ start, position, pixelsPerSecond, width }) => {
    // Calculate left position
    let left = pixelsPerSecond * (position - start);

    // Hardcoded width of the timestamp span
    const spanWidth = 62;

    // Out of view? Don't render
    if (left > width || left < -spanWidth) {
        return null;
    }

    // Keep a 2px offset from the end to always keep the cursor in view
    left = Math.min(width - 2, left);

    // Flip timestamp span to the left in case the cursor is at the end of the timeline
    const atEnd = left > width - spanWidth;
    return (
        <div
            className={classNames(IDUtil.cssClassName('tl-cursor'), {
                end: atEnd
            })}
            style={{
                left
            }}
        >
            <span>{timeToString(position, true)}</span>
        </div>
    );
};

export default Cursor;