@ldelia/react-media 0.8.6 → 0.8.8

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/models/Player/PlayAlongPlayer.d.ts +4 -2
  2. package/dist/components/reproduction-widget/models/Player/PlayAlongPlayer.js +8 -2
  3. package/dist/components/reproduction-widget/models/Player/PlayerEvents.d.ts +2 -0
  4. package/dist/components/reproduction-widget/models/Player/PlayerEvents.js +2 -0
  5. package/dist/components/reproduction-widget/models/Player/YouTubePlayer.d.ts +6 -5
  6. package/dist/components/reproduction-widget/models/Player/YouTubePlayer.js +19 -10
  7. package/dist/components/reproduction-widget/models/Reproduction.js +5 -2
  8. package/dist/stories/reproduction-widget.stories.js +1 -1
  9. package/package.json +1 -1
package/dist/components/reproduction-widget/models/Player/PlayAlongPlayer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const dispatchOnReadyHandlers: unique symbol;
1
+ declare const dispatchOnPlayingHandlers: unique symbol;
2
2
  declare const dispatchOnFinishHandlers: unique symbol;
3
3
  export declare class PlayAlongPlayer {
4
4
  private readonly duration;
@@ -7,13 +7,15 @@ export declare class PlayAlongPlayer {
7
7
  private currentPlaybackRate;
8
8
  private innerPlayer;
9
9
  private interval;
10
- private [dispatchOnReadyHandlers];
10
+ private [dispatchOnPlayingHandlers];
11
11
  private [dispatchOnFinishHandlers];
12
12
  constructor(duration: number, innerPlayer: string);
13
13
  static get EVENTS(): {
14
14
  readonly READY: "READY";
15
15
  readonly FINISH: "FINISH";
16
16
  readonly ERROR: "ERROR";
17
+ readonly PLAYING: "PLAYING";
18
+ readonly PAUSED: "PAUSED";
17
19
  };
18
20
  play(): void;
19
21
  pause(): void;
package/dist/components/reproduction-widget/models/Player/PlayAlongPlayer.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { PLAYER_EVENTS } from './PlayerEvents';
2
- const dispatchOnReadyHandlers = Symbol();
2
+ const dispatchOnPlayingHandlers = Symbol();
3
3
  const dispatchOnFinishHandlers = Symbol();
4
4
  export class PlayAlongPlayer {
5
5
  constructor(duration, innerPlayer) {
@@ -11,7 +11,7 @@ export class PlayAlongPlayer {
11
11
  this.currentPlaybackRate = 1;
12
12
  this.innerPlayer = null;
13
13
  this[dispatchOnFinishHandlers] = [];
14
- this[dispatchOnReadyHandlers] = [];
14
+ this[dispatchOnPlayingHandlers] = [];
15
15
  this.setInnerPlayer(innerPlayer);
16
16
  }
17
17
  static get EVENTS() {
@@ -19,6 +19,7 @@ export class PlayAlongPlayer {
19
19
  }
20
20
  play() {
21
21
  this.isRunning = true;
22
+ this.dispatch(PlayAlongPlayer.EVENTS.PLAYING);
22
23
  const intervalTimeout = 1000;
23
24
  this.interval = setInterval(() => {
24
25
  if (this.isRunning) {
@@ -67,6 +68,8 @@ export class PlayAlongPlayer {
67
68
  }
68
69
  on(eventName, handler) {
69
70
  switch (eventName) {
71
+ case PlayAlongPlayer.EVENTS.PLAYING:
72
+ return this[dispatchOnPlayingHandlers].push(handler);
70
73
  case PlayAlongPlayer.EVENTS.FINISH:
71
74
  return this[dispatchOnFinishHandlers].push(handler);
72
75
  default:
@@ -77,6 +80,9 @@ export class PlayAlongPlayer {
77
80
  let handler, i, len;
78
81
  let ref = [];
79
82
  switch (eventName) {
83
+ case PlayAlongPlayer.EVENTS.PLAYING:
84
+ ref = this[dispatchOnPlayingHandlers];
85
+ break;
80
86
  case PlayAlongPlayer.EVENTS.FINISH:
81
87
  ref = this[dispatchOnFinishHandlers];
82
88
  break;
package/dist/components/reproduction-widget/models/Player/PlayerEvents.d.ts CHANGED
@@ -2,4 +2,6 @@ export declare const PLAYER_EVENTS: {
2
2
  readonly READY: "READY";
3
3
  readonly FINISH: "FINISH";
4
4
  readonly ERROR: "ERROR";
5
+ readonly PLAYING: "PLAYING";
6
+ readonly PAUSED: "PAUSED";
5
7
  };
package/dist/components/reproduction-widget/models/Player/PlayerEvents.js CHANGED
@@ -2,4 +2,6 @@ export const PLAYER_EVENTS = {
2
2
  READY: 'READY',
3
3
  FINISH: 'FINISH',
4
4
  ERROR: 'ERROR',
5
+ PLAYING: 'PLAYING',
6
+ PAUSED: 'PAUSED',
5
7
  };
package/dist/components/reproduction-widget/models/Player/YouTubePlayer.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  /// <reference types="youtube" />
2
- import { PlayAlongPlayer } from './PlayAlongPlayer';
3
2
  export type InnerYouTubePlayerInterface = YT.Player;
4
- declare const dispatchOnReadyHandlers: unique symbol;
3
+ declare const dispatchOnPlayingHandlers: unique symbol;
5
4
  declare const dispatchOnFinishHandlers: unique symbol;
6
5
  declare const dispatchOnErrorHandlers: unique symbol;
7
6
  export declare class YouTubePlayer {
@@ -9,7 +8,7 @@ export declare class YouTubePlayer {
9
8
  private isRunning;
10
9
  private volume;
11
10
  private innerPlayer;
12
- private [dispatchOnReadyHandlers];
11
+ private [dispatchOnPlayingHandlers];
13
12
  private [dispatchOnFinishHandlers];
14
13
  private [dispatchOnErrorHandlers];
15
14
  constructor(innerPlayer: InnerYouTubePlayerInterface);
@@ -17,6 +16,8 @@ export declare class YouTubePlayer {
17
16
  readonly READY: "READY";
18
17
  readonly FINISH: "FINISH";
19
18
  readonly ERROR: "ERROR";
19
+ readonly PLAYING: "PLAYING";
20
+ readonly PAUSED: "PAUSED";
20
21
  };
21
22
  getInnerPlayer(): YT.Player;
22
23
  play(): void;
@@ -31,8 +32,8 @@ export declare class YouTubePlayer {
31
32
  getState(): YT.PlayerState;
32
33
  setPlaybackRate(playbackRate: number): void;
33
34
  isAvailable(): boolean;
34
- on(eventName: keyof typeof PlayAlongPlayer.EVENTS, handler: (error?: any) => void): number | undefined;
35
- dispatch(eventName: keyof typeof PlayAlongPlayer.EVENTS, error?: any): void;
35
+ on(eventName: keyof typeof YouTubePlayer.EVENTS, handler: (error?: any) => void): number | undefined;
36
+ dispatch(eventName: keyof typeof YouTubePlayer.EVENTS, error?: any): void;
36
37
  private getErrorMessage;
37
38
  }
38
39
  export {};
package/dist/components/reproduction-widget/models/Player/YouTubePlayer.js CHANGED
@@ -1,13 +1,12 @@
1
- import { PlayAlongPlayer } from './PlayAlongPlayer';
2
1
  import { PLAYER_EVENTS } from './PlayerEvents';
3
- const dispatchOnReadyHandlers = Symbol();
2
+ const dispatchOnPlayingHandlers = Symbol();
4
3
  const dispatchOnFinishHandlers = Symbol();
5
4
  const dispatchOnErrorHandlers = Symbol();
6
5
  export class YouTubePlayer {
7
6
  constructor(innerPlayer) {
8
7
  this.volume = 50; // between 0 and 100
9
8
  this[dispatchOnFinishHandlers] = [];
10
- this[dispatchOnReadyHandlers] = [];
9
+ this[dispatchOnPlayingHandlers] = [];
11
10
  this[dispatchOnErrorHandlers] = [];
12
11
  this.currentTime = 0;
13
12
  this.isRunning = false;
@@ -30,6 +29,15 @@ export class YouTubePlayer {
30
29
  this.isRunning = false;
31
30
  this.currentTime = 0;
32
31
  break;
32
+ case YT.PlayerState.PLAYING:
33
+ this.isRunning = true;
34
+ this.dispatch(YouTubePlayer.EVENTS.PLAYING);
35
+ break;
36
+ case YT.PlayerState.PAUSED:
37
+ this.isRunning = false;
38
+ this.currentTime = this.getInnerPlayer().getCurrentTime();
39
+ this.dispatch(YouTubePlayer.EVENTS.PAUSED);
40
+ break;
33
41
  default:
34
42
  break;
35
43
  }
@@ -42,14 +50,10 @@ export class YouTubePlayer {
42
50
  return this.innerPlayer;
43
51
  }
44
52
  play() {
45
- const videoPlayer = this.getInnerPlayer();
46
- videoPlayer.playVideo();
47
- this.isRunning = true;
53
+ this.getInnerPlayer().playVideo();
48
54
  }
49
55
  pause() {
50
- this.isRunning = false;
51
56
  this.getInnerPlayer().pauseVideo();
52
- this.currentTime = this.getInnerPlayer().getCurrentTime();
53
57
  }
54
58
  stop() {
55
59
  this.isRunning = false;
@@ -103,9 +107,11 @@ export class YouTubePlayer {
103
107
  }
104
108
  on(eventName, handler) {
105
109
  switch (eventName) {
106
- case PlayAlongPlayer.EVENTS.FINISH:
110
+ case YouTubePlayer.EVENTS.PLAYING:
111
+ return this[dispatchOnPlayingHandlers].push(handler);
112
+ case YouTubePlayer.EVENTS.FINISH:
107
113
  return this[dispatchOnFinishHandlers].push(handler);
108
- case PlayAlongPlayer.EVENTS.ERROR:
114
+ case YouTubePlayer.EVENTS.ERROR:
109
115
  return this[dispatchOnErrorHandlers].push(handler);
110
116
  default:
111
117
  break;
@@ -117,6 +123,9 @@ export class YouTubePlayer {
117
123
  let len;
118
124
  let ref = [];
119
125
  switch (eventName) {
126
+ case YouTubePlayer.EVENTS.PLAYING:
127
+ ref = this[dispatchOnPlayingHandlers];
128
+ break;
120
129
  case YouTubePlayer.EVENTS.FINISH:
121
130
  ref = this[dispatchOnFinishHandlers];
122
131
  break;
package/dist/components/reproduction-widget/models/Reproduction.js CHANGED
@@ -40,6 +40,10 @@ export class Reproduction {
40
40
  this.requiresCountingIn = requiresCountingIn;
41
41
  this.countingInCounter = 0;
42
42
  this.player.setVolume(volume);
43
+ this.player.on(PLAYER_EVENTS.PLAYING, () => {
44
+ this.state = Reproduction.STATES.PLAYING;
45
+ this.dispatch(Reproduction.EVENTS.PLAY);
46
+ });
43
47
  this.player.on(PLAYER_EVENTS.FINISH, () => {
44
48
  this.state = Reproduction.STATES.STOPPED;
45
49
  clearInterval(this.interval);
@@ -112,6 +116,7 @@ export class Reproduction {
112
116
  }
113
117
  }
114
118
  start() {
119
+ this.seekTo(0);
115
120
  if (this.state === Reproduction.STATES.STOPPED) {
116
121
  this.dispatch(Reproduction.EVENTS.START);
117
122
  }
@@ -124,8 +129,6 @@ export class Reproduction {
124
129
  }
125
130
  }
126
131
  play() {
127
- this.state = Reproduction.STATES.PLAYING;
128
- this.dispatch(Reproduction.EVENTS.PLAY);
129
132
  this.player.play();
130
133
  const intervalTimeout = 200;
131
134
  this.interval = setInterval(() => {
package/dist/stories/reproduction-widget.stories.js CHANGED
@@ -45,7 +45,7 @@ const Template = (args) => {
45
45
  React.createElement("div", null,
46
46
  React.createElement("button", { onClick: handleStop, disabled: !reproduction || reproduction.isStopped() }, "Stop"),
47
47
  React.createElement("button", { onClick: handlePause, disabled: !reproduction || !reproduction.isPlaying() }, "Pause"),
48
- React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() || reproduction.getCurrentTime() > 0 }, "Resume"),
48
+ React.createElement("button", { onClick: handleResume, disabled: !reproduction || reproduction.isPlaying() || reproduction.getCurrentTime() === 0 }, "Resume"),
49
49
  React.createElement("button", { onClick: handleStart, disabled: !reproduction || reproduction.isPlaying() }, "Start"),
50
50
  reproduction && (React.createElement("div", null,
51
51
  "Current time: ", reproduction === null || reproduction === void 0 ? void 0 :
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ldelia/react-media",
3
- "version": "0.8.6",
3
+ "version": "0.8.8",
4
4
  "description": "A React components collection for media-related features.",
5
5
  "private": false,
6
6
  "keywords": [