@ldelia/react-media 0.5.5 → 0.5.7

package/dist/components/timeline/RangeSelectorCanvas/RangeSelectorCanvas.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ZoomContext } from '../ZoomContext/ZoomContext';
 import { pixelToSeconds, secondsToPixel } from '../utils/utils';
@@ -9,11 +9,13 @@ const OverlayCanvas = styled.canvas `
   width: 100%;
   height: 100%;
   color: cadetblue;
+  cursor: pointer;
 `;
 const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     const canvasRef = useRef(null);
     const zoomContextValue = useContext(ZoomContext);
-    let isSelectingRange = false;
+    const [selection, setSelection] = useState({ start: null, end: null });
+    const [isDragging, setIsDragging] = useState(false);
     let selectedRangeInPixels = useMemo(() => [], []);
     if (selectedRange.length === 2) {
         selectedRangeInPixels = [
@@ -21,7 +23,6 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
             secondsToPixel(zoomContextValue, selectedRange[1]),
         ];
     }
-    let lastValidSelectedRangeInPixels = [];
     const getMousePointerPixelPosition = (e) => {
         const canvas = canvasRef.current;
         let rect = canvas.getBoundingClientRect();
@@ -37,81 +38,52 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
         context.fillRect(pixelX0, 0, pixelX1 - pixelX0, context.canvas.height);
         context.globalAlpha = 1.0;
     };
-    const onCanvasDoubleClick = (e) => {
-        const x0 = getMousePointerPixelPosition(e);
-        onChange(pixelToSeconds(zoomContextValue, x0));
-        selectedRangeInPixels = lastValidSelectedRangeInPixels;
-    };
-    const isPixelNearSelectedRange = (x0) => {
-        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) => {
-        const mouseCurrentPosition = getMousePointerPixelPosition(e);
-        if (!isPixelNearSelectedRange(mouseCurrentPosition)) {
-            // Keep track of the first position of the new range.
-            selectedRangeInPixels = [mouseCurrentPosition, mouseCurrentPosition];
-        }
-        isSelectingRange = true;
+    // Handle mouse down (start of selection)
+    const handleMouseDown = (event) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const pixel = getMousePointerPixelPosition(event);
+        const second = pixelToSeconds(zoomContextValue, pixel);
+        setSelection({ start: second, end: null });
+        setIsDragging(true);
     };
-    const onCanvasMouseMove = (e) => {
+    // Handle mouse up (end of selection or single click)
+    const handleMouseUp = (event) => {
         const canvas = 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;
+        if (!canvas)
+            return;
+        const pixel = getMousePointerPixelPosition(event);
+        const second = pixelToSeconds(zoomContextValue, pixel);
+        if (isDragging) {
+            setSelection(prevSelection => {
+                if (prevSelection.start === second) {
+                    onChange(second);
                 }
                 else {
-                    // The right side must be shrunk.
-                    selectedRangeInPixels[1] = mouseCurrentPosition;
+                    onRangeChange([prevSelection.start, second]);
                 }
-            }
-            context.clearRect(0, 0, canvas.width, canvas.height);
-            drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
+                return {
+                    start: prevSelection.start,
+                    end: second,
+                };
+            });
         }
+        setIsDragging(false);
     };
-    const onCanvasMouseUp = (e) => {
-        if (selectedRangeInPixels.length !== 2)
+    // Handle mouse move (for dragging)
+    const handleMouseMove = (event) => {
+        if (!isDragging)
             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]),
-            ]);
-        }
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const pixel = getMousePointerPixelPosition(event);
+        const second = pixelToSeconds(zoomContextValue, pixel);
+        setSelection(prevSelection => ({
+            start: prevSelection.start,
+            end: second,
+        }));
     };
     useEffect(() => {
         const canvas = canvasRef.current;
@@ -122,6 +94,6 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
             return;
         drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
     }, [selectedRangeInPixels]);
-    return (React.createElement(OverlayCanvas, { ref: canvasRef, onDoubleClick: onCanvasDoubleClick, onMouseDown: onCanvasMouseDown, onMouseMove: onCanvasMouseMove, onMouseUp: onCanvasMouseUp, className: 'media-timeline-range-selector-canvas' }));
+    return (React.createElement(OverlayCanvas, { ref: canvasRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, className: 'media-timeline-range-selector-canvas' }));
 };
 export default React.memo(RangeSelectorCanvas);

package/dist/components/timeline/TimelineMarkers/TimelineMarkers.js

@@ -21,6 +21,6 @@ const MarkerInner = styled.div `
 `;
 export const TimelineMarkers = ({ markers }) => {
     const zoomContextValue = useContext(ZoomContext);
-    return (React.createElement(React.Fragment, null, markers.map((marker, index) => (React.createElement(MarkerContainer, { key: index, style: { left: secondsToPixel(zoomContextValue, marker) } },
+    return (React.createElement(React.Fragment, null, markers.map((marker, index) => (React.createElement(MarkerContainer, { key: index, style: { left: secondsToPixel(zoomContextValue, marker) }, className: 'media-timeline-marker' },
         React.createElement(MarkerInner, null))))));
 };

package/dist/components/timeline/TimelineValue/TimelineValue.js

@@ -30,7 +30,7 @@ export const TimelineValue = ({ canvasRef, value }) => {
         const postValueLineElement = postValueLineRef.current;
         const valueLineWidth = getComputedElementWidth(valueLineElement);
         const linePosition = secondsToPixel(zoomContextValue, value);
-        const valueLinePositionBeginningConsideringWidth = linePosition - valueLineWidth / 2;
+        const valueLinePositionBeginningConsideringWidth = Math.max(linePosition - valueLineWidth / 2, 0);
         // configure preValueLineElement
         preValueLineElement.style.width = numberToPxString(valueLinePositionBeginningConsideringWidth);
         // configure valueLineElement

package/dist/stories/timeline.stories.js

@@ -51,6 +51,7 @@ Minimalist.args = {
     zoomLevel: 0,
     withTimeBlocks: false,
     className: 'minimalist',
+    markers: [],
 };
 export const WithSelectedRangeAndMarkers = Template.bind({});
 WithSelectedRangeAndMarkers.args = {

package/package.json

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