@ldelia/react-media 0.2.3 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.2.3",
+  "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,
+};