@ldelia/react-media 0.2.8 → 0.4.0

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

@@ -0,0 +1,126 @@
+import { PlayAlongPlayer } from './PlayAlongPlayer';
+import { PLAYER_EVENTS } from './PlayerEvents';
+// https://developers.google.com/youtube/iframe_api_reference
+var INNER_YOUTUBE_PLAYER_EVENTS;
+(function (INNER_YOUTUBE_PLAYER_EVENTS) {
+    INNER_YOUTUBE_PLAYER_EVENTS[INNER_YOUTUBE_PLAYER_EVENTS["VIDEO_UNSTARTED"] = -1] = "VIDEO_UNSTARTED";
+    INNER_YOUTUBE_PLAYER_EVENTS[INNER_YOUTUBE_PLAYER_EVENTS["VIDEO_ENDED"] = 0] = "VIDEO_ENDED";
+    INNER_YOUTUBE_PLAYER_EVENTS[INNER_YOUTUBE_PLAYER_EVENTS["VIDEO_PLAYING"] = 1] = "VIDEO_PLAYING";
+    INNER_YOUTUBE_PLAYER_EVENTS[INNER_YOUTUBE_PLAYER_EVENTS["VIDEO_PAUSED"] = 2] = "VIDEO_PAUSED";
+    INNER_YOUTUBE_PLAYER_EVENTS[INNER_YOUTUBE_PLAYER_EVENTS["VIDEO_BUFFERING"] = 3] = "VIDEO_BUFFERING";
+    INNER_YOUTUBE_PLAYER_EVENTS[INNER_YOUTUBE_PLAYER_EVENTS["VIDEO_CUED"] = 5] = "VIDEO_CUED";
+})(INNER_YOUTUBE_PLAYER_EVENTS || (INNER_YOUTUBE_PLAYER_EVENTS = {}));
+const dispatchOnReadyHandlers = Symbol();
+const dispatchOnFinishHandlers = Symbol();
+export class YouTubePlayer {
+    static get EVENTS() {
+        return PLAYER_EVENTS;
+    }
+    constructor(innerPlayer) {
+        this[dispatchOnFinishHandlers] = [];
+        this[dispatchOnReadyHandlers] = [];
+        this.currentTime = 0;
+        this.isRunning = false;
+        this.setInnerPlayer(innerPlayer);
+    }
+    setInnerPlayer(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.innerPlayer.playVideo();
+        this.innerPlayer.pauseVideo();
+        this.innerPlayer.addEventListener('onStateChange', (videoState) => {
+            switch (videoState.data) {
+                case INNER_YOUTUBE_PLAYER_EVENTS.VIDEO_ENDED:
+                    this.dispatch(YouTubePlayer.EVENTS.FINISH);
+                    this.isRunning = false;
+                    this.currentTime = 0;
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    getInnerPlayer() {
+        return this.innerPlayer;
+    }
+    play() {
+        const videoPlayer = this.getInnerPlayer();
+        videoPlayer.playVideo();
+        this.isRunning = true;
+    }
+    pause() {
+        this.isRunning = false;
+        this.getInnerPlayer().pauseVideo();
+        this.currentTime = this.getInnerPlayer().getCurrentTime();
+    }
+    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
+         *  videoPlayer.stopVideo();
+         */
+        this.getInnerPlayer().pauseVideo();
+        this.seekTo(0);
+    }
+    seekTo(seconds) {
+        const videoPlayer = this.getInnerPlayer();
+        this.currentTime = seconds;
+        videoPlayer.seekTo(this.currentTime);
+        if (this.isRunning) {
+            this.play();
+        }
+    }
+    getCurrentTime() {
+        return this.isRunning
+            ? this.getInnerPlayer().getCurrentTime()
+            : this.currentTime;
+    }
+    getDuration() {
+        if (this.isAvailable()) {
+            return this.getInnerPlayer().getDuration();
+        }
+    }
+    getAvailablePlaybackRates() {
+        return this.getInnerPlayer().getAvailablePlaybackRates();
+    }
+    setPlaybackRate(playbackRate) {
+        if (!this.getAvailablePlaybackRates().includes(playbackRate)) {
+            throw new Error(`The PlayAlongPlayer doesn't support a playbackRate with value ${playbackRate}`);
+        }
+        this.getInnerPlayer().setPlaybackRate(playbackRate);
+    }
+    isAvailable() {
+        return this.getInnerPlayer() !== null;
+    }
+    on(eventName, handler) {
+        switch (eventName) {
+            case PlayAlongPlayer.EVENTS.READY:
+                return this[dispatchOnReadyHandlers].push(handler);
+            case PlayAlongPlayer.EVENTS.FINISH:
+                return this[dispatchOnFinishHandlers].push(handler);
+            default:
+                break;
+        }
+    }
+    dispatch(eventName) {
+        let handler, i, len;
+        let ref = [];
+        switch (eventName) {
+            case YouTubePlayer.EVENTS.READY:
+                ref = this[dispatchOnReadyHandlers];
+                break;
+            case YouTubePlayer.EVENTS.FINISH:
+                ref = this[dispatchOnFinishHandlers];
+                break;
+            default:
+                break;
+        }
+        for (i = 0, len = ref.length; i < len; i++) {
+            handler = ref[i];
+            setTimeout(handler, 0);
+        }
+    }
+}

package/src/components/reproduction-widget/models/Player/YouTubePlayer.ts

@@ -0,0 +1,171 @@
+import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+import { PlayAlongPlayer } from './PlayAlongPlayer';
+import { PLAYER_EVENTS } from './PlayerEvents';
+
+// https://developers.google.com/youtube/iframe_api_reference
+enum INNER_YOUTUBE_PLAYER_EVENTS {
+  VIDEO_UNSTARTED = -1,
+  VIDEO_ENDED = 0,
+  VIDEO_PLAYING = 1,
+  VIDEO_PAUSED = 2,
+  VIDEO_BUFFERING = 3,
+  VIDEO_CUED = 5,
+}
+
+interface INNER_YOUTUBE_PLAYER_StateChangeEvent {
+  data: INNER_YOUTUBE_PLAYER_EVENTS;
+}
+
+const dispatchOnReadyHandlers = Symbol();
+const dispatchOnFinishHandlers = Symbol();
+
+export class YouTubePlayer {
+  private currentTime: number;
+  private isRunning: boolean;
+  private innerPlayer: InnerYouTubePlayer | number;
+  private [dispatchOnReadyHandlers]: (() => void)[];
+  private [dispatchOnFinishHandlers]: (() => void)[];
+
+  static get EVENTS() {
+    return PLAYER_EVENTS;
+  }
+
+  constructor(innerPlayer: InnerYouTubePlayer) {
+    this[dispatchOnFinishHandlers] = [];
+    this[dispatchOnReadyHandlers] = [];
+
+    this.currentTime = 0;
+    this.isRunning = false;
+
+    this.setInnerPlayer(innerPlayer);
+  }
+
+  private setInnerPlayer(innerPlayer: InnerYouTubePlayer) {
+    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.innerPlayer.playVideo();
+    this.innerPlayer.pauseVideo();
+
+    this.innerPlayer.addEventListener(
+      'onStateChange',
+      (videoState: INNER_YOUTUBE_PLAYER_StateChangeEvent) => {
+        switch (videoState.data) {
+          case INNER_YOUTUBE_PLAYER_EVENTS.VIDEO_ENDED:
+            this.dispatch(YouTubePlayer.EVENTS.FINISH);
+            this.isRunning = false;
+            this.currentTime = 0;
+            break;
+          default:
+            break;
+        }
+      }
+    );
+  }
+
+  getInnerPlayer() {
+    return this.innerPlayer;
+  }
+
+  play() {
+    const videoPlayer = this.getInnerPlayer();
+    videoPlayer.playVideo();
+
+    this.isRunning = true;
+  }
+
+  pause() {
+    this.isRunning = false;
+
+    this.getInnerPlayer().pauseVideo();
+
+    this.currentTime = this.getInnerPlayer().getCurrentTime();
+  }
+
+  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
+     *  videoPlayer.stopVideo();
+     */
+    this.getInnerPlayer().pauseVideo();
+
+    this.seekTo(0);
+  }
+
+  seekTo(seconds: number) {
+    const videoPlayer = this.getInnerPlayer();
+    this.currentTime = seconds;
+
+    videoPlayer.seekTo(this.currentTime);
+
+    if (this.isRunning) {
+      this.play();
+    }
+  }
+
+  getCurrentTime() {
+    return this.isRunning
+      ? this.getInnerPlayer().getCurrentTime()
+      : this.currentTime;
+  }
+
+  getDuration() {
+    if (this.isAvailable()) {
+      return this.getInnerPlayer().getDuration();
+    }
+  }
+
+  getAvailablePlaybackRates() {
+    return this.getInnerPlayer().getAvailablePlaybackRates();
+  }
+
+  setPlaybackRate(playbackRate: number) {
+    if (!this.getAvailablePlaybackRates().includes(playbackRate)) {
+      throw new Error(
+        `The PlayAlongPlayer doesn't support a playbackRate with value ${playbackRate}`
+      );
+    }
+    this.getInnerPlayer().setPlaybackRate(playbackRate);
+  }
+
+  isAvailable() {
+    return this.getInnerPlayer() !== null;
+  }
+
+  on(eventName: keyof typeof PlayAlongPlayer.EVENTS, handler: () => void) {
+    switch (eventName) {
+      case PlayAlongPlayer.EVENTS.READY:
+        return this[dispatchOnReadyHandlers].push(handler);
+      case PlayAlongPlayer.EVENTS.FINISH:
+        return this[dispatchOnFinishHandlers].push(handler);
+      default:
+        break;
+    }
+  }
+
+  dispatch(eventName: keyof typeof PlayAlongPlayer.EVENTS) {
+    let handler, i, len;
+    let ref: (() => void)[] = [];
+
+    switch (eventName) {
+      case YouTubePlayer.EVENTS.READY:
+        ref = this[dispatchOnReadyHandlers];
+        break;
+      case YouTubePlayer.EVENTS.FINISH:
+        ref = this[dispatchOnFinishHandlers];
+        break;
+      default:
+        break;
+    }
+
+    for (i = 0, len = ref.length; i < len; i++) {
+      handler = ref[i];
+      setTimeout(handler, 0);
+    }
+  }
+}

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

@@ -0,0 +1,214 @@
+import { PLAYER_EVENTS } from './Player/PlayerEvents';
+import { ReproductionBuilder } from './ReproductionBuilder';
+const STATES = {
+    STOPPED: 0,
+    COUNTING_IN: 1,
+    PLAYING: 2,
+    PAUSED: 3,
+};
+const EVENTS = {
+    READY: 'READY',
+    START: 'START',
+    COUNTING_IN: 'COUNTING_IN',
+    PLAY: 'PLAY',
+    PLAYING: 'PLAYING',
+    PAUSED: 'PAUSED',
+    FINISH: 'FINISH',
+};
+const dispatchOnReadyHandlers = Symbol();
+const dispatchOnSongStartHandlers = Symbol();
+const dispatchOnCountingInHandlers = Symbol();
+const dispatchOnPlayHandlers = Symbol();
+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) {
+        this[dispatchOnReadyHandlers] = [];
+        this[dispatchOnSongStartHandlers] = [];
+        this[dispatchOnCountingInHandlers] = [];
+        this[dispatchOnPlayHandlers] = [];
+        this[dispatchOnPlayingHandlers] = [];
+        this[dispatchOnPausedHandlers] = [];
+        this[dispatchOnFinishHandlers] = [];
+        this.songTempo = songTempo;
+        this.player = player;
+        this.ready = false;
+        this.state = Reproduction.STATES.STOPPED;
+        this.interval = null;
+        this.requiresCountingIn = requiresCountingIn;
+        this.countingInCounter = 0;
+        this.player.on(PLAYER_EVENTS.READY, () => {
+            this.ready = true;
+            this.dispatch(Reproduction.EVENTS.READY);
+        });
+        this.player.on(PLAYER_EVENTS.FINISH, () => {
+            this.state = Reproduction.STATES.STOPPED;
+            clearInterval(this.interval);
+            this.dispatch(Reproduction.EVENTS.FINISH);
+        });
+    }
+    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:
+                return this[dispatchOnCountingInHandlers].push(handler);
+            case Reproduction.EVENTS.PLAY:
+                return this[dispatchOnPlayHandlers].push(handler);
+            case Reproduction.EVENTS.PLAYING:
+                return this[dispatchOnPlayingHandlers].push(handler);
+            case Reproduction.EVENTS.PAUSED:
+                return this[dispatchOnPausedHandlers].push(handler);
+            case Reproduction.EVENTS.FINISH:
+                return this[dispatchOnFinishHandlers].push(handler);
+            default:
+                break;
+        }
+    }
+    dispatch(eventName) {
+        let handler, i, len;
+        let ref = [];
+        switch (eventName) {
+            case Reproduction.EVENTS.READY:
+                ref = this[dispatchOnReadyHandlers];
+                break;
+            case Reproduction.EVENTS.START:
+                ref = this[dispatchOnSongStartHandlers];
+                break;
+            case Reproduction.EVENTS.COUNTING_IN:
+                ref = this[dispatchOnCountingInHandlers];
+                break;
+            case Reproduction.EVENTS.PLAY:
+                ref = this[dispatchOnPlayHandlers];
+                break;
+            case Reproduction.EVENTS.PLAYING:
+                ref = this[dispatchOnPlayingHandlers];
+                break;
+            case Reproduction.EVENTS.PAUSED:
+                ref = this[dispatchOnPausedHandlers];
+                break;
+            case Reproduction.EVENTS.FINISH:
+                ref = this[dispatchOnFinishHandlers];
+                break;
+            default:
+                break;
+        }
+        for (i = 0, len = ref.length; i < len; i++) {
+            handler = ref[i];
+            handler();
+            // setTimeout(handler, 0);
+        }
+    }
+    countIn(timeout, limit) {
+        // the initial count starts instantly, no waiting
+        this.countingInCounter++;
+        this.dispatch(Reproduction.EVENTS.COUNTING_IN);
+        const interval = setInterval(() => {
+            this.countingInCounter++;
+            if (this.countingInCounter === limit) {
+                clearInterval(interval);
+                this.countingInCounter = 0;
+                if (limit !== 5) {
+                    this.countIn(this.getBPMInterval(), 5);
+                }
+                else {
+                    this.play();
+                }
+            }
+            else {
+                this.dispatch(Reproduction.EVENTS.COUNTING_IN);
+            }
+        }, timeout);
+    }
+    start() {
+        if (this.state === Reproduction.STATES.STOPPED) {
+            this.dispatch(Reproduction.EVENTS.START);
+        }
+        if (this.requiresCountingIn && this.getCurrentTime() === 0) {
+            this.state = Reproduction.STATES.COUNTING_IN;
+            this.countIn(this.getBPMInterval() * 2, 3);
+        }
+        else {
+            this.play();
+        }
+    }
+    play() {
+        this.state = Reproduction.STATES.PLAYING;
+        this.dispatch(Reproduction.EVENTS.PLAY);
+        this.player.play();
+        const intervalTimeout = 200;
+        this.interval = setInterval(() => {
+            if (this.isPlaying()) {
+                this.dispatch(Reproduction.EVENTS.PLAYING);
+            }
+        }, intervalTimeout);
+    }
+    pause() {
+        this.state = Reproduction.STATES.PAUSED;
+        this.player.pause();
+        clearInterval(this.interval);
+        this.dispatch(Reproduction.EVENTS.PAUSED);
+    }
+    stop() {
+        this.state = Reproduction.STATES.STOPPED;
+        this.player.stop();
+        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;
+    }
+    isStopped() {
+        return this.state === Reproduction.STATES.STOPPED;
+    }
+    isPaused() {
+        return this.state === Reproduction.STATES.PAUSED;
+    }
+    isCountingIn() {
+        return this.state === Reproduction.STATES.COUNTING_IN;
+    }
+    getPlayer() {
+        return this.player;
+    }
+    getTempo() {
+        return this.songTempo;
+    }
+    getCurrentTime() {
+        // in seconds with milliseconds.
+        return this.player.getCurrentTime();
+    }
+    getDuration() {
+        return this.player.getDuration();
+    }
+    seekTo(seconds) {
+        this.player.seekTo(seconds);
+    }
+    getAvailablePlaybackRates() {
+        return this.player.getAvailablePlaybackRates();
+    }
+    setPlaybackRate(playbackRate) {
+        this.player.setPlaybackRate(playbackRate);
+    }
+    isAvailable() {
+        return this.player.isAvailable();
+    }
+    getBPMInterval() {
+        return 60000 / this.getTempo();
+    }
+    static newBuilder() {
+        return new ReproductionBuilder();
+    }
+}