@ldelia/react-media 0.9.0 → 0.11.0

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

@@ -2,8 +2,14 @@ import { ReproductionBuilder } from './ReproductionBuilder';
 import { PlayAlongPlayer } from './Player/PlayAlongPlayer';
 import { YouTubePlayer } from './Player/YouTubePlayer';
 type Player = PlayAlongPlayer | YouTubePlayer;
+export declare const REPRODUCTION_STATES: {
+    STOPPED: number;
+    COUNTING_IN: number;
+    PLAYING: number;
+    PAUSED: number;
+};
+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;
@@ -12,15 +18,14 @@ declare const dispatchOnPausedHandlers: unique symbol;
 declare const dispatchOnFinishHandlers: unique symbol;
 declare const dispatchOnErrorHandlers: unique symbol;
 export declare class Reproduction {
-    private player;
-    private requiresCountingIn;
-    private songTempo;
+    private readonly player;
+    private readonly requiresCountingIn;
+    private readonly songTempo;
     private state;
     private interval;
     private loopInterval;
     private loopRange;
     private countingInCounter;
-    private [dispatchOnReadyHandlers];
     private [dispatchOnSongStartHandlers];
     private [dispatchOnCountingInHandlers];
     private [dispatchOnPlayHandlers];
@@ -45,7 +50,8 @@ export declare class Reproduction {
         PAUSED: number;
     };
     static newBuilder(): ReproductionBuilder;
-    on(eventName: keyof typeof Reproduction.EVENTS, handler: Handler): number | undefined;
+    on(eventName: keyof typeof Reproduction.EVENTS, handler: Handler): () => void;
+    off(eventName: keyof typeof Reproduction.EVENTS, handler: Handler): void;
     dispatch(eventName: keyof typeof Reproduction.EVENTS, args?: {}): void;
     start(): void;
     play(): void;
@@ -56,6 +62,7 @@ export declare class Reproduction {
     isStopped(): boolean;
     isPaused(): boolean;
     isCountingIn(): boolean;
+    getState(): ReproductionState;
     getPlayer(): Player;
     getTempo(): number;
     getCurrentTime(): number;
@@ -63,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

@@ -1,6 +1,6 @@
 import { PLAYER_EVENTS } from './Player/PlayerEvents';
 import { ReproductionBuilder } from './ReproductionBuilder';
-const STATES = {
+export const REPRODUCTION_STATES = {
     STOPPED: 0,
     COUNTING_IN: 1,
     PLAYING: 2,
@@ -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] = [];
@@ -62,29 +60,75 @@ export class Reproduction {
         return EVENTS;
     }
     static get STATES() {
-        return STATES;
+        return REPRODUCTION_STATES;
     }
     static newBuilder() {
         return new ReproductionBuilder();
     }
     on(eventName, handler) {
+        if (typeof handler !== 'function') {
+            throw new Error('Handler must be a function');
+        }
         switch (eventName) {
             case Reproduction.EVENTS.START:
-                return this[dispatchOnSongStartHandlers].push(handler);
+                this[dispatchOnSongStartHandlers].push(handler);
+                break;
             case Reproduction.EVENTS.COUNTING_IN:
-                return this[dispatchOnCountingInHandlers].push(handler);
+                this[dispatchOnCountingInHandlers].push(handler);
+                break;
             case Reproduction.EVENTS.PLAY:
-                return this[dispatchOnPlayHandlers].push(handler);
+                this[dispatchOnPlayHandlers].push(handler);
+                break;
             case Reproduction.EVENTS.PLAYING:
-                return this[dispatchOnPlayingHandlers].push(handler);
+                this[dispatchOnPlayingHandlers].push(handler);
+                break;
             case Reproduction.EVENTS.PAUSED:
-                return this[dispatchOnPausedHandlers].push(handler);
+                this[dispatchOnPausedHandlers].push(handler);
+                break;
             case Reproduction.EVENTS.FINISH:
-                return this[dispatchOnFinishHandlers].push(handler);
+                this[dispatchOnFinishHandlers].push(handler);
+                break;
             case Reproduction.EVENTS.ERROR:
-                return this[dispatchOnErrorHandlers].push(handler);
+                this[dispatchOnErrorHandlers].push(handler);
+                break;
             default:
+                throw new Error(`Unknown event: ${eventName}`);
+        }
+        return () => this.off(eventName, handler);
+    }
+    off(eventName, handler) {
+        if (typeof handler !== 'function') {
+            throw new Error('Handler must be a function');
+        }
+        let handlers;
+        switch (eventName) {
+            case Reproduction.EVENTS.START:
+                handlers = this[dispatchOnSongStartHandlers];
                 break;
+            case Reproduction.EVENTS.COUNTING_IN:
+                handlers = this[dispatchOnCountingInHandlers];
+                break;
+            case Reproduction.EVENTS.PLAY:
+                handlers = this[dispatchOnPlayHandlers];
+                break;
+            case Reproduction.EVENTS.PLAYING:
+                handlers = this[dispatchOnPlayingHandlers];
+                break;
+            case Reproduction.EVENTS.PAUSED:
+                handlers = this[dispatchOnPausedHandlers];
+                break;
+            case Reproduction.EVENTS.FINISH:
+                handlers = this[dispatchOnFinishHandlers];
+                break;
+            case Reproduction.EVENTS.ERROR:
+                handlers = this[dispatchOnErrorHandlers];
+                break;
+            default:
+                throw new Error(`Unknown event: ${eventName}`);
+        }
+        const index = handlers.indexOf(handler);
+        if (index > -1) {
+            handlers.splice(index, 1);
         }
     }
     dispatch(eventName, args = {}) {
@@ -136,23 +180,20 @@ export class Reproduction {
     play() {
         clearInterval(this.interval);
         this.player.play();
-        const intervalTimeout = 200;
+        const bpmInterval = this.getBPMInterval();
+        const tickInterval = Math.min(bpmInterval / 4, 50);
         this.interval = setInterval(() => {
             if (this.isPlaying()) {
                 this.dispatch(Reproduction.EVENTS.PLAYING);
             }
-        }, intervalTimeout);
+        }, 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;
@@ -196,6 +237,9 @@ export class Reproduction {
     isCountingIn() {
         return this.state === Reproduction.STATES.COUNTING_IN;
     }
+    getState() {
+        return this.state;
+    }
     getPlayer() {
         return this.player;
     }
@@ -224,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();
     }
@@ -239,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) {
@@ -253,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.9.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"