svg-term/lib/Reel.js

Share terminal sessions via SVG and CSS

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const core_1 = require("@emotion/core");
const PERCEPTIBLE = 1 / 60;
exports.Reel = (props) => {
    if (props.duration === 0) {
        return (react_1.default.createElement("svg", { x: "0", y: "0", width: props.width }, props.children));
    }
    const factor = Math.pow(10, magnitude(PERCEPTIBLE / (props.duration / 100)) + 1);
    const p = (s) => Math.round((s / (props.duration / 100)) * factor) / factor;
    const animation = core_1.keyframes `
    ${props.stamps.map((stamp, i) => `
      ${p(stamp)}% {
        transform: translateX(-${props.frameWidth * i}px);
      }
    `).join('\n')}
  `;
    return (react_1.default.createElement(StyledAnimationStage, { animation: animation, duration: props.duration },
        react_1.default.createElement("svg", { x: "0", y: "0", width: props.width }, props.children)));
};
function magnitude(x) {
    const y = Math.abs(x);
    if (y > 1) {
        return 0;
    }
    const result = Math.floor(Math.log(y) / Math.log(10) + 1);
    return result === 0 ? result : -1 * result;
}
const StyledAnimationStage = styled_1.default.g `
  animation-name: ${(props) => props.animation};
  animation-duration: ${(props) => props.duration}s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
`;
//# sourceMappingURL=Reel.js.map