@ldelia/react-media 0.2.8 → 0.3.0

package/scripts/start.js

@@ -0,0 +1,154 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const fs = require('fs');
+const chalk = require('react-dev-utils/chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const semver = require('semver');
+const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+const getClientEnvironment = require('../config/env');
+const react = require(require.resolve('react', { paths: [paths.appPath] }));
+
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
+  );
+  console.log();
+}
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+
+    const config = configFactory('development');
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1)
+    );
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler({
+      appName,
+      config,
+      urls,
+      useYarn,
+      useTypeScript,
+      webpack,
+    });
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic,
+      paths.publicUrlOrPath
+    );
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = {
+      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+      host: HOST,
+      port,
+    };
+    const devServer = new WebpackDevServer(serverConfig, compiler);
+    // Launch WebpackDevServer.
+    devServer.startCallback(() => {
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
+        console.log(
+          chalk.yellow(
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
+          )
+        );
+      }
+
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
+        devServer.close();
+        process.exit();
+      });
+    });
+
+    if (process.env.CI !== 'true') {
+      // Gracefully exit when stdin ends
+      process.stdin.on('end', function () {
+        devServer.close();
+        process.exit();
+      });
+    }
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

package/scripts/test.js

@@ -0,0 +1,52 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--watchAll') === -1 &&
+  argv.indexOf('--watchAll=false') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+
+jest.run(argv);

package/src/components/__tests__/timeline/timeline.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Timeline } from '../../timeline';
+describe('Timeline', () => {
+    let props;
+    beforeEach(() => {
+        props = {
+            duration: 300,
+            value: 15,
+            onChange: jest.fn(),
+            onRangeChange: jest.fn(),
+            zoomLevel: 0,
+        };
+    });
+    describe('render()', () => {
+        it('renders a timeline', () => {
+            const rootElement = document.createElement('div');
+            const root = createRoot(rootElement);
+            root.render(React.createElement(Timeline, Object.assign({}, props)));
+        });
+    });
+});

package/src/components/index.js

@@ -0,0 +1 @@
+export * from './timeline';

package/{dist/components/timeline → src/components/timeline/RangeSelectorCanvas}/RangeSelectorCanvas.js

@@ -1,14 +1,8 @@
-"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_components_1 = __importDefault(require("styled-components"));
-const index_1 = require("./index");
-const react_2 = require("react");
-const utils_1 = require("./utils/utils");
-const OverlayCanvas = styled_components_1.default.canvas `
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import { ZoomContext } from '../ZoomContext/ZoomContext';
+import { pixelToSeconds, secondsToPixel } from '../utils/utils';
+const OverlayCanvas = styled.canvas `
   position: absolute;
   top: 0;
   left: 0;
@@ -17,14 +11,14 @@ const OverlayCanvas = styled_components_1.default.canvas `
   color: cadetblue;
 `;
 const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
-    const canvasRef = (0, react_2.useRef)(null);
-    const zoomContextValue = (0, react_2.useContext)(index_1.ZoomContext);
+    const canvasRef = useRef(null);
+    const zoomContextValue = useContext(ZoomContext);
     let isSelectingRange = false;
-    let selectedRangeInPixels = (0, react_2.useMemo)(() => [], []);
+    let selectedRangeInPixels = useMemo(() => [], []);
     if (selectedRange.length === 2) {
         selectedRangeInPixels = [
-            (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[0]),
-            (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[1]),
+            secondsToPixel(zoomContextValue, selectedRange[0]),
+            secondsToPixel(zoomContextValue, selectedRange[1]),
         ];
     }
     let lastValidSelectedRangeInPixels = [];
@@ -45,7 +39,7 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     };
     const onCanvasDoubleClick = (e) => {
         const x0 = getMousePointerPixelPosition(e);
-        onChange((0, utils_1.pixelToSeconds)(zoomContextValue, x0));
+        onChange(pixelToSeconds(zoomContextValue, x0));
         selectedRangeInPixels = lastValidSelectedRangeInPixels;
     };
     const isPixelNearSelectedRange = (x0) => {
@@ -114,12 +108,12 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
         else {
             lastValidSelectedRangeInPixels = pixelRange;
             onRangeChange([
-                (0, utils_1.pixelToSeconds)(zoomContextValue, pixelRange[0]),
-                (0, utils_1.pixelToSeconds)(zoomContextValue, pixelRange[1]),
+                pixelToSeconds(zoomContextValue, pixelRange[0]),
+                pixelToSeconds(zoomContextValue, pixelRange[1]),
             ]);
         }
     };
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
@@ -128,6 +122,6 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
             return;
         drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
     }, [selectedRangeInPixels]);
-    return (react_1.default.createElement(OverlayCanvas, { ref: canvasRef, onDoubleClick: onCanvasDoubleClick, onMouseDown: onCanvasMouseDown, onMouseMove: onCanvasMouseMove, onMouseUp: onCanvasMouseUp, className: 'media-timeline-range-selector-canvas' }));
+    return (React.createElement(OverlayCanvas, { ref: canvasRef, onDoubleClick: onCanvasDoubleClick, onMouseDown: onCanvasMouseDown, onMouseMove: onCanvasMouseMove, onMouseUp: onCanvasMouseUp, className: 'media-timeline-range-selector-canvas' }));
 };
-exports.default = react_1.default.memo(RangeSelectorCanvas);
+export default React.memo(RangeSelectorCanvas);

package/src/components/timeline/Timeline.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef, useState } from 'react';
+import TimelineCanvas from './TimelineCanvas/TimelineCanvas';
+import RangeSelectorCanvas from './RangeSelectorCanvas/RangeSelectorCanvas';
+import { zoomLevelConfigurations } from './constants';
+import styled from 'styled-components';
+import { TimelineValue } from './TimelineValue/TimelineValue';
+import { ZoomContext } from './ZoomContext/ZoomContext';
+import { getBlockOffsetForZoomLevel, getTimelineWrapperWidth, numberToPxString, } from './utils/utils';
+const TimelineContainer = styled.div `
+  background-color: #f0f0f0;
+  border: 1px solid #c9c9c9;
+  height: 80px;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  position: relative;
+  display: flex;
+`;
+const TimelineWrapper = styled.div `
+  position: absolute;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+`;
+export const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
+    const timeLineContainerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const [zoomContextValue, setZoomContextValue] = useState({
+        blockOffset: 0,
+        pixelsInSecond: 0,
+        timelineWrapperWidth: 0,
+    });
+    let zoomLevelValue = zoomLevel ? zoomLevel : 0;
+    if (zoomLevelValue < 0 || zoomLevelValue >= zoomLevelConfigurations.length) {
+        console.warn('Invalid value for property zoomLevel.');
+        zoomLevelValue = 0;
+    }
+    if (value < 0 || value > duration) {
+        console.warn('Invalid value.');
+    }
+    if (!(selectedRange.length === 0 || selectedRange.length === 2)) {
+        selectedRange = [];
+        console.warn('The selected range must contain only two values.');
+    }
+    if (selectedRange.length === 2 &&
+        !(0 <= selectedRange[0] &&
+            selectedRange[0] < selectedRange[1] &&
+            selectedRange[1] <= duration)) {
+        selectedRange = [];
+        console.warn('The selected range is inconsistent.');
+    }
+    useEffect(() => {
+        if (!timeLineContainerRef.current)
+            return;
+        const timelineWrapperWidth = getTimelineWrapperWidth(timeLineContainerRef.current.offsetWidth, zoomLevelValue);
+        setZoomContextValue({
+            blockOffset: getBlockOffsetForZoomLevel(zoomLevelValue, duration, timelineWrapperWidth),
+            pixelsInSecond: timelineWrapperWidth / duration,
+            timelineWrapperWidth: timelineWrapperWidth,
+        });
+    }, [timeLineContainerRef.current, zoomLevelValue, duration]);
+    useEffect(() => {
+        const timeLineWrapper = timeLineContainerRef.current;
+        const scrollPosition = value * zoomContextValue.pixelsInSecond - 300;
+        timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
+    }, [duration, value, zoomContextValue]);
+    return (React.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
+        React.createElement(TimelineWrapper, { style: {
+                width: numberToPxString(zoomContextValue.timelineWrapperWidth),
+            } },
+            React.createElement(ZoomContext.Provider, { value: zoomContextValue },
+                React.createElement(TimelineCanvas, { ref: canvasRef, duration: duration, withTimeBlocks: withTimeBlocks }),
+                React.createElement(TimelineValue, { value: value, canvasRef: canvasRef }),
+                React.createElement(RangeSelectorCanvas, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange })))));
+};

package/src/components/timeline/TimelineCanvas/TickTime.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+const TickTimeContainer = styled.span.attrs((props) => ({
+    style: {
+        left: props.left,
+    },
+})) `
+  background: transparent;
+  position: absolute;
+  padding-left: 8px;
+  color: #646464;
+  user-select: none;
+  min-width: 20px;
+  max-width: 20px;
+  align-self: flex-end;
+`;
+const TickTime = ({ start, leftPosition }) => {
+    const minutes = Math.floor(start / 60);
+    let seconds = start - minutes * 60;
+    let secondsFormatted = seconds < 10 ? '0' + seconds : seconds.toString();
+    return (React.createElement(TickTimeContainer, { left: leftPosition, className: 'media-timeline-tick-time' },
+        minutes,
+        ":",
+        secondsFormatted));
+};
+export default TickTime;

package/src/components/timeline/TimelineCanvas/TickTimeCollectionDisplay.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+import TickTime from './TickTime';
+import { ZoomContext } from '../ZoomContext/ZoomContext';
+const TickTimeCollectionDisplayContainer = styled.div `
+  position: absolute;
+  display: flex;
+  align-self: flex-end;
+  height: 100%;
+`;
+const TickTimeCollectionDisplay = ({ tickTimes = [], }) => {
+    return (React.createElement(ZoomContext.Consumer, null, (value) => {
+        return (React.createElement(TickTimeCollectionDisplayContainer, null, tickTimes.map((tickTimeValue, index) => {
+            const leftPosition = tickTimeValue * value.pixelsInSecond + 'px';
+            return (React.createElement(TickTime, { key: index, start: tickTimeValue, leftPosition: leftPosition }));
+        })));
+    }));
+};
+export default TickTimeCollectionDisplay;

package/src/components/timeline/TimelineCanvas/TimelineCanvas.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, } from 'react';
+import styled from 'styled-components';
+import { ZoomContext } from '../ZoomContext/ZoomContext';
+import TickTimeCollectionDisplay from './TickTimeCollectionDisplay';
+import { drawTimeBlocksOnCanvas } from './drawTimeBlocksOnCanvas';
+const OverlayCanvas = styled.canvas `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #c9c9c9;
+`;
+const TimelineCanvas = forwardRef(({ duration, withTimeBlocks }, ref) => {
+    const internalCanvasRef = useRef(null);
+    const zoomContextValue = useContext(ZoomContext);
+    const blockStartingTimes = (() => {
+        if (!withTimeBlocks || !zoomContextValue.blockOffset)
+            return [];
+        let blockStartingTimes = [0];
+        let secondsToCover = duration;
+        while (secondsToCover > 0) {
+            blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
+                zoomContextValue.blockOffset);
+            secondsToCover = secondsToCover - zoomContextValue.blockOffset;
+        }
+        blockStartingTimes.splice(-1);
+        return blockStartingTimes;
+    })();
+    // Pass the internal ref's current value directly to the forwarded ref
+    useImperativeHandle(ref, () => internalCanvasRef.current);
+    useEffect(() => {
+        const canvas = internalCanvasRef.current;
+        // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        if (withTimeBlocks)
+            drawTimeBlocksOnCanvas(canvas, blockStartingTimes, zoomContextValue);
+    }, [blockStartingTimes, withTimeBlocks, zoomContextValue]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OverlayCanvas, { ref: internalCanvasRef, className: 'media-timeline-value-line-canvas' }),
+        withTimeBlocks && (React.createElement(TickTimeCollectionDisplay, { tickTimes: blockStartingTimes }))));
+});
+export default TimelineCanvas;

package/src/components/timeline/TimelineCanvas/drawTimeBlocksOnCanvas.js

@@ -0,0 +1,28 @@
+import { secondsToPixel } from '../utils/utils';
+export const drawTimeBlocksOnCanvas = (canvas, blockStartingTimes, zoomContextValue) => {
+    const blockHeight = 20;
+    const context = canvas.getContext('2d');
+    // draw top line
+    context.beginPath();
+    context.moveTo(0, canvas.height - blockHeight);
+    context.lineTo(zoomContextValue.timelineWrapperWidth, canvas.height - blockHeight);
+    context.strokeStyle = window
+        .getComputedStyle(canvas)
+        .getPropertyValue('color');
+    context.stroke();
+    for (const blockStartingTime of blockStartingTimes) {
+        const x0Pixel = secondsToPixel(zoomContextValue, blockStartingTime);
+        const x1Pixel = secondsToPixel(zoomContextValue, blockStartingTime + zoomContextValue.blockOffset);
+        context.beginPath();
+        // draw left line
+        context.moveTo(x0Pixel, canvas.height);
+        context.lineTo(x0Pixel, canvas.height - blockHeight);
+        // draw right line
+        context.moveTo(x1Pixel, canvas.height);
+        context.lineTo(x1Pixel, canvas.height - blockHeight);
+        context.strokeStyle = window
+            .getComputedStyle(canvas)
+            .getPropertyValue('color');
+        context.stroke();
+    }
+};

package/src/components/timeline/TimelineValue/TimelineValue.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { getComputedElementWidth, numberToPxString, secondsToPixel, } from '../utils/utils';
+import { ZoomContext } from '../ZoomContext/ZoomContext';
+const PreValueLine = styled.span `
+  position: absolute;
+  left: 0;
+  height: 100%;
+`;
+const ValueLine = styled.span `
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #575757;
+`;
+const PostValueLine = styled.span `
+  position: absolute;
+  height: 100%;
+`;
+export const TimelineValue = ({ canvasRef, value }) => {
+    const preValueLineRef = useRef(null);
+    const valueLineRef = useRef(null);
+    const postValueLineRef = useRef(null);
+    const zoomContextValue = useContext(ZoomContext);
+    const showValueLine = useCallback(() => {
+        const canvas = canvasRef.current;
+        const preValueLineElement = preValueLineRef.current;
+        const valueLineElement = valueLineRef.current;
+        const postValueLineElement = postValueLineRef.current;
+        const valueLineWidth = getComputedElementWidth(valueLineElement);
+        const linePosition = secondsToPixel(zoomContextValue, value);
+        const valueLinePositionBeginningConsideringWidth = linePosition - valueLineWidth / 2;
+        // configure preValueLineElement
+        preValueLineElement.style.width = numberToPxString(valueLinePositionBeginningConsideringWidth);
+        // configure valueLineElement
+        valueLineElement.style.left = numberToPxString(valueLinePositionBeginningConsideringWidth);
+        // configure postValueLineElement
+        const postValueLinePosition = valueLinePositionBeginningConsideringWidth + valueLineWidth;
+        const postValueLineWidth = canvas.width - postValueLinePosition;
+        postValueLineElement.style.left = numberToPxString(postValueLinePosition);
+        postValueLineElement.style.width = numberToPxString(postValueLineWidth);
+    }, [canvasRef, value, zoomContextValue]);
+    useEffect(() => {
+        showValueLine();
+    }, [showValueLine]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PreValueLine, { ref: preValueLineRef, className: 'media-timeline-pre-value-line' }),
+        React.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' }),
+        React.createElement(PostValueLine, { ref: postValueLineRef, className: 'media-timeline-post-value-line' })));
+};

package/src/components/timeline/ZoomContext/ZoomContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const ZoomContext = React.createContext(null);

package/src/components/timeline/constants.js

@@ -0,0 +1,13 @@
+//[blockOffset, pixelsInSecond] when zoomLevel === 0, each block has an offset of 20 seconds, and each second has a width of 7px.
+export const zoomLevelConfigurations = [
+    [20, 7],
+    [10, 10],
+    [10, 15],
+    [5, 20],
+    [5, 25],
+    [2, 35],
+    [2, 50],
+    [1, 60],
+    [1, 75],
+    [1, 90],
+];

package/src/components/timeline/index.js

@@ -0,0 +1 @@
+export * from './Timeline';

package/src/components/timeline/utils/utils.js

@@ -0,0 +1,28 @@
+export const secondsToPixel = (zoomContextValue, seconds) => {
+    return zoomContextValue.pixelsInSecond * seconds;
+};
+export const pixelToSeconds = (zoomContextValue, pixel) => {
+    const seconds = pixel / zoomContextValue.pixelsInSecond;
+    return Math.round((seconds + Number.EPSILON) * 100) / 100;
+};
+export const getComputedElementWidth = (element) => {
+    const elementWidthCSSProperty = window
+        .getComputedStyle(element)
+        .getPropertyValue('width')
+        .replace(/[^-\d]/g, '');
+    return parseInt(elementWidthCSSProperty);
+};
+export const numberToPxString = (number) => {
+    return `${number}px`;
+};
+export const getTimelineWrapperWidth = (timeLineContainerWidth, zoomLevel) => {
+    return timeLineContainerWidth * Math.pow(1.25, zoomLevel) - 2; //-2px to account for the border
+};
+export function getBlockOffsetForZoomLevel(zoomLevel, duration, timelineWrapperWidth) {
+    const offsets = [10, 5, 5, 5, 2, 2, 2, 2, 2, 1];
+    let optimalOffset = offsets[zoomLevel];
+    while ((duration / optimalOffset) * 40 > timelineWrapperWidth) {
+        optimalOffset = optimalOffset * 1.25;
+    }
+    return Math.ceil(optimalOffset);
+}

package/src/index.js

@@ -0,0 +1 @@
+export * from './components';