@ldelia/react-media 0.2.7 → 0.3.0

package/config/webpackDevServer.config.js

@@ -0,0 +1,127 @@
+'use strict';
+
+const fs = require('fs');
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
+const paths = require('./paths');
+const getHttpsConfig = require('./getHttpsConfig');
+
+const host = process.env.HOST || '0.0.0.0';
+const sockHost = process.env.WDS_SOCKET_HOST;
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
+const sockPort = process.env.WDS_SOCKET_PORT;
+
+module.exports = function (proxy, allowedHost) {
+  const disableFirewall =
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+  return {
+    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
+    // websites from potentially accessing local content through DNS rebinding:
+    // https://github.com/webpack/webpack-dev-server/issues/887
+    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+    // However, it made several existing use cases such as development in cloud
+    // environment or subdomains in development significantly more complicated:
+    // https://github.com/facebook/create-react-app/issues/2271
+    // https://github.com/facebook/create-react-app/issues/2233
+    // While we're investigating better solutions, for now we will take a
+    // compromise. Since our WDS configuration only serves files in the `public`
+    // folder we won't consider accessing them a vulnerability. However, if you
+    // use the `proxy` feature, it gets more dangerous because it can expose
+    // remote code execution vulnerabilities in backends like Django and Rails.
+    // So we will disable the host check normally, but enable it if you have
+    // specified the `proxy` setting. Finally, we let you override it if you
+    // really know what you're doing with a special environment variable.
+    // Note: ["localhost", ".localhost"] will support subdomains - but we might
+    // want to allow setting the allowedHosts manually for more complex setups
+    allowedHosts: disableFirewall ? 'all' : [allowedHost],
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': '*',
+      'Access-Control-Allow-Headers': '*',
+    },
+    // Enable gzip compression of generated files.
+    compress: true,
+    static: {
+      // By default WebpackDevServer serves physical files from current directory
+      // in addition to all the virtual build products that it serves from memory.
+      // This is confusing because those files won’t automatically be available in
+      // production build folder unless we copy them. However, copying the whole
+      // project directory is dangerous because we may expose sensitive files.
+      // Instead, we establish a convention that only files in `public` directory
+      // get served. Our build script will copy `public` into the `build` folder.
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // Note that we only recommend to use `public` folder as an escape hatch
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // for some reason broken when imported through webpack. If you just want to
+      // use an image, put it in `src` and `import` it from JavaScript instead.
+      directory: paths.appPublic,
+      publicPath: [paths.publicUrlOrPath],
+      // By default files from `contentBase` will not trigger a page reload.
+      watch: {
+        // Reportedly, this avoids CPU overload on some systems.
+        // https://github.com/facebook/create-react-app/issues/293
+        // src/node_modules is not ignored to support absolute imports
+        // https://github.com/facebook/create-react-app/issues/1065
+        ignored: ignoredFiles(paths.appSrc),
+      },
+    },
+    client: {
+      webSocketURL: {
+        // Enable custom sockjs pathname for websocket connection to hot reloading server.
+        // Enable custom sockjs hostname, pathname and port for websocket connection
+        // to hot reloading server.
+        hostname: sockHost,
+        pathname: sockPath,
+        port: sockPort,
+      },
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
+    devMiddleware: {
+      // It is important to tell WebpackDevServer to use the same "publicPath" path as
+      // we specified in the webpack config. When homepage is '.', default to serving
+      // from the root.
+      // remove last slash so user can land on `/test` instead of `/test/`
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
+    },
+
+    https: getHttpsConfig(),
+    host,
+    historyApiFallback: {
+      // Paths with dots should still use the history fallback.
+      // See https://github.com/facebook/create-react-app/issues/387.
+      disableDotRule: true,
+      index: paths.publicUrlOrPath,
+    },
+    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
+    proxy,
+    onBeforeSetupMiddleware(devServer) {
+      // Keep `evalSourceMapMiddleware`
+      // middlewares before `redirectServedPath` otherwise will not have any effect
+      // This lets us fetch source contents from webpack for the error overlay
+      devServer.app.use(evalSourceMapMiddleware(devServer));
+
+      if (fs.existsSync(paths.proxySetup)) {
+        // This registers user provided middleware for proxy reasons
+        require(paths.proxySetup)(devServer.app);
+      }
+    },
+    onAfterSetupMiddleware(devServer) {
+      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
+
+      // This service worker file is effectively a 'no-op' that will reset any
+      // previous service worker registered for the same host:port combination.
+      // We do this in development to avoid hitting the production cache if
+      // it used the same host and port.
+      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+    },
+  };
+};

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

@@ -1,13 +1,35 @@
 "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 = __importDefault(require("react"));
+const react_1 = __importStar(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 ZoomContext_1 = require("../ZoomContext/ZoomContext");
+const utils_1 = require("../utils/utils");
 const OverlayCanvas = styled_components_1.default.canvas `
   position: absolute;
   top: 0;
@@ -17,10 +39,10 @@ const OverlayCanvas = styled_components_1.default.canvas `
   color: cadetblue;
 `;
 const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
-    const canvasRef = (0, react_2.useRef)(null);
-    const zoomContextValue = (0, react_2.useContext)(index_1.ZoomContext);
+    const canvasRef = (0, react_1.useRef)(null);
+    const zoomContextValue = (0, react_1.useContext)(ZoomContext_1.ZoomContext);
     let isSelectingRange = false;
-    let selectedRangeInPixels = (0, react_2.useMemo)(() => [], []);
+    let selectedRangeInPixels = (0, react_1.useMemo)(() => [], []);
     if (selectedRange.length === 2) {
         selectedRangeInPixels = [
             (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[0]),
@@ -119,7 +141,7 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
             ]);
         }
     };
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;

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;
@@ -49,13 +51,16 @@ const TimelineWrapper = styled_components_1.default.div `
   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.');
@@ -75,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/{TickTimeCollectionDisplay.js → TimelineCanvas/TickTimeCollectionDisplay.js}

@@ -6,7 +6,7 @@ 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 ZoomContext_1 = require("../ZoomContext/ZoomContext");
 const TickTimeCollectionDisplayContainer = styled_components_1.default.div `
   position: absolute;
   display: flex;
@@ -14,7 +14,7 @@ const TickTimeCollectionDisplayContainer = styled_components_1.default.div `
   height: 100%;
 `;
 const TickTimeCollectionDisplay = ({ tickTimes = [], }) => {
-    return (react_1.default.createElement(index_1.ZoomContext.Consumer, null, (value) => {
+    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 }));

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/{VaLueLineCanvas.js → TimelineValue/TimelineValue.js}

@@ -26,18 +26,11 @@ 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 index_1 = require("./index");
-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 utils_1 = require("../utils/utils");
+const ZoomContext_1 = require("../ZoomContext/ZoomContext");
 const PreValueLine = styled_components_1.default.span `
   position: absolute;
   left: 0;
@@ -53,29 +46,11 @@ const PostValueLine = styled_components_1.default.span `
   position: absolute;
   height: 100%;
 `;
-const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
-    const canvasRef = (0, react_1.useRef)(null);
+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)(index_1.ZoomContext);
-    const showBlocks = (0, react_1.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 zoomContextValue = (0, react_1.useContext)(ZoomContext_1.ZoomContext);
     const showValueLine = (0, react_1.useCallback)(() => {
         const canvas = canvasRef.current;
         const preValueLineElement = preValueLineRef.current;
@@ -93,19 +68,13 @@ const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
         const postValueLineWidth = canvas.width - postValueLinePosition;
         postValueLineElement.style.left = (0, utils_1.numberToPxString)(postValueLinePosition);
         postValueLineElement.style.width = (0, utils_1.numberToPxString)(postValueLineWidth);
-    }, [value, zoomContextValue]);
+    }, [canvasRef, value, zoomContextValue]);
     (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;
-        showBlocks(canvas);
         showValueLine();
-    }, [showBlocks, showValueLine]);
+    }, [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(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.default = VaLueLineCanvas;
+exports.TimelineValue = TimelineValue;

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

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

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

@@ -1,5 +1,7 @@
-import { ZoomContextType } from '../index';
+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,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.numberToPxString = exports.getComputedElementWidth = exports.pixelToSeconds = exports.secondsToPixel = void 0;
+exports.getBlockOffsetForZoomLevel = exports.getTimelineWrapperWidth = exports.numberToPxString = exports.getComputedElementWidth = exports.pixelToSeconds = exports.secondsToPixel = void 0;
 const secondsToPixel = (zoomContextValue, seconds) => {
     return zoomContextValue.pixelsInSecond * seconds;
 };
@@ -22,3 +22,16 @@ 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/stories/timeline.stories.d.ts

@@ -1,9 +1,9 @@
 import { TimelineProps } from '../components/timeline';
 import './timeline.stories.custom.css';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
+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/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>;
-export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
-export declare const WithoutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
-export declare const Minimalist: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+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>;