@ldelia/react-media 0.10.0 → 0.11.0

package/dist/components/reproduction-widget/models/Reproduction.d.ts

@@ -10,7 +10,6 @@ export declare const REPRODUCTION_STATES: {
 };
 type ReproductionState = (typeof REPRODUCTION_STATES)[keyof typeof REPRODUCTION_STATES];
 type Handler = (args: object) => void;
-declare const dispatchOnReadyHandlers: unique symbol;
 declare const dispatchOnSongStartHandlers: unique symbol;
 declare const dispatchOnCountingInHandlers: unique symbol;
 declare const dispatchOnPlayHandlers: unique symbol;
@@ -27,7 +26,6 @@ export declare class Reproduction {
     private loopInterval;
     private loopRange;
     private countingInCounter;
-    private [dispatchOnReadyHandlers];
     private [dispatchOnSongStartHandlers];
     private [dispatchOnCountingInHandlers];
     private [dispatchOnPlayHandlers];
@@ -72,6 +70,7 @@ export declare class Reproduction {
     seekTo(seconds: number): void;
     getVolume(): number;
     setVolume(volume: number): void;
+    setLoopRange(from: number, to: number): boolean;
     getAvailablePlaybackRates(): number[];
     setPlaybackRate(playbackRate: number): void;
     isAvailable(): boolean;

package/dist/components/reproduction-widget/models/Reproduction.js

@@ -15,7 +15,6 @@ const EVENTS = {
     FINISH: 'FINISH',
     ERROR: 'ERROR',
 };
-const dispatchOnReadyHandlers = Symbol();
 const dispatchOnSongStartHandlers = Symbol();
 const dispatchOnCountingInHandlers = Symbol();
 const dispatchOnPlayHandlers = Symbol();
@@ -25,7 +24,6 @@ const dispatchOnFinishHandlers = Symbol();
 const dispatchOnErrorHandlers = Symbol();
 export class Reproduction {
     constructor(player, requiresCountingIn, songTempo, volume) {
-        this[dispatchOnReadyHandlers] = [];
         this[dispatchOnSongStartHandlers] = [];
         this[dispatchOnCountingInHandlers] = [];
         this[dispatchOnPlayHandlers] = [];
@@ -191,15 +189,11 @@ export class Reproduction {
         }, tickInterval);
     }
     playLoop(from, to) {
-        if (!Number.isFinite(from) || !Number.isFinite(to)) {
-            return;
-        }
-        if (to <= from) {
+        if (!this.setLoopRange(from, to)) {
             return;
         }
         clearInterval(this.loopInterval);
         this.loopInterval = null;
-        this.loopRange = { from, to };
         this.seekTo(from);
         this.play();
         const loopCheckInterval = 100;
@@ -274,6 +268,13 @@ export class Reproduction {
         }
         this.player.setVolume(volume);
     }
+    setLoopRange(from, to) {
+        if (!Number.isFinite(from) || !Number.isFinite(to) || to <= from) {
+            return false;
+        }
+        this.loopRange = { from, to };
+        return true;
+    }
     getAvailablePlaybackRates() {
         return this.player.getAvailablePlaybackRates();
     }
@@ -289,7 +290,9 @@ export class Reproduction {
     countInAndPlay(timeout, limit) {
         // the initial count starts instantly, no need to wait
         this.countingInCounter++;
-        this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
+        this.dispatch(Reproduction.EVENTS.COUNTING_IN, {
+            countingInCounter: this.countingInCounter,
+        });
         const interval = setInterval(() => {
             this.countingInCounter++;
             if (this.countingInCounter === limit) {
@@ -303,7 +306,9 @@ export class Reproduction {
                 }
             }
             else {
-                this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
+                this.dispatch(Reproduction.EVENTS.COUNTING_IN, {
+                    countingInCounter: this.countingInCounter,
+                });
             }
         }, timeout);
     }

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

@@ -45,7 +45,7 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
         context.fillRect(pixelX0, 0, pixelX1 - pixelX0, context.canvas.height);
         context.globalAlpha = 1.0;
     };
-    // Check if mouse is near the start or end edge of the selection
+    // Check if the mouse pointer is near the start or end edge of the selection
     const isNearSelectionEdge = (pixel) => {
         if (selectedRange.length !== 2)
             return { isNear: false, edge: null };
@@ -180,4 +180,10 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     }, [selection, zoomContextValue]);
     return (React.createElement(OverlayCanvas, { ref: canvasRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: { cursor: cursorStyle }, className: 'media-timeline-range-selector-canvas' }));
 };
-export default React.memo(RangeSelectorCanvas);
+const areEqual = (prevProps, nextProps) => {
+    return (prevProps.selectedRange[0] === nextProps.selectedRange[0] &&
+        prevProps.selectedRange[1] === nextProps.selectedRange[1] &&
+        prevProps.onChange === nextProps.onChange &&
+        prevProps.onRangeChange === nextProps.onRangeChange);
+};
+export default React.memo(RangeSelectorCanvas, areEqual);

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

@@ -9,3 +9,4 @@ export declare const WithCustomClassName: import("storybook/internal/csf").Annot
 export declare const WithoutTimeBlocks: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
 export declare const Minimalist: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
 export declare const WithSelectedRangeAndMarkers: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+export declare const MediaPlaybackSimulation: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Timeline } from '../components/timeline';
 import './timeline.stories.custom.css';
@@ -17,6 +17,65 @@ export default {
     },
 };
 const Template = (args) => (React.createElement(StyledTimeline, Object.assign({}, args)));
+const PlaybackSimulation = (args) => {
+    const [currentValue, setCurrentValue] = useState(args.value || 0);
+    const [selectedRange, setSelectedRange] = useState(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        if (isPlaying && currentValue < args.duration) {
+            intervalRef.current = setInterval(() => {
+                setCurrentValue((prev) => {
+                    const next = prev + 0.05; // Advance 50ms (0.05 seconds)
+                    return next >= args.duration ? args.duration : next;
+                });
+            }, 50); // Update every 50ms
+        }
+        else {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [isPlaying, currentValue, args.duration]);
+    const handlePlayPause = () => {
+        if (currentValue >= args.duration) {
+            setCurrentValue(0); // Reset to beginning if we reached the end
+        }
+        setIsPlaying(!isPlaying);
+    };
+    const handleReset = () => {
+        setIsPlaying(false);
+        setCurrentValue(0);
+    };
+    const onRangeChangeHandler = (values) => {
+        setSelectedRange(values);
+    };
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { marginBottom: '10px' } },
+            React.createElement("button", { onClick: handlePlayPause, style: { marginRight: '10px' } }, isPlaying ? 'Pause' : 'Play'),
+            React.createElement("button", { onClick: handleReset }, "Reset"),
+            React.createElement("span", { style: { marginLeft: '20px' } },
+                "Time: ",
+                currentValue.toFixed(2),
+                "s / ",
+                args.duration,
+                "s"),
+            React.createElement("span", { style: { marginLeft: '20px' } },
+                "Selected range:",
+                ' ',
+                selectedRange ? `${selectedRange[0]}-${selectedRange[1]}` : 'N/A')),
+        React.createElement(StyledTimeline, Object.assign({}, args, { value: currentValue, onChange: (value) => {
+                var _a;
+                setCurrentValue(value);
+                (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, value);
+            }, onRangeChange: onRangeChangeHandler }))));
+};
 export const Default = Template.bind({});
 Default.args = {
     duration: 305,
@@ -61,3 +120,11 @@ WithSelectedRangeAndMarkers.args = {
     selectedRange: [20, 30],
     markers: [90, 108],
 };
+export const MediaPlaybackSimulation = PlaybackSimulation.bind({});
+MediaPlaybackSimulation.args = {
+    duration: 120, // 2 minutes
+    value: 0,
+    zoomLevel: 0,
+    selectedRange: [30, 45], // Show a selected range
+    markers: [15, 60, 90], // Add some markers
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -114,11 +114,11 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "^5.0.1",
-    "@storybook/addon-docs": "^10.2.8",
-    "@storybook/addon-links": "^10.2.8",
-    "@storybook/addon-onboarding": "^10.2.8",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-links": "^10.2.13",
+    "@storybook/addon-onboarding": "^10.2.13",
     "@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
-    "@storybook/react-webpack5": "^10.2.8",
+    "@storybook/react-webpack5": "^10.2.13",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -131,7 +131,7 @@
     "babel-loader": "^9.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-storybook": "^10.2.8",
+    "eslint-plugin-storybook": "^10.2.13",
     "jest-environment-jsdom": "^30.2.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^10.0.1",
@@ -139,7 +139,7 @@
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
     "react-docgen-typescript-plugin": "^1.0.8",
-    "storybook": "^10.2.8",
+    "storybook": "^10.2.13",
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "webpack": "^5.105.2"