@ldelia/react-media 0.3.0 → 0.4.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();
+    }
+}

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

@@ -0,0 +1,272 @@
+import { PLAYER_EVENTS } from './Player/PlayerEvents';
+import { ReproductionBuilder } from './ReproductionBuilder';
+import { PlayAlongPlayer } from './Player/PlayAlongPlayer';
+import { YouTubePlayer } from './Player/YouTubePlayer';
+
+type Player = PlayAlongPlayer | YouTubePlayer;
+
+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',
+} as const;
+
+const dispatchOnReadyHandlers = Symbol();
+const dispatchOnSongStartHandlers = Symbol();
+const dispatchOnCountingInHandlers = Symbol();
+const dispatchOnPlayHandlers = Symbol();
+const dispatchOnPlayingHandlers = Symbol();
+const dispatchOnPausedHandlers = Symbol();
+const dispatchOnFinishHandlers = Symbol();
+
+export class Reproduction {
+  private player: Player;
+  private requiresCountingIn: boolean;
+
+  private songTempo: number;
+  private state: number;
+  private ready: boolean;
+  private interval: ReturnType<typeof setInterval> | null;
+  private countingInCounter: number;
+  private [dispatchOnReadyHandlers]: (() => void)[];
+  private [dispatchOnSongStartHandlers]: (() => void)[];
+  private [dispatchOnCountingInHandlers]: (() => void)[];
+  private [dispatchOnPlayHandlers]: (() => void)[];
+  private [dispatchOnPlayingHandlers]: (() => void)[];
+  private [dispatchOnPausedHandlers]: (() => void)[];
+  private [dispatchOnFinishHandlers]: (() => void)[];
+
+  static get EVENTS() {
+    return EVENTS;
+  }
+
+  static get STATES() {
+    return STATES;
+  }
+
+  constructor(player: Player, requiresCountingIn: boolean, songTempo: number) {
+    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 as NodeJS.Timeout);
+      this.dispatch(Reproduction.EVENTS.FINISH);
+    });
+  }
+
+  on(eventName: keyof typeof Reproduction.EVENTS, handler: () => void) {
+    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: keyof typeof Reproduction.EVENTS) {
+    let handler, i, len;
+
+    let ref: (() => void)[] = [];
+
+    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);
+    }
+  }
+
+  private countIn(timeout: number, limit: number) {
+    // 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 as NodeJS.Timeout);
+
+    this.dispatch(Reproduction.EVENTS.PAUSED);
+  }
+
+  stop() {
+    this.state = Reproduction.STATES.STOPPED;
+    this.player.stop();
+    clearInterval(this.interval as NodeJS.Timeout);
+    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: number) {
+    this.player.seekTo(seconds);
+  }
+
+  getAvailablePlaybackRates() {
+    return this.player.getAvailablePlaybackRates();
+  }
+
+  setPlaybackRate(playbackRate: number) {
+    this.player.setPlaybackRate(playbackRate);
+  }
+
+  isAvailable() {
+    return this.player.isAvailable();
+  }
+
+  getBPMInterval() {
+    return 60000 / this.getTempo();
+  }
+
+  static newBuilder() {
+    return new ReproductionBuilder();
+  }
+}

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

@@ -0,0 +1,51 @@
+import { YouTubePlayer } from './Player/YouTubePlayer';
+import { PlayAlongPlayer } from './Player/PlayAlongPlayer';
+import { Reproduction } from './Reproduction';
+export class ReproductionBuilder {
+    constructor() {
+        this.trainingMode = false;
+        this.requiresCountingIn = false;
+        this.songDuration = null;
+        this.songTempo = null;
+        this.innerPlayer = null;
+    }
+    withSongDuration(songDuration) {
+        this.songDuration = songDuration;
+        return this;
+    }
+    withSongTempo(songTempo) {
+        this.songTempo = songTempo;
+        return this;
+    }
+    withTrainingMode(trainingMode) {
+        this.trainingMode = trainingMode;
+        return this;
+    }
+    withCountingIn(requiresCountingIn) {
+        this.requiresCountingIn = requiresCountingIn;
+        return this;
+    }
+    withInnerPlayer(innerPlayer) {
+        this.innerPlayer = innerPlayer;
+        return this;
+    }
+    createReproduction() {
+        if (this.requiresCountingIn && this.songTempo === null) {
+            throw new Error('The song tempo is mandatory');
+        }
+        if (this.innerPlayer === null) {
+            throw new Error('The inner player was not provided.');
+        }
+        let player;
+        if (this.trainingMode) {
+            player = new YouTubePlayer(this.innerPlayer);
+        }
+        else {
+            if (this.songDuration === null) {
+                throw new Error('The song duration is mandatory');
+            }
+            player = new PlayAlongPlayer(this.songDuration, this.innerPlayer);
+        }
+        return new Reproduction(player, this.requiresCountingIn, this.songTempo || 0);
+    }
+}