@ldelia/react-media 0.2.6 → 0.2.8

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,
@@ -14,3 +14,36 @@ export const pixelToSeconds = (
   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/stories/timeline.stories.custom.css

@@ -1,3 +1,29 @@
-#storybook-root .this-class-redefines-values {
+#storybook-root .this-class-redefines-styles {
     background-color: transparent;
 }
+
+#storybook-root .minimalist {
+    background-color: transparent;
+    border: 0;
+}
+
+#storybook-root .minimalist > canvas {
+    color: transparent;
+}
+
+#storybook-root .minimalist > div > .media-timeline-pre-value-line {
+    height: 4px;
+    background-color: greenyellow;
+}
+
+#storybook-root .minimalist > div > .media-timeline-value-line {
+    height: 10px;
+    width: 10px;
+    background-color: greenyellow;
+    border-radius: 10px;
+}
+
+#storybook-root .minimalist > div > .media-timeline-post-value-line {
+    height: 4px;
+    background-color: rgba(10, 10, 10, 0.24);
+}

package/src/stories/timeline.stories.tsx

@@ -45,13 +45,22 @@ WithCustomClassName.args = {
   duration: 305,
   value: 31,
   zoomLevel: 0,
-  className: 'this-class-redefines-values',
+  className: 'this-class-redefines-styles',
 };
 
-export const WithOutTimeBlocks = Template.bind({});
-WithOutTimeBlocks.args = {
+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/src/components/timeline/VaLueLineCanvas.tsx

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