@ldelia/react-media 0.2.2 → 0.2.4

package/README.md

@@ -23,4 +23,14 @@ Make sure storybook is already installed by running npx storybook@latest init
 Launch the test suite collection:
 
 ##### `npm test`
- 
+
+
+## Publishing on npm
+
+Build the project
+
+##### `npm run build`
+
+Publish the project
+
+##### `npm publish`

package/dist/components/__tests__/timeline/timeline.test.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const client_1 = require("react-dom/client");
-const timeline_1 = __importDefault(require("../../timeline"));
+const timeline_1 = require("../../timeline");
 describe('Timeline', () => {
     let props;
     beforeEach(() => {
@@ -21,7 +21,7 @@ describe('Timeline', () => {
         it('renders a timeline', () => {
             const rootElement = document.createElement('div');
             const root = (0, client_1.createRoot)(rootElement);
-            root.render(react_1.default.createElement(timeline_1.default, Object.assign({}, props)));
+            root.render(react_1.default.createElement(timeline_1.Timeline, Object.assign({}, props)));
         });
     });
 });

package/dist/components/timeline/index.d.ts

@@ -13,5 +13,4 @@ export type ZoomContextType = {
     pixelsInSecond: number;
 };
 export declare const ZoomContext: React.Context<ZoomContextType>;
-declare const Timeline: React.FC<TimelineProps>;
-export default Timeline;
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/timeline/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomContext = void 0;
+exports.Timeline = exports.ZoomContext = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_2 = require("react");
@@ -74,4 +74,4 @@ const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], onChange
                 react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
                 react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes })))));
 };
-exports.default = Timeline;
+exports.Timeline = Timeline;

package/dist/stories/timeline.stories.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WithSelectedRange = exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
-const timeline_1 = __importDefault(require("../components/timeline"));
+const timeline_1 = require("../components/timeline");
 const styled_components_1 = __importDefault(require("styled-components"));
-const StyledTimeline = (0, styled_components_1.default)(timeline_1.default) `
+const StyledTimeline = (0, styled_components_1.default)(timeline_1.Timeline) `
   .media-timeline-value-line {
     background-color: red;
     width: 5px;
@@ -15,7 +15,7 @@ const StyledTimeline = (0, styled_components_1.default)(timeline_1.default) `
 `;
 exports.default = {
     title: 'Timeline',
-    component: timeline_1.default,
+    component: timeline_1.Timeline,
     argTypes: {
         onChange: { action: 'changed' },
         onRangeChange: { action: 'range changed' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -36,7 +36,9 @@
       "plugin:storybook/recommended",
       "prettier"
     ],
-    "plugins": ["prettier"],
+    "plugins": [
+      "prettier"
+    ],
     "rules": {
       "prettier/prettier": "error"
     }

package/src/components/timeline/Timeline.css

@@ -0,0 +1,15 @@
+.timeline-container {
+    background-color: #f0f0f0;
+    border: 1px solid #c9c9c9;
+    height: 80px;
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    position: relative;
+    display: flex;
+}
+
+.timeline-wrapper {
+    position: absolute;
+    height: 100%;
+}

package/src/components/timeline/Timeline.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import TickTimeCollectionDisplay from './TickTimeCollectionDisplay';
+import VaLueLineCanvas from './VaLueLineCanvas';
+import RangeSelectorCanvas from './RangeSelectorCanvas';
+import { zoomLevelConfigurations } from './constants';
+
+import './Timeline.css';
+
+export interface TimelineProps {
+  duration: number; // duration in seconds
+  value: number; // value in seconds
+  zoomLevel?: number; //0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+  className?: string;
+  selectedRange?: number[];
+  withTimeBlocks?: boolean;
+  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,
+});
+
+export const Timeline: React.FC<TimelineProps> = ({
+  duration,
+  value,
+  zoomLevel = 0,
+  selectedRange = [],
+  withTimeBlocks = true,
+  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 (
+    <div
+      ref={timeLineContainerRef}
+      className={`timeline-container ${className}`}
+    >
+      <div
+        className={'timeline-wrapper'}
+        style={{ width: duration * zoomParams.pixelsInSecond + 'px' }}
+      >
+        <ZoomContext.Provider value={zoomParams}>
+          <VaLueLineCanvas
+            blockStartingTimes={withTimeBlocks ? blockStartingTimes : []}
+            value={value}
+          />
+          <RangeSelectorCanvas
+            selectedRange={selectedRange}
+            onChange={onChange}
+            onRangeChange={onRangeChange}
+          />
+          {withTimeBlocks && (
+            <TickTimeCollectionDisplay tickTimes={blockStartingTimes} />
+          )}
+        </ZoomContext.Provider>
+      </div>
+    </div>
+  );
+};

package/src/components/timeline/index.tsx

@@ -1,123 +1 @@
-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,
-});
-
-export 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 * from './Timeline';

package/src/stories/timeline.stories.custom.css

@@ -0,0 +1,3 @@
+#storybook-root .this-class-redefines-values {
+    background-color: transparent;
+}

package/src/stories/timeline.stories.tsx

@@ -4,6 +4,8 @@ import { Timeline, TimelineProps } from '../components/timeline';
 import { Meta, StoryFn } from '@storybook/react';
 import styled from 'styled-components';
 
+import './timeline.stories.custom.css';
+
 const StyledTimeline = styled(Timeline)`
   .media-timeline-value-line {
     background-color: red;
@@ -29,6 +31,7 @@ Default.args = {
   value: 301,
   zoomLevel: 0,
 };
+
 export const WithSelectedRange = Template.bind({});
 WithSelectedRange.args = {
   duration: 305,
@@ -36,3 +39,19 @@ WithSelectedRange.args = {
   zoomLevel: 0,
   selectedRange: [20, 30],
 };
+
+export const WithCustomClassName = Template.bind({});
+WithCustomClassName.args = {
+  duration: 305,
+  value: 31,
+  zoomLevel: 0,
+  className: 'this-class-redefines-values',
+};
+
+export const WithOutTimeBlocks = Template.bind({});
+WithOutTimeBlocks.args = {
+  duration: 305,
+  value: 31,
+  zoomLevel: 0,
+  withTimeBlocks: false,
+};