@ldelia/react-media 0.5.7 → 0.5.8

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ZoomContext } from '../ZoomContext/ZoomContext';
 import { pixelToSeconds, secondsToPixel } from '../utils/utils';
@@ -16,13 +16,6 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     const zoomContextValue = useContext(ZoomContext);
     const [selection, setSelection] = useState({ start: null, end: null });
     const [isDragging, setIsDragging] = useState(false);
-    let selectedRangeInPixels = useMemo(() => [], []);
-    if (selectedRange.length === 2) {
-        selectedRangeInPixels = [
-            secondsToPixel(zoomContextValue, selectedRange[0]),
-            secondsToPixel(zoomContextValue, selectedRange[1]),
-        ];
-    }
     const getMousePointerPixelPosition = (e) => {
         const canvas = canvasRef.current;
         let rect = canvas.getBoundingClientRect();
@@ -31,6 +24,7 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     const drawRect = (pixelX0, pixelX1) => {
         const canvas = canvasRef.current;
         const context = canvas.getContext('2d');
+        context.clearRect(0, 0, canvas.width, canvas.height);
         context.globalAlpha = 0.3;
         context.fillStyle = window
             .getComputedStyle(canvas)
@@ -54,19 +48,21 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
         if (!canvas)
             return;
         const pixel = getMousePointerPixelPosition(event);
-        const second = pixelToSeconds(zoomContextValue, pixel);
+        const seconds = pixelToSeconds(zoomContextValue, pixel);
         if (isDragging) {
             setSelection(prevSelection => {
-                if (prevSelection.start === second) {
-                    onChange(second);
+                if (prevSelection.start === seconds) {
+                    onChange(seconds);
+                    return { start: null, end: null };
                 }
                 else {
-                    onRangeChange([prevSelection.start, second]);
+                    const curatedSelection = seconds < prevSelection.start ? [seconds, prevSelection.start] : [prevSelection.start, seconds];
+                    onRangeChange(curatedSelection);
+                    return {
+                        start: curatedSelection[0],
+                        end: curatedSelection[1],
+                    };
                 }
-                return {
-                    start: prevSelection.start,
-                    end: second,
-                };
             });
         }
         setIsDragging(false);
@@ -74,26 +70,37 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     // Handle mouse move (for dragging)
     const handleMouseMove = (event) => {
         if (!isDragging)
-            return;
+            return; // the mouse is moving over the canvas but the user has not clicked yet
         const canvas = canvasRef.current;
         if (!canvas)
             return;
         const pixel = getMousePointerPixelPosition(event);
-        const second = pixelToSeconds(zoomContextValue, pixel);
-        setSelection(prevSelection => ({
-            start: prevSelection.start,
-            end: second,
-        }));
+        const seconds = pixelToSeconds(zoomContextValue, pixel);
+        setSelection(prevSelection => {
+            return {
+                start: prevSelection.start,
+                end: seconds,
+            };
+        });
     };
     useEffect(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
         canvas.height = canvas.offsetHeight;
-        if (selectedRangeInPixels.length === 0)
+        if (selectedRange.length !== 2 || zoomContextValue.timelineWrapperWidth === 0)
+            return;
+        drawRect(secondsToPixel(zoomContextValue, selectedRange[0]), secondsToPixel(zoomContextValue, selectedRange[1]));
+    }, [selectedRange]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        if (selection.start === null || selection.end === null)
             return;
-        drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
-    }, [selectedRangeInPixels]);
+        drawRect(secondsToPixel(zoomContextValue, selection.start), secondsToPixel(zoomContextValue, selection.end));
+    }, [selection, zoomContextValue]);
     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/stories/reproduction-widget.stories.d.ts

@@ -2,3 +2,4 @@ import { ReproductionWidgetProps } from '../components/reproduction-widget';
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
 export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ReproductionWidgetProps>;
+export declare const PlayAlong: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ReproductionWidgetProps>;

package/dist/stories/reproduction-widget.stories.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { ReproductionWidget } from '../components/reproduction-widget';
 export default {
     title: 'ReproductionWidget',
@@ -12,7 +12,7 @@ const Template = (args) => {
     const [reproductionTimestamp, setReproductionTimestamp] = useState(0);
     // Handle initialization of reproduction
     const handleInit = useCallback((reproductionInstance) => {
-        const refreshEvent = (args) => { setReproductionTimestamp(new Date().getTime()); };
+        const refreshEvent = (args) => { setReproductionTimestamp(new Date().getTime()); console.log("refresh"); };
         setReproduction(reproductionInstance);
         reproductionInstance.on('COUNTING_IN', (args) => { console.log("counting in", args); });
         reproductionInstance.on('PLAYING', refreshEvent);
@@ -40,7 +40,9 @@ const Template = (args) => {
         React.createElement("div", null,
             React.createElement("button", { onClick: handleStop, disabled: !reproduction || reproduction.isStopped() }, "Stop"),
             React.createElement("button", { onClick: handlePause, disabled: !reproduction || !reproduction.isPlaying() }, "Pause"),
-            React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() }, "Resume"))));
+            React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() }, "Resume"),
+            "Current time: ", reproduction === null || reproduction === void 0 ? void 0 :
+            reproduction.getCurrentTime())));
 };
 export const Default = Template.bind({});
 Default.args = {
@@ -48,3 +50,9 @@ Default.args = {
     videoId: 'jFI-RBqXzhU',
     songTempo: 180,
 };
+export const PlayAlong = Template.bind({});
+PlayAlong.args = {
+    trainingMode: false,
+    songTempo: 180,
+    duration: 220,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -114,20 +114,20 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@chromatic-com/storybook": "^1.5.0",
-    "@storybook/addon-actions": "^8.2.7",
-    "@storybook/addon-docs": "^8.2.7",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-interactions": "^8.2.7",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-actions": "^8.5.0",
+    "@storybook/addon-docs": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
     "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-links": "^8.2.7",
-    "@storybook/addon-onboarding": "^8.2.7",
-    "@storybook/blocks": "^8.2.7",
-    "@storybook/node-logger": "^8.2.7",
-    "@storybook/react": "^8.2.7",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/addon-onboarding": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/node-logger": "^8.5.0",
+    "@storybook/react": "^8.5.0",
     "@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
-    "@storybook/react-webpack5": "^8.2.7",
-    "@storybook/test": "^8.2.7",
+    "@storybook/react-webpack5": "^8.5.0",
+    "@storybook/test": "^8.5.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -140,14 +140,14 @@
     "babel-loader": "^9.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^9.5.14",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
     "react-docgen-typescript-plugin": "^1.0.8",
-    "storybook": "^8.2.7",
+    "storybook": "^8.5.0",
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "webpack": "^5.92.0"