@ldelia/react-media 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [

package/dist/components/__tests__/timeline/timeline.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,27 +0,0 @@
-"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");
-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 = (0, client_1.createRoot)(rootElement);
-            root.render(react_1.default.createElement(timeline_1.Timeline, Object.assign({}, props)));
-        });
-    });
-});

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -1,17 +0,0 @@
-"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);

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

@@ -1,8 +0,0 @@
-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

@@ -1,155 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface TimelineProps {
-    duration: number;
-    value: number;
-    zoomLevel?: number;
-    className?: string;
-    selectedRange?: number[];
-    withTimeBlocks?: boolean;
-    onChange?: (value: number) => void;
-    onRangeChange?: (value: number[]) => void;
-}
-export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/timeline/Timeline.js

@@ -1,107 +0,0 @@
-"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 `
-  background-color: #f0f0f0;
-  border: 1px solid #c9c9c9;
-  height: 80px;
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  position: relative;
-  display: flex;
-`;
-const TimelineWrapper = styled_components_1.default.div `
-  position: absolute;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  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)({
-        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.');
-        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.');
-    }
-    (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 * 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),
-            } },
-            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

@@ -1,7 +0,0 @@
-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

@@ -1,31 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1,24 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,72 +0,0 @@
-"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

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

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

@@ -1,32 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,80 +0,0 @@
-"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;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-export type ZoomContextType = {
-    blockOffset: number;
-    pixelsInSecond: number;
-    timelineWrapperWidth: number;
-};
-export declare const ZoomContext: React.Context<ZoomContextType>;

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

@@ -1,8 +0,0 @@
-"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);

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

@@ -1 +0,0 @@
-export declare const zoomLevelConfigurations: number[][];

package/dist/components/timeline/constants.js

@@ -1,16 +0,0 @@
-"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 = [
-    [20, 7],
-    [10, 10],
-    [10, 15],
-    [5, 20],
-    [5, 25],
-    [2, 35],
-    [2, 50],
-    [1, 60],
-    [1, 75],
-    [1, 90],
-];

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

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

package/dist/components/timeline/index.js

@@ -1,17 +0,0 @@
-"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);

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

@@ -1,7 +0,0 @@
-import { ZoomContextType } from '../ZoomContext/ZoomContext';
-export declare const secondsToPixel: (zoomContextValue: ZoomContextType, seconds: number) => number;
-export declare const pixelToSeconds: (zoomContextValue: ZoomContextType, pixel: number) => number;
-export declare const getComputedElementWidth: (element: HTMLElement) => number;
-export declare const numberToPxString: (number: number) => string;
-export declare const getTimelineWrapperWidth: (timeLineContainerWidth: number, zoomLevel: number) => number;
-export declare function getBlockOffsetForZoomLevel(zoomLevel: number, duration: number, timelineWrapperWidth: number): number;

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

@@ -1,37 +0,0 @@
-"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) => {
-    return zoomContextValue.pixelsInSecond * seconds;
-};
-exports.secondsToPixel = secondsToPixel;
-const pixelToSeconds = (zoomContextValue, pixel) => {
-    const seconds = pixel / zoomContextValue.pixelsInSecond;
-    return Math.round((seconds + Number.EPSILON) * 100) / 100;
-};
-exports.pixelToSeconds = pixelToSeconds;
-const getComputedElementWidth = (element) => {
-    const elementWidthCSSProperty = window
-        .getComputedStyle(element)
-        .getPropertyValue('width')
-        .replace(/[^-\d]/g, '');
-    return parseInt(elementWidthCSSProperty);
-};
-exports.getComputedElementWidth = getComputedElementWidth;
-const numberToPxString = (number) => {
-    return `${number}px`;
-};
-exports.numberToPxString = numberToPxString;
-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) {
-    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);
-}
-exports.getBlockOffsetForZoomLevel = getBlockOffsetForZoomLevel;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,17 +0,0 @@
-"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("./components"), exports);

package/dist/setupTests.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-require("@testing-library/jest-dom");

package/dist/stories/timeline.stories.d.ts

@@ -1,9 +0,0 @@
-import { TimelineProps } from '../components/timeline';
-import './timeline.stories.custom.css';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
-export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
-export declare const WithSelectedRange: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
-export declare const WithCustomClassName: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
-export declare const WithoutTimeBlocks: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
-export declare const Minimalist: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -1,60 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Minimalist = exports.WithoutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
-const react_1 = __importDefault(require("react"));
-const timeline_1 = require("../components/timeline");
-const styled_components_1 = __importDefault(require("styled-components"));
-require("./timeline.stories.custom.css");
-const StyledTimeline = (0, styled_components_1.default)(timeline_1.Timeline) `
-  .media-timeline-value-line {
-    background-color: red;
-    width: 5px;
-  }
-`;
-exports.default = {
-    title: 'Timeline',
-    component: timeline_1.Timeline,
-    argTypes: {
-        onChange: { action: 'changed' },
-        onRangeChange: { action: 'range changed' },
-    },
-};
-const Template = (args) => (react_1.default.createElement(StyledTimeline, Object.assign({}, args)));
-exports.Default = Template.bind({});
-exports.Default.args = {
-    duration: 305,
-    value: 301,
-    zoomLevel: 0,
-};
-exports.WithSelectedRange = Template.bind({});
-exports.WithSelectedRange.args = {
-    duration: 305,
-    value: 31,
-    zoomLevel: 0,
-    selectedRange: [20, 30],
-};
-exports.WithCustomClassName = Template.bind({});
-exports.WithCustomClassName.args = {
-    duration: 305,
-    value: 31,
-    zoomLevel: 0,
-    className: 'this-class-redefines-styles',
-};
-exports.WithoutTimeBlocks = Template.bind({});
-exports.WithoutTimeBlocks.args = {
-    duration: 305,
-    value: 31,
-    zoomLevel: 0,
-    withTimeBlocks: false,
-};
-exports.Minimalist = Template.bind({});
-exports.Minimalist.args = {
-    duration: 305,
-    value: 31,
-    zoomLevel: 0,
-    withTimeBlocks: false,
-    className: 'minimalist',
-};