@ldelia/react-media 0.2.7 → 0.3.0

package/src/components/timeline/RangeSelectorCanvas/RangeSelectorCanvas.js

@@ -0,0 +1,127 @@
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import { ZoomContext } from '../ZoomContext/ZoomContext';
+import { pixelToSeconds, secondsToPixel } from '../utils/utils';
+const OverlayCanvas = styled.canvas `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: cadetblue;
+`;
+const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
+    const canvasRef = useRef(null);
+    const zoomContextValue = useContext(ZoomContext);
+    let isSelectingRange = false;
+    let selectedRangeInPixels = useMemo(() => [], []);
+    if (selectedRange.length === 2) {
+        selectedRangeInPixels = [
+            secondsToPixel(zoomContextValue, selectedRange[0]),
+            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(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([
+                pixelToSeconds(zoomContextValue, pixelRange[0]),
+                pixelToSeconds(zoomContextValue, pixelRange[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.createElement(OverlayCanvas, { ref: canvasRef, onDoubleClick: onCanvasDoubleClick, onMouseDown: onCanvasMouseDown, onMouseMove: onCanvasMouseMove, onMouseUp: onCanvasMouseUp, className: 'media-timeline-range-selector-canvas' }));
+};
+export default React.memo(RangeSelectorCanvas);

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.js

@@ -0,0 +1,77 @@
+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 } from './ZoomContext/ZoomContext';
+import { getBlockOffsetForZoomLevel, getTimelineWrapperWidth, numberToPxString, } from './utils/utils';
+const TimelineContainer = styled.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.div `
+  position: absolute;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+`;
+export const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
+    const timeLineContainerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const [zoomContextValue, setZoomContextValue] = useState({
+        blockOffset: 0,
+        pixelsInSecond: 0,
+        timelineWrapperWidth: 0,
+    });
+    let zoomLevelValue = zoomLevel ? zoomLevel : 0;
+    if (zoomLevelValue < 0 || zoomLevelValue >= 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.');
+    }
+    useEffect(() => {
+        if (!timeLineContainerRef.current)
+            return;
+        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 = timeLineContainerRef.current;
+        const scrollPosition = value * zoomContextValue.pixelsInSecond - 300;
+        timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
+    }, [duration, value, zoomContextValue]);
+    return (React.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
+        React.createElement(TimelineWrapper, { style: {
+                width: numberToPxString(zoomContextValue.timelineWrapperWidth),
+            } },
+            React.createElement(ZoomContext.Provider, { value: zoomContextValue },
+                React.createElement(TimelineCanvas, { ref: canvasRef, duration: duration, withTimeBlocks: withTimeBlocks }),
+                React.createElement(TimelineValue, { value: value, canvasRef: canvasRef }),
+                React.createElement(RangeSelectorCanvas, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange })))));
+};

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/TimelineCanvas/TickTime.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+const TickTimeContainer = styled.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.createElement(TickTimeContainer, { left: leftPosition, className: 'media-timeline-tick-time' },
+        minutes,
+        ":",
+        secondsFormatted));
+};
+export default TickTime;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+import TickTime from './TickTime';
+import { ZoomContext } from '../ZoomContext/ZoomContext';
+const TickTimeCollectionDisplayContainer = styled.div `
+  position: absolute;
+  display: flex;
+  align-self: flex-end;
+  height: 100%;
+`;
+const TickTimeCollectionDisplay = ({ tickTimes = [], }) => {
+    return (React.createElement(ZoomContext.Consumer, null, (value) => {
+        return (React.createElement(TickTimeCollectionDisplayContainer, null, tickTimes.map((tickTimeValue, index) => {
+            const leftPosition = tickTimeValue * value.pixelsInSecond + 'px';
+            return (React.createElement(TickTime, { key: index, start: tickTimeValue, leftPosition: leftPosition }));
+        })));
+    }));
+};
+export default TickTimeCollectionDisplay;

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.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, } from 'react';
+import styled from 'styled-components';
+import { ZoomContext } 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;
+`;
+const TimelineCanvas = forwardRef(({ duration, withTimeBlocks }, ref) => {
+    const internalCanvasRef = useRef(null);
+    const zoomContextValue = 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);
+    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)
+            drawTimeBlocksOnCanvas(canvas, blockStartingTimes, zoomContextValue);
+    }, [blockStartingTimes, withTimeBlocks, zoomContextValue]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OverlayCanvas, { ref: internalCanvasRef, className: 'media-timeline-value-line-canvas' }),
+        withTimeBlocks && (React.createElement(TickTimeCollectionDisplay, { tickTimes: blockStartingTimes }))));
+});
+export default TimelineCanvas;

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.js

@@ -0,0 +1,28 @@
+import { secondsToPixel } from '../utils/utils';
+export 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 = 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/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();
+  }
+};