@ldelia/react-media 0.5.3 → 0.5.5

package/dist/components/reproduction-widget/ReproductionWidget.d.ts

@@ -7,12 +7,14 @@ interface BaseProps {
 }
 interface TrainingProps extends BaseProps {
     trainingMode: true;
+    duration?: never;
     videoId: string;
 }
 interface NonTrainingProps extends BaseProps {
     trainingMode: false;
+    duration: number;
     videoId?: never;
 }
 export type ReproductionWidgetProps = TrainingProps | NonTrainingProps;
-export declare const ReproductionWidget: ({ trainingMode, videoId, songTempo, onInit, }: ReproductionWidgetProps) => React.JSX.Element;
+export declare const ReproductionWidget: ({ trainingMode, duration, videoId, songTempo, onInit, }: ReproductionWidgetProps) => React.JSX.Element;
 export {};

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

@@ -2,12 +2,11 @@ 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, songTempo = 0, onInit, }) => {
-    const DURATION_TO_TEST = 30;
+export const ReproductionWidget = ({ trainingMode, duration, videoId, songTempo = 0, onInit, }) => {
     function onPlayAlongInnerPlayerReadyHandler(event) {
         let newReproduction = Reproduction.newBuilder()
             .withTrainingMode(false)
-            .withSongDuration(DURATION_TO_TEST)
+            .withSongDuration(duration)
             .withSongTempo(songTempo)
             .withCountingIn(songTempo > 0)
             .withInnerPlayer(event.target)

package/dist/components/reproduction-widget/inner-players/YouTubeInnerPlayer.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+import { InnerYouTubePlayerInterface } from '../models/Player/YouTubePlayer';
 interface Props {
     videoId: string;
     onReady: (event: {
-        target: InnerYouTubePlayer;
+        target: InnerYouTubePlayerInterface;
     }) => void;
 }
-export declare const YouTubeInnerPlayer: ({ videoId, onReady }: Props) => React.JSX.Element | null;
+export declare const YouTubeInnerPlayer: ({ videoId, onReady }: Props) => React.JSX.Element;
 export {};

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

@@ -1,24 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import YouTube from 'react-youtube';
+import React from 'react';
+import ReactPlayer from 'react-player/lazy';
 export const YouTubeInnerPlayer = ({ videoId, onReady }) => {
-    const [origin, setOrigin] = useState(null);
-    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,
-        },
-    };
-    if (origin === null) {
-        return null;
-    }
-    return (React.createElement(YouTube, { id: 'YT-' + videoId, className: 'youtube-player', videoId: videoId, opts: opts, onReady: onReady }));
+    return (React.createElement(ReactPlayer, { url: `https://www.youtube.com/watch?v=${videoId}`, onReady: (event) => onReady({ target: event.getInternalPlayer() }) }));
 };

package/dist/components/reproduction-widget/models/Player/YouTubePlayer.d.ts

@@ -1,5 +1,6 @@
-import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+/// <reference types="youtube" />
 import { PlayAlongPlayer } from './PlayAlongPlayer';
+export type InnerYouTubePlayerInterface = YT.Player;
 declare const dispatchOnReadyHandlers: unique symbol;
 declare const dispatchOnFinishHandlers: unique symbol;
 export declare class YouTubePlayer {
@@ -12,16 +13,15 @@ export declare class YouTubePlayer {
         readonly READY: "READY";
         readonly FINISH: "FINISH";
     };
-    constructor(innerPlayer: InnerYouTubePlayer);
-    private setInnerPlayer;
-    getInnerPlayer(): any;
+    constructor(innerPlayer: InnerYouTubePlayerInterface);
+    getInnerPlayer(): YT.Player;
     play(): void;
     pause(): void;
     stop(): void;
     seekTo(seconds: number): void;
-    getCurrentTime(): any;
-    getDuration(): any;
-    getAvailablePlaybackRates(): any;
+    getCurrentTime(): number;
+    getDuration(): number | undefined;
+    getAvailablePlaybackRates(): number[];
     setPlaybackRate(playbackRate: number): void;
     isAvailable(): boolean;
     on(eventName: keyof typeof PlayAlongPlayer.EVENTS, handler: () => void): number | undefined;

package/dist/components/reproduction-widget/models/Player/YouTubePlayer.js

@@ -1,15 +1,5 @@
 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 {
@@ -21,9 +11,7 @@ export class YouTubePlayer {
         this[dispatchOnReadyHandlers] = [];
         this.currentTime = 0;
         this.isRunning = false;
-        this.setInnerPlayer(innerPlayer);
-    }
-    setInnerPlayer(innerPlayer) {
+        this.innerPlayer = innerPlayer;
         this.innerPlayer = innerPlayer;
         this.dispatch(YouTubePlayer.EVENTS.READY);
         // this is necessary for avoiding the state video cued.
@@ -32,7 +20,7 @@ export class YouTubePlayer {
         this.innerPlayer.pauseVideo();
         this.innerPlayer.addEventListener('onStateChange', (videoState) => {
             switch (videoState.data) {
-                case INNER_YOUTUBE_PLAYER_EVENTS.VIDEO_ENDED:
+                case YT.PlayerState.ENDED:
                     this.dispatch(YouTubePlayer.EVENTS.FINISH);
                     this.isRunning = false;
                     this.currentTime = 0;
@@ -68,7 +56,7 @@ export class YouTubePlayer {
     seekTo(seconds) {
         const videoPlayer = this.getInnerPlayer();
         this.currentTime = seconds;
-        videoPlayer.seekTo(this.currentTime);
+        videoPlayer.seekTo(this.currentTime, true);
         if (this.isRunning) {
             this.play();
         }

package/dist/components/reproduction-widget/models/Reproduction.d.ts

@@ -43,7 +43,7 @@ export declare class Reproduction {
     constructor(player: Player, requiresCountingIn: boolean, songTempo: number);
     on(eventName: keyof typeof Reproduction.EVENTS, handler: Handler): number | undefined;
     dispatch(eventName: keyof typeof Reproduction.EVENTS, args?: {}): void;
-    private countIn;
+    private countInAndPlay;
     start(): void;
     play(): void;
     pause(): void;
@@ -55,10 +55,10 @@ export declare class Reproduction {
     isCountingIn(): boolean;
     getPlayer(): Player;
     getTempo(): number;
-    getCurrentTime(): any;
-    getDuration(): any;
+    getCurrentTime(): number;
+    getDuration(): number | undefined;
     seekTo(seconds: number): void;
-    getAvailablePlaybackRates(): any;
+    getAvailablePlaybackRates(): number[];
     setPlaybackRate(playbackRate: number): void;
     isAvailable(): boolean;
     getBPMInterval(): number;

package/dist/components/reproduction-widget/models/Reproduction.js

@@ -108,7 +108,7 @@ export class Reproduction {
             // setTimeout(handler, 0);
         }
     }
-    countIn(timeout, limit) {
+    countInAndPlay(timeout, limit) {
         // the initial count starts instantly, no need to wait
         this.countingInCounter++;
         this.dispatch(Reproduction.EVENTS.COUNTING_IN, { countingInCounter: this.countingInCounter });
@@ -118,7 +118,7 @@ export class Reproduction {
                 clearInterval(interval);
                 this.countingInCounter = 0;
                 if (limit !== 5) {
-                    this.countIn(this.getBPMInterval(), 5);
+                    this.countInAndPlay(this.getBPMInterval(), 5);
                 }
                 else {
                     this.play();
@@ -135,7 +135,7 @@ export class Reproduction {
         }
         if (this.requiresCountingIn && this.getCurrentTime() === 0) {
             this.state = Reproduction.STATES.COUNTING_IN;
-            this.countIn(this.getBPMInterval() * 2, 3);
+            this.countInAndPlay(this.getBPMInterval() * 2, 3);
         }
         else {
             this.play();

package/dist/components/reproduction-widget/models/ReproductionBuilder.d.ts

@@ -1,5 +1,5 @@
 import { Reproduction } from './Reproduction';
-import { YouTubePlayer as InnerYouTubePlayer } from 'react-youtube';
+import { InnerYouTubePlayerInterface } from './Player/YouTubePlayer';
 export declare class ReproductionBuilder {
     private trainingMode;
     private requiresCountingIn;
@@ -11,6 +11,6 @@ export declare class ReproductionBuilder {
     withSongTempo(songTempo: number): this;
     withTrainingMode(trainingMode: boolean): this;
     withCountingIn(requiresCountingIn: boolean): this;
-    withInnerPlayer(innerPlayer: InnerYouTubePlayer | string): this;
+    withInnerPlayer(innerPlayer: InnerYouTubePlayerInterface | string): this;
     createReproduction(): Reproduction;
 }

package/dist/components/timeline/Timeline.d.ts

@@ -6,6 +6,7 @@ export interface TimelineProps {
     className?: string;
     selectedRange?: number[];
     withTimeBlocks?: boolean;
+    markers?: number[];
     onChange?: (value: number) => void;
     onRangeChange?: (value: number[]) => void;
 }

package/dist/components/timeline/Timeline.js

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { TimelineValue } from './TimelineValue/TimelineValue';
 import { ZoomContext } from './ZoomContext/ZoomContext';
 import { getBlockOffsetForZoomLevel, getTimelineWrapperWidth, numberToPxString, } from './utils/utils';
+import { TimelineMarkers } from './TimelineMarkers/TimelineMarkers';
 const TimelineContainer = styled.div `
   background-color: #f0f0f0;
   border: 1px solid #c9c9c9;
@@ -24,7 +25,7 @@ const TimelineWrapper = styled.div `
   align-items: center;
   overflow: hidden;
 `;
-export const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
+export const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], markers = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
     const timeLineContainerRef = useRef(null);
     const canvasRef = useRef(null);
     const [zoomContextValue, setZoomContextValue] = useState({
@@ -73,5 +74,6 @@ export const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], w
             React.createElement(ZoomContext.Provider, { value: zoomContextValue },
                 React.createElement(TimelineCanvas, { ref: canvasRef, duration: duration, withTimeBlocks: withTimeBlocks }),
                 React.createElement(TimelineValue, { value: value, canvasRef: canvasRef }),
+                React.createElement(TimelineMarkers, { markers: markers }),
                 React.createElement(RangeSelectorCanvas, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange })))));
 };

package/dist/components/timeline/TimelineMarkers/TimelineMarkers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    markers: number[];
+}
+export declare const TimelineMarkers: ({ markers }: Props) => React.JSX.Element;
+export {};

package/dist/components/timeline/TimelineMarkers/TimelineMarkers.js

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { ZoomContext } from '../ZoomContext/ZoomContext';
+import { secondsToPixel } from '../utils/utils';
+const MarkerContainer = styled.div `
+    position: relative;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+`;
+const MarkerInner = styled.div `
+    & {
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 20px solid #4CAF50; /* Green color */
+        position: absolute;
+    }
+`;
+export const TimelineMarkers = ({ markers }) => {
+    const zoomContextValue = useContext(ZoomContext);
+    return (React.createElement(React.Fragment, null, markers.map((marker, index) => (React.createElement(MarkerContainer, { key: index, style: { left: secondsToPixel(zoomContextValue, marker) } },
+        React.createElement(MarkerInner, null))))));
+};

package/dist/components/timeline/TimelineValue/TimelineValue.js

@@ -12,6 +12,7 @@ const ValueLine = styled.span `
   width: 1px;
   height: 100%;
   background-color: #575757;
+  z-index: 1; // force the ValueLine to be on top of the Markers
 `;
 const PostValueLine = styled.span `
   position: absolute;

package/dist/stories/reproduction-widget.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { ReproductionWidget } from '../components/reproduction-widget';
 export default {
     title: 'ReproductionWidget',
@@ -7,15 +7,44 @@ export default {
         onInit: { action: 'initiated' },
     },
 };
-const Template = (args) => (React.createElement(ReproductionWidget, Object.assign({}, args)));
+const Template = (args) => {
+    const [reproduction, setReproduction] = useState(null);
+    const [reproductionTimestamp, setReproductionTimestamp] = useState(0);
+    // Handle initialization of reproduction
+    const handleInit = useCallback((reproductionInstance) => {
+        const refreshEvent = (args) => { setReproductionTimestamp(new Date().getTime()); };
+        setReproduction(reproductionInstance);
+        reproductionInstance.on('COUNTING_IN', (args) => { console.log("counting in", args); });
+        reproductionInstance.on('PLAYING', refreshEvent);
+        reproductionInstance.on('PAUSED', refreshEvent);
+        reproductionInstance.on('FINISH', refreshEvent);
+        reproductionInstance.start();
+    }, []);
+    const handleStop = () => {
+        if (reproduction) {
+            reproduction.stop();
+        }
+    };
+    const handlePause = () => {
+        if (reproduction) {
+            reproduction.pause();
+        }
+    };
+    const handleResume = () => {
+        if (reproduction) {
+            reproduction.play();
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement(ReproductionWidget, Object.assign({}, args, { onInit: handleInit })),
+        React.createElement("div", null,
+            React.createElement("button", { onClick: handleStop, disabled: !reproduction || reproduction.isStopped() }, "Stop"),
+            React.createElement("button", { onClick: handlePause, disabled: !reproduction || !reproduction.isPlaying() }, "Pause"),
+            React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() }, "Resume"))));
+};
 export const Default = Template.bind({});
 Default.args = {
     trainingMode: true,
     videoId: 'jFI-RBqXzhU',
     songTempo: 180,
-    onInit: (reproduction) => {
-        console.log("on init");
-        reproduction.on('COUNTING_IN', (args) => { console.log("counting in", args); });
-        reproduction.start();
-    }
 };

package/dist/stories/timeline.stories.d.ts

@@ -7,3 +7,4 @@ export declare const WithSelectedRange: import("@storybook/csf").AnnotatedStoryF
 export declare const WithCustomClassName: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
 export declare const WithoutTimeBlocks: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
 export declare const Minimalist: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
+export declare const WithSelectedRangeAndMarkers: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -52,3 +52,11 @@ Minimalist.args = {
     withTimeBlocks: false,
     className: 'minimalist',
 };
+export const WithSelectedRangeAndMarkers = Template.bind({});
+WithSelectedRangeAndMarkers.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    selectedRange: [20, 30],
+    markers: [90, 108],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [
@@ -91,8 +91,8 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.3.1",
+    "react-player": "^2.16.0",
     "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",
@@ -136,6 +136,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
+    "@types/youtube": "^0.0.50",
     "babel-loader": "^9.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",