@ldelia/react-media 0.2.7 → 0.3.0

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

@@ -0,0 +1,50 @@
+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/{VaLueLineCanvas.tsx → TimelineValue/TimelineValue.tsx}

@@ -1,26 +1,11 @@
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-
-import { ZoomContext, ZoomContextType } from './index';
 import {
   getComputedElementWidth,
   numberToPxString,
   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;
-`;
+} from '../utils/utils';
+import { ZoomContext, ZoomContextType } from '../ZoomContext/ZoomContext';
 
 const PreValueLine = styled.span`
   position: absolute;
@@ -40,45 +25,18 @@ const PostValueLine = styled.span`
   height: 100%;
 `;
 
-const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
-  blockStartingTimes = [],
-  value,
-}) => {
-  const canvasRef = useRef(null);
+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 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 canvas: HTMLCanvasElement = canvasRef.current!;
 
@@ -107,26 +65,14 @@ const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
     const postValueLineWidth = canvas.width - postValueLinePosition;
     postValueLineElement.style.left = numberToPxString(postValueLinePosition);
     postValueLineElement.style.width = numberToPxString(postValueLineWidth);
-  }, [value, zoomContextValue]);
+  }, [canvasRef, 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]);
+  }, [showValueLine]);
 
   return (
     <>
-      <OverlayCanvas
-        ref={canvasRef}
-        className={'media-timeline-value-line-canvas'}
-      />
-
       <PreValueLine
         ref={preValueLineRef}
         className={'media-timeline-pre-value-line'}
@@ -139,4 +85,3 @@ const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
     </>
   );
 };
-export default VaLueLineCanvas;

package/src/components/timeline/ZoomContext/ZoomContext.js

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

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

package/src/components/timeline/constants.js

@@ -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 = [
+    [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

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

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

@@ -0,0 +1,28 @@
+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,4 +1,4 @@
-import { ZoomContextType } from '../index';
+import { ZoomContextType } from '../ZoomContext/ZoomContext';
 
 export const secondsToPixel = (
   zoomContextValue: ZoomContextType,
@@ -26,3 +26,24 @@ export const getComputedElementWidth = (element: HTMLElement): number => {
 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

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

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

@@ -1 +1,71 @@
-/// <reference types="react-scripts" />
+/// <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

@@ -0,0 +1,37 @@
+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

@@ -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/timeline.stories.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Timeline } from '../components/timeline';
+import styled from 'styled-components';
+import './timeline.stories.custom.css';
+const StyledTimeline = styled(Timeline) `
+  .media-timeline-value-line {
+    background-color: red;
+    width: 5px;
+  }
+`;
+export default {
+    title: 'Timeline',
+    component: Timeline,
+    argTypes: {
+        onChange: { action: 'changed' },
+        onRangeChange: { action: 'range changed' },
+    },
+};
+const Template = (args) => (React.createElement(StyledTimeline, Object.assign({}, args)));
+export const Default = Template.bind({});
+Default.args = {
+    duration: 305,
+    value: 301,
+    zoomLevel: 0,
+};
+export const WithSelectedRange = Template.bind({});
+WithSelectedRange.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    selectedRange: [20, 30],
+};
+export const WithCustomClassName = Template.bind({});
+WithCustomClassName.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    className: 'this-class-redefines-styles',
+};
+export const WithoutTimeBlocks = Template.bind({});
+WithoutTimeBlocks.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    withTimeBlocks: false,
+};
+export const Minimalist = Template.bind({});
+Minimalist.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    withTimeBlocks: false,
+    className: 'minimalist',
+};

package/storybook-static/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="164" version="1.1"><svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" fill="none" viewBox="0 0 164 164"><path fill="#FF4785" d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z"/><path fill="#fff" fill-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" clip-rule="evenodd"/></svg><style>@media (prefers-color-scheme:light){:root{filter:none}}</style></svg>

package/storybook-static/index.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>storybook - Storybook</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+
+    
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
+
+    <link href="./sb-manager/runtime.js" rel="modulepreload" />
+
+    
+    <link href="./sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/links-1/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-controls-2/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-actions-3/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-backgrounds-4/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-viewport-5/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-toolbars-6/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-measure-7/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-outline-8/manager-bundle.js" rel="modulepreload" />
+       
+
+    <style>
+      #storybook-root[hidden] {
+        display: none !important;
+      }
+    </style>
+
+    
+  </head>
+  <body>
+    <div id="root"></div>
+
+    
+    <script>
+      
+        
+          window['FEATURES'] = {
+  "argTypeTargetsV7": true,
+  "legacyDecoratorFileOrder": false,
+  "disallowImplicitActionsInRenderV8": true
+};
+        
+      
+        
+          window['REFS'] = {};
+        
+      
+        
+          window['LOGLEVEL'] = "info";
+        
+      
+        
+          window['DOCS_OPTIONS'] = {
+  "defaultName": "Docs",
+  "autodocs": "tag"
+};
+        
+      
+        
+          window['CONFIG_TYPE'] = "PRODUCTION";
+        
+      
+        
+      
+        
+      
+        
+          window['TAGS_OPTIONS'] = {
+  "dev-only": {
+    "excludeFromDocsStories": true
+  },
+  "docs-only": {
+    "excludeFromSidebar": true
+  },
+  "test-only": {
+    "excludeFromSidebar": true,
+    "excludeFromDocsStories": true
+  }
+};
+        
+      
+        
+          window['STORYBOOK_RENDERER'] = "react";
+        
+      
+        
+          window['STORYBOOK_BUILDER'] = "@storybook/builder-webpack5";
+        
+      
+        
+          window['STORYBOOK_FRAMEWORK'] = "@storybook/react-webpack5";
+        
+      
+    </script>
+    
+
+    <script type="module">
+      import './sb-manager/globals-runtime.js';
+      
+      
+        import './sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js';
+      
+        import './sb-addons/links-1/manager-bundle.js';
+      
+        import './sb-addons/essentials-controls-2/manager-bundle.js';
+      
+        import './sb-addons/essentials-actions-3/manager-bundle.js';
+      
+        import './sb-addons/essentials-backgrounds-4/manager-bundle.js';
+      
+        import './sb-addons/essentials-viewport-5/manager-bundle.js';
+      
+        import './sb-addons/essentials-toolbars-6/manager-bundle.js';
+      
+        import './sb-addons/essentials-measure-7/manager-bundle.js';
+      
+        import './sb-addons/essentials-outline-8/manager-bundle.js';
+      
+      
+      import './sb-manager/runtime.js';
+    </script>
+
+    
+    <link href="./sb-preview/runtime.js" rel="prefetch" as="script" />
+    
+  </body>
+</html>

package/storybook-static/index.json

@@ -0,0 +1 @@
+{"v":5,"entries":{"timeline--default":{"type":"story","id":"timeline--default","name":"Default","title":"Timeline","importPath":"./src/stories/timeline.stories.tsx","componentPath":"./src/components/timeline","tags":["dev","test"]},"timeline--with-selected-range":{"type":"story","id":"timeline--with-selected-range","name":"With Selected Range","title":"Timeline","importPath":"./src/stories/timeline.stories.tsx","componentPath":"./src/components/timeline","tags":["dev","test"]},"timeline--with-custom-class-name":{"type":"story","id":"timeline--with-custom-class-name","name":"With Custom Class Name","title":"Timeline","importPath":"./src/stories/timeline.stories.tsx","componentPath":"./src/components/timeline","tags":["dev","test"]},"timeline--without-time-blocks":{"type":"story","id":"timeline--without-time-blocks","name":"Without Time Blocks","title":"Timeline","importPath":"./src/stories/timeline.stories.tsx","componentPath":"./src/components/timeline","tags":["dev","test"]},"timeline--minimalist":{"type":"story","id":"timeline--minimalist","name":"Minimalist","title":"Timeline","importPath":"./src/stories/timeline.stories.tsx","componentPath":"./src/components/timeline","tags":["dev","test"]}}}

package/storybook-static/project.json

@@ -0,0 +1 @@
+{"generatedAt":1721473900035,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{"babel-jest":"27.5.1","jest":"29.7.0","jest-resolve":"29.7.0","jest-watch-typeahead":"2.2.2","@testing-library/jest-dom":"6.4.6","@testing-library/react":"16.0.0","@testing-library/user-event":null,"@types/jest":"29.5.12"},"packageManager":{"type":"npm","version":"9.2.0"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"8.2.5","storybookVersionSpecifier":"^8.2.5","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"1.5.0"},"@storybook/addon-actions":{"version":"8.2.5"},"@storybook/addon-interactions":{"version":"8.2.5"},"@storybook/addon-knobs":{"version":"8.0.1"},"@storybook/addon-onboarding":{"version":"8.2.5"},"@storybook/blocks":{"version":"8.2.5"},"@storybook/node-logger":{"version":"8.2.5"},"@storybook/react":{"version":"8.2.5"},"@storybook/react-webpack5":{"version":"8.2.5"},"@storybook/test":{"version":"8.2.5"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.2.5"}},"addons":{"@storybook/addon-links":{"version":"8.2.5"},"@storybook/addon-essentials":{"version":"8.2.5"},"@storybook/preset-create-react-app":{"version":null}}}