@ldelia/react-media 0.2.0 → 0.2.2

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

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

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

@@ -0,0 +1,27 @@
+"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 = __importDefault(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.default, Object.assign({}, props)));
+        });
+    });
+});

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -0,0 +1,17 @@
+"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.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.js

@@ -0,0 +1,133 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const index_1 = require("./index");
+const react_2 = require("react");
+const utils_1 = require("./utils/utils");
+const OverlayCanvas = styled_components_1.default.canvas `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: cadetblue;
+`;
+const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
+    const canvasRef = (0, react_2.useRef)(null);
+    const zoomContextValue = (0, react_2.useContext)(index_1.ZoomContext);
+    let isSelectingRange = false;
+    let selectedRangeInPixels = (0, react_2.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_2.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/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/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/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/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 index_1 = require("./index");
+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(index_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/VaLueLineCanvas.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface VaLueLineCanvasProps {
+    blockStartingTimes: number[];
+    value: number;
+}
+declare const VaLueLineCanvas: React.FC<VaLueLineCanvasProps>;
+export default VaLueLineCanvas;

package/dist/components/timeline/VaLueLineCanvas.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const index_1 = require("./index");
+const react_2 = require("react");
+const utils_1 = require("./utils/utils");
+const OverlayCanvas = styled_components_1.default.canvas `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #c9c9c9;
+`;
+const ValueLine = styled_components_1.default.span `
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #575757;
+`;
+const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
+    const canvasRef = (0, react_2.useRef)(null);
+    const valueLineRef = (0, react_2.useRef)(null);
+    const zoomContextValue = (0, react_2.useContext)(index_1.ZoomContext);
+    const showBlocks = (0, react_2.useCallback)((canvas) => {
+        const blockHeight = 20;
+        const context = canvas.getContext('2d');
+        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();
+            context.moveTo(x0Pixel, canvas.height);
+            context.lineTo(x0Pixel, canvas.height - blockHeight);
+            context.lineTo(x1Pixel, canvas.height - blockHeight);
+            context.lineTo(x1Pixel, canvas.height);
+            context.strokeStyle = window
+                .getComputedStyle(canvas)
+                .getPropertyValue('color');
+            context.stroke();
+        }
+    }, [blockStartingTimes, zoomContextValue]);
+    const showValueLine = (0, react_2.useCallback)(() => {
+        const linePosition = (0, utils_1.secondsToPixel)(zoomContextValue, value);
+        const valueLineElement = valueLineRef.current;
+        const elementWidthCSSProperty = window
+            .getComputedStyle(valueLineElement)
+            .getPropertyValue('width')
+            .replace(/[^-\d]/g, '');
+        const elementWidth = parseInt(elementWidthCSSProperty);
+        const linePositionAtValueLineMiddle = linePosition - elementWidth / 2;
+        valueLineElement.style.left = linePositionAtValueLineMiddle + 'px';
+    }, [value, zoomContextValue]);
+    (0, react_2.useEffect)(() => {
+        const canvas = canvasRef.current;
+        // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        showBlocks(canvas);
+        showValueLine();
+    }, [showBlocks, showValueLine]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(OverlayCanvas, { ref: canvasRef, className: 'media-timeline-value-line-canvas' }),
+        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' })));
+};
+exports.default = VaLueLineCanvas;

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

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

package/dist/components/timeline/constants.js

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface TimelineProps {
+    duration: number;
+    value: number;
+    zoomLevel?: number;
+    className?: string;
+    selectedRange?: number[];
+    onChange?: (value: number) => void;
+    onRangeChange?: (value: number[]) => void;
+}
+export type ZoomContextType = {
+    blockOffset: number;
+    pixelsInSecond: number;
+};
+export declare const ZoomContext: React.Context<ZoomContextType>;
+declare const Timeline: React.FC<TimelineProps>;
+export default Timeline;

package/dist/components/timeline/index.js

@@ -0,0 +1,77 @@
+"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"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_2 = require("react");
+const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
+const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
+const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
+const constants_1 = require("./constants");
+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%;
+`;
+exports.ZoomContext = react_1.default.createContext({
+    blockOffset: 0,
+    pixelsInSecond: 0,
+});
+const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
+    const timeLineContainerRef = (0, react_2.useRef)(null);
+    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.');
+    }
+    const zoomParams = (0, react_2.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_2.useEffect)(() => {
+        const timeLineWrapper = timeLineContainerRef.current;
+        const scrollPosition = value * zoomParams.pixelsInSecond - 300;
+        timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
+    }, [value, zoomParams]);
+    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: blockStartingTimes, value: value }),
+                react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
+                react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes })))));
+};
+exports.default = Timeline;

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

@@ -0,0 +1,3 @@
+import { ZoomContextType } from '../index';
+export declare const secondsToPixel: (zoomContextValue: ZoomContextType, seconds: number) => number;
+export declare const pixelToSeconds: (zoomContextValue: ZoomContextType, pixel: number) => number;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,17 @@
+"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/reportWebVitals.d.ts

@@ -0,0 +1,3 @@
+import { ReportHandler } from 'web-vitals';
+declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
+export default reportWebVitals;

package/dist/reportWebVitals.js

@@ -0,0 +1,37 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const reportWebVitals = (onPerfEntry) => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        Promise.resolve().then(() => __importStar(require('web-vitals'))).then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+            getCLS(onPerfEntry);
+            getFID(onPerfEntry);
+            getFCP(onPerfEntry);
+            getLCP(onPerfEntry);
+            getTTFB(onPerfEntry);
+        });
+    }
+};
+exports.default = reportWebVitals;

package/dist/setupTests.d.ts

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

package/dist/setupTests.js

@@ -0,0 +1,7 @@
+"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/Button.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import './button.css';
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => React.JSX.Element;
+export {};

package/dist/stories/Button.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importDefault(require("react"));
+require("./button.css");
+/**
+ * Primary UI component for user interaction
+ */
+const Button = (_a) => {
+    var { primary = false, size = 'medium', backgroundColor, label } = _a, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
+    const mode = primary
+        ? 'storybook-button--primary'
+        : 'storybook-button--secondary';
+    return (react_1.default.createElement("button", Object.assign({ type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor } }, props), label));
+};
+exports.Button = Button;

package/dist/stories/Button.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Small = exports.Large = exports.Secondary = exports.Primary = void 0;
+const test_1 = require("@storybook/test");
+const Button_1 = require("./Button");
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Example/Button',
+    component: Button_1.Button,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    args: { onClick: (0, test_1.fn)() },
+};
+exports.default = meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+exports.Primary = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};
+exports.Secondary = {
+    args: {
+        label: 'Button',
+    },
+};
+exports.Large = {
+    args: {
+        size: 'large',
+        label: 'Button',
+    },
+};
+exports.Small = {
+    args: {
+        size: 'small',
+        label: 'Button',
+    },
+};

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

@@ -0,0 +1,5 @@
+import { TimelineProps } from '../components/timeline';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithSelectedRange = exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const timeline_1 = __importDefault(require("../components/timeline"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledTimeline = (0, styled_components_1.default)(timeline_1.default) `
+  .media-timeline-value-line {
+    background-color: red;
+    width: 5px;
+  }
+`;
+exports.default = {
+    title: 'Timeline',
+    component: timeline_1.default,
+    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],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -10,6 +10,8 @@
   "author": "Lisandro Delia",
   "license": "MIT",
   "bugs": "https://github.com/ldelia/react-media/issues",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -20,7 +22,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "tsc",
     "test": "react-scripts test",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
     "eject": "react-scripts eject",

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Timeline, { TimelineProps } from '../../timeline';
+import { Timeline, TimelineProps } from '../../timeline';
 
 describe('Timeline', () => {
   let props: TimelineProps;

package/src/components/timeline/index.tsx

@@ -40,7 +40,7 @@ export const ZoomContext = React.createContext<ZoomContextType>({
   pixelsInSecond: 0,
 });
 
-const Timeline: React.FC<TimelineProps> = ({
+export const Timeline: React.FC<TimelineProps> = ({
   duration,
   value,
   zoomLevel = 0,
@@ -121,5 +121,3 @@ const Timeline: React.FC<TimelineProps> = ({
     </TimelineContainer>
   );
 };
-
-export default Timeline;

package/src/stories/timeline.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Timeline, { TimelineProps } from '../components/timeline';
+import { Timeline, TimelineProps } from '../components/timeline';
 import { Meta, StoryFn } from '@storybook/react';
 import styled from 'styled-components';
 

package/tsconfig.json

@@ -1,26 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
+    "target": "ES6",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "./dist",
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

package/src/stories/Button.stories.ts

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/src/stories/Button.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary
-    ? 'storybook-button--primary'
-    : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(
-        ' ',
-      )}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};

package/src/stories/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}