@ldelia/react-media 0.2.0

package/src/components/timeline/VaLueLineCanvas.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ZoomContext, ZoomContextType } from './index';
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import { secondsToPixel } from './utils/utils';
+
+export interface VaLueLineCanvasProps {
+  blockStartingTimes: number[];
+  value: number;
+}
+
+const OverlayCanvas = styled.canvas`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #c9c9c9;
+`;
+const ValueLine = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #575757;
+`;
+
+const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
+  blockStartingTimes = [],
+  value,
+}) => {
+  const canvasRef = useRef(null);
+  const valueLineRef = useRef(null);
+  const zoomContextValue: ZoomContextType = useContext(ZoomContext);
+
+  const showBlocks = useCallback(
+    (canvas: HTMLCanvasElement) => {
+      const blockHeight = 20;
+      const context: CanvasRenderingContext2D = canvas.getContext('2d')!;
+
+      for (const blockStartingTime of blockStartingTimes) {
+        const x0Pixel = secondsToPixel(zoomContextValue, blockStartingTime);
+        const x1Pixel = secondsToPixel(
+          zoomContextValue,
+          blockStartingTime + zoomContextValue.blockOffset,
+        );
+
+        context.beginPath();
+        context.moveTo(x0Pixel, canvas.height);
+        context.lineTo(x0Pixel, canvas.height - blockHeight);
+        context.lineTo(x1Pixel, canvas.height - blockHeight);
+        context.lineTo(x1Pixel, canvas.height);
+
+        context.strokeStyle = window
+          .getComputedStyle(canvas)
+          .getPropertyValue('color');
+        context.stroke();
+      }
+    },
+    [blockStartingTimes, zoomContextValue],
+  );
+
+  const showValueLine = useCallback(() => {
+    const linePosition: number = secondsToPixel(zoomContextValue, value);
+
+    const valueLineElement: HTMLElement = valueLineRef.current!;
+    const elementWidthCSSProperty: string = window
+      .getComputedStyle(valueLineElement)
+      .getPropertyValue('width')
+      .replace(/[^-\d]/g, '');
+    const elementWidth: number = parseInt(elementWidthCSSProperty);
+    const linePositionAtValueLineMiddle: number =
+      linePosition - elementWidth / 2;
+    valueLineElement.style.left = linePositionAtValueLineMiddle + 'px';
+  }, [value, zoomContextValue]);
+
+  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;
+
+    showBlocks(canvas);
+    showValueLine();
+  }, [showBlocks, showValueLine]);
+
+  return (
+    <>
+      <OverlayCanvas
+        ref={canvasRef}
+        className={'media-timeline-value-line-canvas'}
+      />
+      <ValueLine
+        ref={valueLineRef}
+        className={'media-timeline-value-line'}
+      ></ValueLine>
+    </>
+  );
+};
+export default VaLueLineCanvas;

package/src/components/timeline/constants.ts

@@ -0,0 +1,13 @@
+//[blockOffset, pixelsInSecond] when zoomLevel === 0, each block has an offset of 20 seconds, and each second has a width of 7px.
+export const zoomLevelConfigurations: number[][] = [
+  [20, 7],
+  [10, 10],
+  [10, 15],
+  [5, 20],
+  [5, 25],
+  [2, 35],
+  [2, 50],
+  [1, 60],
+  [1, 75],
+  [1, 90],
+];

package/src/components/timeline/index.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useEffect, useMemo, useRef } from 'react';
+import TickTimeCollectionDisplay from './TickTimeCollectionDisplay';
+import VaLueLineCanvas from './VaLueLineCanvas';
+import RangeSelectorCanvas from './RangeSelectorCanvas';
+import { zoomLevelConfigurations } from './constants';
+
+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%;
+`;
+
+export interface TimelineProps {
+  duration: number;
+  value: number;
+  zoomLevel?: number; //0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+  className?: string;
+  selectedRange?: number[];
+  onChange?: (value: number) => void;
+  onRangeChange?: (value: number[]) => void;
+}
+
+export type ZoomContextType = {
+  blockOffset: number;
+  pixelsInSecond: number;
+};
+export const ZoomContext = React.createContext<ZoomContextType>({
+  blockOffset: 0,
+  pixelsInSecond: 0,
+});
+
+const Timeline: React.FC<TimelineProps> = ({
+  duration,
+  value,
+  zoomLevel = 0,
+  selectedRange = [],
+  onChange = () => {},
+  onRangeChange = () => {},
+  className = '',
+}) => {
+  const timeLineContainerRef = useRef(null);
+
+  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.');
+  }
+
+  const zoomParams = useMemo(() => {
+    return {
+      blockOffset: zoomLevelConfigurations[zoomLevelValue][0],
+      pixelsInSecond: zoomLevelConfigurations[zoomLevelValue][1],
+    };
+  }, [zoomLevelValue]);
+
+  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,
+    );
+  }
+
+  useEffect(() => {
+    const timeLineWrapper: HTMLElement = timeLineContainerRef.current!;
+    const scrollPosition: number = value * zoomParams.pixelsInSecond - 300;
+    timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
+  }, [value, zoomParams]);
+
+  return (
+    <TimelineContainer ref={timeLineContainerRef} className={className}>
+      <TimelineWrapper
+        style={{ width: duration * zoomParams.pixelsInSecond + 'px' }}
+      >
+        <ZoomContext.Provider value={zoomParams}>
+          <VaLueLineCanvas
+            blockStartingTimes={blockStartingTimes}
+            value={value}
+          />
+          <RangeSelectorCanvas
+            selectedRange={selectedRange}
+            onChange={onChange}
+            onRangeChange={onRangeChange}
+          />
+          <TickTimeCollectionDisplay tickTimes={blockStartingTimes} />
+        </ZoomContext.Provider>
+      </TimelineWrapper>
+    </TimelineContainer>
+  );
+};
+
+export default Timeline;

package/src/components/timeline/utils/utils.ts

@@ -0,0 +1,16 @@
+import { ZoomContextType } from '../index';
+
+export const secondsToPixel = (
+  zoomContextValue: ZoomContextType,
+  seconds: number,
+) => {
+  return zoomContextValue.pixelsInSecond * seconds;
+};
+
+export const pixelToSeconds = (
+  zoomContextValue: ZoomContextType,
+  pixel: number,
+) => {
+  const seconds = pixel / zoomContextValue.pixelsInSecond;
+  return Math.round((seconds + Number.EPSILON) * 100) / 100;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/modules.d.ts

@@ -0,0 +1 @@
+declare module '*.md';

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/src/stories/Button.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' ',
+      )}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};