@ldelia/react-media 0.2.8 → 0.4.0

package/src/components/reproduction-widget/models/Reproduction.ts

@@ -0,0 +1,272 @@
+import { PLAYER_EVENTS } from './Player/PlayerEvents';
+import { ReproductionBuilder } from './ReproductionBuilder';
+import { PlayAlongPlayer } from './Player/PlayAlongPlayer';
+import { YouTubePlayer } from './Player/YouTubePlayer';
+
+type Player = PlayAlongPlayer | YouTubePlayer;
+
+const STATES = {
+  STOPPED: 0,
+  COUNTING_IN: 1,
+  PLAYING: 2,
+  PAUSED: 3,
+};
+
+const EVENTS = {
+  READY: 'READY',
+  START: 'START',
+  COUNTING_IN: 'COUNTING_IN',
+  PLAY: 'PLAY',
+  PLAYING: 'PLAYING',
+  PAUSED: 'PAUSED',
+  FINISH: 'FINISH',
+} as const;
+
+const dispatchOnReadyHandlers = Symbol();
+const dispatchOnSongStartHandlers = Symbol();
+const dispatchOnCountingInHandlers = Symbol();
+const dispatchOnPlayHandlers = Symbol();
+const dispatchOnPlayingHandlers = Symbol();
+const dispatchOnPausedHandlers = Symbol();
+const dispatchOnFinishHandlers = Symbol();
+
+export class Reproduction {
+  private player: Player;
+  private requiresCountingIn: boolean;
+
+  private songTempo: number;
+  private state: number;
+  private ready: boolean;
+  private interval: ReturnType<typeof setInterval> | null;
+  private countingInCounter: number;
+  private [dispatchOnReadyHandlers]: (() => void)[];
+  private [dispatchOnSongStartHandlers]: (() => void)[];
+  private [dispatchOnCountingInHandlers]: (() => void)[];
+  private [dispatchOnPlayHandlers]: (() => void)[];
+  private [dispatchOnPlayingHandlers]: (() => void)[];
+  private [dispatchOnPausedHandlers]: (() => void)[];
+  private [dispatchOnFinishHandlers]: (() => void)[];
+
+  static get EVENTS() {
+    return EVENTS;
+  }
+
+  static get STATES() {
+    return STATES;
+  }
+
+  constructor(player: Player, requiresCountingIn: boolean, songTempo: number) {
+    this[dispatchOnReadyHandlers] = [];
+    this[dispatchOnSongStartHandlers] = [];
+    this[dispatchOnCountingInHandlers] = [];
+    this[dispatchOnPlayHandlers] = [];
+    this[dispatchOnPlayingHandlers] = [];
+    this[dispatchOnPausedHandlers] = [];
+    this[dispatchOnFinishHandlers] = [];
+
+    this.songTempo = songTempo;
+    this.player = player;
+    this.ready = false;
+
+    this.state = Reproduction.STATES.STOPPED;
+    this.interval = null;
+
+    this.requiresCountingIn = requiresCountingIn;
+    this.countingInCounter = 0;
+
+    this.player.on(PLAYER_EVENTS.READY, () => {
+      this.ready = true;
+      this.dispatch(Reproduction.EVENTS.READY);
+    });
+
+    this.player.on(PLAYER_EVENTS.FINISH, () => {
+      this.state = Reproduction.STATES.STOPPED;
+      clearInterval(this.interval as NodeJS.Timeout);
+      this.dispatch(Reproduction.EVENTS.FINISH);
+    });
+  }
+
+  on(eventName: keyof typeof Reproduction.EVENTS, handler: () => void) {
+    switch (eventName) {
+      case Reproduction.EVENTS.READY:
+        return this[dispatchOnReadyHandlers].push(handler);
+      case Reproduction.EVENTS.START:
+        return this[dispatchOnSongStartHandlers].push(handler);
+      case Reproduction.EVENTS.COUNTING_IN:
+        return this[dispatchOnCountingInHandlers].push(handler);
+      case Reproduction.EVENTS.PLAY:
+        return this[dispatchOnPlayHandlers].push(handler);
+      case Reproduction.EVENTS.PLAYING:
+        return this[dispatchOnPlayingHandlers].push(handler);
+      case Reproduction.EVENTS.PAUSED:
+        return this[dispatchOnPausedHandlers].push(handler);
+      case Reproduction.EVENTS.FINISH:
+        return this[dispatchOnFinishHandlers].push(handler);
+      default:
+        break;
+    }
+  }
+
+  dispatch(eventName: keyof typeof Reproduction.EVENTS) {
+    let handler, i, len;
+
+    let ref: (() => void)[] = [];
+
+    switch (eventName) {
+      case Reproduction.EVENTS.READY:
+        ref = this[dispatchOnReadyHandlers];
+        break;
+      case Reproduction.EVENTS.START:
+        ref = this[dispatchOnSongStartHandlers];
+        break;
+      case Reproduction.EVENTS.COUNTING_IN:
+        ref = this[dispatchOnCountingInHandlers];
+        break;
+      case Reproduction.EVENTS.PLAY:
+        ref = this[dispatchOnPlayHandlers];
+        break;
+      case Reproduction.EVENTS.PLAYING:
+        ref = this[dispatchOnPlayingHandlers];
+        break;
+      case Reproduction.EVENTS.PAUSED:
+        ref = this[dispatchOnPausedHandlers];
+        break;
+      case Reproduction.EVENTS.FINISH:
+        ref = this[dispatchOnFinishHandlers];
+        break;
+      default:
+        break;
+    }
+
+    for (i = 0, len = ref.length; i < len; i++) {
+      handler = ref[i];
+      handler();
+      // setTimeout(handler, 0);
+    }
+  }
+
+  private countIn(timeout: number, limit: number) {
+    // the initial count starts instantly, no waiting
+    this.countingInCounter++;
+    this.dispatch(Reproduction.EVENTS.COUNTING_IN);
+
+    const interval = setInterval(() => {
+      this.countingInCounter++;
+      if (this.countingInCounter === limit) {
+        clearInterval(interval);
+        this.countingInCounter = 0;
+        if (limit !== 5) {
+          this.countIn(this.getBPMInterval(), 5);
+        } else {
+          this.play();
+        }
+      } else {
+        this.dispatch(Reproduction.EVENTS.COUNTING_IN);
+      }
+    }, timeout);
+  }
+
+  start() {
+    if (this.state === Reproduction.STATES.STOPPED) {
+      this.dispatch(Reproduction.EVENTS.START);
+    }
+
+    if (this.requiresCountingIn && this.getCurrentTime() === 0) {
+      this.state = Reproduction.STATES.COUNTING_IN;
+      this.countIn(this.getBPMInterval() * 2, 3);
+    } else {
+      this.play();
+    }
+  }
+
+  play() {
+    this.state = Reproduction.STATES.PLAYING;
+    this.dispatch(Reproduction.EVENTS.PLAY);
+    this.player.play();
+
+    const intervalTimeout = 200;
+
+    this.interval = setInterval(() => {
+      if (this.isPlaying()) {
+        this.dispatch(Reproduction.EVENTS.PLAYING);
+      }
+    }, intervalTimeout);
+  }
+
+  pause() {
+    this.state = Reproduction.STATES.PAUSED;
+    this.player.pause();
+    clearInterval(this.interval as NodeJS.Timeout);
+
+    this.dispatch(Reproduction.EVENTS.PAUSED);
+  }
+
+  stop() {
+    this.state = Reproduction.STATES.STOPPED;
+    this.player.stop();
+    clearInterval(this.interval as NodeJS.Timeout);
+    this.dispatch(Reproduction.EVENTS.FINISH);
+  }
+
+  isReady() {
+    // It's necessary to avoid play the reproduction-widget when the player is not ready
+    return this.ready;
+  }
+
+  isPlaying() {
+    return this.state === Reproduction.STATES.PLAYING;
+  }
+
+  isStopped() {
+    return this.state === Reproduction.STATES.STOPPED;
+  }
+
+  isPaused() {
+    return this.state === Reproduction.STATES.PAUSED;
+  }
+
+  isCountingIn() {
+    return this.state === Reproduction.STATES.COUNTING_IN;
+  }
+
+  getPlayer() {
+    return this.player;
+  }
+
+  getTempo() {
+    return this.songTempo;
+  }
+
+  getCurrentTime() {
+    // in seconds with milliseconds.
+    return this.player.getCurrentTime();
+  }
+
+  getDuration() {
+    return this.player.getDuration();
+  }
+
+  seekTo(seconds: number) {
+    this.player.seekTo(seconds);
+  }
+
+  getAvailablePlaybackRates() {
+    return this.player.getAvailablePlaybackRates();
+  }
+
+  setPlaybackRate(playbackRate: number) {
+    this.player.setPlaybackRate(playbackRate);
+  }
+
+  isAvailable() {
+    return this.player.isAvailable();
+  }
+
+  getBPMInterval() {
+    return 60000 / this.getTempo();
+  }
+
+  static newBuilder() {
+    return new ReproductionBuilder();
+  }
+}

package/src/components/reproduction-widget/models/ReproductionBuilder.js

@@ -0,0 +1,51 @@
+import { YouTubePlayer } from './Player/YouTubePlayer';
+import { PlayAlongPlayer } from './Player/PlayAlongPlayer';
+import { Reproduction } from './Reproduction';
+export class ReproductionBuilder {
+    constructor() {
+        this.trainingMode = false;
+        this.requiresCountingIn = false;
+        this.songDuration = null;
+        this.songTempo = null;
+        this.innerPlayer = null;
+    }
+    withSongDuration(songDuration) {
+        this.songDuration = songDuration;
+        return this;
+    }
+    withSongTempo(songTempo) {
+        this.songTempo = songTempo;
+        return this;
+    }
+    withTrainingMode(trainingMode) {
+        this.trainingMode = trainingMode;
+        return this;
+    }
+    withCountingIn(requiresCountingIn) {
+        this.requiresCountingIn = requiresCountingIn;
+        return this;
+    }
+    withInnerPlayer(innerPlayer) {
+        this.innerPlayer = innerPlayer;
+        return this;
+    }
+    createReproduction() {
+        if (this.requiresCountingIn && this.songTempo === null) {
+            throw new Error('The song tempo is mandatory');
+        }
+        if (this.innerPlayer === null) {
+            throw new Error('The inner player was not provided.');
+        }
+        let player;
+        if (this.trainingMode) {
+            player = new YouTubePlayer(this.innerPlayer);
+        }
+        else {
+            if (this.songDuration === null) {
+                throw new Error('The song duration is mandatory');
+            }
+            player = new PlayAlongPlayer(this.songDuration, this.innerPlayer);
+        }
+        return new Reproduction(player, this.requiresCountingIn, this.songTempo || 0);
+    }
+}

package/src/components/reproduction-widget/models/ReproductionBuilder.ts

@@ -0,0 +1,70 @@
+import { YouTubePlayer } from './Player/YouTubePlayer';
+import { PlayAlongPlayer } from './Player/PlayAlongPlayer';
+import { Reproduction } from './Reproduction';
+import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+
+export class ReproductionBuilder {
+  private trainingMode: boolean;
+  private requiresCountingIn: boolean;
+  private songDuration: number | null;
+  private songTempo: number | null;
+  private innerPlayer: InnerYouTubePlayer | string;
+
+  constructor() {
+    this.trainingMode = false;
+    this.requiresCountingIn = false;
+    this.songDuration = null;
+    this.songTempo = null;
+    this.innerPlayer = null;
+  }
+
+  withSongDuration(songDuration: number) {
+    this.songDuration = songDuration;
+    return this;
+  }
+
+  withSongTempo(songTempo: number) {
+    this.songTempo = songTempo;
+    return this;
+  }
+
+  withTrainingMode(trainingMode: boolean) {
+    this.trainingMode = trainingMode;
+    return this;
+  }
+
+  withCountingIn(requiresCountingIn: boolean) {
+    this.requiresCountingIn = requiresCountingIn;
+    return this;
+  }
+
+  withInnerPlayer(innerPlayer: InnerYouTubePlayer | string) {
+    this.innerPlayer = innerPlayer;
+    return this;
+  }
+
+  createReproduction() {
+    if (this.requiresCountingIn && this.songTempo === null) {
+      throw new Error('The song tempo is mandatory');
+    }
+
+    if (this.innerPlayer === null) {
+      throw new Error('The inner player was not provided.');
+    }
+
+    let player;
+    if (this.trainingMode) {
+      player = new YouTubePlayer(this.innerPlayer);
+    } else {
+      if (this.songDuration === null) {
+        throw new Error('The song duration is mandatory');
+      }
+      player = new PlayAlongPlayer(this.songDuration, this.innerPlayer);
+    }
+    return new Reproduction(
+      player,
+      this.requiresCountingIn,
+      this.songTempo || 0
+    );
+  }
+}

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

@@ -1,14 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const index_1 = require("./index");
-const react_2 = require("react");
-const utils_1 = require("./utils/utils");
-const OverlayCanvas = styled_components_1.default.canvas `
+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;
@@ -17,14 +11,14 @@ const OverlayCanvas = styled_components_1.default.canvas `
   color: cadetblue;
 `;
 const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
-    const canvasRef = (0, react_2.useRef)(null);
-    const zoomContextValue = (0, react_2.useContext)(index_1.ZoomContext);
+    const canvasRef = useRef(null);
+    const zoomContextValue = useContext(ZoomContext);
     let isSelectingRange = false;
-    let selectedRangeInPixels = (0, react_2.useMemo)(() => [], []);
+    let selectedRangeInPixels = useMemo(() => [], []);
     if (selectedRange.length === 2) {
         selectedRangeInPixels = [
-            (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[0]),
-            (0, utils_1.secondsToPixel)(zoomContextValue, selectedRange[1]),
+            secondsToPixel(zoomContextValue, selectedRange[0]),
+            secondsToPixel(zoomContextValue, selectedRange[1]),
         ];
     }
     let lastValidSelectedRangeInPixels = [];
@@ -45,7 +39,7 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     };
     const onCanvasDoubleClick = (e) => {
         const x0 = getMousePointerPixelPosition(e);
-        onChange((0, utils_1.pixelToSeconds)(zoomContextValue, x0));
+        onChange(pixelToSeconds(zoomContextValue, x0));
         selectedRangeInPixels = lastValidSelectedRangeInPixels;
     };
     const isPixelNearSelectedRange = (x0) => {
@@ -114,12 +108,12 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
         else {
             lastValidSelectedRangeInPixels = pixelRange;
             onRangeChange([
-                (0, utils_1.pixelToSeconds)(zoomContextValue, pixelRange[0]),
-                (0, utils_1.pixelToSeconds)(zoomContextValue, pixelRange[1]),
+                pixelToSeconds(zoomContextValue, pixelRange[0]),
+                pixelToSeconds(zoomContextValue, pixelRange[1]),
             ]);
         }
     };
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
@@ -128,6 +122,6 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
             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' }));
+    return (React.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);
+export default React.memo(RangeSelectorCanvas);

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/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/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/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();
+    }
+};