@ldelia/react-media 0.2.6 → 0.2.8

package/dist/components/timeline/VaLueLineCanvas.js

@@ -1,12 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const index_1 = require("./index");
-const react_2 = require("react");
 const utils_1 = require("./utils/utils");
 const OverlayCanvas = styled_components_1.default.canvas `
   position: absolute;
@@ -16,17 +38,28 @@ const OverlayCanvas = styled_components_1.default.canvas `
   height: 100%;
   color: #c9c9c9;
 `;
+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 VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
-    const canvasRef = (0, react_2.useRef)(null);
-    const valueLineRef = (0, react_2.useRef)(null);
-    const zoomContextValue = (0, react_2.useContext)(index_1.ZoomContext);
-    const showBlocks = (0, react_2.useCallback)((canvas) => {
+    const canvasRef = (0, react_1.useRef)(null);
+    const preValueLineRef = (0, react_1.useRef)(null);
+    const valueLineRef = (0, react_1.useRef)(null);
+    const postValueLineRef = (0, react_1.useRef)(null);
+    const zoomContextValue = (0, react_1.useContext)(index_1.ZoomContext);
+    const showBlocks = (0, react_1.useCallback)((canvas) => {
         const blockHeight = 20;
         const context = canvas.getContext('2d');
         for (const blockStartingTime of blockStartingTimes) {
@@ -43,18 +76,25 @@ const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
             context.stroke();
         }
     }, [blockStartingTimes, zoomContextValue]);
-    const showValueLine = (0, react_2.useCallback)(() => {
-        const linePosition = (0, utils_1.secondsToPixel)(zoomContextValue, value);
+    const showValueLine = (0, react_1.useCallback)(() => {
+        const canvas = canvasRef.current;
+        const preValueLineElement = preValueLineRef.current;
         const valueLineElement = valueLineRef.current;
-        const elementWidthCSSProperty = window
-            .getComputedStyle(valueLineElement)
-            .getPropertyValue('width')
-            .replace(/[^-\d]/g, '');
-        const elementWidth = parseInt(elementWidthCSSProperty);
-        const linePositionAtValueLineMiddle = linePosition - elementWidth / 2;
-        valueLineElement.style.left = linePositionAtValueLineMiddle + 'px';
+        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);
     }, [value, zoomContextValue]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
@@ -64,6 +104,8 @@ const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
     }, [showBlocks, showValueLine]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(OverlayCanvas, { ref: canvasRef, className: 'media-timeline-value-line-canvas' }),
-        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' })));
+        react_1.default.createElement(PreValueLine, { ref: preValueLineRef, className: 'media-timeline-pre-value-line' }),
+        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' }),
+        react_1.default.createElement(PostValueLine, { ref: postValueLineRef, className: 'media-timeline-post-value-line' })));
 };
 exports.default = VaLueLineCanvas;

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,3 +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.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;
 };
@@ -10,3 +10,28 @@ const pixelToSeconds = (zoomContextValue, pixel) => {
     return Math.round((seconds + Number.EPSILON) * 100) / 100;
 };
 exports.pixelToSeconds = pixelToSeconds;
+const getComputedElementWidth = (element) => {
+    const elementWidthCSSProperty = window
+        .getComputedStyle(element)
+        .getPropertyValue('width')
+        .replace(/[^-\d]/g, '');
+    return parseInt(elementWidthCSSProperty);
+};
+exports.getComputedElementWidth = getComputedElementWidth;
+const numberToPxString = (number) => {
+    return `${number}px`;
+};
+exports.numberToPxString = numberToPxString;
+const getTimelineWrapperWidth = (timeLineContainerWidth, zoomLevel) => {
+    return timeLineContainerWidth * Math.pow(1.25, zoomLevel) - 2; //-2px to account for the border
+};
+exports.getTimelineWrapperWidth = getTimelineWrapperWidth;
+function getBlockOffsetForZoomLevel(zoomLevel, duration, timelineWrapperWidth) {
+    const offsets = [10, 5, 5, 5, 2, 2, 2, 2, 2, 1];
+    let optimalOffset = offsets[zoomLevel];
+    while ((duration / optimalOffset) * 40 > timelineWrapperWidth) {
+        optimalOffset = optimalOffset * 1.25;
+    }
+    return Math.ceil(optimalOffset);
+}
+exports.getBlockOffsetForZoomLevel = getBlockOffsetForZoomLevel;

package/dist/stories/timeline.stories.d.ts

@@ -1,9 +1,9 @@
 import { TimelineProps } from '../components/timeline';
-import { Meta } from '@storybook/react';
 import './timeline.stories.custom.css';
-declare const _default: Meta;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
-export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
-export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
-export declare const WithOutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const WithoutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const Minimalist: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithOutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
+exports.Minimalist = exports.WithoutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const timeline_1 = require("../components/timeline");
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -41,12 +41,20 @@ exports.WithCustomClassName.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
-    className: 'this-class-redefines-values',
+    className: 'this-class-redefines-styles',
 };
-exports.WithOutTimeBlocks = Template.bind({});
-exports.WithOutTimeBlocks.args = {
+exports.WithoutTimeBlocks = Template.bind({});
+exports.WithoutTimeBlocks.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
     withTimeBlocks: false,
 };
+exports.Minimalist = Template.bind({});
+exports.Minimalist.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    withTimeBlocks: false,
+    className: 'minimalist',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.2.6",
+  "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;
@@ -18,6 +24,10 @@ const TimelineContainer = styled.div`
 const TimelineWrapper = styled.div`
   position: absolute;
   height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
 `;
 
 export interface TimelineProps {
@@ -31,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,
@@ -50,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) {
@@ -79,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/TimelineValue/TimelineValue.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import {
+  getComputedElementWidth,
+  numberToPxString,
+  secondsToPixel,
+} from '../utils/utils';
+import { ZoomContext, ZoomContextType } from '../ZoomContext/ZoomContext';
+
+const PreValueLine = styled.span`
+  position: absolute;
+  left: 0;
+  height: 100%;
+`;
+
+const ValueLine = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #575757;
+`;
+
+const PostValueLine = styled.span`
+  position: absolute;
+  height: 100%;
+`;
+
+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 showValueLine = useCallback(() => {
+    const canvas: HTMLCanvasElement = canvasRef.current!;
+
+    const preValueLineElement: HTMLElement = preValueLineRef.current!;
+    const valueLineElement: HTMLElement = valueLineRef.current!;
+    const postValueLineElement: HTMLElement = postValueLineRef.current!;
+
+    const valueLineWidth: number = getComputedElementWidth(valueLineElement);
+    const linePosition: number = secondsToPixel(zoomContextValue, value);
+    const valueLinePositionBeginningConsideringWidth: number =
+      linePosition - valueLineWidth / 2;
+
+    // configure preValueLineElement
+    preValueLineElement.style.width = numberToPxString(
+      valueLinePositionBeginningConsideringWidth,
+    );
+
+    // configure valueLineElement
+    valueLineElement.style.left = numberToPxString(
+      valueLinePositionBeginningConsideringWidth,
+    );
+
+    // configure postValueLineElement
+    const postValueLinePosition =
+      valueLinePositionBeginningConsideringWidth + valueLineWidth;
+    const postValueLineWidth = canvas.width - postValueLinePosition;
+    postValueLineElement.style.left = numberToPxString(postValueLinePosition);
+    postValueLineElement.style.width = numberToPxString(postValueLineWidth);
+  }, [canvasRef, value, zoomContextValue]);
+
+  useEffect(() => {
+    showValueLine();
+  }, [showValueLine]);
+
+  return (
+    <>
+      <PreValueLine
+        ref={preValueLineRef}
+        className={'media-timeline-pre-value-line'}
+      />
+      <ValueLine ref={valueLineRef} className={'media-timeline-value-line'} />
+      <PostValueLine
+        ref={postValueLineRef}
+        className={'media-timeline-post-value-line'}
+      />
+    </>
+  );
+};

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,
+);