@ldelia/react-media 0.3.0 → 0.4.1

package/README.md

@@ -5,10 +5,7 @@ A React components collection for media-related features.
 ## Available Components
 
 - Timeline ([Docs](./src/components/timeline/README.md))
-
-## In Progress
-
-- Audio/Video player
+- ReproductionWidget ([Docs](./src/components/reproduction-widget/README.md))
 
 ## Storybook
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -48,6 +48,7 @@
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.3.1",
     "react-refresh": "^0.11.0",
+    "react-youtube": "^10.1.0",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.3.0",

package/src/components/index.js

@@ -1 +1,2 @@
+export * from './reproduction-widget';
 export * from './timeline';

package/src/components/index.ts

@@ -1 +1,2 @@
+export * from './reproduction-widget';
 export * from './timeline';

package/src/components/reproduction-widget/README.md

@@ -0,0 +1,27 @@
+# ReproductionWidget
+
+<!-- STORY -->
+
+<hr>
+
+A reproduction player that exposes an object that allows users to play around with the reproduction, e.g., stop/pause it.
+Currently, it supports YouTube videos and a silent mode, meaning a reproduction without associated media, ideal for playing an instrument without any music but with the time running.
+
+
+## Usage
+
+```jsx
+<ReproductionWidget
+  trainingMode={true}
+  videoId={'jFI-RBqXzhU'}
+  onInit={(reproduction) => { reproduction.start() }}
+/>
+```
+
+##### Required props
+
+| Name           | Type       | Description                                                                         |
+|----------------|------------|-------------------------------------------------------------------------------------|
+| `trainingMode` | `boolean`  | If true, will reproduce the video with youtube, otherwise, silent mode will be used |
+| `videoId`      | `string`   | YouTube video id (required if trainingMode === true)                                |
+| `onInit`       | `function` | Fired when the reproduction is ready to use                                         |   

package/src/components/reproduction-widget/ReproductionWidget.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { YouTubeInnerPlayer } from './inner-players/YouTubeInnerPlayer';
+import { PlayAlongInnerPlayer } from './inner-players/PlayAlongInnerPlayer';
+import { Reproduction } from './models/Reproduction';
+export const ReproductionWidget = ({ trainingMode, videoId, onInit, }) => {
+    const DURATION_TO_TEST = 30;
+    const TEMPO_TO_TEST = 90;
+    const WITH_COUNTING_IN_TEST = true;
+    function onPlayAlongInnerPlayerReadyHandler(event) {
+        let newReproduction = Reproduction.newBuilder()
+            .withTrainingMode(false)
+            .withSongDuration(DURATION_TO_TEST)
+            .withSongTempo(TEMPO_TO_TEST)
+            .withCountingIn(WITH_COUNTING_IN_TEST)
+            .withInnerPlayer(event.target)
+            .createReproduction();
+        onInit(newReproduction);
+    }
+    function onYouTubeInnerPlayerReadyHandler(event) {
+        let newReproduction = Reproduction.newBuilder()
+            .withTrainingMode(true)
+            .withSongTempo(TEMPO_TO_TEST)
+            .withCountingIn(WITH_COUNTING_IN_TEST)
+            .withInnerPlayer(event.target)
+            .createReproduction();
+        onInit(newReproduction);
+    }
+    return (React.createElement(React.Fragment, null, trainingMode ? (React.createElement(YouTubeInnerPlayer, { videoId: videoId, onReady: onYouTubeInnerPlayerReadyHandler })) : (React.createElement(PlayAlongInnerPlayer, { onReady: onPlayAlongInnerPlayerReadyHandler }))));
+};

package/src/components/reproduction-widget/ReproductionWidget.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { YouTubeInnerPlayer } from './inner-players/YouTubeInnerPlayer';
+import { PlayAlongInnerPlayer } from './inner-players/PlayAlongInnerPlayer';
+import { Reproduction } from './models/Reproduction';
+import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+
+interface BaseProps {
+  trainingMode: boolean;
+  onInit: (reproduction: Reproduction) => void;
+}
+
+interface TrainingProps extends BaseProps {
+  trainingMode: true;
+  videoId: string;
+}
+
+interface NonTrainingProps extends BaseProps {
+  trainingMode: false;
+  videoId?: never;
+}
+
+export type ReproductionWidgetProps = TrainingProps | NonTrainingProps;
+
+export const ReproductionWidget = ({
+  trainingMode,
+  videoId,
+  onInit,
+}: ReproductionWidgetProps) => {
+  const DURATION_TO_TEST = 30;
+  const TEMPO_TO_TEST = 90;
+  const WITH_COUNTING_IN_TEST = true;
+
+  function onPlayAlongInnerPlayerReadyHandler(event: { target: string }) {
+    let newReproduction = Reproduction.newBuilder()
+      .withTrainingMode(false)
+      .withSongDuration(DURATION_TO_TEST)
+      .withSongTempo(TEMPO_TO_TEST)
+      .withCountingIn(WITH_COUNTING_IN_TEST)
+      .withInnerPlayer(event.target)
+      .createReproduction();
+    onInit(newReproduction);
+  }
+
+  function onYouTubeInnerPlayerReadyHandler(event: {
+    target: InnerYouTubePlayer;
+  }) {
+    let newReproduction = Reproduction.newBuilder()
+      .withTrainingMode(true)
+      .withSongTempo(TEMPO_TO_TEST)
+      .withCountingIn(WITH_COUNTING_IN_TEST)
+      .withInnerPlayer(event.target)
+      .createReproduction();
+    onInit(newReproduction);
+  }
+
+  return (
+    <>
+      {trainingMode ? (
+        <YouTubeInnerPlayer
+          videoId={videoId}
+          onReady={onYouTubeInnerPlayerReadyHandler}
+        />
+      ) : (
+        <PlayAlongInnerPlayer onReady={onPlayAlongInnerPlayerReadyHandler} />
+      )}
+    </>
+  );
+};

package/src/components/reproduction-widget/index.js

@@ -0,0 +1 @@
+export * from './ReproductionWidget';

package/src/components/reproduction-widget/index.tsx

@@ -0,0 +1 @@
+export * from './ReproductionWidget';

package/src/components/reproduction-widget/inner-players/PlayAlongInnerPlayer.js

@@ -0,0 +1,5 @@
+import React, { useEffect } from 'react';
+export const PlayAlongInnerPlayer = ({ onReady }) => {
+    useEffect(() => onReady({ target: 'mock' }), []);
+    return React.createElement("div", null);
+};

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

@@ -0,0 +1,10 @@
+import React, { useEffect } from 'react';
+
+interface Props {
+  onReady: (event: { target: string }) => void;
+}
+export const PlayAlongInnerPlayer = ({ onReady }: Props) => {
+  useEffect(() => onReady({ target: 'mock' }), []);
+
+  return <div></div>;
+};

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

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from 'react';
+import YouTube from 'react-youtube';
+export const YouTubeInnerPlayer = ({ videoId, onReady }) => {
+    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 (React.createElement(YouTube, { id: 'YT-' + videoId, className: 'youtube-player', videoId: videoId, opts: opts, onReady: onReady }));
+};

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

@@ -0,0 +1,36 @@
+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.js

@@ -0,0 +1,97 @@
+import { PLAYER_EVENTS } from './PlayerEvents';
+const dispatchOnReadyHandlers = Symbol();
+const dispatchOnFinishHandlers = Symbol();
+export class PlayAlongPlayer {
+    static get EVENTS() {
+        return PLAYER_EVENTS;
+    }
+    constructor(duration, innerPlayer) {
+        this.interval = null;
+        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);
+    }
+    setInnerPlayer(innerPlayer) {
+        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);
+            this.interval = null;
+        }
+    }
+    seekTo(seconds) {
+        this.currentTime = seconds;
+    }
+    getCurrentTime() {
+        return this.currentTime;
+    }
+    getDuration() {
+        return this.duration;
+    }
+    isAvailable() {
+        return true;
+    }
+    getAvailablePlaybackRates() {
+        return [1];
+    }
+    setPlaybackRate(playbackRate) {
+        if (!this.getAvailablePlaybackRates().includes(playbackRate)) {
+            throw new Error(`The PlayAlongPlayer doesn't support a playbackRate with value ${playbackRate}`);
+        }
+        this.currentPlaybackRate = playbackRate;
+    }
+    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 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/PlayAlongPlayer.ts

@@ -0,0 +1,129 @@
+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.js

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

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

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

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);
+        }
+    }
+}