@ldelia/react-media 0.2.7 → 0.2.8

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

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

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

@@ -0,0 +1,155 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ZoomContext_1 = require("../ZoomContext/ZoomContext");
+const utils_1 = require("../utils/utils");
+const OverlayCanvas = styled_components_1.default.canvas `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: cadetblue;
+`;
+const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
+    const canvasRef = (0, react_1.useRef)(null);
+    const zoomContextValue = (0, react_1.useContext)(ZoomContext_1.ZoomContext);
+    let isSelectingRange = false;
+    let selectedRangeInPixels = (0, react_1.useMemo)(() => [], []);
+    if (selectedRange.length === 2) {
+        selectedRangeInPixels = [
+            (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[0]),
+            (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[1]),
+        ];
+    }
+    let lastValidSelectedRangeInPixels = [];
+    const getMousePointerPixelPosition = (e) => {
+        const canvas = canvasRef.current;
+        let rect = canvas.getBoundingClientRect();
+        return e.clientX - rect.left;
+    };
+    const drawRect = (pixelX0, pixelX1) => {
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d');
+        context.globalAlpha = 0.3;
+        context.fillStyle = window
+            .getComputedStyle(canvas)
+            .getPropertyValue('color');
+        context.fillRect(pixelX0, 0, pixelX1 - pixelX0, context.canvas.height);
+        context.globalAlpha = 1.0;
+    };
+    const onCanvasDoubleClick = (e) => {
+        const x0 = getMousePointerPixelPosition(e);
+        onChange((0, utils_1.pixelToSeconds)(zoomContextValue, x0));
+        selectedRangeInPixels = lastValidSelectedRangeInPixels;
+    };
+    const isPixelNearSelectedRange = (x0) => {
+        if (selectedRangeInPixels.length === 2) {
+            const diff = Math.min(Math.abs(selectedRangeInPixels[0] - x0), Math.abs(selectedRangeInPixels[1] - x0));
+            return diff <= zoomContextValue.pixelsInSecond / 2;
+        }
+        return false;
+    };
+    const onCanvasMouseDown = (e) => {
+        const mouseCurrentPosition = getMousePointerPixelPosition(e);
+        if (!isPixelNearSelectedRange(mouseCurrentPosition)) {
+            // Keep track of the first position of the new range.
+            selectedRangeInPixels = [mouseCurrentPosition, mouseCurrentPosition];
+        }
+        isSelectingRange = true;
+    };
+    const onCanvasMouseMove = (e) => {
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d');
+        const mouseCurrentPosition = getMousePointerPixelPosition(e);
+        if (selectedRangeInPixels.length === 2) {
+            const diff = Math.min(Math.abs(selectedRangeInPixels[0] - mouseCurrentPosition), Math.abs(selectedRangeInPixels[1] - mouseCurrentPosition));
+            // Change the mouse's cursor if it's near a selected range.
+            canvas.style.cursor =
+                diff <= zoomContextValue.pixelsInSecond / 2 ? 'col-resize' : 'default';
+            if (!isSelectingRange)
+                return;
+            if (mouseCurrentPosition < selectedRangeInPixels[0]) {
+                // The left side must be enlarged.
+                selectedRangeInPixels[0] = mouseCurrentPosition;
+            }
+            else if (mouseCurrentPosition > selectedRangeInPixels[1]) {
+                // The right side must be enlarged.
+                selectedRangeInPixels[1] = mouseCurrentPosition;
+            }
+            else {
+                const diffX0 = mouseCurrentPosition - selectedRangeInPixels[0];
+                const diffX1 = selectedRangeInPixels[1] - mouseCurrentPosition;
+                if (diffX0 < diffX1) {
+                    // The left side must be shrunk.
+                    selectedRangeInPixels[0] = mouseCurrentPosition;
+                }
+                else {
+                    // The right side must be shrunk.
+                    selectedRangeInPixels[1] = mouseCurrentPosition;
+                }
+            }
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
+        }
+    };
+    const onCanvasMouseUp = (e) => {
+        if (selectedRangeInPixels.length !== 2)
+            return;
+        isSelectingRange = false;
+        const mouseCurrentPosition = getMousePointerPixelPosition(e);
+        const pixelRange = [
+            Math.min(selectedRangeInPixels[0], mouseCurrentPosition),
+            Math.max(selectedRangeInPixels[1], mouseCurrentPosition),
+        ];
+        if (pixelRange[1] - pixelRange[0] <= 1) {
+            // It was just a click
+            selectedRangeInPixels = lastValidSelectedRangeInPixels;
+        }
+        else {
+            lastValidSelectedRangeInPixels = pixelRange;
+            onRangeChange([
+                (0, utils_1.pixelToSeconds)(zoomContextValue, pixelRange[0]),
+                (0, utils_1.pixelToSeconds)(zoomContextValue, pixelRange[1]),
+            ]);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const canvas = canvasRef.current;
+        // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        if (selectedRangeInPixels.length === 0)
+            return;
+        drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
+    }, [selectedRangeInPixels]);
+    return (react_1.default.createElement(OverlayCanvas, { ref: canvasRef, onDoubleClick: onCanvasDoubleClick, onMouseDown: onCanvasMouseDown, onMouseMove: onCanvasMouseMove, onMouseUp: onCanvasMouseUp, className: 'media-timeline-range-selector-canvas' }));
+};
+exports.default = react_1.default.memo(RangeSelectorCanvas);

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

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

package/dist/components/timeline/Timeline.js

@@ -26,13 +26,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timeline = exports.ZoomContext = void 0;
+exports.Timeline = void 0;
 const react_1 = __importStar(require("react"));
-const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
-const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
-const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
+const TimelineCanvas_1 = __importDefault(require("./TimelineCanvas/TimelineCanvas"));
+const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas/RangeSelectorCanvas"));
 const constants_1 = require("./constants");
 const styled_components_1 = __importDefault(require("styled-components"));
+const TimelineValue_1 = require("./TimelineValue/TimelineValue");
+const ZoomContext_1 = require("./ZoomContext/ZoomContext");
+const utils_1 = require("./utils/utils");
 const TimelineContainer = styled_components_1.default.div `
   background-color: #f0f0f0;
   border: 1px solid #c9c9c9;
@@ -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/TimelineCanvas/TickTime.d.ts

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

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const TickTimeContainer = styled_components_1.default.span.attrs((props) => ({
+    style: {
+        left: props.left,
+    },
+})) `
+  background: transparent;
+  position: absolute;
+  padding-left: 8px;
+  color: #646464;
+  user-select: none;
+  min-width: 20px;
+  max-width: 20px;
+  align-self: flex-end;
+`;
+const TickTime = ({ start, leftPosition }) => {
+    const minutes = Math.floor(start / 60);
+    let seconds = start - minutes * 60;
+    let secondsFormatted = seconds < 10 ? '0' + seconds : seconds.toString();
+    return (react_1.default.createElement(TickTimeContainer, { left: leftPosition, className: 'media-timeline-tick-time' },
+        minutes,
+        ":",
+        secondsFormatted));
+};
+exports.default = TickTime;

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const TickTime_1 = __importDefault(require("./TickTime"));
+const ZoomContext_1 = require("../ZoomContext/ZoomContext");
+const TickTimeCollectionDisplayContainer = styled_components_1.default.div `
+  position: absolute;
+  display: flex;
+  align-self: flex-end;
+  height: 100%;
+`;
+const TickTimeCollectionDisplay = ({ tickTimes = [], }) => {
+    return (react_1.default.createElement(ZoomContext_1.ZoomContext.Consumer, null, (value) => {
+        return (react_1.default.createElement(TickTimeCollectionDisplayContainer, null, tickTimes.map((tickTimeValue, index) => {
+            const leftPosition = tickTimeValue * value.pixelsInSecond + 'px';
+            return (react_1.default.createElement(TickTime_1.default, { key: index, start: tickTimeValue, leftPosition: leftPosition }));
+        })));
+    }));
+};
+exports.default = TickTimeCollectionDisplay;

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

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

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

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ZoomContext_1 = require("../ZoomContext/ZoomContext");
+const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
+const drawTimeBlocksOnCanvas_1 = require("./drawTimeBlocksOnCanvas");
+const OverlayCanvas = styled_components_1.default.canvas `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #c9c9c9;
+`;
+const TimelineCanvas = (0, react_1.forwardRef)(({ duration, withTimeBlocks }, ref) => {
+    const internalCanvasRef = (0, react_1.useRef)(null);
+    const zoomContextValue = (0, react_1.useContext)(ZoomContext_1.ZoomContext);
+    const blockStartingTimes = (() => {
+        if (!withTimeBlocks || !zoomContextValue.blockOffset)
+            return [];
+        let blockStartingTimes = [0];
+        let secondsToCover = duration;
+        while (secondsToCover > 0) {
+            blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
+                zoomContextValue.blockOffset);
+            secondsToCover = secondsToCover - zoomContextValue.blockOffset;
+        }
+        blockStartingTimes.splice(-1);
+        return blockStartingTimes;
+    })();
+    // Pass the internal ref's current value directly to the forwarded ref
+    (0, react_1.useImperativeHandle)(ref, () => internalCanvasRef.current);
+    (0, react_1.useEffect)(() => {
+        const canvas = internalCanvasRef.current;
+        // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        if (withTimeBlocks)
+            (0, drawTimeBlocksOnCanvas_1.drawTimeBlocksOnCanvas)(canvas, blockStartingTimes, zoomContextValue);
+    }, [blockStartingTimes, withTimeBlocks, zoomContextValue]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(OverlayCanvas, { ref: internalCanvasRef, className: 'media-timeline-value-line-canvas' }),
+        withTimeBlocks && (react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes }))));
+});
+exports.default = TimelineCanvas;

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

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

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawTimeBlocksOnCanvas = void 0;
+const utils_1 = require("../utils/utils");
+const drawTimeBlocksOnCanvas = (canvas, blockStartingTimes, zoomContextValue) => {
+    const blockHeight = 20;
+    const context = canvas.getContext('2d');
+    // draw top line
+    context.beginPath();
+    context.moveTo(0, canvas.height - blockHeight);
+    context.lineTo(zoomContextValue.timelineWrapperWidth, canvas.height - blockHeight);
+    context.strokeStyle = window
+        .getComputedStyle(canvas)
+        .getPropertyValue('color');
+    context.stroke();
+    for (const blockStartingTime of blockStartingTimes) {
+        const x0Pixel = (0, utils_1.secondsToPixel)(zoomContextValue, blockStartingTime);
+        const x1Pixel = (0, utils_1.secondsToPixel)(zoomContextValue, blockStartingTime + zoomContextValue.blockOffset);
+        context.beginPath();
+        // draw left line
+        context.moveTo(x0Pixel, canvas.height);
+        context.lineTo(x0Pixel, canvas.height - blockHeight);
+        // draw right line
+        context.moveTo(x1Pixel, canvas.height);
+        context.lineTo(x1Pixel, canvas.height - blockHeight);
+        context.strokeStyle = window
+            .getComputedStyle(canvas)
+            .getPropertyValue('color');
+        context.stroke();
+    }
+};
+exports.drawTimeBlocksOnCanvas = drawTimeBlocksOnCanvas;

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

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

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

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

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/package.json

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

package/src/components/timeline/{RangeSelectorCanvas.tsx → RangeSelectorCanvas/RangeSelectorCanvas.tsx}

@@ -1,15 +1,7 @@
-import React from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import styled from 'styled-components';
-
-import { ZoomContext, ZoomContextType } from './index';
-import { useContext, useEffect, useMemo, useRef } from 'react';
-import { pixelToSeconds, secondsToPixel } from './utils/utils';
-
-export interface RangeSelectorCanvasProps {
-  selectedRange: number[];
-  onChange: (value: number) => void;
-  onRangeChange: (value: number[]) => void;
-}
+import { ZoomContext, ZoomContextType } from '../ZoomContext/ZoomContext';
+import { pixelToSeconds, secondsToPixel } from '../utils/utils';
 
 const OverlayCanvas = styled.canvas`
   position: absolute;
@@ -20,6 +12,12 @@ const OverlayCanvas = styled.canvas`
   color: cadetblue;
 `;
 
+export interface RangeSelectorCanvasProps {
+  selectedRange: number[];
+  onChange: (value: number) => void;
+  onRangeChange: (value: number[]) => void;
+}
+
 const RangeSelectorCanvas: React.FC<RangeSelectorCanvasProps> = ({
   selectedRange,
   onChange,

package/src/components/timeline/Timeline.tsx

@@ -1,9 +1,15 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import TickTimeCollectionDisplay from './TickTimeCollectionDisplay';
-import VaLueLineCanvas from './VaLueLineCanvas';
-import RangeSelectorCanvas from './RangeSelectorCanvas';
+import React, { useEffect, useRef, useState } from 'react';
+import TimelineCanvas from './TimelineCanvas/TimelineCanvas';
+import RangeSelectorCanvas from './RangeSelectorCanvas/RangeSelectorCanvas';
 import { zoomLevelConfigurations } from './constants';
 import styled from 'styled-components';
+import { TimelineValue } from './TimelineValue/TimelineValue';
+import { ZoomContext, ZoomContextType } from './ZoomContext/ZoomContext';
+import {
+  getBlockOffsetForZoomLevel,
+  getTimelineWrapperWidth,
+  numberToPxString,
+} from './utils/utils';
 
 const TimelineContainer = styled.div`
   background-color: #f0f0f0;
@@ -21,6 +27,7 @@ const TimelineWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  overflow: hidden;
 `;
 
 export interface TimelineProps {
@@ -34,15 +41,6 @@ export interface TimelineProps {
   onRangeChange?: (value: number[]) => void;
 }
 
-export type ZoomContextType = {
-  blockOffset: number;
-  pixelsInSecond: number;
-};
-export const ZoomContext = React.createContext<ZoomContextType>({
-  blockOffset: 0,
-  pixelsInSecond: 0,
-});
-
 export const Timeline: React.FC<TimelineProps> = ({
   duration,
   value,
@@ -53,7 +51,14 @@ export const Timeline: React.FC<TimelineProps> = ({
   onRangeChange = () => {},
   className = '',
 }) => {
-  const timeLineContainerRef = useRef(null);
+  const timeLineContainerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef(null);
+
+  const [zoomContextValue, setZoomContextValue] = useState<ZoomContextType>({
+    blockOffset: 0,
+    pixelsInSecond: 0,
+    timelineWrapperWidth: 0,
+  });
 
   let zoomLevelValue = zoomLevel ? zoomLevel : 0;
   if (zoomLevelValue < 0 || zoomLevelValue >= zoomLevelConfigurations.length) {
@@ -82,46 +87,51 @@ export const Timeline: React.FC<TimelineProps> = ({
     console.warn('The selected range is inconsistent.');
   }
 
-  const zoomParams = useMemo(() => {
-    return {
-      blockOffset: zoomLevelConfigurations[zoomLevelValue][0],
-      pixelsInSecond: zoomLevelConfigurations[zoomLevelValue][1],
-    };
-  }, [zoomLevelValue]);
+  useEffect(() => {
+    if (!timeLineContainerRef.current) return;
 
-  let blockStartingTimes = [0];
-  const blockCounts: number = Math.ceil(duration / zoomParams.blockOffset);
-  for (let i: number = 1; i < blockCounts; i++) {
-    blockStartingTimes.push(
-      blockStartingTimes[blockStartingTimes.length - 1] +
-        zoomParams.blockOffset,
+    const timelineWrapperWidth = getTimelineWrapperWidth(
+      timeLineContainerRef.current.offsetWidth,
+      zoomLevelValue,
     );
-  }
+
+    setZoomContextValue({
+      blockOffset: getBlockOffsetForZoomLevel(
+        zoomLevelValue,
+        duration,
+        timelineWrapperWidth,
+      ),
+      pixelsInSecond: timelineWrapperWidth / duration,
+      timelineWrapperWidth: timelineWrapperWidth,
+    });
+  }, [timeLineContainerRef.current, zoomLevelValue, duration]);
 
   useEffect(() => {
     const timeLineWrapper: HTMLElement = timeLineContainerRef.current!;
-    const scrollPosition: number = value * zoomParams.pixelsInSecond - 300;
+    const scrollPosition: number =
+      value * zoomContextValue.pixelsInSecond - 300;
     timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
-  }, [value, zoomParams]);
+  }, [duration, value, zoomContextValue]);
 
   return (
     <TimelineContainer ref={timeLineContainerRef} className={className}>
       <TimelineWrapper
-        style={{ width: duration * zoomParams.pixelsInSecond + 'px' }}
+        style={{
+          width: numberToPxString(zoomContextValue.timelineWrapperWidth),
+        }}
       >
-        <ZoomContext.Provider value={zoomParams}>
-          <VaLueLineCanvas
-            blockStartingTimes={withTimeBlocks ? blockStartingTimes : []}
-            value={value}
+        <ZoomContext.Provider value={zoomContextValue}>
+          <TimelineCanvas
+            ref={canvasRef}
+            duration={duration}
+            withTimeBlocks={withTimeBlocks}
           />
+          <TimelineValue value={value} canvasRef={canvasRef} />
           <RangeSelectorCanvas
             selectedRange={selectedRange}
             onChange={onChange}
             onRangeChange={onRangeChange}
           />
-          {withTimeBlocks && (
-            <TickTimeCollectionDisplay tickTimes={blockStartingTimes} />
-          )}
         </ZoomContext.Provider>
       </TimelineWrapper>
     </TimelineContainer>

package/src/components/timeline/{TickTimeCollectionDisplay.tsx → TimelineCanvas/TickTimeCollectionDisplay.tsx}

@@ -1,11 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import TickTime from './TickTime';
-import { ZoomContext } from './index';
-
-export interface TickTimeCollectionDisplayProps {
-  tickTimes: number[];
-}
+import { ZoomContext } from '../ZoomContext/ZoomContext';
 
 const TickTimeCollectionDisplayContainer = styled.div`
   position: absolute;
@@ -14,6 +10,10 @@ const TickTimeCollectionDisplayContainer = styled.div`
   height: 100%;
 `;
 
+export interface TickTimeCollectionDisplayProps {
+  tickTimes: number[];
+}
+
 const TickTimeCollectionDisplay: React.FC<TickTimeCollectionDisplayProps> = ({
   tickTimes = [],
 }) => {

package/src/components/timeline/TimelineCanvas/TimelineCanvas.tsx

@@ -0,0 +1,79 @@
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import styled from 'styled-components';
+import { ZoomContext, ZoomContextType } from '../ZoomContext/ZoomContext';
+import TickTimeCollectionDisplay from './TickTimeCollectionDisplay';
+import { drawTimeBlocksOnCanvas } from './drawTimeBlocksOnCanvas';
+
+const OverlayCanvas = styled.canvas`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #c9c9c9;
+`;
+
+export interface VaLueLineCanvasProps {
+  duration: number;
+  withTimeBlocks: boolean;
+}
+
+const TimelineCanvas = forwardRef<HTMLCanvasElement, VaLueLineCanvasProps>(
+  ({ duration, withTimeBlocks }, ref) => {
+    const internalCanvasRef = useRef<HTMLCanvasElement>(null);
+
+    const zoomContextValue: ZoomContextType = useContext(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
+    useImperativeHandle(
+      ref,
+      () => internalCanvasRef.current as HTMLCanvasElement,
+    );
+
+    useEffect(() => {
+      const canvas: HTMLCanvasElement = internalCanvasRef.current!;
+
+      // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
+      canvas.width = canvas.offsetWidth;
+      canvas.height = canvas.offsetHeight;
+
+      if (withTimeBlocks)
+        drawTimeBlocksOnCanvas(canvas, blockStartingTimes, zoomContextValue);
+    }, [blockStartingTimes, withTimeBlocks, zoomContextValue]);
+
+    return (
+      <>
+        <OverlayCanvas
+          ref={internalCanvasRef}
+          className={'media-timeline-value-line-canvas'}
+        />
+        {withTimeBlocks && (
+          <TickTimeCollectionDisplay tickTimes={blockStartingTimes} />
+        )}
+      </>
+    );
+  },
+);
+export default TimelineCanvas;

package/src/components/timeline/TimelineCanvas/drawTimeBlocksOnCanvas.ts

@@ -0,0 +1,43 @@
+import { secondsToPixel } from '../utils/utils';
+import { ZoomContextType } from '../ZoomContext/ZoomContext';
+
+export const drawTimeBlocksOnCanvas = (
+  canvas: HTMLCanvasElement,
+  blockStartingTimes: number[],
+  zoomContextValue: ZoomContextType,
+): void => {
+  const blockHeight = 20;
+  const context: CanvasRenderingContext2D = 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 = secondsToPixel(zoomContextValue, blockStartingTime);
+    const x1Pixel = 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();
+  }
+};

package/src/components/timeline/{VaLueLineCanvas.tsx → TimelineValue/TimelineValue.tsx}

@@ -1,26 +1,11 @@
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-
-import { ZoomContext, ZoomContextType } from './index';
 import {
   getComputedElementWidth,
   numberToPxString,
   secondsToPixel,
-} from './utils/utils';
-
-export interface VaLueLineCanvasProps {
-  blockStartingTimes: number[];
-  value: number;
-}
-
-const OverlayCanvas = styled.canvas`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  color: #c9c9c9;
-`;
+} from '../utils/utils';
+import { ZoomContext, ZoomContextType } from '../ZoomContext/ZoomContext';
 
 const PreValueLine = styled.span`
   position: absolute;
@@ -40,45 +25,18 @@ const PostValueLine = styled.span`
   height: 100%;
 `;
 
-const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
-  blockStartingTimes = [],
-  value,
-}) => {
-  const canvasRef = useRef(null);
+interface Props {
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+  value: number;
+}
 
+export const TimelineValue: React.FC<Props> = ({ canvasRef, value }) => {
   const preValueLineRef = useRef(null);
   const valueLineRef = useRef(null);
   const postValueLineRef = useRef(null);
 
   const zoomContextValue: ZoomContextType = useContext(ZoomContext);
 
-  const showBlocks = useCallback(
-    (canvas: HTMLCanvasElement) => {
-      const blockHeight = 20;
-      const context: CanvasRenderingContext2D = canvas.getContext('2d')!;
-
-      for (const blockStartingTime of blockStartingTimes) {
-        const x0Pixel = secondsToPixel(zoomContextValue, blockStartingTime);
-        const x1Pixel = 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 = useCallback(() => {
     const canvas: HTMLCanvasElement = canvasRef.current!;
 
@@ -107,26 +65,14 @@ const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
     const postValueLineWidth = canvas.width - postValueLinePosition;
     postValueLineElement.style.left = numberToPxString(postValueLinePosition);
     postValueLineElement.style.width = numberToPxString(postValueLineWidth);
-  }, [value, zoomContextValue]);
+  }, [canvasRef, value, zoomContextValue]);
 
   useEffect(() => {
-    const canvas: HTMLCanvasElement = 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 (
     <>
-      <OverlayCanvas
-        ref={canvasRef}
-        className={'media-timeline-value-line-canvas'}
-      />
-
       <PreValueLine
         ref={preValueLineRef}
         className={'media-timeline-pre-value-line'}
@@ -139,4 +85,3 @@ const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
     </>
   );
 };
-export default VaLueLineCanvas;

package/src/components/timeline/ZoomContext/ZoomContext.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export type ZoomContextType = {
+  blockOffset: number;
+  pixelsInSecond: number;
+  timelineWrapperWidth: number;
+};
+export const ZoomContext = React.createContext<ZoomContextType>(
+  null as unknown as ZoomContextType,
+);

package/src/components/timeline/utils/utils.ts

@@ -1,4 +1,4 @@
-import { ZoomContextType } from '../index';
+import { ZoomContextType } from '../ZoomContext/ZoomContext';
 
 export const secondsToPixel = (
   zoomContextValue: ZoomContextType,
@@ -26,3 +26,24 @@ export const getComputedElementWidth = (element: HTMLElement): number => {
 export const numberToPxString = (number: number): string => {
   return `${number}px`;
 };
+
+export const getTimelineWrapperWidth = (
+  timeLineContainerWidth: number,
+  zoomLevel: number,
+): number => {
+  return timeLineContainerWidth * Math.pow(1.25, zoomLevel) - 2; //-2px to account for the border
+};
+
+export function getBlockOffsetForZoomLevel(
+  zoomLevel: number,
+  duration: number,
+  timelineWrapperWidth: number,
+): number {
+  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);
+}