video-react - npm Package Compare versions

Comparing version 0.13.9 to 0.14.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+<a name="0.14.0"></a>
+# [0.14.0](https://github.com/video-react/video-react/compare/0.13.9...0.14.0) (2019-06-21)
+
+
+### Features
+
+* New ClosedCaptionButton component ([6bea3a1](https://github.com/video-react/video-react/commit/6bea3a1))
+
+
+
 <a name="0.13.9"></a>
@@ -2,0 +12,0 @@ ## [0.13.9](https://github.com/video-react/video-react/compare/0.13.8...0.13.9) (2019-06-18)

lib/actions/video.js

@@ -31,3 +31,4 @@ "use strict";
 exports.handleEndSeeking = handleEndSeeking;
-exports.ERROR = exports.RESIZE = exports.LOADED_DATA = exports.LOADED_META_DATA = exports.STALLED = exports.EMPTIED = exports.ABORT = exports.SUSPEND = exports.RATE_CHANGE = exports.PROGRESS_CHANGE = exports.VOLUME_CHANGE = exports.TIME_UPDATE = exports.DURATION_CHANGE = exports.END_SEEKING = exports.SEEKING_TIME = exports.SEEKED = exports.SEEKING = exports.END = exports.PAUSE = exports.PLAY = exports.PLAYING = exports.CAN_PLAY_THROUGH = exports.WAITING = exports.CAN_PLAY = exports.LOAD_START = void 0;
+exports.activateTextTrack = activateTextTrack;
+exports.ACTIVATE_TEXT_TRACK = exports.ERROR = exports.RESIZE = exports.LOADED_DATA = exports.LOADED_META_DATA = exports.STALLED = exports.EMPTIED = exports.ABORT = exports.SUSPEND = exports.RATE_CHANGE = exports.PROGRESS_CHANGE = exports.VOLUME_CHANGE = exports.TIME_UPDATE = exports.DURATION_CHANGE = exports.END_SEEKING = exports.SEEKING_TIME = exports.SEEKED = exports.SEEKING = exports.END = exports.PAUSE = exports.PLAY = exports.PLAYING = exports.CAN_PLAY_THROUGH = exports.WAITING = exports.CAN_PLAY = exports.LOAD_START = void 0;
 var LOAD_START = 'video-react/LOAD_START';
@@ -83,2 +84,4 @@ exports.LOAD_START = LOAD_START;
 exports.ERROR = ERROR;
+var ACTIVATE_TEXT_TRACK = 'video-react/ACTIVATE_TEXT_TRACK';
+exports.ACTIVATE_TEXT_TRACK = ACTIVATE_TEXT_TRACK;
 
@@ -258,2 +261,9 @@ function handleLoadStart(videoProps) {
   };
+}
+
+function activateTextTrack(textTrack) {
+  return {
+    type: ACTIVATE_TEXT_TRACK,
+    textTrack: textTrack
+  };
 }

lib/components/control-bar/ProgressControl.js

@@ -30,4 +30,2 @@ "use strict";
 
-var _reactDom = require("react-dom");
-
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -72,3 +70,3 @@
       var duration = this.props.player.duration;
-      var node = (0, _reactDom.findDOMNode)(this.seekBar);
+      var node = this.seekBar;
       var newTime = Dom.getPointerPosition(node, event).x * duration;
@@ -75,0 +73,0 @@ var position = event.pageX - Dom.findElPosition(node).left;

lib/components/menu/MenuButton.js

@@ -87,4 +87,3 @@ "use strict";
       this.setState({
-        activateIndex: index,
-        active: false
+        activateIndex: index
       });
@@ -91,0 +90,0 @@ this.handleIndexChange(index);

lib/components/Shortcut.js

@@ -334,4 +334,4 @@ "use strict";
 
-      if (document.activeElement && ((0, _dom.hasClass)(document.activeElement, 'video-react-control') || (0, _dom.hasClass)(document.activeElement, 'video-react-menu-button-active') || // || hasClass(document.activeElement, 'video-react-slider')
-      (0, _dom.hasClass)(document.activeElement, 'video-react-big-play-button'))) {
+      if (document.activeElement && ((0, _dom.hasClass)(document.activeElement, 'video-react-control') || (0, _dom.hasClass)(document.activeElement, 'video-react-menu-button-active') // || hasClass(document.activeElement, 'video-react-slider')
+      || (0, _dom.hasClass)(document.activeElement, 'video-react-big-play-button'))) {
         return;
@@ -338,0 +338,0 @@ }

lib/components/Slider.js

@@ -28,4 +28,2 @@ "use strict";
 
-var _reactDom = require("react-dom");
-
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -221,3 +219,3 @@
     value: function calculateDistance(event) {
-      var node = (0, _reactDom.findDOMNode)(this);
+      var node = this.slider;
       var position = Dom.getPointerPosition(node, event);
@@ -246,2 +244,4 @@
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
@@ -258,2 +258,5 @@ vertical = _this$props.vertical,
         }, 'video-react-slider'),
+        ref: function ref(c) {
+          _this2.slider = c;
+        },
         tabIndex: "0",
@@ -260,0 +263,0 @@ role: "slider",

lib/components/Video.js

@@ -117,2 +117,3 @@ "use strict";
     _this.handleKeypress = _this.handleKeypress.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleTextTrackChange = _this.handleTextTrackChange.bind((0, _assertThisInitialized2["default"])(_this));
     return _this;
@@ -125,2 +126,7 @@ }
       this.forceUpdate(); // make sure the children can get the video property
+
+      if (this.video && this.video.textTracks) {
+        this.video.textTracks.onaddtrack = this.handleTextTrackChange;
+        this.video.textTracks.onremovetrack = this.handleTextTrackChange;
+      }
     } // get all video properties
@@ -144,4 +150,21 @@
   }, {
+    key: "handleTextTrackChange",
+    value: function handleTextTrackChange() {
+      var _this$props = this.props,
+          actions = _this$props.actions,
+          player = _this$props.player;
+
+      if (this.video && this.video.textTracks) {
+        var activeTextTrack = Array.from(this.video.textTracks).find(function (textTrack) {
+          return textTrack.mode === 'showing';
+        });
+
+        if (activeTextTrack !== player.activeTextTrack) {
+          actions.activateTextTrack(activeTextTrack);
+        }
+      }
+    } // play the video
+
+  }, {
     key: "play",
-    // play the video
     value: function play() {
@@ -221,5 +244,5 @@ var promise = this.video.play();
     value: function toggleFullscreen() {
-      var _this$props = this.props,
-          player = _this$props.player,
-          actions = _this$props.actions;
+      var _this$props2 = this.props,
+          player = _this$props2.player,
+          actions = _this$props2.actions;
       actions.toggleFullscreen(player);
@@ -232,5 +255,5 @@ } // Fired when the user agent
     value: function handleLoadStart() {
-      var _this$props2 = this.props,
-          actions = _this$props2.actions,
-          onLoadStart = _this$props2.onLoadStart;
+      var _this$props3 = this.props,
+          actions = _this$props3.actions,
+          onLoadStart = _this$props3.onLoadStart;
       actions.handleLoadStart(this.getProperties());
@@ -247,5 +270,5 @@
     value: function handleCanPlay() {
-      var _this$props3 = this.props,
-          actions = _this$props3.actions,
-          onCanPlay = _this$props3.onCanPlay;
+      var _this$props4 = this.props,
+          actions = _this$props4.actions,
+          onCanPlay = _this$props4.onCanPlay;
       actions.handleCanPlay(this.getProperties());
@@ -262,5 +285,5 @@
     value: function handleCanPlayThrough() {
-      var _this$props4 = this.props,
-          actions = _this$props4.actions,
-          onCanPlayThrough = _this$props4.onCanPlayThrough;
+      var _this$props5 = this.props,
+          actions = _this$props5.actions,
+          onCanPlayThrough = _this$props5.onCanPlayThrough;
       actions.handleCanPlayThrough(this.getProperties());
@@ -277,5 +300,5 @@
     value: function handlePlaying() {
-      var _this$props5 = this.props,
-          actions = _this$props5.actions,
-          onPlaying = _this$props5.onPlaying;
+      var _this$props6 = this.props,
+          actions = _this$props6.actions,
+          onPlaying = _this$props6.onPlaying;
       actions.handlePlaying(this.getProperties());
@@ -291,5 +314,5 @@
     value: function handlePlay() {
-      var _this$props6 = this.props,
-          actions = _this$props6.actions,
-          onPlay = _this$props6.onPlay;
+      var _this$props7 = this.props,
+          actions = _this$props7.actions,
+          onPlay = _this$props7.onPlay;
       actions.handlePlay(this.getProperties());
@@ -305,5 +328,5 @@
     value: function handlePause() {
-      var _this$props7 = this.props,
-          actions = _this$props7.actions,
-          onPause = _this$props7.onPause;
+      var _this$props8 = this.props,
+          actions = _this$props8.actions,
+          onPause = _this$props8.onPause;
       actions.handlePause(this.getProperties());
@@ -320,5 +343,5 @@
     value: function handleDurationChange() {
-      var _this$props8 = this.props,
-          actions = _this$props8.actions,
-          onDurationChange = _this$props8.onDurationChange;
+      var _this$props9 = this.props,
+          actions = _this$props9.actions,
+          onDurationChange = _this$props9.onDurationChange;
       actions.handleDurationChange(this.getProperties());
@@ -335,5 +358,5 @@
     value: function handleProgress() {
-      var _this$props9 = this.props,
-          actions = _this$props9.actions,
-          onProgress = _this$props9.onProgress;
+      var _this$props10 = this.props,
+          actions = _this$props10.actions,
+          onProgress = _this$props10.onProgress;
 
@@ -353,7 +376,7 @@ if (this.video) {
     value: function handleEnded() {
-      var _this$props10 = this.props,
-          loop = _this$props10.loop,
-          player = _this$props10.player,
-          actions = _this$props10.actions,
-          onEnded = _this$props10.onEnded;
+      var _this$props11 = this.props,
+          loop = _this$props11.loop,
+          player = _this$props11.player,
+          actions = _this$props11.actions,
+          onEnded = _this$props11.onEnded;
 
@@ -377,5 +400,5 @@ if (loop) {
     value: function handleWaiting() {
-      var _this$props11 = this.props,
-          actions = _this$props11.actions,
-          onWaiting = _this$props11.onWaiting;
+      var _this$props12 = this.props,
+          actions = _this$props12.actions,
+          onWaiting = _this$props12.onWaiting;
       actions.handleWaiting(this.getProperties());
@@ -392,5 +415,5 @@
     value: function handleSeeking() {
-      var _this$props12 = this.props,
-          actions = _this$props12.actions,
-          onSeeking = _this$props12.onSeeking;
+      var _this$props13 = this.props,
+          actions = _this$props13.actions,
+          onSeeking = _this$props13.onSeeking;
       actions.handleSeeking(this.getProperties());
@@ -407,5 +430,5 @@
     value: function handleSeeked() {
-      var _this$props13 = this.props,
-          actions = _this$props13.actions,
-          onSeeked = _this$props13.onSeeked;
+      var _this$props14 = this.props,
+          actions = _this$props14.actions,
+          onSeeked = _this$props14.onSeeked;
       actions.handleSeeked(this.getProperties());
@@ -426,5 +449,5 @@
     value: function handleSuspend() {
-      var _this$props14 = this.props,
-          actions = _this$props14.actions,
-          onSuspend = _this$props14.onSuspend;
+      var _this$props15 = this.props,
+          actions = _this$props15.actions,
+          onSuspend = _this$props15.onSuspend;
       actions.handleSuspend(this.getProperties());
@@ -440,5 +463,5 @@
     value: function handleAbort() {
-      var _this$props15 = this.props,
-          actions = _this$props15.actions,
-          onAbort = _this$props15.onAbort;
+      var _this$props16 = this.props,
+          actions = _this$props16.actions,
+          onAbort = _this$props16.onAbort;
       actions.handleAbort(this.getProperties());
@@ -454,5 +477,5 @@
     value: function handleEmptied() {
-      var _this$props16 = this.props,
-          actions = _this$props16.actions,
-          onEmptied = _this$props16.onEmptied;
+      var _this$props17 = this.props,
+          actions = _this$props17.actions,
+          onEmptied = _this$props17.onEmptied;
       actions.handleEmptied(this.getProperties());
@@ -469,5 +492,5 @@
     value: function handleStalled() {
-      var _this$props17 = this.props,
-          actions = _this$props17.actions,
-          onStalled = _this$props17.onStalled;
+      var _this$props18 = this.props,
+          actions = _this$props18.actions,
+          onStalled = _this$props18.onStalled;
       actions.handleStalled(this.getProperties());
@@ -484,6 +507,6 @@
     value: function handleLoadedMetaData() {
-      var _this$props18 = this.props,
-          actions = _this$props18.actions,
-          onLoadedMetadata = _this$props18.onLoadedMetadata,
-          startTime = _this$props18.startTime;
+      var _this$props19 = this.props,
+          actions = _this$props19.actions,
+          onLoadedMetadata = _this$props19.onLoadedMetadata,
+          startTime = _this$props19.startTime;
 
@@ -505,5 +528,5 @@ if (startTime && startTime > 0) {
     value: function handleLoadedData() {
-      var _this$props19 = this.props,
-          actions = _this$props19.actions,
-          onLoadedData = _this$props19.onLoadedData;
+      var _this$props20 = this.props,
+          actions = _this$props20.actions,
+          onLoadedData = _this$props20.onLoadedData;
       actions.handleLoadedData(this.getProperties());
@@ -520,5 +543,5 @@
     value: function handleTimeUpdate() {
-      var _this$props20 = this.props,
-          actions = _this$props20.actions,
-          onTimeUpdate = _this$props20.onTimeUpdate;
+      var _this$props21 = this.props,
+          actions = _this$props21.actions,
+          onTimeUpdate = _this$props21.onTimeUpdate;
       actions.handleTimeUpdate(this.getProperties());
@@ -537,5 +560,5 @@
     value: function handleRateChange() {
-      var _this$props21 = this.props,
-          actions = _this$props21.actions,
-          onRateChange = _this$props21.onRateChange;
+      var _this$props22 = this.props,
+          actions = _this$props22.actions,
+          onRateChange = _this$props22.onRateChange;
       actions.handleRateChange(this.getProperties());
@@ -551,5 +574,5 @@
     value: function handleVolumeChange() {
-      var _this$props22 = this.props,
-          actions = _this$props22.actions,
-          onVolumeChange = _this$props22.onVolumeChange;
+      var _this$props23 = this.props,
+          actions = _this$props23.actions,
+          onVolumeChange = _this$props23.onVolumeChange;
       actions.handleVolumeChange(this.getProperties());
@@ -566,5 +589,5 @@
     value: function handleError() {
-      var _this$props23 = this.props,
-          actions = _this$props23.actions,
-          onError = _this$props23.onError;
+      var _this$props24 = this.props,
+          actions = _this$props24.actions,
+          onError = _this$props24.onError;
       actions.handleError(this.getProperties());
@@ -579,5 +602,5 @@
     value: function handleResize() {
-      var _this$props24 = this.props,
-          actions = _this$props24.actions,
-          onResize = _this$props24.onResize;
+      var _this$props25 = this.props,
+          actions = _this$props25.actions,
+          onResize = _this$props25.onResize;
       actions.handleResize(this.getProperties());
@@ -635,12 +658,12 @@
 
-      var _this$props25 = this.props,
-          loop = _this$props25.loop,
-          poster = _this$props25.poster,
-          preload = _this$props25.preload,
-          src = _this$props25.src,
-          autoPlay = _this$props25.autoPlay,
-          playsInline = _this$props25.playsInline,
-          muted = _this$props25.muted,
-          crossOrigin = _this$props25.crossOrigin,
-          videoId = _this$props25.videoId;
+      var _this$props26 = this.props,
+          loop = _this$props26.loop,
+          poster = _this$props26.poster,
+          preload = _this$props26.preload,
+          src = _this$props26.src,
+          autoPlay = _this$props26.autoPlay,
+          playsInline = _this$props26.playsInline,
+          muted = _this$props26.muted,
+          crossOrigin = _this$props26.crossOrigin,
+          videoId = _this$props26.videoId;
       return _react["default"].createElement("video", {
@@ -647,0 +670,0 @@ className: (0, _classnames["default"])('video-react-video', this.props.className),

lib/index.js

@@ -136,2 +136,8 @@ "use strict";
 });
+Object.defineProperty(exports, "ClosedCaptionButton", {
+  enumerable: true,
+  get: function get() {
+    return _ClosedCaptionButton["default"];
+  }
+});
 Object.defineProperty(exports, "RemainingTimeDisplay", {
@@ -223,2 +229,4 @@ enumerable: true,
 
+var _ClosedCaptionButton = _interopRequireDefault(require("./components/control-bar/ClosedCaptionButton"));
+
 var _RemainingTimeDisplay = _interopRequireDefault(require("./components/time-controls/RemainingTimeDisplay"));
@@ -225,0 +233,0 @@

lib/reducers/player.js

@@ -37,3 +37,4 @@ "use strict";
   isActive: false,
-  isFullscreen: false
+  isFullscreen: false,
+  activeTextTrack: null
 };
@@ -142,2 +143,7 @@
 
+    case _video.ACTIVATE_TEXT_TRACK:
+      return (0, _objectSpread2["default"])({}, state, {
+        activeTextTrack: action.textTrack
+      });
+
     default:
@@ -144,0 +150,0 @@ return state;

lib/utils/dom.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _reactDom = require("react-dom");
-
 /**
@@ -21,3 +19,3 @@ * Offset Left
  * @function findElPosition
- * @param {Element} el Element from which to get offset
+ * @param {ReactNodeRef} el React Node ref from which to get offset
  * @return {Object}
@@ -55,3 +53,3 @@ */
 /**
- * Get pointer position in element
+ * Get pointer position in a React Node ref
  * Returns an object with x and y coordinates.
@@ -61,3 +59,3 @@ * The base on the coordinates are the bottom left of the element.
  * @function getPointerPosition
- * @param {Element} el Element on which to get the pointer position on
+ * @param {ReactNodeRef} el React Node ref on which to get the pointer position on
  * @param {Event} event Event object
@@ -90,6 +88,4 @@ * @return {Object} This object will have x and y coordinates corresponding to the mouse position
 function blurNode(reactNode) {
-  var domNode = (0, _reactDom.findDOMNode)(reactNode);
-
-  if (domNode && domNode.blur) {
-    domNode.blur();
+  if (reactNode && reactNode.blur) {
+    reactNode.blur();
   }
@@ -100,6 +96,4 @@ } // focus an element
 function focusNode(reactNode) {
-  var domNode = (0, _reactDom.findDOMNode)(reactNode);
-
-  if (domNode && domNode.focus) {
-    domNode.focus();
+  if (reactNode && reactNode.focus) {
+    reactNode.focus();
   }
@@ -106,0 +100,0 @@ } // check if an element has a class name

package.json

 {
   "name": "video-react",
-  "version": "0.13.9",
+  "version": "0.14.0",
   "description": "Video-React is a web video player built from the ground up for an HTML5 world using React library.",
@@ -9,2 +9,3 @@ "main": "lib/index.js",
     "test": "BABEL_ENV=test jest",
+    "test:watch": "BABEL_ENV=test jest --watch",
     "test:coverage": "BABEL_ENV=test jest --coverage",
@@ -21,3 +22,4 @@ "start": "webpack-dev-server --watch",
     "lint": "eslint src",
-    "format": "prettier --config .prettierrc.js --write \"src/**/*.{js,json,md}\" \"docs/**/*.{js,json,md}\" \"*.{js,json,md}\""
+    "format-all": "prettier --config .prettierrc.js --write \"src/**/*.{js,json,md}\" \"docs/**/*.{js,json,md}\" \"*.{js,json,md}\"",
+    "format-one": "prettier --config .prettierrc.js --write"
   },
@@ -31,3 +33,3 @@ "husky": {
     "**/*.{js,css,md}": [
-      "npm run format",
+      "npm run format-one",
       "git add"
@@ -118,3 +120,2 @@ ]
     "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-standard": "^2.0.0",
     "file-loader": "^3.0.1",
@@ -121,0 +122,0 @@ "history": "^3.0.0",

No alert changes

Improved metrics

Total package byte prevSize

2604268

increased by3.7%

Dev dependency count

62

decreased by-1.59%

Number of package files

95

increased by2.15%

Lines of code

24285

increased by3.61%

No dependency changes