@ldelia/react-media 0.4.1 → 0.4.3

package/src/components/__tests__/timeline/timeline.test.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Timeline } from '../../timeline';
-describe('Timeline', () => {
-    let props;
-    beforeEach(() => {
-        props = {
-            duration: 300,
-            value: 15,
-            onChange: jest.fn(),
-            onRangeChange: jest.fn(),
-            zoomLevel: 0,
-        };
-    });
-    describe('render()', () => {
-        it('renders a timeline', () => {
-            const rootElement = document.createElement('div');
-            const root = createRoot(rootElement);
-            root.render(React.createElement(Timeline, Object.assign({}, props)));
-        });
-    });
-});

package/src/components/__tests__/timeline/timeline.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Timeline, TimelineProps } from '../../timeline';
-
-describe('Timeline', () => {
-  let props: TimelineProps;
-
-  beforeEach(() => {
-    props = {
-      duration: 300,
-      value: 15,
-      onChange: jest.fn(),
-      onRangeChange: jest.fn(),
-      zoomLevel: 0,
-    };
-  });
-
-  describe('render()', () => {
-    it('renders a timeline', () => {
-      const rootElement = document.createElement('div');
-
-      const root = createRoot(rootElement);
-      root.render(<Timeline {...props} />);
-    });
-  });
-});

package/src/components/index.js

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

package/src/components/index.ts

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

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

@@ -1,27 +0,0 @@
-# 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.tsx

@@ -1,68 +0,0 @@
-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.tsx

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

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

@@ -1,10 +0,0 @@
-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.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);
-    }
-  }
-}