@ldelia/react-media 0.2.6 → 0.2.8

package/dist/components/timeline/RangeSelectorCanvas/RangeSelectorCanvas.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface RangeSelectorCanvasProps {
+    selectedRange: number[];
+    onChange: (value: number) => void;
+    onRangeChange: (value: number[]) => void;
+}
+declare const _default: React.NamedExoticComponent<RangeSelectorCanvasProps>;
+export default _default;

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

@@ -0,0 +1,155 @@
+"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 `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: cadetblue;
+`;
+const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
+    const canvasRef = (0, react_1.useRef)(null);
+    const zoomContextValue = (0, react_1.useContext)(ZoomContext_1.ZoomContext);
+    let isSelectingRange = false;
+    let selectedRangeInPixels = (0, react_1.useMemo)(() => [], []);
+    if (selectedRange.length === 2) {
+        selectedRangeInPixels = [
+            (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[0]),
+            (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[1]),
+        ];
+    }
+    let lastValidSelectedRangeInPixels = [];
+    const getMousePointerPixelPosition = (e) => {
+        const canvas = canvasRef.current;
+        let rect = canvas.getBoundingClientRect();
+        return e.clientX - rect.left;
+    };
+    const drawRect = (pixelX0, pixelX1) => {
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d');
+        context.globalAlpha = 0.3;
+        context.fillStyle = window
+            .getComputedStyle(canvas)
+            .getPropertyValue('color');
+        context.fillRect(pixelX0, 0, pixelX1 - pixelX0, context.canvas.height);
+        context.globalAlpha = 1.0;
+    };
+    const onCanvasDoubleClick = (e) => {
+        const x0 = getMousePointerPixelPosition(e);
+        onChange((0, utils_1.pixelToSeconds)(zoomContextValue, x0));
+        selectedRangeInPixels = lastValidSelectedRangeInPixels;
+    };
+    const isPixelNearSelectedRange = (x0) => {
+        if (selectedRangeInPixels.length === 2) {
+            const diff = Math.min(Math.abs(selectedRangeInPixels[0] - x0), Math.abs(selectedRangeInPixels[1] - x0));
+            return diff <= zoomContextValue.pixelsInSecond / 2;
+        }
+        return false;
+    };
+    const onCanvasMouseDown = (e) => {
+        const mouseCurrentPosition = getMousePointerPixelPosition(e);
+        if (!isPixelNearSelectedRange(mouseCurrentPosition)) {
+            // Keep track of the first position of the new range.
+            selectedRangeInPixels = [mouseCurrentPosition, mouseCurrentPosition];
+        }
+        isSelectingRange = true;
+    };
+    const onCanvasMouseMove = (e) => {
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d');
+        const mouseCurrentPosition = getMousePointerPixelPosition(e);
+        if (selectedRangeInPixels.length === 2) {
+            const diff = Math.min(Math.abs(selectedRangeInPixels[0] - mouseCurrentPosition), Math.abs(selectedRangeInPixels[1] - mouseCurrentPosition));
+            // Change the mouse's cursor if it's near a selected range.
+            canvas.style.cursor =
+                diff <= zoomContextValue.pixelsInSecond / 2 ? 'col-resize' : 'default';
+            if (!isSelectingRange)
+                return;
+            if (mouseCurrentPosition < selectedRangeInPixels[0]) {
+                // The left side must be enlarged.
+                selectedRangeInPixels[0] = mouseCurrentPosition;
+            }
+            else if (mouseCurrentPosition > selectedRangeInPixels[1]) {
+                // The right side must be enlarged.
+                selectedRangeInPixels[1] = mouseCurrentPosition;
+            }
+            else {
+                const diffX0 = mouseCurrentPosition - selectedRangeInPixels[0];
+                const diffX1 = selectedRangeInPixels[1] - mouseCurrentPosition;
+                if (diffX0 < diffX1) {
+                    // The left side must be shrunk.
+                    selectedRangeInPixels[0] = mouseCurrentPosition;
+                }
+                else {
+                    // The right side must be shrunk.
+                    selectedRangeInPixels[1] = mouseCurrentPosition;
+                }
+            }
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
+        }
+    };
+    const onCanvasMouseUp = (e) => {
+        if (selectedRangeInPixels.length !== 2)
+            return;
+        isSelectingRange = false;
+        const mouseCurrentPosition = getMousePointerPixelPosition(e);
+        const pixelRange = [
+            Math.min(selectedRangeInPixels[0], mouseCurrentPosition),
+            Math.max(selectedRangeInPixels[1], mouseCurrentPosition),
+        ];
+        if (pixelRange[1] - pixelRange[0] <= 1) {
+            // It was just a click
+            selectedRangeInPixels = lastValidSelectedRangeInPixels;
+        }
+        else {
+            lastValidSelectedRangeInPixels = pixelRange;
+            onRangeChange([
+                (0, utils_1.pixelToSeconds)(zoomContextValue, pixelRange[0]),
+                (0, utils_1.pixelToSeconds)(zoomContextValue, pixelRange[1]),
+            ]);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const canvas = canvasRef.current;
+        // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        if (selectedRangeInPixels.length === 0)
+            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' }));
+};
+exports.default = react_1.default.memo(RangeSelectorCanvas);

package/dist/components/timeline/Timeline.d.ts

@@ -9,9 +9,4 @@ export interface TimelineProps {
     onChange?: (value: number) => void;
     onRangeChange?: (value: number[]) => void;
 }
-export type ZoomContextType = {
-    blockOffset: number;
-    pixelsInSecond: number;
-};
-export declare const ZoomContext: React.Context<ZoomContextType>;
 export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/timeline/Timeline.js

@@ -26,13 +26,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timeline = exports.ZoomContext = void 0;
+exports.Timeline = void 0;
 const react_1 = __importStar(require("react"));
-const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
-const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
-const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
+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 `
   background-color: #f0f0f0;
   border: 1px solid #c9c9c9;
@@ -46,13 +48,19 @@ const TimelineContainer = styled_components_1.default.div `
 const TimelineWrapper = styled_components_1.default.div `
   position: absolute;
   height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
 `;
-exports.ZoomContext = react_1.default.createContext({
-    blockOffset: 0,
-    pixelsInSecond: 0,
-});
 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)({
+        blockOffset: 0,
+        pixelsInSecond: 0,
+        timelineWrapperWidth: 0,
+    });
     let zoomLevelValue = zoomLevel ? zoomLevel : 0;
     if (zoomLevelValue < 0 || zoomLevelValue >= constants_1.zoomLevelConfigurations.length) {
         console.warn('Invalid value for property zoomLevel.');
@@ -72,28 +80,28 @@ const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTime
         selectedRange = [];
         console.warn('The selected range is inconsistent.');
     }
-    const zoomParams = (0, react_1.useMemo)(() => {
-        return {
-            blockOffset: constants_1.zoomLevelConfigurations[zoomLevelValue][0],
-            pixelsInSecond: constants_1.zoomLevelConfigurations[zoomLevelValue][1],
-        };
-    }, [zoomLevelValue]);
-    let blockStartingTimes = [0];
-    const blockCounts = Math.ceil(duration / zoomParams.blockOffset);
-    for (let i = 1; i < blockCounts; i++) {
-        blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
-            zoomParams.blockOffset);
-    }
+    (0, react_1.useEffect)(() => {
+        if (!timeLineContainerRef.current)
+            return;
+        const timelineWrapperWidth = (0, utils_1.getTimelineWrapperWidth)(timeLineContainerRef.current.offsetWidth, zoomLevelValue);
+        setZoomContextValue({
+            blockOffset: (0, utils_1.getBlockOffsetForZoomLevel)(zoomLevelValue, duration, timelineWrapperWidth),
+            pixelsInSecond: timelineWrapperWidth / duration,
+            timelineWrapperWidth: timelineWrapperWidth,
+        });
+    }, [timeLineContainerRef.current, zoomLevelValue, duration]);
     (0, react_1.useEffect)(() => {
         const timeLineWrapper = timeLineContainerRef.current;
-        const scrollPosition = value * zoomParams.pixelsInSecond - 300;
+        const scrollPosition = value * zoomContextValue.pixelsInSecond - 300;
         timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
-    }, [value, zoomParams]);
+    }, [duration, value, zoomContextValue]);
     return (react_1.default.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
-        react_1.default.createElement(TimelineWrapper, { style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
-            react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
-                react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: withTimeBlocks ? blockStartingTimes : [], value: value }),
-                react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
-                withTimeBlocks && (react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes }))))));
+        react_1.default.createElement(TimelineWrapper, { style: {
+                width: (0, utils_1.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 })))));
 };
 exports.Timeline = Timeline;

package/dist/components/timeline/TimelineCanvas/TickTime.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type Props = {
+    start: number;
+    leftPosition: string;
+};
+declare const TickTime: React.FC<Props>;
+export default TickTime;

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

@@ -0,0 +1,31 @@
+"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) => ({
+    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_1.default.createElement(TickTimeContainer, { left: leftPosition, className: 'media-timeline-tick-time' },
+        minutes,
+        ":",
+        secondsFormatted));
+};
+exports.default = TickTime;

package/dist/components/timeline/TimelineCanvas/TickTimeCollectionDisplay.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TickTimeCollectionDisplayProps {
+    tickTimes: number[];
+}
+declare const TickTimeCollectionDisplay: React.FC<TickTimeCollectionDisplayProps>;
+export default TickTimeCollectionDisplay;

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

@@ -0,0 +1,24 @@
+"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 `
+  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) => {
+            const leftPosition = tickTimeValue * value.pixelsInSecond + 'px';
+            return (react_1.default.createElement(TickTime_1.default, { key: index, start: tickTimeValue, leftPosition: leftPosition }));
+        })));
+    }));
+};
+exports.default = TickTimeCollectionDisplay;

package/dist/components/timeline/TimelineCanvas/TimelineCanvas.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface VaLueLineCanvasProps {
+    duration: number;
+    withTimeBlocks: boolean;
+}
+declare const TimelineCanvas: React.ForwardRefExoticComponent<VaLueLineCanvasProps & React.RefAttributes<HTMLCanvasElement>>;
+export default TimelineCanvas;

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

@@ -0,0 +1,72 @@
+"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 `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  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 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
+    (0, react_1.useImperativeHandle)(ref, () => internalCanvasRef.current);
+    (0, react_1.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);
+    }, [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 }))));
+});
+exports.default = TimelineCanvas;

package/dist/components/timeline/TimelineCanvas/drawTimeBlocksOnCanvas.d.ts

@@ -0,0 +1,2 @@
+import { ZoomContextType } from '../ZoomContext/ZoomContext';
+export declare const drawTimeBlocksOnCanvas: (canvas: HTMLCanvasElement, blockStartingTimes: number[], zoomContextValue: ZoomContextType) => void;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawTimeBlocksOnCanvas = void 0;
+const utils_1 = require("../utils/utils");
+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 = (0, utils_1.secondsToPixel)(zoomContextValue, blockStartingTime);
+        const x1Pixel = (0, utils_1.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();
+    }
+};
+exports.drawTimeBlocksOnCanvas = drawTimeBlocksOnCanvas;

package/dist/components/timeline/TimelineValue/TimelineValue.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+    value: number;
+}
+export declare const TimelineValue: React.FC<Props>;
+export {};

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

@@ -0,0 +1,80 @@
+"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 `
+  position: absolute;
+  left: 0;
+  height: 100%;
+`;
+const ValueLine = styled_components_1.default.span `
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #575757;
+`;
+const PostValueLine = styled_components_1.default.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)(() => {
+        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 valueLinePositionBeginningConsideringWidth = linePosition - valueLineWidth / 2;
+        // configure preValueLineElement
+        preValueLineElement.style.width = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
+        // configure valueLineElement
+        valueLineElement.style.left = (0, utils_1.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);
+    }, [canvasRef, value, zoomContextValue]);
+    (0, react_1.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' })));
+};
+exports.TimelineValue = TimelineValue;