@ldelia/react-media 0.4.1 → 0.4.3

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

package/src/components/timeline/TimelineValue/TimelineValue.js

@@ -1,50 +0,0 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { getComputedElementWidth, numberToPxString, secondsToPixel, } from '../utils/utils';
-import { ZoomContext } 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%;
-`;
-export const TimelineValue = ({ canvasRef, value }) => {
-    const preValueLineRef = useRef(null);
-    const valueLineRef = useRef(null);
-    const postValueLineRef = useRef(null);
-    const zoomContextValue = useContext(ZoomContext);
-    const showValueLine = useCallback(() => {
-        const canvas = canvasRef.current;
-        const preValueLineElement = preValueLineRef.current;
-        const valueLineElement = valueLineRef.current;
-        const postValueLineElement = postValueLineRef.current;
-        const valueLineWidth = getComputedElementWidth(valueLineElement);
-        const linePosition = secondsToPixel(zoomContextValue, value);
-        const valueLinePositionBeginningConsideringWidth = 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 (React.createElement(React.Fragment, null,
-        React.createElement(PreValueLine, { ref: preValueLineRef, className: 'media-timeline-pre-value-line' }),
-        React.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' }),
-        React.createElement(PostValueLine, { ref: postValueLineRef, className: 'media-timeline-post-value-line' })));
-};

package/src/components/timeline/TimelineValue/TimelineValue.tsx

@@ -1,87 +0,0 @@
-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.js

@@ -1,2 +0,0 @@
-import React from 'react';
-export const ZoomContext = React.createContext(null);

package/src/components/timeline/ZoomContext/ZoomContext.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-
-export type ZoomContextType = {
-  blockOffset: number;
-  pixelsInSecond: number;
-  timelineWrapperWidth: number;
-};
-export const ZoomContext = React.createContext<ZoomContextType>(
-  null as unknown as ZoomContextType,
-);

package/src/components/timeline/constants.js

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

package/src/components/timeline/constants.ts

@@ -1,13 +0,0 @@
-//[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.js

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

package/src/components/timeline/index.tsx

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

package/src/components/timeline/utils/utils.js

@@ -1,28 +0,0 @@
-export const secondsToPixel = (zoomContextValue, seconds) => {
-    return zoomContextValue.pixelsInSecond * seconds;
-};
-export const pixelToSeconds = (zoomContextValue, pixel) => {
-    const seconds = pixel / zoomContextValue.pixelsInSecond;
-    return Math.round((seconds + Number.EPSILON) * 100) / 100;
-};
-export const getComputedElementWidth = (element) => {
-    const elementWidthCSSProperty = window
-        .getComputedStyle(element)
-        .getPropertyValue('width')
-        .replace(/[^-\d]/g, '');
-    return parseInt(elementWidthCSSProperty);
-};
-export const numberToPxString = (number) => {
-    return `${number}px`;
-};
-export const getTimelineWrapperWidth = (timeLineContainerWidth, zoomLevel) => {
-    return timeLineContainerWidth * Math.pow(1.25, zoomLevel) - 2; //-2px to account for the border
-};
-export 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);
-}

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

@@ -1,49 +0,0 @@
-import { ZoomContextType } from '../ZoomContext/ZoomContext';
-
-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;
-};
-
-export const getComputedElementWidth = (element: HTMLElement): number => {
-  const elementWidthCSSProperty: string = window
-    .getComputedStyle(element)
-    .getPropertyValue('width')
-    .replace(/[^-\d]/g, '');
-  return parseInt(elementWidthCSSProperty);
-};
-
-export const numberToPxString = (number: number): string => {
-  return `${number}px`;
-};
-
-export const getTimelineWrapperWidth = (
-  timeLineContainerWidth: number,
-  zoomLevel: number,
-): number => {
-  return timeLineContainerWidth * Math.pow(1.25, zoomLevel) - 2; //-2px to account for the border
-};
-
-export function getBlockOffsetForZoomLevel(
-  zoomLevel: number,
-  duration: number,
-  timelineWrapperWidth: number,
-): number {
-  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);
-}

package/src/index.js

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

package/src/index.ts

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

package/src/modules.d.ts

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

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

@@ -1,71 +0,0 @@
-/// <reference types="node" />
-/// <reference types="react" />
-/// <reference types="react-dom" />
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    readonly NODE_ENV: 'development' | 'production' | 'test';
-    readonly PUBLIC_URL: string;
-  }
-}
-
-declare module '*.avif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-    const src: string;
-    export default src;
-}
-
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}

package/src/react-docgen-types.d.ts

@@ -1,37 +0,0 @@
-import 'react';
-
-declare module 'react' {
-  interface FunctionComponent<P = {}> {
-    __docgenInfo?: {
-      description?: string;
-      displayName?: string;
-      props?: {
-        [key: string]: {
-          description?: string;
-          required?: boolean;
-          tsType?: {
-            name: string;
-            elements?: { name: string }[]; // Handle array types
-            raw?: string;
-            type?: string; // Handle various types
-          };
-          defaultValue?: {
-            value: string;
-            computed: boolean;
-          };
-        };
-      };
-      methods?: {
-        name: string;
-        type?: string; // Handle method types
-        signature?: {
-          arguments: {
-            type: { name: string };
-            name: string;
-          }[];
-          return: { name: string };
-        }; // Handle method signatures
-      }[];
-    };
-  }
-}

package/src/setupTests.js

@@ -1,5 +0,0 @@
-// 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/setupTests.ts

@@ -1,5 +0,0 @@
-// 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';