@ldelia/react-media 0.8.0 → 0.8.2

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

@@ -13,12 +13,12 @@ export declare class PlayAlongPlayer {
     static get EVENTS(): {
         readonly READY: "READY";
         readonly FINISH: "FINISH";
+        readonly ERROR: "ERROR";
     };
     play(): void;
     pause(): void;
     stop(): void;
     seekTo(seconds: number): void;
-    setVolume(volume: number): void;
     getCurrentTime(): number;
     getDuration(): number;
     isAvailable(): boolean;
@@ -26,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/PlayerEvents.d.ts

@@ -1,4 +1,5 @@
 export declare const PLAYER_EVENTS: {
     readonly READY: "READY";
     readonly FINISH: "FINISH";
+    readonly ERROR: "ERROR";
 };

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

@@ -1,4 +1,5 @@
 export const PLAYER_EVENTS = {
     READY: 'READY',
     FINISH: 'FINISH',
+    ERROR: 'ERROR',
 };

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

@@ -3,16 +3,20 @@ import { PlayAlongPlayer } from './PlayAlongPlayer';
 export type InnerYouTubePlayerInterface = YT.Player;
 declare const dispatchOnReadyHandlers: unique symbol;
 declare const dispatchOnFinishHandlers: unique symbol;
+declare const dispatchOnErrorHandlers: unique symbol;
 export declare class YouTubePlayer {
     private currentTime;
     private isRunning;
+    private volume;
     private innerPlayer;
     private [dispatchOnReadyHandlers];
     private [dispatchOnFinishHandlers];
+    private [dispatchOnErrorHandlers];
     constructor(innerPlayer: InnerYouTubePlayerInterface);
     static get EVENTS(): {
         readonly READY: "READY";
         readonly FINISH: "FINISH";
+        readonly ERROR: "ERROR";
     };
     getInnerPlayer(): YT.Player;
     play(): void;
@@ -20,12 +24,16 @@ export declare class YouTubePlayer {
     stop(): void;
     seekTo(seconds: number): void;
     setVolume(volume: number): void;
+    getVolume(): number;
     getCurrentTime(): number;
     getDuration(): number | undefined;
     getAvailablePlaybackRates(): number[];
     setPlaybackRate(playbackRate: number): void;
     isAvailable(): boolean;
-    on(eventName: keyof typeof PlayAlongPlayer.EVENTS, handler: () => void): number | undefined;
-    dispatch(eventName: keyof typeof PlayAlongPlayer.EVENTS): void;
+    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

@@ -2,19 +2,27 @@ import { PlayAlongPlayer } from './PlayAlongPlayer';
 import { PLAYER_EVENTS } from './PlayerEvents';
 const dispatchOnReadyHandlers = Symbol();
 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.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();
         this.innerPlayer.pauseVideo();
+        this.innerPlayer.addEventListener('onError', (event) => {
+            this.isRunning = false;
+            this.dispatch(YouTubePlayer.EVENTS.ERROR, {
+                code: event.data,
+                message: this.getErrorMessage(event.data)
+            });
+        });
         this.innerPlayer.addEventListener('onStateChange', (videoState) => {
             switch (videoState.data) {
                 case YT.PlayerState.ENDED:
@@ -62,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()
@@ -88,30 +100,72 @@ 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:
+                return this[dispatchOnErrorHandlers].push(handler);
             default:
                 break;
         }
     }
-    dispatch(eventName) {
-        let handler, i, len;
+    dispatch(eventName, error) {
+        let handler;
+        let i;
+        let len;
         let ref = [];
         switch (eventName) {
-            case YouTubePlayer.EVENTS.READY:
-                ref = this[dispatchOnReadyHandlers];
-                break;
             case YouTubePlayer.EVENTS.FINISH:
                 ref = this[dispatchOnFinishHandlers];
                 break;
+            case YouTubePlayer.EVENTS.ERROR:
+                ref = this[dispatchOnErrorHandlers];
+                break;
             default:
                 break;
         }
         for (i = 0, len = ref.length; i < len; i++) {
             handler = ref[i];
-            setTimeout(handler, 0);
+            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:
+                return 'Invalid parameter value';
+            case YT.PlayerError.Html5Error:
+                return 'HTML5 player error';
+            case YT.PlayerError.VideoNotFound:
+                return 'Video not found';
+            case YT.PlayerError.EmbeddingNotAllowed:
+            case YT.PlayerError.EmbeddingNotAllowed2:
+                return 'Video cannot be played in embedded players';
+            default:
+                return `Unknown error (code: ${errorCode})`;
         }
     }
 }

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

@@ -10,15 +10,14 @@ declare const dispatchOnPlayHandlers: unique symbol;
 declare const dispatchOnPlayingHandlers: unique symbol;
 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 state;
-    private ready;
     private interval;
     private countingInCounter;
-    private volume;
     private [dispatchOnReadyHandlers];
     private [dispatchOnSongStartHandlers];
     private [dispatchOnCountingInHandlers];
@@ -26,15 +25,16 @@ export declare class Reproduction {
     private [dispatchOnPlayingHandlers];
     private [dispatchOnPausedHandlers];
     private [dispatchOnFinishHandlers];
+    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";
         readonly PLAYING: "PLAYING";
         readonly PAUSED: "PAUSED";
         readonly FINISH: "FINISH";
+        readonly ERROR: "ERROR";
     };
     static get STATES(): {
         STOPPED: number;
@@ -49,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,13 +7,13 @@ const STATES = {
     PAUSED: 3,
 };
 const EVENTS = {
-    READY: 'READY',
     START: 'START',
     COUNTING_IN: 'COUNTING_IN',
     PLAY: 'PLAY',
     PLAYING: 'PLAYING',
     PAUSED: 'PAUSED',
     FINISH: 'FINISH',
+    ERROR: 'ERROR',
 };
 const dispatchOnReadyHandlers = Symbol();
 const dispatchOnSongStartHandlers = Symbol();
@@ -22,9 +22,9 @@ const dispatchOnPlayHandlers = Symbol();
 const dispatchOnPlayingHandlers = Symbol();
 const dispatchOnPausedHandlers = Symbol();
 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] = [];
@@ -32,23 +32,22 @@ export class Reproduction {
         this[dispatchOnPlayingHandlers] = [];
         this[dispatchOnPausedHandlers] = [];
         this[dispatchOnFinishHandlers] = [];
+        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);
             this.dispatch(Reproduction.EVENTS.FINISH);
         });
+        this.player.on(PLAYER_EVENTS.ERROR, (error) => {
+            this.dispatch(Reproduction.EVENTS.ERROR, { error });
+        });
     }
     static get EVENTS() {
         return EVENTS;
@@ -61,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:
@@ -75,6 +72,8 @@ export class Reproduction {
                 return this[dispatchOnPausedHandlers].push(handler);
             case Reproduction.EVENTS.FINISH:
                 return this[dispatchOnFinishHandlers].push(handler);
+            case Reproduction.EVENTS.ERROR:
+                return this[dispatchOnErrorHandlers].push(handler);
             default:
                 break;
         }
@@ -83,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;
@@ -104,13 +100,15 @@ export class Reproduction {
             case Reproduction.EVENTS.FINISH:
                 ref = this[dispatchOnFinishHandlers];
                 break;
+            case Reproduction.EVENTS.ERROR:
+                ref = this[dispatchOnErrorHandlers];
+                break;
             default:
                 break;
         }
         for (i = 0, len = ref.length; i < len; i++) {
             handler = ref[i];
             handler(args);
-            // setTimeout(handler, 0);
         }
     }
     start() {
@@ -148,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;
     }
@@ -181,7 +175,7 @@ export class Reproduction {
         this.player.seekTo(seconds);
     }
     getVolume() {
-        return this.volume;
+        return this.player.getVolume();
     }
     setVolume(volume) {
         if (volume < 0) {
@@ -190,7 +184,6 @@ export class Reproduction {
         else if (volume > 100) {
             volume = 100;
         }
-        this.volume = volume;
         this.player.setVolume(volume);
     }
     getAvailablePlaybackRates() {
@@ -207,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(() => {
@@ -218,6 +212,7 @@ export class Reproduction {
                     this.countInAndPlay(this.getBPMInterval(), 5);
                 }
                 else {
+                    this.player.countingFinished();
                     this.play();
                 }
             }

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

@@ -18,7 +18,7 @@ const Template = (args) => {
         reproductionInstance.on('PLAYING', refreshEvent);
         reproductionInstance.on('PAUSED', refreshEvent);
         reproductionInstance.on('FINISH', refreshEvent);
-        reproductionInstance.start();
+        reproductionInstance.on('ERROR', (args) => { console.error("Reproduction error", args); });
     }, []);
     const handleStop = () => {
         if (reproduction) {
@@ -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.0",
+  "version": "0.8.2",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -127,7 +127,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
-    "@types/youtube": "^0.0.50",
+    "@types/youtube": "^0.1.2",
     "babel-loader": "^9.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",