@ldelia/react-media 0.4.2 → 0.4.3

package/src/components/timeline/README.md

@@ -1,111 +0,0 @@
-# Timeline
-
-<!-- STORY -->
-
-<hr>
-
-A component for displaying the duration of a media file (mp3, mp4, etc.) and the current reproduction position. It also allows selecting a range for reproduction looping purposes.
-
-## Installation
-
-### NPM
-
-```
-npm i @bit/ldelia.react-media.timeline
-```
-
-### YARN
-
-```
-yarn add @bit/ldelia.react-media.timeline
-```
-
-### BIT
-
-```
-bit import ldelia.react-media/timeline
-```
-
-## Import
-
-```js
-import Timeline from '@bit/ldelia.react-media.timeline';
-```
-
-## Usage
-
-```jsx
-<Timeline
-  duration={301}
-  value={15}
-  onChange={() => 'Do something'}
-  onRangeChange={() => 'Do something'}
-/>
-```
-
-##### Required props
-
-| Name       | Type     | Description                       |
-| ---------- | -------- | --------------------------------- |
-| `duration` | `number` | The media file duration           |
-| `value`    | `number` | The current reproduction position |
-
-##### Optional props
-
-| Name            | Type       | Default    | Description                                        |
-| --------------- | ---------- | ---------- | -------------------------------------------------- |
-| `onChange`      | `function` | `() => {}` | Fired when the user double-clicks on the timeline  |
-| `onRangeChange` | `function` | `() => {}` | Fired when the user select a range in the timeline |
-| `selectedRange` | `array`    | `[]`       | The current selected range                         |
-| `zoomLevel`     | `number`   | `0`        | `The current timeline zoom level`                  |
-
-## Customization
-
-#### Timeline widget
-
-```
-const StyledTimeline = styled(Timeline)`
-    background-color: green;
-`;
-```
-
-#### Value bar
-
-```
-const StyledTimeline = styled(Timeline)`
-  .media-timeline-value-line {
-    background-color: red;
-    width: 5px;
-  }
-`;
-```
-
-#### Tick-time labels
-
-```
-const StyledTimeline = styled(Timeline)`
-  .media-timeline-tick-time {
-    color: red;
-  }
-`;
-```
-
-#### Tick-time/Value bar container
-
-```
-const StyledTimeline = styled(Timeline)`
-  .media-timeline-value-line-canvas {
-    color: red;
-  }
-`;
-```
-
-#### Range selector
-
-```
-const StyledTimeline = styled(Timeline)`
-  .media-timeline-range-selector-canvas {
-    color: red;
-  }
-`;
-```

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

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