@ldelia/react-media 0.2.3 → 0.2.5

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/timeline/Timeline.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './Timeline.css';
+export interface TimelineProps {
+    duration: number;
+    value: number;
+    zoomLevel?: number;
+    className?: string;
+    selectedRange?: number[];
+    withTimeBlocks?: boolean;
+    onChange?: (value: number) => void;
+    onRangeChange?: (value: number[]) => void;
+}
+export type ZoomContextType = {
+    blockOffset: number;
+    pixelsInSecond: number;
+};
+export declare const ZoomContext: React.Context<ZoomContextType>;
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/timeline/Timeline.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = exports.ZoomContext = void 0;
+const react_1 = __importStar(require("react"));
+const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
+const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
+const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
+const constants_1 = require("./constants");
+require("./Timeline.css");
+exports.ZoomContext = react_1.default.createContext({
+    blockOffset: 0,
+    pixelsInSecond: 0,
+});
+const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
+    const timeLineContainerRef = (0, react_1.useRef)(null);
+    let zoomLevelValue = zoomLevel ? zoomLevel : 0;
+    if (zoomLevelValue < 0 || zoomLevelValue >= constants_1.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 = (0, react_1.useMemo)(() => {
+        return {
+            blockOffset: constants_1.zoomLevelConfigurations[zoomLevelValue][0],
+            pixelsInSecond: constants_1.zoomLevelConfigurations[zoomLevelValue][1],
+        };
+    }, [zoomLevelValue]);
+    let blockStartingTimes = [0];
+    const blockCounts = Math.ceil(duration / zoomParams.blockOffset);
+    for (let i = 1; i < blockCounts; i++) {
+        blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
+            zoomParams.blockOffset);
+    }
+    (0, react_1.useEffect)(() => {
+        const timeLineWrapper = timeLineContainerRef.current;
+        const scrollPosition = value * zoomParams.pixelsInSecond - 300;
+        timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
+    }, [value, zoomParams]);
+    return (react_1.default.createElement("div", { ref: timeLineContainerRef, className: `timeline-container ${className}` },
+        react_1.default.createElement("div", { className: 'timeline-wrapper', style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
+            react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
+                react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: withTimeBlocks ? blockStartingTimes : [], value: value }),
+                react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
+                withTimeBlocks && (react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes }))))));
+};
+exports.Timeline = Timeline;

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

@@ -1,16 +1 @@
-import React from 'react';
-export interface TimelineProps {
-    duration: number;
-    value: number;
-    zoomLevel?: number;
-    className?: string;
-    selectedRange?: number[];
-    onChange?: (value: number) => void;
-    onRangeChange?: (value: number[]) => void;
-}
-export type ZoomContextType = {
-    blockOffset: number;
-    pixelsInSecond: number;
-};
-export declare const ZoomContext: React.Context<ZoomContextType>;
-export declare const Timeline: React.FC<TimelineProps>;
+export * from './Timeline';

package/dist/components/timeline/index.js

@@ -1,77 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
-const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
-const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
-const constants_1 = require("./constants");
-const TimelineContainer = styled_components_1.default.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_components_1.default.div `
-  position: absolute;
-  height: 100%;
-`;
-exports.ZoomContext = react_1.default.createContext({
-    blockOffset: 0,
-    pixelsInSecond: 0,
-});
-const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
-    const timeLineContainerRef = (0, react_2.useRef)(null);
-    let zoomLevelValue = zoomLevel ? zoomLevel : 0;
-    if (zoomLevelValue < 0 || zoomLevelValue >= constants_1.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.');
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-    if (selectedRange.length === 2 &&
-        !(0 <= selectedRange[0] &&
-            selectedRange[0] < selectedRange[1] &&
-            selectedRange[1] <= duration)) {
-        selectedRange = [];
-        console.warn('The selected range is inconsistent.');
-    }
-    const zoomParams = (0, react_2.useMemo)(() => {
-        return {
-            blockOffset: constants_1.zoomLevelConfigurations[zoomLevelValue][0],
-            pixelsInSecond: constants_1.zoomLevelConfigurations[zoomLevelValue][1],
-        };
-    }, [zoomLevelValue]);
-    let blockStartingTimes = [0];
-    const blockCounts = Math.ceil(duration / zoomParams.blockOffset);
-    for (let i = 1; i < blockCounts; i++) {
-        blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
-            zoomParams.blockOffset);
-    }
-    (0, react_2.useEffect)(() => {
-        const timeLineWrapper = timeLineContainerRef.current;
-        const scrollPosition = value * zoomParams.pixelsInSecond - 300;
-        timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
-    }, [value, zoomParams]);
-    return (react_1.default.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
-        react_1.default.createElement(TimelineWrapper, { style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
-            react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
-                react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: blockStartingTimes, value: value }),
-                react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
-                react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes })))));
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-exports.Timeline = Timeline;
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Timeline"), exports);

package/dist/stories/timeline.stories.d.ts

@@ -1,5 +1,8 @@
 import { TimelineProps } from '../components/timeline';
+import './timeline.stories.custom.css';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
 export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const WithOutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithSelectedRange = exports.Default = void 0;
+exports.WithOutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const timeline_1 = require("../components/timeline");
 const styled_components_1 = __importDefault(require("styled-components"));
+require("./timeline.stories.custom.css");
 const StyledTimeline = (0, styled_components_1.default)(timeline_1.Timeline) `
   .media-timeline-value-line {
     background-color: red;
@@ -35,3 +36,17 @@ exports.WithSelectedRange.args = {
     zoomLevel: 0,
     selectedRange: [20, 30],
 };
+exports.WithCustomClassName = Template.bind({});
+exports.WithCustomClassName.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    className: 'this-class-redefines-values',
+};
+exports.WithOutTimeBlocks = Template.bind({});
+exports.WithOutTimeBlocks.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    withTimeBlocks: false,
+};

package/package.json

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