@ldelia/react-media 0.4.1 → 0.4.3

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

@@ -1,11 +1,6 @@
-"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 client_1 = require("react-dom/client");
-const timeline_1 = require("../../timeline");
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Timeline } from '../../timeline';
 describe('Timeline', () => {
     let props;
     beforeEach(() => {
@@ -20,8 +15,8 @@ describe('Timeline', () => {
     describe('render()', () => {
         it('renders a timeline', () => {
             const rootElement = document.createElement('div');
-            const root = (0, client_1.createRoot)(rootElement);
-            root.render(react_1.default.createElement(timeline_1.Timeline, Object.assign({}, props)));
+            const root = createRoot(rootElement);
+            root.render(React.createElement(Timeline, Object.assign({}, props)));
         });
     });
 });

package/dist/components/index.js

@@ -1,17 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./timeline"), exports);
+export * from './reproduction-widget';
+export * from './timeline';

package/dist/components/timeline/RangeSelectorCanvas/RangeSelectorCanvas.js

@@ -1,36 +1,8 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const ZoomContext_1 = require("../ZoomContext/ZoomContext");
-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;
@@ -39,14 +11,14 @@ const OverlayCanvas = styled_components_1.default.canvas `
   color: cadetblue;
 `;
 const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
-    const canvasRef = (0, react_1.useRef)(null);
-    const zoomContextValue = (0, react_1.useContext)(ZoomContext_1.ZoomContext);
+    const canvasRef = useRef(null);
+    const zoomContextValue = useContext(ZoomContext);
     let isSelectingRange = false;
-    let selectedRangeInPixels = (0, react_1.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 = [];
@@ -67,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) => {
@@ -136,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_1.useEffect)(() => {
+    useEffect(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
@@ -150,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/dist/components/timeline/Timeline.js

@@ -1,41 +1,12 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timeline = void 0;
-const react_1 = __importStar(require("react"));
-const TimelineCanvas_1 = __importDefault(require("./TimelineCanvas/TimelineCanvas"));
-const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas/RangeSelectorCanvas"));
-const constants_1 = require("./constants");
-const styled_components_1 = __importDefault(require("styled-components"));
-const TimelineValue_1 = require("./TimelineValue/TimelineValue");
-const ZoomContext_1 = require("./ZoomContext/ZoomContext");
-const utils_1 = require("./utils/utils");
-const TimelineContainer = styled_components_1.default.div `
+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;
@@ -45,7 +16,7 @@ const TimelineContainer = styled_components_1.default.div `
   position: relative;
   display: flex;
 `;
-const TimelineWrapper = styled_components_1.default.div `
+const TimelineWrapper = styled.div `
   position: absolute;
   height: 100%;
   display: flex;
@@ -53,16 +24,16 @@ const TimelineWrapper = styled_components_1.default.div `
   align-items: center;
   overflow: hidden;
 `;
-const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
-    const timeLineContainerRef = (0, react_1.useRef)(null);
-    const canvasRef = (0, react_1.useRef)(null);
-    const [zoomContextValue, setZoomContextValue] = (0, react_1.useState)({
+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 >= constants_1.zoomLevelConfigurations.length) {
+    if (zoomLevelValue < 0 || zoomLevelValue >= zoomLevelConfigurations.length) {
         console.warn('Invalid value for property zoomLevel.');
         zoomLevelValue = 0;
     }
@@ -80,28 +51,27 @@ const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTime
         selectedRange = [];
         console.warn('The selected range is inconsistent.');
     }
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!timeLineContainerRef.current)
             return;
-        const timelineWrapperWidth = (0, utils_1.getTimelineWrapperWidth)(timeLineContainerRef.current.offsetWidth, zoomLevelValue);
+        const timelineWrapperWidth = getTimelineWrapperWidth(timeLineContainerRef.current.offsetWidth, zoomLevelValue);
         setZoomContextValue({
-            blockOffset: (0, utils_1.getBlockOffsetForZoomLevel)(zoomLevelValue, duration, timelineWrapperWidth),
+            blockOffset: getBlockOffsetForZoomLevel(zoomLevelValue, duration, timelineWrapperWidth),
             pixelsInSecond: timelineWrapperWidth / duration,
             timelineWrapperWidth: timelineWrapperWidth,
         });
     }, [timeLineContainerRef.current, zoomLevelValue, duration]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const timeLineWrapper = timeLineContainerRef.current;
         const scrollPosition = value * zoomContextValue.pixelsInSecond - 300;
         timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
     }, [duration, value, zoomContextValue]);
-    return (react_1.default.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
-        react_1.default.createElement(TimelineWrapper, { style: {
-                width: (0, utils_1.numberToPxString)(zoomContextValue.timelineWrapperWidth),
+    return (React.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
+        React.createElement(TimelineWrapper, { style: {
+                width: numberToPxString(zoomContextValue.timelineWrapperWidth),
             } },
-            react_1.default.createElement(ZoomContext_1.ZoomContext.Provider, { value: zoomContextValue },
-                react_1.default.createElement(TimelineCanvas_1.default, { ref: canvasRef, duration: duration, withTimeBlocks: withTimeBlocks }),
-                react_1.default.createElement(TimelineValue_1.TimelineValue, { value: value, canvasRef: canvasRef }),
-                react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange })))));
+            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 })))));
 };
-exports.Timeline = Timeline;

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

@@ -1,11 +1,6 @@
-"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 TickTimeContainer = styled_components_1.default.span.attrs((props) => ({
+import React from 'react';
+import styled from 'styled-components';
+const TickTimeContainer = styled.span.attrs((props) => ({
     style: {
         left: props.left,
     },
@@ -23,9 +18,9 @@ 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_1.default.createElement(TickTimeContainer, { left: leftPosition, className: 'media-timeline-tick-time' },
+    return (React.createElement(TickTimeContainer, { left: leftPosition, className: 'media-timeline-tick-time' },
         minutes,
         ":",
         secondsFormatted));
 };
-exports.default = TickTime;
+export default TickTime;

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

@@ -1,24 +1,19 @@
-"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 TickTime_1 = __importDefault(require("./TickTime"));
-const ZoomContext_1 = require("../ZoomContext/ZoomContext");
-const TickTimeCollectionDisplayContainer = styled_components_1.default.div `
+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_1.default.createElement(ZoomContext_1.ZoomContext.Consumer, null, (value) => {
-        return (react_1.default.createElement(TickTimeCollectionDisplayContainer, null, tickTimes.map((tickTimeValue, index) => {
+    return (React.createElement(ZoomContext.Consumer, null, (value) => {
+        return (React.createElement(TickTimeCollectionDisplayContainer, null, tickTimes.map((tickTimeValue, index) => {
             const leftPosition = tickTimeValue * value.pixelsInSecond + 'px';
-            return (react_1.default.createElement(TickTime_1.default, { key: index, start: tickTimeValue, leftPosition: leftPosition }));
+            return (React.createElement(TickTime, { key: index, start: tickTimeValue, leftPosition: leftPosition }));
         })));
     }));
 };
-exports.default = TickTimeCollectionDisplay;
+export default TickTimeCollectionDisplay;

package/dist/components/timeline/TimelineCanvas/TimelineCanvas.js

@@ -1,37 +1,9 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const ZoomContext_1 = require("../ZoomContext/ZoomContext");
-const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
-const drawTimeBlocksOnCanvas_1 = require("./drawTimeBlocksOnCanvas");
-const OverlayCanvas = styled_components_1.default.canvas `
+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;
@@ -39,9 +11,9 @@ const OverlayCanvas = styled_components_1.default.canvas `
   height: 100%;
   color: #c9c9c9;
 `;
-const TimelineCanvas = (0, react_1.forwardRef)(({ duration, withTimeBlocks }, ref) => {
-    const internalCanvasRef = (0, react_1.useRef)(null);
-    const zoomContextValue = (0, react_1.useContext)(ZoomContext_1.ZoomContext);
+const TimelineCanvas = forwardRef(({ duration, withTimeBlocks }, ref) => {
+    const internalCanvasRef = useRef(null);
+    const zoomContextValue = useContext(ZoomContext);
     const blockStartingTimes = (() => {
         if (!withTimeBlocks || !zoomContextValue.blockOffset)
             return [];
@@ -56,17 +28,17 @@ const TimelineCanvas = (0, react_1.forwardRef)(({ duration, withTimeBlocks }, re
         return blockStartingTimes;
     })();
     // Pass the internal ref's current value directly to the forwarded ref
-    (0, react_1.useImperativeHandle)(ref, () => internalCanvasRef.current);
-    (0, react_1.useEffect)(() => {
+    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)
-            (0, drawTimeBlocksOnCanvas_1.drawTimeBlocksOnCanvas)(canvas, blockStartingTimes, zoomContextValue);
+            drawTimeBlocksOnCanvas(canvas, blockStartingTimes, zoomContextValue);
     }, [blockStartingTimes, withTimeBlocks, zoomContextValue]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(OverlayCanvas, { ref: internalCanvasRef, className: 'media-timeline-value-line-canvas' }),
-        withTimeBlocks && (react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes }))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OverlayCanvas, { ref: internalCanvasRef, className: 'media-timeline-value-line-canvas' }),
+        withTimeBlocks && (React.createElement(TickTimeCollectionDisplay, { tickTimes: blockStartingTimes }))));
 });
-exports.default = TimelineCanvas;
+export default TimelineCanvas;

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

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawTimeBlocksOnCanvas = void 0;
-const utils_1 = require("../utils/utils");
-const drawTimeBlocksOnCanvas = (canvas, blockStartingTimes, zoomContextValue) => {
+import { secondsToPixel } from '../utils/utils';
+export const drawTimeBlocksOnCanvas = (canvas, blockStartingTimes, zoomContextValue) => {
     const blockHeight = 20;
     const context = canvas.getContext('2d');
     // draw top line
@@ -14,8 +11,8 @@ const drawTimeBlocksOnCanvas = (canvas, blockStartingTimes, zoomContextValue) =>
         .getPropertyValue('color');
     context.stroke();
     for (const blockStartingTime of blockStartingTimes) {
-        const x0Pixel = (0, utils_1.secondsToPixel)(zoomContextValue, blockStartingTime);
-        const x1Pixel = (0, utils_1.secondsToPixel)(zoomContextValue, blockStartingTime + zoomContextValue.blockOffset);
+        const x0Pixel = secondsToPixel(zoomContextValue, blockStartingTime);
+        const x1Pixel = secondsToPixel(zoomContextValue, blockStartingTime + zoomContextValue.blockOffset);
         context.beginPath();
         // draw left line
         context.moveTo(x0Pixel, canvas.height);
@@ -29,4 +26,3 @@ const drawTimeBlocksOnCanvas = (canvas, blockStartingTimes, zoomContextValue) =>
         context.stroke();
     }
 };
-exports.drawTimeBlocksOnCanvas = drawTimeBlocksOnCanvas;

package/dist/components/timeline/TimelineValue/TimelineValue.js

@@ -1,80 +1,50 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineValue = void 0;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../utils/utils");
-const ZoomContext_1 = require("../ZoomContext/ZoomContext");
-const PreValueLine = styled_components_1.default.span `
+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_components_1.default.span `
+const ValueLine = styled.span `
   position: absolute;
   width: 1px;
   height: 100%;
   background-color: #575757;
 `;
-const PostValueLine = styled_components_1.default.span `
+const PostValueLine = styled.span `
   position: absolute;
   height: 100%;
 `;
-const TimelineValue = ({ canvasRef, value }) => {
-    const preValueLineRef = (0, react_1.useRef)(null);
-    const valueLineRef = (0, react_1.useRef)(null);
-    const postValueLineRef = (0, react_1.useRef)(null);
-    const zoomContextValue = (0, react_1.useContext)(ZoomContext_1.ZoomContext);
-    const showValueLine = (0, react_1.useCallback)(() => {
+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 = (0, utils_1.getComputedElementWidth)(valueLineElement);
-        const linePosition = (0, utils_1.secondsToPixel)(zoomContextValue, value);
+        const valueLineWidth = getComputedElementWidth(valueLineElement);
+        const linePosition = secondsToPixel(zoomContextValue, value);
         const valueLinePositionBeginningConsideringWidth = linePosition - valueLineWidth / 2;
         // configure preValueLineElement
-        preValueLineElement.style.width = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
+        preValueLineElement.style.width = numberToPxString(valueLinePositionBeginningConsideringWidth);
         // configure valueLineElement
-        valueLineElement.style.left = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
+        valueLineElement.style.left = numberToPxString(valueLinePositionBeginningConsideringWidth);
         // configure postValueLineElement
         const postValueLinePosition = valueLinePositionBeginningConsideringWidth + valueLineWidth;
         const postValueLineWidth = canvas.width - postValueLinePosition;
-        postValueLineElement.style.left = (0, utils_1.numberToPxString)(postValueLinePosition);
-        postValueLineElement.style.width = (0, utils_1.numberToPxString)(postValueLineWidth);
+        postValueLineElement.style.left = numberToPxString(postValueLinePosition);
+        postValueLineElement.style.width = numberToPxString(postValueLineWidth);
     }, [canvasRef, value, zoomContextValue]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         showValueLine();
     }, [showValueLine]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(PreValueLine, { ref: preValueLineRef, className: 'media-timeline-pre-value-line' }),
-        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' }),
-        react_1.default.createElement(PostValueLine, { ref: postValueLineRef, className: 'media-timeline-post-value-line' })));
+    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' })));
 };
-exports.TimelineValue = TimelineValue;

package/dist/components/timeline/ZoomContext/ZoomContext.js

@@ -1,8 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomContext = void 0;
-const react_1 = __importDefault(require("react"));
-exports.ZoomContext = react_1.default.createContext(null);
+import React from 'react';
+export const ZoomContext = React.createContext(null);

package/dist/components/timeline/constants.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomLevelConfigurations = void 0;
 //[blockOffset, pixelsInSecond] when zoomLevel === 0, each block has an offset of 20 seconds, and each second has a width of 7px.
-exports.zoomLevelConfigurations = [
+export const zoomLevelConfigurations = [
     [20, 7],
     [10, 10],
     [10, 15],

package/dist/components/timeline/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Timeline"), exports);
+export * from './Timeline';

package/dist/components/timeline/utils/utils.js

@@ -1,32 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockOffsetForZoomLevel = exports.getTimelineWrapperWidth = exports.numberToPxString = exports.getComputedElementWidth = exports.pixelToSeconds = exports.secondsToPixel = void 0;
-const secondsToPixel = (zoomContextValue, seconds) => {
+export const secondsToPixel = (zoomContextValue, seconds) => {
     return zoomContextValue.pixelsInSecond * seconds;
 };
-exports.secondsToPixel = secondsToPixel;
-const pixelToSeconds = (zoomContextValue, pixel) => {
+export const pixelToSeconds = (zoomContextValue, pixel) => {
     const seconds = pixel / zoomContextValue.pixelsInSecond;
     return Math.round((seconds + Number.EPSILON) * 100) / 100;
 };
-exports.pixelToSeconds = pixelToSeconds;
-const getComputedElementWidth = (element) => {
+export const getComputedElementWidth = (element) => {
     const elementWidthCSSProperty = window
         .getComputedStyle(element)
         .getPropertyValue('width')
         .replace(/[^-\d]/g, '');
     return parseInt(elementWidthCSSProperty);
 };
-exports.getComputedElementWidth = getComputedElementWidth;
-const numberToPxString = (number) => {
+export const numberToPxString = (number) => {
     return `${number}px`;
 };
-exports.numberToPxString = numberToPxString;
-const getTimelineWrapperWidth = (timeLineContainerWidth, zoomLevel) => {
+export const getTimelineWrapperWidth = (timeLineContainerWidth, zoomLevel) => {
     return timeLineContainerWidth * Math.pow(1.25, zoomLevel) - 2; //-2px to account for the border
 };
-exports.getTimelineWrapperWidth = getTimelineWrapperWidth;
-function getBlockOffsetForZoomLevel(zoomLevel, duration, timelineWrapperWidth) {
+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) {
@@ -34,4 +26,3 @@ function getBlockOffsetForZoomLevel(zoomLevel, duration, timelineWrapperWidth) {
     }
     return Math.ceil(optimalOffset);
 }
-exports.getBlockOffsetForZoomLevel = getBlockOffsetForZoomLevel;