@ldelia/react-media 0.4.2 → 0.4.4

package/src/components/reproduction-widget/inner-players/YouTubeInnerPlayer.tsx

@@ -1,36 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import YouTube, { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
-
-interface Props {
-  videoId: string;
-  onReady: (event: { target: InnerYouTubePlayer }) => void;
-}
-export const YouTubeInnerPlayer = ({ videoId, onReady }: Props) => {
-  const [origin, setOrigin] = useState('');
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setOrigin(window.location.href);
-    }
-  }, []);
-
-  const opts = {
-    playerVars: {
-      // https://developers.google.com/youtube/player_parameters
-      autoplay: 0,
-      controls: 0,
-      showinfo: 0,
-      enablejsapi: 1,
-      origin: origin,
-    },
-  };
-  return (
-    <YouTube
-      id={'YT-' + videoId}
-      className='youtube-player'
-      videoId={videoId}
-      opts={opts}
-      onReady={onReady}
-    />
-  );
-};

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

@@ -1,129 +0,0 @@
-import { PLAYER_EVENTS } from './PlayerEvents';
-
-const dispatchOnReadyHandlers = Symbol();
-const dispatchOnFinishHandlers = Symbol();
-
-export class PlayAlongPlayer {
-  private readonly duration: number;
-  private currentTime: number;
-  private isRunning: boolean;
-  private currentPlaybackRate: number;
-  private innerPlayer: string | null;
-  private interval: ReturnType<typeof setInterval> | null = null;
-  private [dispatchOnReadyHandlers]: (() => void)[];
-  private [dispatchOnFinishHandlers]: (() => void)[];
-
-  static get EVENTS() {
-    return PLAYER_EVENTS;
-  }
-
-  constructor(duration: number, innerPlayer: string) {
-    this.interval = null;
-    this.currentTime = 0;
-    this.isRunning = false;
-    this.duration = duration;
-    this.currentPlaybackRate = 1;
-    this.innerPlayer = null;
-
-    this[dispatchOnFinishHandlers] = [];
-    this[dispatchOnReadyHandlers] = [];
-
-    this.setInnerPlayer(innerPlayer);
-  }
-
-  private setInnerPlayer(innerPlayer: string) {
-    this.innerPlayer = innerPlayer;
-    this.dispatch(PlayAlongPlayer.EVENTS.READY);
-  }
-
-  play() {
-    this.isRunning = true;
-
-    const intervalTimeout = 1000;
-
-    this.interval = setInterval(() => {
-      if (this.isRunning) {
-        this.currentTime++;
-        if (this.currentTime >= this.getDuration()) {
-          this.stop();
-          this.dispatch(PlayAlongPlayer.EVENTS.FINISH);
-        }
-      }
-    }, intervalTimeout);
-  }
-
-  pause() {
-    this.isRunning = false;
-  }
-
-  stop() {
-    this.currentTime = 0;
-    this.isRunning = false;
-
-    if (this.interval !== null) {
-      clearInterval(this.interval as NodeJS.Timeout);
-      this.interval = null;
-    }
-  }
-
-  seekTo(seconds: number) {
-    this.currentTime = seconds;
-  }
-
-  getCurrentTime() {
-    return this.currentTime;
-  }
-
-  getDuration() {
-    return this.duration;
-  }
-
-  isAvailable() {
-    return true;
-  }
-
-  getAvailablePlaybackRates() {
-    return [1];
-  }
-
-  setPlaybackRate(playbackRate: number) {
-    if (!this.getAvailablePlaybackRates().includes(playbackRate)) {
-      throw new Error(
-        `The PlayAlongPlayer doesn't support a playbackRate with value ${playbackRate}`
-      );
-    }
-    this.currentPlaybackRate = playbackRate;
-  }
-
-  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 PlayAlongPlayer.EVENTS.READY:
-        ref = this[dispatchOnReadyHandlers];
-        break;
-      case PlayAlongPlayer.EVENTS.FINISH:
-        ref = this[dispatchOnFinishHandlers];
-        break;
-      default:
-        break;
-    }
-
-    for (i = 0, len = ref.length; i < len; i++) {
-      handler = ref[i];
-      handler();
-    }
-  }
-}

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

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

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

@@ -1,171 +0,0 @@
-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.ts

@@ -1,272 +0,0 @@
-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.ts

@@ -1,70 +0,0 @@
-import { YouTubePlayer } from './Player/YouTubePlayer';
-import { PlayAlongPlayer } from './Player/PlayAlongPlayer';
-import { Reproduction } from './Reproduction';
-import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
-
-export class ReproductionBuilder {
-  private trainingMode: boolean;
-  private requiresCountingIn: boolean;
-  private songDuration: number | null;
-  private songTempo: number | null;
-  private innerPlayer: InnerYouTubePlayer | string;
-
-  constructor() {
-    this.trainingMode = false;
-    this.requiresCountingIn = false;
-    this.songDuration = null;
-    this.songTempo = null;
-    this.innerPlayer = null;
-  }
-
-  withSongDuration(songDuration: number) {
-    this.songDuration = songDuration;
-    return this;
-  }
-
-  withSongTempo(songTempo: number) {
-    this.songTempo = songTempo;
-    return this;
-  }
-
-  withTrainingMode(trainingMode: boolean) {
-    this.trainingMode = trainingMode;
-    return this;
-  }
-
-  withCountingIn(requiresCountingIn: boolean) {
-    this.requiresCountingIn = requiresCountingIn;
-    return this;
-  }
-
-  withInnerPlayer(innerPlayer: InnerYouTubePlayer | string) {
-    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
-    );
-  }
-}