@ldelia/react-media 0.2.6 → 0.2.7

package/dist/components/timeline/Timeline.js

@@ -46,6 +46,9 @@ const TimelineContainer = styled_components_1.default.div `
 const TimelineWrapper = styled_components_1.default.div `
   position: absolute;
   height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 `;
 exports.ZoomContext = react_1.default.createContext({
     blockOffset: 0,

package/dist/components/timeline/VaLueLineCanvas.js

@@ -1,12 +1,34 @@
 "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 });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const index_1 = require("./index");
-const react_2 = require("react");
 const utils_1 = require("./utils/utils");
 const OverlayCanvas = styled_components_1.default.canvas `
   position: absolute;
@@ -16,17 +38,28 @@ const OverlayCanvas = styled_components_1.default.canvas `
   height: 100%;
   color: #c9c9c9;
 `;
+const PreValueLine = styled_components_1.default.span `
+  position: absolute;
+  left: 0;
+  height: 100%;
+`;
 const ValueLine = styled_components_1.default.span `
   position: absolute;
   width: 1px;
   height: 100%;
   background-color: #575757;
 `;
+const PostValueLine = styled_components_1.default.span `
+  position: absolute;
+  height: 100%;
+`;
 const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
-    const canvasRef = (0, react_2.useRef)(null);
-    const valueLineRef = (0, react_2.useRef)(null);
-    const zoomContextValue = (0, react_2.useContext)(index_1.ZoomContext);
-    const showBlocks = (0, react_2.useCallback)((canvas) => {
+    const canvasRef = (0, react_1.useRef)(null);
+    const preValueLineRef = (0, react_1.useRef)(null);
+    const valueLineRef = (0, react_1.useRef)(null);
+    const postValueLineRef = (0, react_1.useRef)(null);
+    const zoomContextValue = (0, react_1.useContext)(index_1.ZoomContext);
+    const showBlocks = (0, react_1.useCallback)((canvas) => {
         const blockHeight = 20;
         const context = canvas.getContext('2d');
         for (const blockStartingTime of blockStartingTimes) {
@@ -43,18 +76,25 @@ const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
             context.stroke();
         }
     }, [blockStartingTimes, zoomContextValue]);
-    const showValueLine = (0, react_2.useCallback)(() => {
-        const linePosition = (0, utils_1.secondsToPixel)(zoomContextValue, value);
+    const showValueLine = (0, react_1.useCallback)(() => {
+        const canvas = canvasRef.current;
+        const preValueLineElement = preValueLineRef.current;
         const valueLineElement = valueLineRef.current;
-        const elementWidthCSSProperty = window
-            .getComputedStyle(valueLineElement)
-            .getPropertyValue('width')
-            .replace(/[^-\d]/g, '');
-        const elementWidth = parseInt(elementWidthCSSProperty);
-        const linePositionAtValueLineMiddle = linePosition - elementWidth / 2;
-        valueLineElement.style.left = linePositionAtValueLineMiddle + 'px';
+        const postValueLineElement = postValueLineRef.current;
+        const valueLineWidth = (0, utils_1.getComputedElementWidth)(valueLineElement);
+        const linePosition = (0, utils_1.secondsToPixel)(zoomContextValue, value);
+        const valueLinePositionBeginningConsideringWidth = linePosition - valueLineWidth / 2;
+        // configure preValueLineElement
+        preValueLineElement.style.width = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
+        // configure valueLineElement
+        valueLineElement.style.left = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
+        // configure postValueLineElement
+        const postValueLinePosition = valueLinePositionBeginningConsideringWidth + valueLineWidth;
+        const postValueLineWidth = canvas.width - postValueLinePosition;
+        postValueLineElement.style.left = (0, utils_1.numberToPxString)(postValueLinePosition);
+        postValueLineElement.style.width = (0, utils_1.numberToPxString)(postValueLineWidth);
     }, [value, zoomContextValue]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
@@ -64,6 +104,8 @@ const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
     }, [showBlocks, showValueLine]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(OverlayCanvas, { ref: canvasRef, className: 'media-timeline-value-line-canvas' }),
-        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' })));
+        react_1.default.createElement(PreValueLine, { ref: preValueLineRef, className: 'media-timeline-pre-value-line' }),
+        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' }),
+        react_1.default.createElement(PostValueLine, { ref: postValueLineRef, className: 'media-timeline-post-value-line' })));
 };
 exports.default = VaLueLineCanvas;

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

@@ -1,3 +1,5 @@
 import { ZoomContextType } from '../index';
 export declare const secondsToPixel: (zoomContextValue: ZoomContextType, seconds: number) => number;
 export declare const pixelToSeconds: (zoomContextValue: ZoomContextType, pixel: number) => number;
+export declare const getComputedElementWidth: (element: HTMLElement) => number;
+export declare const numberToPxString: (number: number) => string;

package/dist/components/timeline/utils/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pixelToSeconds = exports.secondsToPixel = void 0;
+exports.numberToPxString = exports.getComputedElementWidth = exports.pixelToSeconds = exports.secondsToPixel = void 0;
 const secondsToPixel = (zoomContextValue, seconds) => {
     return zoomContextValue.pixelsInSecond * seconds;
 };
@@ -10,3 +10,15 @@ const pixelToSeconds = (zoomContextValue, pixel) => {
     return Math.round((seconds + Number.EPSILON) * 100) / 100;
 };
 exports.pixelToSeconds = pixelToSeconds;
+const getComputedElementWidth = (element) => {
+    const elementWidthCSSProperty = window
+        .getComputedStyle(element)
+        .getPropertyValue('width')
+        .replace(/[^-\d]/g, '');
+    return parseInt(elementWidthCSSProperty);
+};
+exports.getComputedElementWidth = getComputedElementWidth;
+const numberToPxString = (number) => {
+    return `${number}px`;
+};
+exports.numberToPxString = numberToPxString;

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

@@ -1,9 +1,9 @@
 import { TimelineProps } from '../components/timeline';
-import { Meta } from '@storybook/react';
 import './timeline.stories.custom.css';
-declare const _default: Meta;
+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").ReactRenderer, TimelineProps>;
-export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
-export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
-export declare const WithOutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+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>;
+export declare const Minimalist: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;

package/dist/stories/timeline.stories.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.WithOutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
+exports.Minimalist = 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"));
@@ -41,12 +41,20 @@ exports.WithCustomClassName.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
-    className: 'this-class-redefines-values',
+    className: 'this-class-redefines-styles',
 };
-exports.WithOutTimeBlocks = Template.bind({});
-exports.WithOutTimeBlocks.args = {
+exports.WithoutTimeBlocks = Template.bind({});
+exports.WithoutTimeBlocks.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
     withTimeBlocks: false,
 };
+exports.Minimalist = Template.bind({});
+exports.Minimalist.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    withTimeBlocks: false,
+    className: 'minimalist',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [

package/src/components/timeline/Timeline.tsx

@@ -18,6 +18,9 @@ const TimelineContainer = styled.div`
 const TimelineWrapper = styled.div`
   position: absolute;
   height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 `;
 
 export interface TimelineProps {

package/src/components/timeline/VaLueLineCanvas.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import { ZoomContext, ZoomContextType } from './index';
-import { useCallback, useContext, useEffect, useRef } from 'react';
-import { secondsToPixel } from './utils/utils';
+import {
+  getComputedElementWidth,
+  numberToPxString,
+  secondsToPixel,
+} from './utils/utils';
 
 export interface VaLueLineCanvasProps {
   blockStartingTimes: number[];
@@ -18,6 +21,13 @@ const OverlayCanvas = styled.canvas`
   height: 100%;
   color: #c9c9c9;
 `;
+
+const PreValueLine = styled.span`
+  position: absolute;
+  left: 0;
+  height: 100%;
+`;
+
 const ValueLine = styled.span`
   position: absolute;
   width: 1px;
@@ -25,12 +35,21 @@ const ValueLine = styled.span`
   background-color: #575757;
 `;
 
+const PostValueLine = styled.span`
+  position: absolute;
+  height: 100%;
+`;
+
 const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
   blockStartingTimes = [],
   value,
 }) => {
   const canvasRef = useRef(null);
+
+  const preValueLineRef = useRef(null);
   const valueLineRef = useRef(null);
+  const postValueLineRef = useRef(null);
+
   const zoomContextValue: ZoomContextType = useContext(ZoomContext);
 
   const showBlocks = useCallback(
@@ -61,17 +80,33 @@ const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
   );
 
   const showValueLine = useCallback(() => {
-    const linePosition: number = secondsToPixel(zoomContextValue, value);
+    const canvas: HTMLCanvasElement = canvasRef.current!;
 
+    const preValueLineElement: HTMLElement = preValueLineRef.current!;
     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';
+    const postValueLineElement: HTMLElement = postValueLineRef.current!;
+
+    const valueLineWidth: number = getComputedElementWidth(valueLineElement);
+    const linePosition: number = secondsToPixel(zoomContextValue, value);
+    const valueLinePositionBeginningConsideringWidth: number =
+      linePosition - valueLineWidth / 2;
+
+    // configure preValueLineElement
+    preValueLineElement.style.width = numberToPxString(
+      valueLinePositionBeginningConsideringWidth,
+    );
+
+    // configure valueLineElement
+    valueLineElement.style.left = numberToPxString(
+      valueLinePositionBeginningConsideringWidth,
+    );
+
+    // configure postValueLineElement
+    const postValueLinePosition =
+      valueLinePositionBeginningConsideringWidth + valueLineWidth;
+    const postValueLineWidth = canvas.width - postValueLinePosition;
+    postValueLineElement.style.left = numberToPxString(postValueLinePosition);
+    postValueLineElement.style.width = numberToPxString(postValueLineWidth);
   }, [value, zoomContextValue]);
 
   useEffect(() => {
@@ -91,10 +126,16 @@ const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
         ref={canvasRef}
         className={'media-timeline-value-line-canvas'}
       />
-      <ValueLine
-        ref={valueLineRef}
-        className={'media-timeline-value-line'}
-      ></ValueLine>
+
+      <PreValueLine
+        ref={preValueLineRef}
+        className={'media-timeline-pre-value-line'}
+      />
+      <ValueLine ref={valueLineRef} className={'media-timeline-value-line'} />
+      <PostValueLine
+        ref={postValueLineRef}
+        className={'media-timeline-post-value-line'}
+      />
     </>
   );
 };

package/src/components/timeline/utils/utils.ts

@@ -14,3 +14,15 @@ 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`;
+};

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',
+};