@ldelia/react-media 0.6.3 → 0.7.0

package/dist/components/reproduction-widget/ReproductionWidget.d.ts

@@ -10,14 +10,16 @@ interface TrainingProps extends BaseProps {
     trainingMode: true;
     duration?: never;
     videoId: string;
+    initialVolume?: number;
     onVideoUnavailable: () => void;
 }
 interface NonTrainingProps extends BaseProps {
     trainingMode: false;
     duration: number;
     videoId?: never;
+    initialVolume?: never;
     onVideoUnavailable?: never;
 }
 export type ReproductionWidgetProps = TrainingProps | NonTrainingProps;
-export declare const ReproductionWidget: ({ trainingMode, duration, videoId, withCountingIn, songTempo, onInit, onVideoUnavailable, }: ReproductionWidgetProps) => React.JSX.Element;
+export declare const ReproductionWidget: ({ trainingMode, duration, videoId, initialVolume, withCountingIn, songTempo, onInit, onVideoUnavailable, }: ReproductionWidgetProps) => React.JSX.Element;
 export {};

package/dist/components/reproduction-widget/ReproductionWidget.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { YouTubeInnerPlayer } from './inner-players/YouTubeInnerPlayer';
 import { PlayAlongInnerPlayer } from './inner-players/PlayAlongInnerPlayer';
 import { Reproduction } from './models/Reproduction';
-export const ReproductionWidget = ({ trainingMode, duration, videoId, withCountingIn = true, songTempo = 0, onInit, onVideoUnavailable, }) => {
+export const ReproductionWidget = ({ trainingMode, duration, videoId, initialVolume = 50, withCountingIn = true, songTempo = 0, onInit, onVideoUnavailable, }) => {
     function onPlayAlongInnerPlayerReadyHandler(event) {
         let newReproduction = Reproduction.newBuilder()
             .withTrainingMode(false)
@@ -19,6 +19,7 @@ export const ReproductionWidget = ({ trainingMode, duration, videoId, withCounti
             .withSongTempo(songTempo)
             .withCountingIn(withCountingIn && songTempo > 0)
             .withInnerPlayer(event.target)
+            .withVolume(initialVolume)
             .createReproduction();
         onInit(newReproduction);
     }

package/dist/components/reproduction-widget/models/Player/PlayAlongPlayer.d.ts

@@ -9,16 +9,16 @@ export declare class PlayAlongPlayer {
     private interval;
     private [dispatchOnReadyHandlers];
     private [dispatchOnFinishHandlers];
+    constructor(duration: number, innerPlayer: string);
     static get EVENTS(): {
         readonly READY: "READY";
         readonly FINISH: "FINISH";
     };
-    constructor(duration: number, innerPlayer: string);
-    private setInnerPlayer;
     play(): void;
     pause(): void;
     stop(): void;
     seekTo(seconds: number): void;
+    setVolume(volume: number): void;
     getCurrentTime(): number;
     getDuration(): number;
     isAvailable(): boolean;
@@ -26,5 +26,6 @@ export declare class PlayAlongPlayer {
     setPlaybackRate(playbackRate: number): void;
     on(eventName: keyof typeof PlayAlongPlayer.EVENTS, handler: () => void): number | undefined;
     dispatch(eventName: keyof typeof PlayAlongPlayer.EVENTS): void;
+    private setInnerPlayer;
 }
 export {};

package/dist/components/reproduction-widget/models/Player/PlayAlongPlayer.js

@@ -2,9 +2,6 @@ import { PLAYER_EVENTS } from './PlayerEvents';
 const dispatchOnReadyHandlers = Symbol();
 const dispatchOnFinishHandlers = Symbol();
 export class PlayAlongPlayer {
-    static get EVENTS() {
-        return PLAYER_EVENTS;
-    }
     constructor(duration, innerPlayer) {
         this.interval = null;
         this.interval = null;
@@ -17,9 +14,8 @@ export class PlayAlongPlayer {
         this[dispatchOnReadyHandlers] = [];
         this.setInnerPlayer(innerPlayer);
     }
-    setInnerPlayer(innerPlayer) {
-        this.innerPlayer = innerPlayer;
-        this.dispatch(PlayAlongPlayer.EVENTS.READY);
+    static get EVENTS() {
+        return PLAYER_EVENTS;
     }
     play() {
         this.isRunning = true;
@@ -48,6 +44,7 @@ export class PlayAlongPlayer {
     seekTo(seconds) {
         this.currentTime = seconds;
     }
+    setVolume(volume) { }
     getCurrentTime() {
         return this.currentTime;
     }
@@ -94,4 +91,8 @@ export class PlayAlongPlayer {
             handler();
         }
     }
+    setInnerPlayer(innerPlayer) {
+        this.innerPlayer = innerPlayer;
+        this.dispatch(PlayAlongPlayer.EVENTS.READY);
+    }
 }

package/dist/components/reproduction-widget/models/Player/YouTubePlayer.d.ts

@@ -9,16 +9,17 @@ export declare class YouTubePlayer {
     private innerPlayer;
     private [dispatchOnReadyHandlers];
     private [dispatchOnFinishHandlers];
+    constructor(innerPlayer: InnerYouTubePlayerInterface);
     static get EVENTS(): {
         readonly READY: "READY";
         readonly FINISH: "FINISH";
     };
-    constructor(innerPlayer: InnerYouTubePlayerInterface);
     getInnerPlayer(): YT.Player;
     play(): void;
     pause(): void;
     stop(): void;
     seekTo(seconds: number): void;
+    setVolume(volume: number): void;
     getCurrentTime(): number;
     getDuration(): number | undefined;
     getAvailablePlaybackRates(): number[];

package/dist/components/reproduction-widget/models/Player/YouTubePlayer.js

@@ -3,9 +3,6 @@ import { PLAYER_EVENTS } from './PlayerEvents';
 const dispatchOnReadyHandlers = Symbol();
 const dispatchOnFinishHandlers = Symbol();
 export class YouTubePlayer {
-    static get EVENTS() {
-        return PLAYER_EVENTS;
-    }
     constructor(innerPlayer) {
         this[dispatchOnFinishHandlers] = [];
         this[dispatchOnReadyHandlers] = [];
@@ -14,8 +11,8 @@ export class YouTubePlayer {
         this.innerPlayer = innerPlayer;
         this.innerPlayer = innerPlayer;
         this.dispatch(YouTubePlayer.EVENTS.READY);
-        // this is necessary for avoiding the state video cued.
-        // When a video is in this state, when user seek to X, the song is played
+        // This is necessary for avoiding the state video cued.
+        // When a video is in this state, when the user seeks to X, the song is played
         this.innerPlayer.playVideo();
         this.innerPlayer.pauseVideo();
         this.innerPlayer.addEventListener('onStateChange', (videoState) => {
@@ -30,6 +27,9 @@ export class YouTubePlayer {
             }
         });
     }
+    static get EVENTS() {
+        return PLAYER_EVENTS;
+    }
     getInnerPlayer() {
         return this.innerPlayer;
     }
@@ -46,8 +46,8 @@ export class YouTubePlayer {
     stop() {
         this.isRunning = false;
         /**
-         * Hay un issue al llamar a getDuration del video luego de reanudar una canción pausada (devuelve siempre 0)
-         * Para evitar que se pierda la información y tener que cargarla de nuevo, se simula un stop pausando y llevando al comienzo
+         * There's an issue when calling getDuration on the video after resuming a paused song (it always returns 0)
+         * To prevent losing this information and having to reload it, we simulate a stop by pausing and seeking to the start
          *  videoPlayer.stopVideo();
          */
         this.getInnerPlayer().pauseVideo();
@@ -61,6 +61,9 @@ export class YouTubePlayer {
             this.play();
         }
     }
+    setVolume(volume) {
+        this.getInnerPlayer().setVolume(volume);
+    }
     getCurrentTime() {
         return this.isRunning
             ? this.getInnerPlayer().getCurrentTime()

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

@@ -18,6 +18,7 @@ export declare class Reproduction {
     private ready;
     private interval;
     private countingInCounter;
+    private volume;
     private [dispatchOnReadyHandlers];
     private [dispatchOnSongStartHandlers];
     private [dispatchOnCountingInHandlers];
@@ -25,6 +26,7 @@ export declare class Reproduction {
     private [dispatchOnPlayingHandlers];
     private [dispatchOnPausedHandlers];
     private [dispatchOnFinishHandlers];
+    constructor(player: Player, requiresCountingIn: boolean, songTempo: number, volume: number);
     static get EVENTS(): {
         readonly READY: "READY";
         readonly START: "START";
@@ -40,10 +42,9 @@ export declare class Reproduction {
         PLAYING: number;
         PAUSED: number;
     };
-    constructor(player: Player, requiresCountingIn: boolean, songTempo: number);
+    static newBuilder(): ReproductionBuilder;
     on(eventName: keyof typeof Reproduction.EVENTS, handler: Handler): number | undefined;
     dispatch(eventName: keyof typeof Reproduction.EVENTS, args?: {}): void;
-    private countInAndPlay;
     start(): void;
     play(): void;
     pause(): void;
@@ -58,10 +59,12 @@ export declare class Reproduction {
     getCurrentTime(): number;
     getDuration(): number | undefined;
     seekTo(seconds: number): void;
+    getVolume(): number;
+    setVolume(volume: number): void;
     getAvailablePlaybackRates(): number[];
     setPlaybackRate(playbackRate: number): void;
     isAvailable(): boolean;
     getBPMInterval(): number;
-    static newBuilder(): ReproductionBuilder;
+    private countInAndPlay;
 }
 export {};

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

@@ -23,13 +23,8 @@ const dispatchOnPlayingHandlers = Symbol();
 const dispatchOnPausedHandlers = Symbol();
 const dispatchOnFinishHandlers = Symbol();
 export class Reproduction {
-    static get EVENTS() {
-        return EVENTS;
-    }
-    static get STATES() {
-        return STATES;
-    }
-    constructor(player, requiresCountingIn, songTempo) {
+    constructor(player, requiresCountingIn, songTempo, volume) {
+        this.volume = 50; // between 0 and 100
         this[dispatchOnReadyHandlers] = [];
         this[dispatchOnSongStartHandlers] = [];
         this[dispatchOnCountingInHandlers] = [];
@@ -44,6 +39,7 @@ export class Reproduction {
         this.interval = null;
         this.requiresCountingIn = requiresCountingIn;
         this.countingInCounter = 0;
+        this.setVolume(volume);
         this.player.on(PLAYER_EVENTS.READY, () => {
             this.ready = true;
             this.dispatch(Reproduction.EVENTS.READY);
@@ -54,6 +50,15 @@ export class Reproduction {
             this.dispatch(Reproduction.EVENTS.FINISH);
         });
     }
+    static get EVENTS() {
+        return EVENTS;
+    }
+    static get STATES() {
+        return STATES;
+    }
+    static newBuilder() {
+        return new ReproductionBuilder();
+    }
     on(eventName, handler) {
         switch (eventName) {
             case Reproduction.EVENTS.READY:
@@ -108,27 +113,6 @@ export class Reproduction {
             // setTimeout(handler, 0);
         }
     }
-    countInAndPlay(timeout, limit) {
-        // the initial count starts instantly, no need to wait
-        this.countingInCounter++;
-        this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
-        const interval = setInterval(() => {
-            this.countingInCounter++;
-            if (this.countingInCounter === limit) {
-                clearInterval(interval);
-                this.countingInCounter = 0;
-                if (limit !== 5) {
-                    this.countInAndPlay(this.getBPMInterval(), 5);
-                }
-                else {
-                    this.play();
-                }
-            }
-            else {
-                this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
-            }
-        }, timeout);
-    }
     start() {
         if (this.state === Reproduction.STATES.STOPPED) {
             this.dispatch(Reproduction.EVENTS.START);
@@ -196,6 +180,19 @@ export class Reproduction {
     seekTo(seconds) {
         this.player.seekTo(seconds);
     }
+    getVolume() {
+        return this.volume;
+    }
+    setVolume(volume) {
+        if (volume < 0) {
+            volume = 0;
+        }
+        else if (volume > 100) {
+            volume = 100;
+        }
+        this.volume = volume;
+        this.player.setVolume(volume);
+    }
     getAvailablePlaybackRates() {
         return this.player.getAvailablePlaybackRates();
     }
@@ -208,7 +205,25 @@ export class Reproduction {
     getBPMInterval() {
         return 60000 / this.getTempo();
     }
-    static newBuilder() {
-        return new ReproductionBuilder();
+    countInAndPlay(timeout, limit) {
+        // the initial count starts instantly, no need to wait
+        this.countingInCounter++;
+        this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
+        const interval = setInterval(() => {
+            this.countingInCounter++;
+            if (this.countingInCounter === limit) {
+                clearInterval(interval);
+                this.countingInCounter = 0;
+                if (limit !== 5) {
+                    this.countInAndPlay(this.getBPMInterval(), 5);
+                }
+                else {
+                    this.play();
+                }
+            }
+            else {
+                this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
+            }
+        }, timeout);
     }
 }

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

@@ -5,6 +5,7 @@ export declare class ReproductionBuilder {
     private requiresCountingIn;
     private songDuration;
     private songTempo;
+    private volume;
     private innerPlayer;
     constructor();
     withSongDuration(songDuration: number): this;
@@ -12,5 +13,6 @@ export declare class ReproductionBuilder {
     withTrainingMode(trainingMode: boolean): this;
     withCountingIn(requiresCountingIn: boolean): this;
     withInnerPlayer(innerPlayer: InnerYouTubePlayerInterface | string): this;
+    withVolume(volume: number): this;
     createReproduction(): Reproduction;
 }

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

@@ -7,6 +7,7 @@ export class ReproductionBuilder {
         this.requiresCountingIn = false;
         this.songDuration = null;
         this.songTempo = null;
+        this.volume = 50;
         this.innerPlayer = null;
     }
     withSongDuration(songDuration) {
@@ -29,6 +30,10 @@ export class ReproductionBuilder {
         this.innerPlayer = innerPlayer;
         return this;
     }
+    withVolume(volume) {
+        this.volume = volume;
+        return this;
+    }
     createReproduction() {
         if (this.requiresCountingIn && this.songTempo === null) {
             throw new Error('The song tempo is mandatory');
@@ -46,6 +51,6 @@ export class ReproductionBuilder {
             }
             player = new PlayAlongPlayer(this.songDuration, this.innerPlayer);
         }
-        return new Reproduction(player, this.requiresCountingIn, this.songTempo || 0);
+        return new Reproduction(player, this.requiresCountingIn, this.songTempo || 0, this.volume);
     }
 }

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

@@ -10,7 +10,7 @@ const OverlayCanvas = styled.canvas `
   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
+  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) {

package/dist/stories/reproduction-widget.stories.d.ts

@@ -1,6 +1,7 @@
 import { ReproductionWidgetProps } from '../components/reproduction-widget';
-declare const _default: import("@storybook/core/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("@storybook/core/csf").Args>;
+declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-7abe74eb").R, import("storybook/internal/csf").Args>;
 export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ReproductionWidgetProps>;
-export declare const PlayAlong: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ReproductionWidgetProps>;
-export declare const InvalidVideo: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ReproductionWidgetProps>;
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, ReproductionWidgetProps>;
+export declare const WhisperingVideo: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, ReproductionWidgetProps>;
+export declare const PlayAlong: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, ReproductionWidgetProps>;
+export declare const InvalidVideo: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, ReproductionWidgetProps>;

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

@@ -43,7 +43,12 @@ const Template = (args) => {
             React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() }, "Resume"),
             reproduction && (React.createElement("div", null,
                 "Current time: ", reproduction === null || reproduction === void 0 ? void 0 :
-                reproduction.getCurrentTime())))));
+                reproduction.getCurrentTime())),
+            reproduction && (React.createElement("div", null,
+                "Volume: ", reproduction === null || reproduction === void 0 ? void 0 :
+                reproduction.getVolume())),
+            React.createElement("button", { onClick: () => reproduction === null || reproduction === void 0 ? void 0 : reproduction.setVolume(reproduction.getVolume() - 10), disabled: !reproduction || reproduction.getVolume() <= 10 }, "Volume -10"),
+            React.createElement("button", { onClick: () => reproduction === null || reproduction === void 0 ? void 0 : reproduction.setVolume(reproduction.getVolume() + 10), disabled: !reproduction || reproduction.getVolume() >= 100 }, "Volume +10"))));
 };
 export const Default = Template.bind({});
 Default.args = {
@@ -51,6 +56,13 @@ Default.args = {
     videoId: 'jFI-RBqXzhU',
     songTempo: 180,
 };
+export const WhisperingVideo = Template.bind({});
+WhisperingVideo.args = {
+    trainingMode: true,
+    videoId: 'jFI-RBqXzhU',
+    songTempo: 180,
+    initialVolume: 10,
+};
 export const PlayAlong = Template.bind({});
 PlayAlong.args = {
     trainingMode: false,

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

@@ -1,10 +1,10 @@
 import { TimelineProps } from '../components/timeline';
 import './timeline.stories.custom.css';
-declare const _default: import("@storybook/core/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("@storybook/core/csf").Args>;
+declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-7abe74eb").R, import("storybook/internal/csf").Args>;
 export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
-export declare const WithSelectedRange: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
-export declare const WithCustomClassName: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
-export declare const WithoutTimeBlocks: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
-export declare const Minimalist: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
-export declare const WithSelectedRangeAndMarkers: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, TimelineProps>;
+export declare const WithSelectedRange: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, TimelineProps>;
+export declare const WithCustomClassName: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, TimelineProps>;
+export declare const WithoutTimeBlocks: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, TimelineProps>;
+export declare const Minimalist: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, TimelineProps>;
+export declare const WithSelectedRangeAndMarkers: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-7abe74eb").R, TimelineProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -114,20 +114,12 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@chromatic-com/storybook": "^3.2.6",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/node-logger": "^8.6.12",
-    "@storybook/react": "^8.6.12",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/addon-onboarding": "^9.1.10",
     "@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
-    "@storybook/react-webpack5": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/react-webpack5": "^9.1.10",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -140,14 +132,15 @@
     "babel-loader": "^9.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.1.10",
+    "jest-environment-jsdom": "^30.2.0",
     "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.6.12",
+    "storybook": "^9.1.10",
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "webpack": "^5.92.0"