@ldelia/react-media 0.2.0

package/.bitmap

@@ -0,0 +1,48 @@
+/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
+
+{
+    "ldelia.react-media/timeline@1.0.8": {
+        "files": [
+            {
+                "relativePath": "src/components/timeline/README.md",
+                "test": false,
+                "name": "README.md"
+            },
+            {
+                "relativePath": "src/components/timeline/RangeSelectorCanvas.tsx",
+                "test": false,
+                "name": "RangeSelectorCanvas.tsx"
+            },
+            {
+                "relativePath": "src/components/timeline/TickTime.tsx",
+                "test": false,
+                "name": "TickTime.tsx"
+            },
+            {
+                "relativePath": "src/components/timeline/TickTimeCollectionDisplay.tsx",
+                "test": false,
+                "name": "TickTimeCollectionDisplay.tsx"
+            },
+            {
+                "relativePath": "src/components/timeline/VaLueLineCanvas.tsx",
+                "test": false,
+                "name": "VaLueLineCanvas.tsx"
+            },
+            {
+                "relativePath": "src/components/timeline/index.tsx",
+                "test": false,
+                "name": "index.tsx"
+            },
+            {
+                "relativePath": "src/components/timeline/utils/utils.ts",
+                "test": false,
+                "name": "utils.ts"
+            }
+        ],
+        "mainFile": "src/components/timeline/index.tsx",
+        "trackDir": "src/components/timeline",
+        "origin": "AUTHORED",
+        "exported": true
+    },
+    "version": "14.8.8"
+}

package/.eslintcache

@@ -0,0 +1 @@
+[{"/home/ldelia/Proyectos/react-media/src/components/timeline/index.tsx":"1","/home/ldelia/Proyectos/react-media/src/components/timeline/VaLueLineCanvas.tsx":"2","/home/ldelia/Proyectos/react-media/src/components/timeline/TickTimeCollectionDisplay.tsx":"3","/home/ldelia/Proyectos/react-media/src/components/timeline/RangeSelectorCanvas.tsx":"4","/home/ldelia/Proyectos/react-media/src/components/timeline/utils/utils.ts":"5","/home/ldelia/Proyectos/react-media/src/components/timeline/TickTime.tsx":"6","/home/ldelia/Proyectos/react-media/src/stories/timeline.stories.tsx":"7","/home/ldelia/Proyectos/react-media/src/components/timeline/constants.ts":"8"},{"size":4115,"mtime":1612815036821,"results":"9","hashOfConfig":"10"},{"size":3108,"mtime":1611772905837,"results":"11","hashOfConfig":"10"},{"size":1159,"mtime":1611772905837,"results":"12","hashOfConfig":"10"},{"size":6266,"mtime":1611772905837,"results":"13","hashOfConfig":"10"},{"size":404,"mtime":1611772905841,"results":"14","hashOfConfig":"10"},{"size":988,"mtime":1611772905837,"results":"15","hashOfConfig":"10"},{"size":860,"mtime":1611772905841,"results":"16","hashOfConfig":"10"},{"size":319,"mtime":1612814974971,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"v8ab83",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/ldelia/Proyectos/react-media/src/components/timeline/index.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/VaLueLineCanvas.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/TickTimeCollectionDisplay.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/RangeSelectorCanvas.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/utils/utils.ts",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/TickTime.tsx",[],"/home/ldelia/Proyectos/react-media/src/stories/timeline.stories.tsx",[],"/home/ldelia/Proyectos/react-media/src/components/timeline/constants.ts",[]]

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+build

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2
+}

package/.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+    "stories": [
+        "../src/**/*.stories.mdx",
+        "../src/**/*.stories.@(js|jsx|ts|tsx)"
+    ],
+    "addons": [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/preset-create-react-app"
+    ],
+    "framework": {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
+}

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,26 @@
+# React Media
+
+A React components collection for media-related features.
+
+## Available Components
+
+- Timeline ([Docs](./src/components/timeline/README.md))
+
+## In Progress
+
+- Audio/Video player
+
+## Storybook
+
+Launch the Storybook playground:
+
+##### `npm run storybook`
+
+Make sure storybook is already installed by running npx storybook@latest init
+
+## Test suite collection
+
+Launch the test suite collection:
+
+##### `npm test`
+ 

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@ldelia/react-media",
+  "version": "0.2.0",
+  "description": "A React components collection for media-related features.",
+  "private": false,
+  "keywords": [
+    "timeline",
+    "react"
+  ],
+  "author": "Lisandro Delia",
+  "license": "MIT",
+  "bugs": "https://github.com/ldelia/react-media/issues",
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1",
+    "styled-components": "^6.1.11",
+    "typescript": "^4.9.5",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
+    "eject": "react-scripts eject",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended",
+      "prettier"
+    ],
+    "plugins": ["prettier"],
+    "rules": {
+      "prettier/prettier": "error"
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-knobs": "^8.0.1",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-onboarding": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/node-logger": "^8.1.10",
+    "@storybook/preset-create-react-app": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^12.19.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^9.5.14",
+    "prettier": "^3.3.2",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.1.10",
+    "webpack": "^5.92.0"
+  }
+}

package/src/components/__tests__/timeline/timeline.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Timeline, { TimelineProps } from '../../timeline';
+
+describe('Timeline', () => {
+  let props: TimelineProps;
+
+  beforeEach(() => {
+    props = {
+      duration: 300,
+      value: 15,
+      onChange: jest.fn(),
+      onRangeChange: jest.fn(),
+      zoomLevel: 0,
+    };
+  });
+
+  describe('render()', () => {
+    it('renders a timeline', () => {
+      const rootElement = document.createElement('div');
+
+      const root = createRoot(rootElement);
+      root.render(<Timeline {...props} />);
+    });
+  });
+});

package/src/components/index.ts

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

package/src/components/timeline/README.md

@@ -0,0 +1,111 @@
+# 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.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ZoomContext, ZoomContextType } from './index';
+import { useContext, useEffect, useMemo, useRef } from 'react';
+import { pixelToSeconds, secondsToPixel } from './utils/utils';
+
+export interface RangeSelectorCanvasProps {
+  selectedRange: number[];
+  onChange: (value: number) => void;
+  onRangeChange: (value: number[]) => void;
+}
+
+const OverlayCanvas = styled.canvas`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: cadetblue;
+`;
+
+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/TickTime.tsx

@@ -0,0 +1,45 @@
+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/TickTimeCollectionDisplay.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import TickTime from './TickTime';
+import { ZoomContext } from './index';
+
+export interface TickTimeCollectionDisplayProps {
+  tickTimes: number[];
+}
+
+const TickTimeCollectionDisplayContainer = styled.div`
+  position: absolute;
+  display: flex;
+  align-self: flex-end;
+  height: 100%;
+`;
+
+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;