@ldelia/react-media 0.4.1 → 0.4.3

package/src/components/timeline/RangeSelectorCanvas/RangeSelectorCanvas.tsx

@@ -1,166 +0,0 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { ZoomContext, ZoomContextType } 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;
-`;
-
-export interface RangeSelectorCanvasProps {
-  selectedRange: number[];
-  onChange: (value: number) => void;
-  onRangeChange: (value: number[]) => void;
-}
-
-const RangeSelectorCanvas: React.FC<RangeSelectorCanvasProps> = ({
-  selectedRange,
-  onChange,
-  onRangeChange,
-}) => {
-  const canvasRef = useRef(null);
-  const zoomContextValue: ZoomContextType = useContext(ZoomContext);
-
-  let isSelectingRange: boolean = false;
-  let selectedRangeInPixels: number[] = useMemo(() => [], []);
-  if (selectedRange.length === 2) {
-    selectedRangeInPixels = [
-      secondsToPixel(zoomContextValue, selectedRange[0]),
-      secondsToPixel(zoomContextValue, selectedRange[1]),
-    ];
-  }
-  let lastValidSelectedRangeInPixels: number[] = [];
-
-  const getMousePointerPixelPosition = (e: { clientX: number }) => {
-    const canvas: HTMLCanvasElement = canvasRef.current!;
-    let rect = canvas.getBoundingClientRect();
-    return e.clientX - rect.left;
-  };
-
-  const drawRect = (pixelX0: number, pixelX1: number) => {
-    const canvas: HTMLCanvasElement = canvasRef.current!;
-    const context: CanvasRenderingContext2D = 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: { clientX: number }) => {
-    const x0 = getMousePointerPixelPosition(e);
-    onChange(pixelToSeconds(zoomContextValue, x0));
-    selectedRangeInPixels = lastValidSelectedRangeInPixels;
-  };
-
-  const isPixelNearSelectedRange = (x0: number) => {
-    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: { clientX: number }) => {
-    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: { clientX: number }) => {
-    const canvas: HTMLCanvasElement = 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: { clientX: number }) => {
-    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: HTMLCanvasElement = 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 (
-    <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/Timeline.js

@@ -1,77 +0,0 @@
-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,139 +0,0 @@
-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;
-  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 interface TimelineProps {
-  duration: number; // duration in seconds
-  value: number; // value in seconds
-  zoomLevel?: number; //0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-  className?: string;
-  selectedRange?: number[];
-  withTimeBlocks?: boolean;
-  onChange?: (value: number) => void;
-  onRangeChange?: (value: number[]) => void;
-}
-
-export const Timeline: React.FC<TimelineProps> = ({
-  duration,
-  value,
-  zoomLevel = 0,
-  selectedRange = [],
-  withTimeBlocks = true,
-  onChange = () => {},
-  onRangeChange = () => {},
-  className = '',
-}) => {
-  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) {
-    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: HTMLElement = timeLineContainerRef.current!;
-    const scrollPosition: number =
-      value * zoomContextValue.pixelsInSecond - 300;
-    timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
-  }, [duration, value, zoomContextValue]);
-
-  return (
-    <TimelineContainer ref={timeLineContainerRef} className={className}>
-      <TimelineWrapper
-        style={{
-          width: numberToPxString(zoomContextValue.timelineWrapperWidth),
-        }}
-      >
-        <ZoomContext.Provider value={zoomContextValue}>
-          <TimelineCanvas
-            ref={canvasRef}
-            duration={duration}
-            withTimeBlocks={withTimeBlocks}
-          />
-          <TimelineValue value={value} canvasRef={canvasRef} />
-          <RangeSelectorCanvas
-            selectedRange={selectedRange}
-            onChange={onChange}
-            onRangeChange={onRangeChange}
-          />
-        </ZoomContext.Provider>
-      </TimelineWrapper>
-    </TimelineContainer>
-  );
-};

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

@@ -1,26 +0,0 @@
-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/TickTime.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export type Props = {
-  start: number;
-  leftPosition: string;
-};
-
-interface TickTimeContainerProps {
-  left: string;
-}
-
-const TickTimeContainer = styled.span.attrs<TickTimeContainerProps>(
-  (props) => ({
-    style: {
-      left: props.left,
-    },
-  }),
-)<TickTimeContainerProps>`
-  background: transparent;
-  position: absolute;
-  padding-left: 8px;
-  color: #646464;
-  user-select: none;
-  min-width: 20px;
-  max-width: 20px;
-  align-self: flex-end;
-`;
-
-const TickTime: React.FC<Props> = ({ start, leftPosition }) => {
-  const minutes = Math.floor(start / 60);
-  let seconds = start - minutes * 60;
-  let secondsFormatted: string =
-    seconds < 10 ? '0' + seconds : seconds.toString();
-  return (
-    <TickTimeContainer
-      left={leftPosition}
-      className={'media-timeline-tick-time'}
-    >
-      {minutes}:{secondsFormatted}
-    </TickTimeContainer>
-  );
-};
-
-export default TickTime;

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

@@ -1,19 +0,0 @@
-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/TimelineCanvas/TickTimeCollectionDisplay.tsx

@@ -1,42 +0,0 @@
-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%;
-`;
-
-export interface TickTimeCollectionDisplayProps {
-  tickTimes: number[];
-}
-
-const TickTimeCollectionDisplay: React.FC<TickTimeCollectionDisplayProps> = ({
-  tickTimes = [],
-}) => {
-  return (
-    <ZoomContext.Consumer>
-      {(value) => {
-        return (
-          <TickTimeCollectionDisplayContainer>
-            {tickTimes.map((tickTimeValue, index) => {
-              const leftPosition: string =
-                tickTimeValue * value.pixelsInSecond + 'px';
-              return (
-                <TickTime
-                  key={index}
-                  start={tickTimeValue}
-                  leftPosition={leftPosition}
-                />
-              );
-            })}
-          </TickTimeCollectionDisplayContainer>
-        );
-      }}
-    </ZoomContext.Consumer>
-  );
-};
-export default TickTimeCollectionDisplay;

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

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

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

@@ -1,28 +0,0 @@
-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();
-    }
-};