@ldelia/react-media 0.5.4 → 0.5.6

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,25 +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,
-        },
-    };
-    console.log(videoId, opts);
-    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

@@ -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/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/TimelineMarkers/TimelineMarkers.js

@@ -21,6 +21,6 @@ const MarkerInner = styled.div `
 `;
 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) } },
+    return (React.createElement(React.Fragment, null, markers.map((marker, index) => (React.createElement(MarkerContainer, { key: index, style: { left: secondsToPixel(zoomContextValue, marker) }, className: 'media-timeline-marker' },
         React.createElement(MarkerInner, null))))));
 };

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.js

@@ -51,6 +51,7 @@ Minimalist.args = {
     zoomLevel: 0,
     withTimeBlocks: false,
     className: 'minimalist',
+    markers: [],
 };
 export const WithSelectedRangeAndMarkers = Template.bind({});
 WithSelectedRangeAndMarkers.args = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "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",