@ldelia/react-media 0.4.1 → 0.4.3

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

package/src/components/timeline/README.md

@@ -1,111 +0,0 @@
-# Timeline
-
-<!-- STORY -->
-
-<hr>
-
-A component for displaying the duration of a media file (mp3, mp4, etc.) and the current reproduction position. It also allows selecting a range for reproduction looping purposes.
-
-## Installation
-
-### NPM
-
-```
-npm i @bit/ldelia.react-media.timeline
-```
-
-### YARN
-
-```
-yarn add @bit/ldelia.react-media.timeline
-```
-
-### BIT
-
-```
-bit import ldelia.react-media/timeline
-```
-
-## Import
-
-```js
-import Timeline from '@bit/ldelia.react-media.timeline';
-```
-
-## Usage
-
-```jsx
-<Timeline
-  duration={301}
-  value={15}
-  onChange={() => 'Do something'}
-  onRangeChange={() => 'Do something'}
-/>
-```
-
-##### Required props
-
-| Name       | Type     | Description                       |
-| ---------- | -------- | --------------------------------- |
-| `duration` | `number` | The media file duration           |
-| `value`    | `number` | The current reproduction position |
-
-##### Optional props
-
-| Name            | Type       | Default    | Description                                        |
-| --------------- | ---------- | ---------- | -------------------------------------------------- |
-| `onChange`      | `function` | `() => {}` | Fired when the user double-clicks on the timeline  |
-| `onRangeChange` | `function` | `() => {}` | Fired when the user select a range in the timeline |
-| `selectedRange` | `array`    | `[]`       | The current selected range                         |
-| `zoomLevel`     | `number`   | `0`        | `The current timeline zoom level`                  |
-
-## Customization
-
-#### Timeline widget
-
-```
-const StyledTimeline = styled(Timeline)`
-    background-color: green;
-`;
-```
-
-#### Value bar
-
-```
-const StyledTimeline = styled(Timeline)`
-  .media-timeline-value-line {
-    background-color: red;
-    width: 5px;
-  }
-`;
-```
-
-#### Tick-time labels
-
-```
-const StyledTimeline = styled(Timeline)`
-  .media-timeline-tick-time {
-    color: red;
-  }
-`;
-```
-
-#### Tick-time/Value bar container
-
-```
-const StyledTimeline = styled(Timeline)`
-  .media-timeline-value-line-canvas {
-    color: red;
-  }
-`;
-```
-
-#### Range selector
-
-```
-const StyledTimeline = styled(Timeline)`
-  .media-timeline-range-selector-canvas {
-    color: red;
-  }
-`;
-```

package/src/components/timeline/RangeSelectorCanvas/RangeSelectorCanvas.js

@@ -1,127 +0,0 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
-import styled from 'styled-components';
-import { ZoomContext } from '../ZoomContext/ZoomContext';
-import { pixelToSeconds, secondsToPixel } from '../utils/utils';
-const OverlayCanvas = styled.canvas `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  color: cadetblue;
-`;
-const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
-    const canvasRef = useRef(null);
-    const zoomContextValue = useContext(ZoomContext);
-    let isSelectingRange = false;
-    let selectedRangeInPixels = useMemo(() => [], []);
-    if (selectedRange.length === 2) {
-        selectedRangeInPixels = [
-            secondsToPixel(zoomContextValue, selectedRange[0]),
-            secondsToPixel(zoomContextValue, selectedRange[1]),
-        ];
-    }
-    let lastValidSelectedRangeInPixels = [];
-    const getMousePointerPixelPosition = (e) => {
-        const canvas = canvasRef.current;
-        let rect = canvas.getBoundingClientRect();
-        return e.clientX - rect.left;
-    };
-    const drawRect = (pixelX0, pixelX1) => {
-        const canvas = canvasRef.current;
-        const context = canvas.getContext('2d');
-        context.globalAlpha = 0.3;
-        context.fillStyle = window
-            .getComputedStyle(canvas)
-            .getPropertyValue('color');
-        context.fillRect(pixelX0, 0, pixelX1 - pixelX0, context.canvas.height);
-        context.globalAlpha = 1.0;
-    };
-    const onCanvasDoubleClick = (e) => {
-        const x0 = getMousePointerPixelPosition(e);
-        onChange(pixelToSeconds(zoomContextValue, x0));
-        selectedRangeInPixels = lastValidSelectedRangeInPixels;
-    };
-    const isPixelNearSelectedRange = (x0) => {
-        if (selectedRangeInPixels.length === 2) {
-            const diff = Math.min(Math.abs(selectedRangeInPixels[0] - x0), Math.abs(selectedRangeInPixels[1] - x0));
-            return diff <= zoomContextValue.pixelsInSecond / 2;
-        }
-        return false;
-    };
-    const onCanvasMouseDown = (e) => {
-        const mouseCurrentPosition = getMousePointerPixelPosition(e);
-        if (!isPixelNearSelectedRange(mouseCurrentPosition)) {
-            // Keep track of the first position of the new range.
-            selectedRangeInPixels = [mouseCurrentPosition, mouseCurrentPosition];
-        }
-        isSelectingRange = true;
-    };
-    const onCanvasMouseMove = (e) => {
-        const canvas = canvasRef.current;
-        const context = canvas.getContext('2d');
-        const mouseCurrentPosition = getMousePointerPixelPosition(e);
-        if (selectedRangeInPixels.length === 2) {
-            const diff = Math.min(Math.abs(selectedRangeInPixels[0] - mouseCurrentPosition), Math.abs(selectedRangeInPixels[1] - mouseCurrentPosition));
-            // Change the mouse's cursor if it's near a selected range.
-            canvas.style.cursor =
-                diff <= zoomContextValue.pixelsInSecond / 2 ? 'col-resize' : 'default';
-            if (!isSelectingRange)
-                return;
-            if (mouseCurrentPosition < selectedRangeInPixels[0]) {
-                // The left side must be enlarged.
-                selectedRangeInPixels[0] = mouseCurrentPosition;
-            }
-            else if (mouseCurrentPosition > selectedRangeInPixels[1]) {
-                // The right side must be enlarged.
-                selectedRangeInPixels[1] = mouseCurrentPosition;
-            }
-            else {
-                const diffX0 = mouseCurrentPosition - selectedRangeInPixels[0];
-                const diffX1 = selectedRangeInPixels[1] - mouseCurrentPosition;
-                if (diffX0 < diffX1) {
-                    // The left side must be shrunk.
-                    selectedRangeInPixels[0] = mouseCurrentPosition;
-                }
-                else {
-                    // The right side must be shrunk.
-                    selectedRangeInPixels[1] = mouseCurrentPosition;
-                }
-            }
-            context.clearRect(0, 0, canvas.width, canvas.height);
-            drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
-        }
-    };
-    const onCanvasMouseUp = (e) => {
-        if (selectedRangeInPixels.length !== 2)
-            return;
-        isSelectingRange = false;
-        const mouseCurrentPosition = getMousePointerPixelPosition(e);
-        const pixelRange = [
-            Math.min(selectedRangeInPixels[0], mouseCurrentPosition),
-            Math.max(selectedRangeInPixels[1], mouseCurrentPosition),
-        ];
-        if (pixelRange[1] - pixelRange[0] <= 1) {
-            // It was just a click
-            selectedRangeInPixels = lastValidSelectedRangeInPixels;
-        }
-        else {
-            lastValidSelectedRangeInPixels = pixelRange;
-            onRangeChange([
-                pixelToSeconds(zoomContextValue, pixelRange[0]),
-                pixelToSeconds(zoomContextValue, pixelRange[1]),
-            ]);
-        }
-    };
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
-        canvas.width = canvas.offsetWidth;
-        canvas.height = canvas.offsetHeight;
-        if (selectedRangeInPixels.length === 0)
-            return;
-        drawRect(selectedRangeInPixels[0], selectedRangeInPixels[1]);
-    }, [selectedRangeInPixels]);
-    return (React.createElement(OverlayCanvas, { ref: canvasRef, onDoubleClick: onCanvasDoubleClick, onMouseDown: onCanvasMouseDown, onMouseMove: onCanvasMouseMove, onMouseUp: onCanvasMouseUp, className: 'media-timeline-range-selector-canvas' }));
-};
-export default React.memo(RangeSelectorCanvas);