@ldelia/react-media 0.8.6 → 0.8.7

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 +21 -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,17 @@ 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
+ console.log("PLAYING");
35
+ this.dispatch(YouTubePlayer.EVENTS.PLAYING);
36
+ break;
37
+ case YT.PlayerState.PAUSED:
38
+ this.isRunning = false;
39
+ console.log("PAUSED");
40
+ this.currentTime = this.getInnerPlayer().getCurrentTime();
41
+ this.dispatch(YouTubePlayer.EVENTS.PAUSED);
42
+ break;
33
43
  default:
34
44
  break;
35
45
  }
@@ -42,14 +52,10 @@ export class YouTubePlayer {
42
52
  return this.innerPlayer;
43
53
  }
44
54
  play() {
45
- const videoPlayer = this.getInnerPlayer();
46
- videoPlayer.playVideo();
47
- this.isRunning = true;
55
+ this.getInnerPlayer().playVideo();
48
56
  }
49
57
  pause() {
50
- this.isRunning = false;
51
58
  this.getInnerPlayer().pauseVideo();
52
- this.currentTime = this.getInnerPlayer().getCurrentTime();
53
59
  }
54
60
  stop() {
55
61
  this.isRunning = false;
@@ -103,9 +109,11 @@ export class YouTubePlayer {
103
109
  }
104
110
  on(eventName, handler) {
105
111
  switch (eventName) {
106
- case PlayAlongPlayer.EVENTS.FINISH:
112
+ case YouTubePlayer.EVENTS.PLAYING:
113
+ return this[dispatchOnPlayingHandlers].push(handler);
114
+ case YouTubePlayer.EVENTS.FINISH:
107
115
  return this[dispatchOnFinishHandlers].push(handler);
108
- case PlayAlongPlayer.EVENTS.ERROR:
116
+ case YouTubePlayer.EVENTS.ERROR:
109
117
  return this[dispatchOnErrorHandlers].push(handler);
110
118
  default:
111
119
  break;
@@ -117,6 +125,9 @@ export class YouTubePlayer {
117
125
  let len;
118
126
  let ref = [];
119
127
  switch (eventName) {
128
+ case YouTubePlayer.EVENTS.PLAYING:
129
+ ref = this[dispatchOnPlayingHandlers];
130
+ break;
120
131
  case YouTubePlayer.EVENTS.FINISH:
121
132
  ref = this[dispatchOnFinishHandlers];
122
133
  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.7",
4
4
  "description": "A React components collection for media-related features.",
5
5
  "private": false,
6
6
  "keywords": [