@ldelia/react-media 0.6.2 → 0.6.3

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

@@ -3,13 +3,14 @@ import styled from 'styled-components';
 import { ZoomContext } from '../ZoomContext/ZoomContext';
 import { pixelToSeconds, secondsToPixel } from '../utils/utils';
 const OverlayCanvas = styled.canvas `
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    color: cadetblue;
-    cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: cadetblue;
+  cursor: pointer;
+  z-index: 2; // Ensure this canvas is on top of the TimeLineValue, otherwise we won't be able to change the range until the current TimelineValue position
 `;
 var DragMode;
 (function (DragMode) {
@@ -22,7 +23,10 @@ const RESIZE_HANDLE_WIDTH = 10; // Width in pixels for the resize handle detecti
 const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     const canvasRef = useRef(null);
     const zoomContextValue = useContext(ZoomContext);
-    const [selection, setSelection] = useState({ start: null, end: null });
+    const [selection, setSelection] = useState({
+        start: null,
+        end: null,
+    });
     const [dragMode, setDragMode] = useState(DragMode.NONE);
     const [cursorStyle, setCursorStyle] = useState('pointer');
     const getMousePointerPixelPosition = (e) => {
@@ -112,12 +116,13 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
                 });
             }
         }
-        else if (dragMode === DragMode.RESIZE_START || dragMode === DragMode.RESIZE_END) {
+        else if (dragMode === DragMode.RESIZE_START ||
+            dragMode === DragMode.RESIZE_END) {
             // Resizing completed
             if (selection.start !== null && selection.end !== null) {
                 const curatedSelection = [
                     Math.min(selection.start, selection.end),
-                    Math.max(selection.start, selection.end)
+                    Math.max(selection.start, selection.end),
                 ];
                 onRangeChange(curatedSelection);
             }
@@ -136,19 +141,19 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
         const pixel = getMousePointerPixelPosition(event);
         const seconds = pixelToSeconds(zoomContextValue, pixel);
         if (dragMode === DragMode.CREATE) {
-            setSelection(prevSelection => ({
+            setSelection((prevSelection) => ({
                 start: prevSelection.start,
                 end: seconds,
             }));
         }
         else if (dragMode === DragMode.RESIZE_START) {
-            setSelection(prevSelection => ({
+            setSelection((prevSelection) => ({
                 start: seconds,
                 end: prevSelection.end,
             }));
         }
         else if (dragMode === DragMode.RESIZE_END) {
-            setSelection(prevSelection => ({
+            setSelection((prevSelection) => ({
                 start: prevSelection.start,
                 end: seconds,
             }));
@@ -159,7 +164,8 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
         canvas.height = canvas.offsetHeight;
-        if (selectedRange.length !== 2 || zoomContextValue.timelineWrapperWidth === 0)
+        if (selectedRange.length !== 2 ||
+            zoomContextValue.timelineWrapperWidth === 0)
             return;
         drawRect(secondsToPixel(zoomContextValue, selectedRange[0]), secondsToPixel(zoomContextValue, selectedRange[1]));
     }, [selectedRange, zoomContextValue]);

package/package.json

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