@atlaskit/media-ui 22.0.0 → 22.1.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/CHANGELOG.md +10 -0
  2. package/dist/cjs/customMediaPlayer/index.js +47 -37
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/customMediaPlayer/index.js +9 -0
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/customMediaPlayer/index.js +47 -37
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/customMediaPlayer/index.d.ts +1 -0
  9. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/media-ui
2
2
 
3
+ ## 22.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`ed6cdd2d397`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed6cdd2d397) - added onfullscreenchange property to media to avoid triggering table resizing when media is in full screen mode
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
3
13
  ## 22.0.0
4
14
 
5
15
  ### Major Changes
package/dist/cjs/customMediaPlayer/index.js CHANGED
@@ -144,6 +144,10 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
144
144
  var isFullScreenEnabled = !!(0, _fullscreen.getFullscreenElement)();
145
145
 
146
146
  if (currentFullScreenMode !== isFullScreenEnabled) {
147
+ var _this$props$onFullscr, _this$props;
148
+
149
+ (_this$props$onFullscr = (_this$props = _this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props, isFullScreenEnabled);
150
+
147
151
  _this.setState({
148
152
  isFullScreenEnabled: isFullScreenEnabled
149
153
  });
@@ -170,11 +174,11 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
170
174
  }, (0, _formatDuration.formatDuration)(currentTime), " / ", (0, _formatDuration.formatDuration)(duration));
171
175
  });
172
176
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderHDButton", function () {
173
- var _this$props = _this.props,
174
- type = _this$props.type,
175
- isHDAvailable = _this$props.isHDAvailable,
176
- isHDActive = _this$props.isHDActive,
177
- onHDToggleClick = _this$props.onHDToggleClick;
177
+ var _this$props2 = _this.props,
178
+ type = _this$props2.type,
179
+ isHDAvailable = _this$props2.isHDAvailable,
180
+ isHDActive = _this$props2.isHDActive,
181
+ onHDToggleClick = _this$props2.onHDToggleClick;
178
182
 
179
183
  if (type === 'audio' || !isHDAvailable) {
180
184
  return;
@@ -264,9 +268,9 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
264
268
  }
265
269
  });
266
270
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFullScreenButton", function () {
267
- var _this$props2 = _this.props,
268
- formatMessage = _this$props2.intl.formatMessage,
269
- type = _this$props2.type;
271
+ var _this$props3 = _this.props,
272
+ formatMessage = _this$props3.intl.formatMessage,
273
+ type = _this$props3.type;
270
274
 
271
275
  if (type === 'audio') {
272
276
  return;
@@ -420,13 +424,13 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
420
424
  };
421
425
  });
422
426
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onViewed", function (videoState) {
423
- var _this$props3 = _this.props,
424
- createAnalyticsEvent = _this$props3.createAnalyticsEvent,
425
- fileId = _this$props3.fileId,
426
- isAutoPlay = _this$props3.isAutoPlay,
427
- isHDAvailable = _this$props3.isHDAvailable,
428
- isHDActive = _this$props3.isHDActive,
429
- type = _this$props3.type;
427
+ var _this$props4 = _this.props,
428
+ createAnalyticsEvent = _this$props4.createAnalyticsEvent,
429
+ fileId = _this$props4.fileId,
430
+ isAutoPlay = _this$props4.isAutoPlay,
431
+ isHDAvailable = _this$props4.isHDAvailable,
432
+ isHDActive = _this$props4.isHDActive,
433
+ type = _this$props4.type;
430
434
  var _this$state = _this.state,
431
435
  isFullScreenEnabled = _this$state.isFullScreenEnabled,
432
436
  playerSize = _this$state.playerSize,
@@ -480,14 +484,14 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
480
484
  (0, _createClass2.default)(CustomMediaPlayerBase, [{
481
485
  key: "componentDidMount",
482
486
  value: function componentDidMount() {
483
- var _this$props4 = this.props,
484
- type = _this$props4.type,
485
- fileId = _this$props4.fileId,
486
- isAutoPlay = _this$props4.isAutoPlay,
487
- isHDAvailable = _this$props4.isHDAvailable,
488
- isHDActive = _this$props4.isHDActive,
489
- onFirstPlay = _this$props4.onFirstPlay,
490
- createAnalyticsEvent = _this$props4.createAnalyticsEvent;
487
+ var _this$props5 = this.props,
488
+ type = _this$props5.type,
489
+ fileId = _this$props5.fileId,
490
+ isAutoPlay = _this$props5.isAutoPlay,
491
+ isHDAvailable = _this$props5.isHDAvailable,
492
+ isHDActive = _this$props5.isHDActive,
493
+ onFirstPlay = _this$props5.onFirstPlay,
494
+ createAnalyticsEvent = _this$props5.createAnalyticsEvent;
491
495
  var _this$state2 = this.state,
492
496
  isFullScreenEnabled = _this$state2.isFullScreenEnabled,
493
497
  playerSize = _this$state2.playerSize,
@@ -531,6 +535,12 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
531
535
  this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
532
536
  }
533
537
 
538
+ if (this.state.isFullScreenEnabled) {
539
+ var _this$props$onFullscr2, _this$props6;
540
+
541
+ (_this$props$onFullscr2 = (_this$props6 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props6, false);
542
+ }
543
+
534
544
  _simultaneousPlayManager.default.unsubscribe(this);
535
545
  }
536
546
  }, {
@@ -545,13 +555,13 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
545
555
  }, {
546
556
  key: "createAndFireUIEvent",
547
557
  value: function createAndFireUIEvent(eventType, actionSubjectId) {
548
- var _this$props5 = this.props,
549
- type = _this$props5.type,
550
- fileId = _this$props5.fileId,
551
- isHDActive = _this$props5.isHDActive,
552
- isHDAvailable = _this$props5.isHDAvailable,
553
- isAutoPlay = _this$props5.isAutoPlay,
554
- createAnalyticsEvent = _this$props5.createAnalyticsEvent;
558
+ var _this$props7 = this.props,
559
+ type = _this$props7.type,
560
+ fileId = _this$props7.fileId,
561
+ isHDActive = _this$props7.isHDActive,
562
+ isHDAvailable = _this$props7.isHDAvailable,
563
+ isAutoPlay = _this$props7.isAutoPlay,
564
+ createAnalyticsEvent = _this$props7.createAnalyticsEvent;
555
565
  var _this$state3 = this.state,
556
566
  isFullScreenEnabled = _this$state3.isFullScreenEnabled,
557
567
  playerSize = _this$state3.playerSize,
@@ -608,13 +618,13 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
608
618
  value: function render() {
609
619
  var _this2 = this;
610
620
 
611
- var _this$props6 = this.props,
612
- type = _this$props6.type,
613
- src = _this$props6.src,
614
- isAutoPlay = _this$props6.isAutoPlay,
615
- onCanPlay = _this$props6.onCanPlay,
616
- onError = _this$props6.onError,
617
- poster = _this$props6.poster;
621
+ var _this$props8 = this.props,
622
+ type = _this$props8.type,
623
+ src = _this$props8.src,
624
+ isAutoPlay = _this$props8.isAutoPlay,
625
+ onCanPlay = _this$props8.onCanPlay,
626
+ onError = _this$props8.onError,
627
+ poster = _this$props8.poster;
618
628
  return /*#__PURE__*/_react.default.createElement(_styled.CustomVideoWrapper, {
619
629
  ref: this.videoWrapperRef,
620
630
  "data-testid": "custom-media-player"
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-ui",
3
- "version": "22.0.0",
3
+ "version": "22.1.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/customMediaPlayer/index.js CHANGED
@@ -74,6 +74,9 @@ export class CustomMediaPlayerBase extends Component {
74
74
  const isFullScreenEnabled = !!getFullscreenElement();
75
75
 
76
76
  if (currentFullScreenMode !== isFullScreenEnabled) {
77
+ var _this$props$onFullscr, _this$props;
78
+
79
+ (_this$props$onFullscr = (_this$props = this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props, isFullScreenEnabled);
77
80
  this.setState({
78
81
  isFullScreenEnabled
79
82
  });
@@ -507,6 +510,12 @@ export class CustomMediaPlayerBase extends Component {
507
510
  this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
508
511
  }
509
512
 
513
+ if (this.state.isFullScreenEnabled) {
514
+ var _this$props$onFullscr2, _this$props2;
515
+
516
+ (_this$props$onFullscr2 = (_this$props2 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props2, false);
517
+ }
518
+
510
519
  simultaneousPlayManager.unsubscribe(this);
511
520
  }
512
521
 
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-ui",
3
- "version": "22.0.0",
3
+ "version": "22.1.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/customMediaPlayer/index.js CHANGED
@@ -99,6 +99,10 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
99
99
  var isFullScreenEnabled = !!getFullscreenElement();
100
100
 
101
101
  if (currentFullScreenMode !== isFullScreenEnabled) {
102
+ var _this$props$onFullscr, _this$props;
103
+
104
+ (_this$props$onFullscr = (_this$props = _this.props).onFullscreenChange) === null || _this$props$onFullscr === void 0 ? void 0 : _this$props$onFullscr.call(_this$props, isFullScreenEnabled);
105
+
102
106
  _this.setState({
103
107
  isFullScreenEnabled: isFullScreenEnabled
104
108
  });
@@ -130,11 +134,11 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
130
134
  });
131
135
 
132
136
  _defineProperty(_assertThisInitialized(_this), "renderHDButton", function () {
133
- var _this$props = _this.props,
134
- type = _this$props.type,
135
- isHDAvailable = _this$props.isHDAvailable,
136
- isHDActive = _this$props.isHDActive,
137
- onHDToggleClick = _this$props.onHDToggleClick;
137
+ var _this$props2 = _this.props,
138
+ type = _this$props2.type,
139
+ isHDAvailable = _this$props2.isHDAvailable,
140
+ isHDActive = _this$props2.isHDActive,
141
+ onHDToggleClick = _this$props2.onHDToggleClick;
138
142
 
139
143
  if (type === 'audio' || !isHDAvailable) {
140
144
  return;
@@ -231,9 +235,9 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
231
235
  });
232
236
 
233
237
  _defineProperty(_assertThisInitialized(_this), "renderFullScreenButton", function () {
234
- var _this$props2 = _this.props,
235
- formatMessage = _this$props2.intl.formatMessage,
236
- type = _this$props2.type;
238
+ var _this$props3 = _this.props,
239
+ formatMessage = _this$props3.intl.formatMessage,
240
+ type = _this$props3.type;
237
241
 
238
242
  if (type === 'audio') {
239
243
  return;
@@ -398,13 +402,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
398
402
  });
399
403
 
400
404
  _defineProperty(_assertThisInitialized(_this), "onViewed", function (videoState) {
401
- var _this$props3 = _this.props,
402
- createAnalyticsEvent = _this$props3.createAnalyticsEvent,
403
- fileId = _this$props3.fileId,
404
- isAutoPlay = _this$props3.isAutoPlay,
405
- isHDAvailable = _this$props3.isHDAvailable,
406
- isHDActive = _this$props3.isHDActive,
407
- type = _this$props3.type;
405
+ var _this$props4 = _this.props,
406
+ createAnalyticsEvent = _this$props4.createAnalyticsEvent,
407
+ fileId = _this$props4.fileId,
408
+ isAutoPlay = _this$props4.isAutoPlay,
409
+ isHDAvailable = _this$props4.isHDAvailable,
410
+ isHDActive = _this$props4.isHDActive,
411
+ type = _this$props4.type;
408
412
  var _this$state = _this.state,
409
413
  isFullScreenEnabled = _this$state.isFullScreenEnabled,
410
414
  playerSize = _this$state.playerSize,
@@ -466,14 +470,14 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
466
470
  _createClass(CustomMediaPlayerBase, [{
467
471
  key: "componentDidMount",
468
472
  value: function componentDidMount() {
469
- var _this$props4 = this.props,
470
- type = _this$props4.type,
471
- fileId = _this$props4.fileId,
472
- isAutoPlay = _this$props4.isAutoPlay,
473
- isHDAvailable = _this$props4.isHDAvailable,
474
- isHDActive = _this$props4.isHDActive,
475
- onFirstPlay = _this$props4.onFirstPlay,
476
- createAnalyticsEvent = _this$props4.createAnalyticsEvent;
473
+ var _this$props5 = this.props,
474
+ type = _this$props5.type,
475
+ fileId = _this$props5.fileId,
476
+ isAutoPlay = _this$props5.isAutoPlay,
477
+ isHDAvailable = _this$props5.isHDAvailable,
478
+ isHDActive = _this$props5.isHDActive,
479
+ onFirstPlay = _this$props5.onFirstPlay,
480
+ createAnalyticsEvent = _this$props5.createAnalyticsEvent;
477
481
  var _this$state2 = this.state,
478
482
  isFullScreenEnabled = _this$state2.isFullScreenEnabled,
479
483
  playerSize = _this$state2.playerSize,
@@ -517,6 +521,12 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
517
521
  this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
518
522
  }
519
523
 
524
+ if (this.state.isFullScreenEnabled) {
525
+ var _this$props$onFullscr2, _this$props6;
526
+
527
+ (_this$props$onFullscr2 = (_this$props6 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props6, false);
528
+ }
529
+
520
530
  simultaneousPlayManager.unsubscribe(this);
521
531
  }
522
532
  }, {
@@ -531,13 +541,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
531
541
  }, {
532
542
  key: "createAndFireUIEvent",
533
543
  value: function createAndFireUIEvent(eventType, actionSubjectId) {
534
- var _this$props5 = this.props,
535
- type = _this$props5.type,
536
- fileId = _this$props5.fileId,
537
- isHDActive = _this$props5.isHDActive,
538
- isHDAvailable = _this$props5.isHDAvailable,
539
- isAutoPlay = _this$props5.isAutoPlay,
540
- createAnalyticsEvent = _this$props5.createAnalyticsEvent;
544
+ var _this$props7 = this.props,
545
+ type = _this$props7.type,
546
+ fileId = _this$props7.fileId,
547
+ isHDActive = _this$props7.isHDActive,
548
+ isHDAvailable = _this$props7.isHDAvailable,
549
+ isAutoPlay = _this$props7.isAutoPlay,
550
+ createAnalyticsEvent = _this$props7.createAnalyticsEvent;
541
551
  var _this$state3 = this.state,
542
552
  isFullScreenEnabled = _this$state3.isFullScreenEnabled,
543
553
  playerSize = _this$state3.playerSize,
@@ -594,13 +604,13 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
594
604
  value: function render() {
595
605
  var _this2 = this;
596
606
 
597
- var _this$props6 = this.props,
598
- type = _this$props6.type,
599
- src = _this$props6.src,
600
- isAutoPlay = _this$props6.isAutoPlay,
601
- onCanPlay = _this$props6.onCanPlay,
602
- onError = _this$props6.onError,
603
- poster = _this$props6.poster;
607
+ var _this$props8 = this.props,
608
+ type = _this$props8.type,
609
+ src = _this$props8.src,
610
+ isAutoPlay = _this$props8.isAutoPlay,
611
+ onCanPlay = _this$props8.onCanPlay,
612
+ onError = _this$props8.onError,
613
+ poster = _this$props8.poster;
604
614
  return /*#__PURE__*/React.createElement(CustomVideoWrapper, {
605
615
  ref: this.videoWrapperRef,
606
616
  "data-testid": "custom-media-player"
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-ui",
3
- "version": "22.0.0",
3
+ "version": "22.1.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/customMediaPlayer/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface CustomMediaPlayerProps extends WithPlaybackProps, WithShowContr
19
19
  readonly onError?: () => void;
20
20
  readonly onDownloadClick?: () => void;
21
21
  readonly onFirstPlay?: () => void;
22
+ readonly onFullscreenChange?: (fullscreen: boolean) => void;
22
23
  readonly originalDimensions?: NumericalCardDimensions;
23
24
  readonly featureFlags?: MediaFeatureFlags;
24
25
  readonly poster?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-ui",
3
- "version": "22.0.0",
3
+ "version": "22.1.0",
4
4
  "description": "Includes common components and utilities used by other media packages",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -45,8 +45,8 @@
45
45
  "@atlaskit/icon": "^21.10.0",
46
46
  "@atlaskit/icon-file-type": "^6.3.0",
47
47
  "@atlaskit/locale": "^2.3.0",
48
- "@atlaskit/media-common": "^2.13.0",
49
- "@atlaskit/select": "^15.2.0",
48
+ "@atlaskit/media-common": "^2.14.0",
49
+ "@atlaskit/select": "^15.3.0",
50
50
  "@atlaskit/spinner": "^15.1.0",
51
51
  "@atlaskit/theme": "^12.1.0",
52
52
  "@atlaskit/tooltip": "^17.5.0",