@ldelia/react-media 0.8.1 → 0.8.2

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

@@ -19,7 +19,6 @@ export declare class PlayAlongPlayer {
     pause(): void;
     stop(): void;
     seekTo(seconds: number): void;
-    setVolume(volume: number): void;
     getCurrentTime(): number;
     getDuration(): number;
     isAvailable(): boolean;
@@ -27,6 +26,10 @@ 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;
+    countingStarted(): void;
+    countingFinished(): void;
+    setVolume(volume: number): void;
+    getVolume(): number;
     private setInnerPlayer;
 }
 export {};

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

@@ -44,7 +44,6 @@ export class PlayAlongPlayer {
     seekTo(seconds) {
         this.currentTime = seconds;
     }
-    setVolume(volume) { }
     getCurrentTime() {
         return this.currentTime;
     }
@@ -65,8 +64,6 @@ export class PlayAlongPlayer {
     }
     on(eventName, handler) {
         switch (eventName) {
-            case PlayAlongPlayer.EVENTS.READY:
-                return this[dispatchOnReadyHandlers].push(handler);
             case PlayAlongPlayer.EVENTS.FINISH:
                 return this[dispatchOnFinishHandlers].push(handler);
             default:
@@ -77,9 +74,6 @@ export class PlayAlongPlayer {
         let handler, i, len;
         let ref = [];
         switch (eventName) {
-            case PlayAlongPlayer.EVENTS.READY:
-                ref = this[dispatchOnReadyHandlers];
-                break;
             case PlayAlongPlayer.EVENTS.FINISH:
                 ref = this[dispatchOnFinishHandlers];
                 break;
@@ -91,8 +85,11 @@ export class PlayAlongPlayer {
             handler();
         }
     }
+    countingStarted() { }
+    countingFinished() { }
+    setVolume(volume) { }
+    getVolume() { return 0; }
     setInnerPlayer(innerPlayer) {
         this.innerPlayer = innerPlayer;
-        this.dispatch(PlayAlongPlayer.EVENTS.READY);
     }
 }

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

@@ -7,6 +7,7 @@ declare const dispatchOnErrorHandlers: unique symbol;
 export declare class YouTubePlayer {
     private currentTime;
     private isRunning;
+    private volume;
     private innerPlayer;
     private [dispatchOnReadyHandlers];
     private [dispatchOnFinishHandlers];
@@ -23,6 +24,7 @@ export declare class YouTubePlayer {
     stop(): void;
     seekTo(seconds: number): void;
     setVolume(volume: number): void;
+    getVolume(): number;
     getCurrentTime(): number;
     getDuration(): number | undefined;
     getAvailablePlaybackRates(): number[];
@@ -30,6 +32,8 @@ export declare class YouTubePlayer {
     isAvailable(): boolean;
     on(eventName: keyof typeof PlayAlongPlayer.EVENTS, handler: (error?: any) => void): number | undefined;
     dispatch(eventName: keyof typeof PlayAlongPlayer.EVENTS, error?: any): void;
+    countingStarted(): void;
+    countingFinished(): void;
     private getErrorMessage;
 }
 export {};

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

@@ -5,13 +5,13 @@ const dispatchOnFinishHandlers = Symbol();
 const dispatchOnErrorHandlers = Symbol();
 export class YouTubePlayer {
     constructor(innerPlayer) {
+        this.volume = 50; // between 0 and 100
         this[dispatchOnFinishHandlers] = [];
         this[dispatchOnReadyHandlers] = [];
         this[dispatchOnErrorHandlers] = [];
         this.currentTime = 0;
         this.isRunning = false;
         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 the user seeks to X, the song is played
         this.innerPlayer.playVideo();
@@ -70,8 +70,12 @@ export class YouTubePlayer {
         }
     }
     setVolume(volume) {
+        this.volume = volume;
         this.getInnerPlayer().setVolume(volume);
     }
+    getVolume() {
+        return this.volume;
+    }
     getCurrentTime() {
         return this.isRunning
             ? this.getInnerPlayer().getCurrentTime()
@@ -96,8 +100,6 @@ export class YouTubePlayer {
     }
     on(eventName, handler) {
         switch (eventName) {
-            case PlayAlongPlayer.EVENTS.READY:
-                return this[dispatchOnReadyHandlers].push(handler);
             case PlayAlongPlayer.EVENTS.FINISH:
                 return this[dispatchOnFinishHandlers].push(handler);
             case PlayAlongPlayer.EVENTS.ERROR:
@@ -112,9 +114,6 @@ export class YouTubePlayer {
         let len;
         let ref = [];
         switch (eventName) {
-            case YouTubePlayer.EVENTS.READY:
-                ref = this[dispatchOnReadyHandlers];
-                break;
             case YouTubePlayer.EVENTS.FINISH:
                 ref = this[dispatchOnFinishHandlers];
                 break;
@@ -129,6 +128,31 @@ export class YouTubePlayer {
             setTimeout(() => handler(error), 0);
         }
     }
+    countingStarted() {
+        /**
+         * iOS browsers enforce strict autoplay policies that require video playback
+         * to begin synchronously within a user interaction event (e.g., a tap or click).
+         * When we implemented the counting-in feature (1, 2, 1, 2, 3, go...),
+         * the asynchronous delays between counts caused iOS to lose the user interaction context,
+         * blocking video playback after the countdown completed.
+         * The video would work fine on web and Android, but fail to start on iOS Safari.
+         * To resolve this, we adopted a muted-first approach:
+         * the video begins playing immediately when the user initiates playback,
+         * but remains muted during the countdown sequence.
+         * Once the countdown completes, we unmute the video and restore the desired volume.
+         * This strategy satisfies iOS's autoplay requirements (muted videos can autoplay)
+         * while preserving the musical countdown experience.
+         * The user never notices the video is playing during the countdown
+         * since it's both muted and visually obscured by the countdown overlay.
+        * */
+        this.getInnerPlayer().setVolume(0);
+        this.getInnerPlayer().playVideo();
+    }
+    countingFinished() {
+        this.getInnerPlayer().pauseVideo();
+        this.getInnerPlayer().seekTo(0, true);
+        this.setVolume(this.volume);
+    }
     getErrorMessage(errorCode) {
         switch (errorCode) {
             case YT.PlayerError.InvalidParam:

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

@@ -16,10 +16,8 @@ export declare class Reproduction {
     private requiresCountingIn;
     private songTempo;
     private state;
-    private ready;
     private interval;
     private countingInCounter;
-    private volume;
     private [dispatchOnReadyHandlers];
     private [dispatchOnSongStartHandlers];
     private [dispatchOnCountingInHandlers];
@@ -30,7 +28,6 @@ export declare class Reproduction {
     private [dispatchOnErrorHandlers];
     constructor(player: Player, requiresCountingIn: boolean, songTempo: number, volume: number);
     static get EVENTS(): {
-        readonly READY: "READY";
         readonly START: "START";
         readonly COUNTING_IN: "COUNTING_IN";
         readonly PLAY: "PLAY";
@@ -52,7 +49,6 @@ export declare class Reproduction {
     play(): void;
     pause(): void;
     stop(): void;
-    isReady(): boolean;
     isPlaying(): boolean;
     isStopped(): boolean;
     isPaused(): boolean;

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

@@ -7,7 +7,6 @@ const STATES = {
     PAUSED: 3,
 };
 const EVENTS = {
-    READY: 'READY',
     START: 'START',
     COUNTING_IN: 'COUNTING_IN',
     PLAY: 'PLAY',
@@ -26,7 +25,6 @@ const dispatchOnFinishHandlers = Symbol();
 const dispatchOnErrorHandlers = Symbol();
 export class Reproduction {
     constructor(player, requiresCountingIn, songTempo, volume) {
-        this.volume = 50; // between 0 and 100
         this[dispatchOnReadyHandlers] = [];
         this[dispatchOnSongStartHandlers] = [];
         this[dispatchOnCountingInHandlers] = [];
@@ -37,16 +35,11 @@ export class Reproduction {
         this[dispatchOnErrorHandlers] = [];
         this.songTempo = songTempo;
         this.player = player;
-        this.ready = false;
         this.state = Reproduction.STATES.STOPPED;
         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);
-        });
+        this.player.setVolume(volume);
         this.player.on(PLAYER_EVENTS.FINISH, () => {
             this.state = Reproduction.STATES.STOPPED;
             clearInterval(this.interval);
@@ -67,8 +60,6 @@ export class Reproduction {
     }
     on(eventName, handler) {
         switch (eventName) {
-            case Reproduction.EVENTS.READY:
-                return this[dispatchOnReadyHandlers].push(handler);
             case Reproduction.EVENTS.START:
                 return this[dispatchOnSongStartHandlers].push(handler);
             case Reproduction.EVENTS.COUNTING_IN:
@@ -91,9 +82,6 @@ export class Reproduction {
         let handler, i, len;
         let ref = [];
         switch (eventName) {
-            case Reproduction.EVENTS.READY:
-                ref = this[dispatchOnReadyHandlers];
-                break;
             case Reproduction.EVENTS.START:
                 ref = this[dispatchOnSongStartHandlers];
                 break;
@@ -132,7 +120,6 @@ export class Reproduction {
             this.countInAndPlay(this.getBPMInterval() * 2, 3);
         }
         else {
-            this.seekTo(0);
             this.play();
         }
     }
@@ -159,10 +146,6 @@ export class Reproduction {
         clearInterval(this.interval);
         this.dispatch(Reproduction.EVENTS.FINISH);
     }
-    isReady() {
-        // It's necessary to avoid play the reproduction-widget when the player is not ready
-        return this.ready;
-    }
     isPlaying() {
         return this.state === Reproduction.STATES.PLAYING;
     }
@@ -192,7 +175,7 @@ export class Reproduction {
         this.player.seekTo(seconds);
     }
     getVolume() {
-        return this.volume;
+        return this.player.getVolume();
     }
     setVolume(volume) {
         if (volume < 0) {
@@ -201,7 +184,6 @@ export class Reproduction {
         else if (volume > 100) {
             volume = 100;
         }
-        this.volume = volume;
         this.player.setVolume(volume);
     }
     getAvailablePlaybackRates() {
@@ -218,6 +200,7 @@ export class Reproduction {
     }
     countInAndPlay(timeout, limit) {
         // the initial count starts instantly, no need to wait
+        this.player.countingStarted();
         this.countingInCounter++;
         this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
         const interval = setInterval(() => {
@@ -229,6 +212,7 @@ export class Reproduction {
                     this.countInAndPlay(this.getBPMInterval(), 5);
                 }
                 else {
+                    this.player.countingFinished();
                     this.play();
                 }
             }

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

@@ -35,12 +35,18 @@ const Template = (args) => {
             reproduction.play();
         }
     };
+    const handleStart = () => {
+        if (reproduction) {
+            reproduction.start();
+        }
+    };
     return (React.createElement("div", null,
         React.createElement(ReproductionWidget, Object.assign({}, args, { onInit: handleInit })),
         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() || reproduction.getCurrentTime() > 0 }, "Resume"),
+            React.createElement("button", { onClick: handleStart, disabled: !reproduction || reproduction.isPlaying() }, "Start"),
             reproduction && (React.createElement("div", null,
                 "Current time: ", reproduction === null || reproduction === void 0 ? void 0 :
                 reproduction.getCurrentTime())),

package/package.json

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