@ldelia/react-media 0.5.10 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/reproduction-widget/ReproductionWidget.d.ts +4 -1
  2. package/dist/components/reproduction-widget/ReproductionWidget.js +4 -4
  3. package/dist/components/reproduction-widget/inner-players/YouTubeInnerPlayer.d.ts +2 -1
  4. package/dist/components/reproduction-widget/inner-players/YouTubeInnerPlayer.js +36 -10
  5. package/dist/components/reproduction-widget/models/ReproductionBuilder.d.ts +1 -1
  6. package/dist/stories/reproduction-widget.stories.d.ts +4 -3
  7. package/dist/stories/reproduction-widget.stories.js +11 -3
  8. package/dist/stories/timeline.stories.d.ts +7 -7
  9. package/package.json +15 -15
package/dist/components/reproduction-widget/ReproductionWidget.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { Reproduction } from './models/Reproduction';
3
3
  interface BaseProps {
4
4
  trainingMode: boolean;
5
+ withCountingIn?: boolean;
5
6
  songTempo?: number;
6
7
  onInit: (reproduction: Reproduction) => void;
7
8
  }
@@ -9,12 +10,14 @@ interface TrainingProps extends BaseProps {
9
10
  trainingMode: true;
10
11
  duration?: never;
11
12
  videoId: string;
13
+ onVideoUnavailable: () => void;
12
14
  }
13
15
  interface NonTrainingProps extends BaseProps {
14
16
  trainingMode: false;
15
17
  duration: number;
16
18
  videoId?: never;
19
+ onVideoUnavailable?: never;
17
20
  }
18
21
  export type ReproductionWidgetProps = TrainingProps | NonTrainingProps;
19
- export declare const ReproductionWidget: ({ trainingMode, duration, videoId, songTempo, onInit, }: ReproductionWidgetProps) => React.JSX.Element;
22
+ export declare const ReproductionWidget: ({ trainingMode, duration, videoId, withCountingIn, songTempo, onInit, onVideoUnavailable, }: ReproductionWidgetProps) => React.JSX.Element;
20
23
  export {};
package/dist/components/reproduction-widget/ReproductionWidget.js CHANGED
@@ -2,13 +2,13 @@ import React from 'react';
2
2
  import { YouTubeInnerPlayer } from './inner-players/YouTubeInnerPlayer';
3
3
  import { PlayAlongInnerPlayer } from './inner-players/PlayAlongInnerPlayer';
4
4
  import { Reproduction } from './models/Reproduction';
5
- export const ReproductionWidget = ({ trainingMode, duration, videoId, songTempo = 0, onInit, }) => {
5
+ export const ReproductionWidget = ({ trainingMode, duration, videoId, withCountingIn = true, songTempo = 0, onInit, onVideoUnavailable, }) => {
6
6
  function onPlayAlongInnerPlayerReadyHandler(event) {
7
7
  let newReproduction = Reproduction.newBuilder()
8
8
  .withTrainingMode(false)
9
9
  .withSongDuration(duration)
10
10
  .withSongTempo(songTempo)
11
- .withCountingIn(songTempo > 0)
11
+ .withCountingIn(withCountingIn && songTempo > 0)
12
12
  .withInnerPlayer(event.target)
13
13
  .createReproduction();
14
14
  onInit(newReproduction);
@@ -17,10 +17,10 @@ export const ReproductionWidget = ({ trainingMode, duration, videoId, songTempo
17
17
  let newReproduction = Reproduction.newBuilder()
18
18
  .withTrainingMode(true)
19
19
  .withSongTempo(songTempo)
20
- .withCountingIn(songTempo > 0)
20
+ .withCountingIn(withCountingIn && songTempo > 0)
21
21
  .withInnerPlayer(event.target)
22
22
  .createReproduction();
23
23
  onInit(newReproduction);
24
24
  }
25
- return (React.createElement(React.Fragment, null, trainingMode ? (React.createElement(YouTubeInnerPlayer, { videoId: videoId, onReady: onYouTubeInnerPlayerReadyHandler })) : (React.createElement(PlayAlongInnerPlayer, { onReady: onPlayAlongInnerPlayerReadyHandler }))));
25
+ return (React.createElement(React.Fragment, null, trainingMode ? (React.createElement(YouTubeInnerPlayer, { videoId: videoId, onReady: onYouTubeInnerPlayerReadyHandler, onVideoUnavailable: onVideoUnavailable })) : (React.createElement(PlayAlongInnerPlayer, { onReady: onPlayAlongInnerPlayerReadyHandler }))));
26
26
  };
package/dist/components/reproduction-widget/inner-players/YouTubeInnerPlayer.d.ts CHANGED
@@ -5,6 +5,7 @@ interface Props {
5
5
  onReady: (event: {
6
6
  target: InnerYouTubePlayerInterface;
7
7
  }) => void;
8
+ onVideoUnavailable: () => void;
8
9
  }
9
- export declare const YouTubeInnerPlayer: ({ videoId, onReady }: Props) => React.JSX.Element;
10
+ export declare const YouTubeInnerPlayer: ({ videoId, onReady, onVideoUnavailable }: Props) => React.JSX.Element;
10
11
  export {};
package/dist/components/reproduction-widget/inner-players/YouTubeInnerPlayer.js CHANGED
@@ -1,13 +1,39 @@
1
- import React from 'react';
1
+ import React, { useRef } from 'react';
2
2
  import ReactPlayer from 'react-player/lazy';
3
- export const YouTubeInnerPlayer = ({ videoId, onReady }) => {
4
- return (React.createElement(ReactPlayer, { url: `https://www.youtube.com/watch?v=${videoId}`, onReady: (event) => {
5
- // Remove focus from the iframe
6
- // This is a workaround for a bug in react-player https://github.com/cookpete/react-player/issues/1124
7
- const internalPlayer = event.getInternalPlayer();
8
- const iframe = internalPlayer.getIframe();
3
+ export const YouTubeInnerPlayer = ({ videoId, onReady, onVideoUnavailable }) => {
4
+ const hasErrorRef = useRef(false);
5
+ const readyTimeoutRef = useRef(null);
6
+ /**
7
+ * When the video is unavailable, the player will throw both, the onError and onReady events.
8
+ * We delay calling onReady to give time for onError to potentially fire.
9
+ */
10
+ const handleReady = (event) => {
11
+ var _a;
12
+ const internalPlayer = event.getInternalPlayer();
13
+ const iframe = (_a = internalPlayer.getIframe) === null || _a === void 0 ? void 0 : _a.call(internalPlayer);
14
+ if (iframe)
9
15
  iframe.tabIndex = -1;
10
- // Propagate internal player
11
- onReady({ target: event.getInternalPlayer() });
12
- } }));
16
+ readyTimeoutRef.current = setTimeout(() => {
17
+ if (!hasErrorRef.current) {
18
+ onReady({ target: internalPlayer });
19
+ }
20
+ else {
21
+ console.warn("YouTubeInnerPlayer onReady suppressed due to error");
22
+ }
23
+ }, 300);
24
+ };
25
+ const handleError = (error, data) => {
26
+ hasErrorRef.current = true;
27
+ if (readyTimeoutRef.current) {
28
+ clearTimeout(readyTimeoutRef.current);
29
+ readyTimeoutRef.current = null;
30
+ }
31
+ if (error === 150) {
32
+ onVideoUnavailable();
33
+ }
34
+ else {
35
+ console.warn('Unhandled YouTube error:', error);
36
+ }
37
+ };
38
+ return (React.createElement(ReactPlayer, { url: `https://www.youtube.com/watch?v=${videoId}`, onReady: handleReady, onError: handleError }));
13
39
  };
package/dist/components/reproduction-widget/models/ReproductionBuilder.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { Reproduction } from './Reproduction';
2
1
  import { InnerYouTubePlayerInterface } from './Player/YouTubePlayer';
2
+ import { Reproduction } from './Reproduction';
3
3
  export declare class ReproductionBuilder {
4
4
  private trainingMode;
5
5
  private requiresCountingIn;
package/dist/stories/reproduction-widget.stories.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ReproductionWidgetProps } from '../components/reproduction-widget';
2
- declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
2
+ declare const _default: import("@storybook/core/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("@storybook/core/csf").Args>;
3
3
  export default _default;
4
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ReproductionWidgetProps>;
5
- export declare const PlayAlong: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ReproductionWidgetProps>;
4
+ export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ReproductionWidgetProps>;
5
+ export declare const PlayAlong: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ReproductionWidgetProps>;
6
+ export declare const InvalidVideo: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ReproductionWidgetProps>;
package/dist/stories/reproduction-widget.stories.js CHANGED
@@ -12,7 +12,7 @@ const Template = (args) => {
12
12
  const [reproductionTimestamp, setReproductionTimestamp] = useState(0);
13
13
  // Handle initialization of reproduction
14
14
  const handleInit = useCallback((reproductionInstance) => {
15
- const refreshEvent = (args) => { setReproductionTimestamp(new Date().getTime()); console.log("refresh"); };
15
+ const refreshEvent = (args) => { setReproductionTimestamp(new Date().getTime()); };
16
16
  setReproduction(reproductionInstance);
17
17
  reproductionInstance.on('COUNTING_IN', (args) => { console.log("counting in", args); });
18
18
  reproductionInstance.on('PLAYING', refreshEvent);
@@ -41,8 +41,9 @@ const Template = (args) => {
41
41
  React.createElement("button", { onClick: handleStop, disabled: !reproduction || reproduction.isStopped() }, "Stop"),
42
42
  React.createElement("button", { onClick: handlePause, disabled: !reproduction || !reproduction.isPlaying() }, "Pause"),
43
43
  React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() }, "Resume"),
44
- "Current time: ", reproduction === null || reproduction === void 0 ? void 0 :
45
- reproduction.getCurrentTime())));
44
+ reproduction && (React.createElement("div", null,
45
+ "Current time: ", reproduction === null || reproduction === void 0 ? void 0 :
46
+ reproduction.getCurrentTime())))));
46
47
  };
47
48
  export const Default = Template.bind({});
48
49
  Default.args = {
@@ -56,3 +57,10 @@ PlayAlong.args = {
56
57
  songTempo: 180,
57
58
  duration: 220,
58
59
  };
60
+ export const InvalidVideo = Template.bind({});
61
+ InvalidVideo.args = {
62
+ trainingMode: true,
63
+ videoId: 'Y8jDVJrOHvo',
64
+ songTempo: 180,
65
+ onVideoUnavailable: () => console.error('Video unavailable'),
66
+ };
package/dist/stories/timeline.stories.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { TimelineProps } from '../components/timeline';
2
2
  import './timeline.stories.custom.css';
3
- declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
3
+ declare const _default: import("@storybook/core/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("@storybook/core/csf").Args>;
4
4
  export default _default;
5
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
6
- export declare const WithSelectedRange: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
7
- export declare const WithCustomClassName: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
8
- export declare const WithoutTimeBlocks: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
9
- export declare const Minimalist: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
10
- export declare const WithSelectedRangeAndMarkers: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, TimelineProps>;
5
+ export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
6
+ export declare const WithSelectedRange: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
7
+ export declare const WithCustomClassName: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
8
+ export declare const WithoutTimeBlocks: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
9
+ export declare const Minimalist: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
10
+ export declare const WithSelectedRangeAndMarkers: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, TimelineProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ldelia/react-media",
3
- "version": "0.5.10",
3
+ "version": "0.6.0",
4
4
  "description": "A React components collection for media-related features.",
5
5
  "private": false,
6
6
  "keywords": [
@@ -114,20 +114,20 @@
114
114
  "@babel/preset-env": "^7.24.8",
115
115
  "@babel/preset-react": "^7.24.7",
116
116
  "@babel/preset-typescript": "^7.24.7",
117
- "@chromatic-com/storybook": "^3.2.4",
118
- "@storybook/addon-actions": "^8.5.0",
119
- "@storybook/addon-docs": "^8.5.0",
120
- "@storybook/addon-essentials": "^8.5.0",
121
- "@storybook/addon-interactions": "^8.5.0",
117
+ "@chromatic-com/storybook": "^3.2.6",
118
+ "@storybook/addon-actions": "^8.6.12",
119
+ "@storybook/addon-docs": "^8.6.12",
120
+ "@storybook/addon-essentials": "^8.6.12",
121
+ "@storybook/addon-interactions": "^8.6.12",
122
122
  "@storybook/addon-knobs": "^8.0.1",
123
- "@storybook/addon-links": "^8.5.0",
124
- "@storybook/addon-onboarding": "^8.5.0",
125
- "@storybook/blocks": "^8.5.0",
126
- "@storybook/node-logger": "^8.5.0",
127
- "@storybook/react": "^8.5.0",
123
+ "@storybook/addon-links": "^8.6.12",
124
+ "@storybook/addon-onboarding": "^8.6.12",
125
+ "@storybook/blocks": "^8.6.12",
126
+ "@storybook/node-logger": "^8.6.12",
127
+ "@storybook/react": "^8.6.12",
128
128
  "@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
129
- "@storybook/react-webpack5": "^8.5.0",
130
- "@storybook/test": "^8.5.0",
129
+ "@storybook/react-webpack5": "^8.6.12",
130
+ "@storybook/test": "^8.6.12",
131
131
  "@testing-library/jest-dom": "^6.4.6",
132
132
  "@testing-library/react": "^16.0.0",
133
133
  "@testing-library/user-event": "^14.5.2",
@@ -140,14 +140,14 @@
140
140
  "babel-loader": "^9.1.3",
141
141
  "eslint-config-prettier": "^9.1.0",
142
142
  "eslint-plugin-prettier": "^5.1.3",
143
- "eslint-plugin-storybook": "^0.11.2",
143
+ "eslint-plugin-storybook": "^0.12.0",
144
144
  "postcss-flexbugs-fixes": "^5.0.2",
145
145
  "postcss-normalize": "^10.0.1",
146
146
  "postcss-preset-env": "^9.5.14",
147
147
  "prettier": "^3.3.2",
148
148
  "prop-types": "^15.8.1",
149
149
  "react-docgen-typescript-plugin": "^1.0.8",
150
- "storybook": "^8.5.0",
150
+ "storybook": "^8.6.12",
151
151
  "ts-loader": "^9.5.1",
152
152
  "tsconfig-paths-webpack-plugin": "^4.1.0",
153
153
  "webpack": "^5.92.0"