wotnot-video-react
Version:
Video-React is a web video player built from the ground up for an HTML5 world using React library.
741 lines (629 loc) • 25.3 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../utils");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var propTypes = {
actions: _propTypes["default"].object,
player: _propTypes["default"].object,
children: _propTypes["default"].any,
startTime: _propTypes["default"].number,
loop: _propTypes["default"].bool,
muted: _propTypes["default"].bool,
autoPlay: _propTypes["default"].bool,
playsInline: _propTypes["default"].bool,
src: _propTypes["default"].string,
poster: _propTypes["default"].string,
className: _propTypes["default"].string,
preload: _propTypes["default"].oneOf(['auto', 'metadata', 'none']),
crossOrigin: _propTypes["default"].string,
onLoadStart: _propTypes["default"].func,
onWaiting: _propTypes["default"].func,
onCanPlay: _propTypes["default"].func,
onCanPlayThrough: _propTypes["default"].func,
onPlaying: _propTypes["default"].func,
onEnded: _propTypes["default"].func,
onSeeking: _propTypes["default"].func,
onSeeked: _propTypes["default"].func,
onPlay: _propTypes["default"].func,
onPause: _propTypes["default"].func,
onProgress: _propTypes["default"].func,
onDurationChange: _propTypes["default"].func,
onError: _propTypes["default"].func,
onSuspend: _propTypes["default"].func,
onAbort: _propTypes["default"].func,
onEmptied: _propTypes["default"].func,
onStalled: _propTypes["default"].func,
onLoadedMetadata: _propTypes["default"].func,
onLoadedData: _propTypes["default"].func,
onTimeUpdate: _propTypes["default"].func,
onRateChange: _propTypes["default"].func,
onVolumeChange: _propTypes["default"].func,
onResize: _propTypes["default"].func
};
var Video = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(Video, _Component);
var _super = _createSuper(Video);
function Video(props) {
var _this;
(0, _classCallCheck2["default"])(this, Video);
_this = _super.call(this, props);
_this.video = null; // the html5 video
_this.play = _this.play.bind((0, _assertThisInitialized2["default"])(_this));
_this.pause = _this.pause.bind((0, _assertThisInitialized2["default"])(_this));
_this.seek = _this.seek.bind((0, _assertThisInitialized2["default"])(_this));
_this.forward = _this.forward.bind((0, _assertThisInitialized2["default"])(_this));
_this.replay = _this.replay.bind((0, _assertThisInitialized2["default"])(_this));
_this.toggleFullscreen = _this.toggleFullscreen.bind((0, _assertThisInitialized2["default"])(_this));
_this.getProperties = _this.getProperties.bind((0, _assertThisInitialized2["default"])(_this));
_this.renderChildren = _this.renderChildren.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleLoadStart = _this.handleLoadStart.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleCanPlay = _this.handleCanPlay.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleCanPlayThrough = _this.handleCanPlayThrough.bind((0, _assertThisInitialized2["default"])(_this));
_this.handlePlay = _this.handlePlay.bind((0, _assertThisInitialized2["default"])(_this));
_this.handlePlaying = _this.handlePlaying.bind((0, _assertThisInitialized2["default"])(_this));
_this.handlePause = _this.handlePause.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleEnded = _this.handleEnded.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleWaiting = _this.handleWaiting.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleSeeking = _this.handleSeeking.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleSeeked = _this.handleSeeked.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleFullscreenChange = _this.handleFullscreenChange.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleError = _this.handleError.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleSuspend = _this.handleSuspend.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleAbort = _this.handleAbort.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleEmptied = _this.handleEmptied.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleStalled = _this.handleStalled.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleLoadedMetaData = _this.handleLoadedMetaData.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleLoadedData = _this.handleLoadedData.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleTimeUpdate = _this.handleTimeUpdate.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleRateChange = _this.handleRateChange.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleVolumeChange = _this.handleVolumeChange.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleDurationChange = _this.handleDurationChange.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleProgress = (0, _utils.throttle)(_this.handleProgress.bind((0, _assertThisInitialized2["default"])(_this)), 250);
_this.handleKeypress = _this.handleKeypress.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleTextTrackChange = _this.handleTextTrackChange.bind((0, _assertThisInitialized2["default"])(_this));
return _this;
}
(0, _createClass2["default"])(Video, [{
key: "componentDidMount",
value: function componentDidMount() {
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
}, {
key: "getProperties",
value: function getProperties() {
var _this2 = this;
if (!this.video) {
return null;
}
return _utils.mediaProperties.reduce(function (properties, key) {
properties[key] = _this2.video[key];
return properties;
}, {});
} // get playback rate
}, {
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",
value: function play() {
var promise = this.video.play();
if (promise !== undefined) {
promise["catch"](function () {}).then(function () {});
}
} // pause the video
}, {
key: "pause",
value: function pause() {
var promise = this.video.pause();
if (promise !== undefined) {
promise["catch"](function () {}).then(function () {});
}
} // Change the video source and re-load the video:
}, {
key: "load",
value: function load() {
this.video.load();
} // Add a new text track to the video
}, {
key: "addTextTrack",
value: function addTextTrack() {
var _this$video;
(_this$video = this.video).addTextTrack.apply(_this$video, arguments);
} // Check if your browser can play different types of video:
}, {
key: "canPlayType",
value: function canPlayType() {
var _this$video2;
(_this$video2 = this.video).canPlayType.apply(_this$video2, arguments);
} // toggle play
}, {
key: "togglePlay",
value: function togglePlay() {
if (this.video.paused) {
this.play();
} else {
this.pause();
}
} // seek video by time
}, {
key: "seek",
value: function seek(time) {
try {
this.video.currentTime = time;
} catch (e) {// console.log(e, 'Video is not ready.')
}
} // jump forward x seconds
}, {
key: "forward",
value: function forward(seconds) {
this.seek(this.video.currentTime + seconds);
} // jump back x seconds
}, {
key: "replay",
value: function replay(seconds) {
this.forward(-seconds);
} // enter or exist full screen
}, {
key: "toggleFullscreen",
value: function toggleFullscreen() {
var _this$props2 = this.props,
player = _this$props2.player,
actions = _this$props2.actions;
actions.toggleFullscreen(player);
} // Fired when the user agent
// begins looking for media data
}, {
key: "handleLoadStart",
value: function handleLoadStart() {
var _this$props3 = this.props,
actions = _this$props3.actions,
onLoadStart = _this$props3.onLoadStart;
actions.handleLoadStart(this.getProperties());
if (onLoadStart) {
onLoadStart.apply(void 0, arguments);
}
} // A handler for events that
// signal that waiting has ended
}, {
key: "handleCanPlay",
value: function handleCanPlay() {
var _this$props4 = this.props,
actions = _this$props4.actions,
onCanPlay = _this$props4.onCanPlay;
actions.handleCanPlay(this.getProperties());
if (onCanPlay) {
onCanPlay.apply(void 0, arguments);
}
} // A handler for events that
// signal that waiting has ended
}, {
key: "handleCanPlayThrough",
value: function handleCanPlayThrough() {
var _this$props5 = this.props,
actions = _this$props5.actions,
onCanPlayThrough = _this$props5.onCanPlayThrough;
actions.handleCanPlayThrough(this.getProperties());
if (onCanPlayThrough) {
onCanPlayThrough.apply(void 0, arguments);
}
} // A handler for events that
// signal that waiting has ended
}, {
key: "handlePlaying",
value: function handlePlaying() {
var _this$props6 = this.props,
actions = _this$props6.actions,
onPlaying = _this$props6.onPlaying;
actions.handlePlaying(this.getProperties());
if (onPlaying) {
onPlaying.apply(void 0, arguments);
}
} // Fired whenever the media has been started
}, {
key: "handlePlay",
value: function handlePlay() {
var _this$props7 = this.props,
actions = _this$props7.actions,
onPlay = _this$props7.onPlay;
actions.handlePlay(this.getProperties());
if (onPlay) {
onPlay.apply(void 0, arguments);
}
} // Fired whenever the media has been paused
}, {
key: "handlePause",
value: function handlePause() {
var _this$props8 = this.props,
actions = _this$props8.actions,
onPause = _this$props8.onPause;
actions.handlePause(this.getProperties());
if (onPause) {
onPause.apply(void 0, arguments);
}
} // Fired when the duration of
// the media resource is first known or changed
}, {
key: "handleDurationChange",
value: function handleDurationChange() {
var _this$props9 = this.props,
actions = _this$props9.actions,
onDurationChange = _this$props9.onDurationChange;
actions.handleDurationChange(this.getProperties());
if (onDurationChange) {
onDurationChange.apply(void 0, arguments);
}
} // Fired while the user agent
// is downloading media data
}, {
key: "handleProgress",
value: function handleProgress() {
var _this$props10 = this.props,
actions = _this$props10.actions,
onProgress = _this$props10.onProgress;
if (this.video) {
actions.handleProgressChange(this.getProperties());
}
if (onProgress) {
onProgress.apply(void 0, arguments);
}
} // Fired when the end of the media resource
// is reached (currentTime == duration)
}, {
key: "handleEnded",
value: function handleEnded() {
var _this$props11 = this.props,
loop = _this$props11.loop,
player = _this$props11.player,
actions = _this$props11.actions,
onEnded = _this$props11.onEnded;
if (loop) {
this.seek(0);
this.play();
} else if (!player.paused) {
this.pause();
}
actions.handleEnd(this.getProperties());
if (onEnded) {
onEnded.apply(void 0, arguments);
}
} // Fired whenever the media begins waiting
}, {
key: "handleWaiting",
value: function handleWaiting() {
var _this$props12 = this.props,
actions = _this$props12.actions,
onWaiting = _this$props12.onWaiting;
actions.handleWaiting(this.getProperties());
if (onWaiting) {
onWaiting.apply(void 0, arguments);
}
} // Fired whenever the player
// is jumping to a new time
}, {
key: "handleSeeking",
value: function handleSeeking() {
var _this$props13 = this.props,
actions = _this$props13.actions,
onSeeking = _this$props13.onSeeking;
actions.handleSeeking(this.getProperties());
if (onSeeking) {
onSeeking.apply(void 0, arguments);
}
} // Fired when the player has
// finished jumping to a new time
}, {
key: "handleSeeked",
value: function handleSeeked() {
var _this$props14 = this.props,
actions = _this$props14.actions,
onSeeked = _this$props14.onSeeked;
actions.handleSeeked(this.getProperties());
if (onSeeked) {
onSeeked.apply(void 0, arguments);
}
} // Handle Fullscreen Change
}, {
key: "handleFullscreenChange",
value: function handleFullscreenChange() {} // Fires when the browser is
// intentionally not getting media data
}, {
key: "handleSuspend",
value: function handleSuspend() {
var _this$props15 = this.props,
actions = _this$props15.actions,
onSuspend = _this$props15.onSuspend;
actions.handleSuspend(this.getProperties());
if (onSuspend) {
onSuspend.apply(void 0, arguments);
}
} // Fires when the loading of an audio/video is aborted
}, {
key: "handleAbort",
value: function handleAbort() {
var _this$props16 = this.props,
actions = _this$props16.actions,
onAbort = _this$props16.onAbort;
actions.handleAbort(this.getProperties());
if (onAbort) {
onAbort.apply(void 0, arguments);
}
} // Fires when the current playlist is empty
}, {
key: "handleEmptied",
value: function handleEmptied() {
var _this$props17 = this.props,
actions = _this$props17.actions,
onEmptied = _this$props17.onEmptied;
actions.handleEmptied(this.getProperties());
if (onEmptied) {
onEmptied.apply(void 0, arguments);
}
} // Fires when the browser is trying to
// get media data, but data is not available
}, {
key: "handleStalled",
value: function handleStalled() {
var _this$props18 = this.props,
actions = _this$props18.actions,
onStalled = _this$props18.onStalled;
actions.handleStalled(this.getProperties());
if (onStalled) {
onStalled.apply(void 0, arguments);
}
} // Fires when the browser has loaded
// meta data for the audio/video
}, {
key: "handleLoadedMetaData",
value: function handleLoadedMetaData() {
var _this$props19 = this.props,
actions = _this$props19.actions,
onLoadedMetadata = _this$props19.onLoadedMetadata,
startTime = _this$props19.startTime;
if (startTime && startTime > 0) {
this.video.currentTime = startTime;
}
actions.handleLoadedMetaData(this.getProperties());
if (onLoadedMetadata) {
onLoadedMetadata.apply(void 0, arguments);
}
} // Fires when the browser has loaded
// the current frame of the audio/video
}, {
key: "handleLoadedData",
value: function handleLoadedData() {
var _this$props20 = this.props,
actions = _this$props20.actions,
onLoadedData = _this$props20.onLoadedData;
actions.handleLoadedData(this.getProperties());
if (onLoadedData) {
onLoadedData.apply(void 0, arguments);
}
} // Fires when the current
// playback position has changed
}, {
key: "handleTimeUpdate",
value: function handleTimeUpdate() {
var _this$props21 = this.props,
actions = _this$props21.actions,
onTimeUpdate = _this$props21.onTimeUpdate;
actions.handleTimeUpdate(this.getProperties());
if (onTimeUpdate) {
onTimeUpdate.apply(void 0, arguments);
}
}
/**
* Fires when the playing speed of the audio/video is changed
*/
}, {
key: "handleRateChange",
value: function handleRateChange() {
var _this$props22 = this.props,
actions = _this$props22.actions,
onRateChange = _this$props22.onRateChange;
actions.handleRateChange(this.getProperties());
if (onRateChange) {
onRateChange.apply(void 0, arguments);
}
} // Fires when the volume has been changed
}, {
key: "handleVolumeChange",
value: function handleVolumeChange() {
var _this$props23 = this.props,
actions = _this$props23.actions,
onVolumeChange = _this$props23.onVolumeChange;
actions.handleVolumeChange(this.getProperties());
if (onVolumeChange) {
onVolumeChange.apply(void 0, arguments);
}
} // Fires when an error occurred
// during the loading of an audio/video
}, {
key: "handleError",
value: function handleError() {
var _this$props24 = this.props,
actions = _this$props24.actions,
onError = _this$props24.onError;
actions.handleError(this.getProperties());
if (onError) {
onError.apply(void 0, arguments);
}
}
}, {
key: "handleResize",
value: function handleResize() {
var _this$props25 = this.props,
actions = _this$props25.actions,
onResize = _this$props25.onResize;
actions.handleResize(this.getProperties());
if (onResize) {
onResize.apply(void 0, arguments);
}
}
}, {
key: "handleKeypress",
value: function handleKeypress() {}
}, {
key: "renderChildren",
value: function renderChildren() {
var _this3 = this;
var props = _objectSpread(_objectSpread({}, this.props), {}, {
video: this.video
}); // to make sure the children can get video property
if (!this.video) {
return null;
} // only keep <source />, <track />, <MyComponent isVideoChild /> elements
return _react["default"].Children.toArray(this.props.children).filter(_utils.isVideoChild).map(function (c) {
var cprops;
if (typeof c.type === 'string') {
// add onError to <source />
if (c.type === 'source') {
cprops = _objectSpread({}, c.props);
var preOnError = cprops.onError;
cprops.onError = function () {
if (preOnError) {
preOnError.apply(void 0, arguments);
}
_this3.handleError.apply(_this3, arguments);
};
}
} else {
cprops = props;
}
return /*#__PURE__*/_react["default"].cloneElement(c, cprops);
});
}
}, {
key: "render",
value: function render() {
var _this4 = this;
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 /*#__PURE__*/_react["default"].createElement("video", {
className: (0, _classnames["default"])('video-react-video', this.props.className),
id: videoId,
crossOrigin: crossOrigin,
ref: function ref(c) {
_this4.video = c;
},
muted: muted,
preload: preload,
loop: loop,
playsInline: playsInline,
autoPlay: autoPlay,
poster: poster,
src: src,
onLoadStart: this.handleLoadStart,
onWaiting: this.handleWaiting,
onCanPlay: this.handleCanPlay,
onCanPlayThrough: this.handleCanPlayThrough,
onPlaying: this.handlePlaying,
onEnded: this.handleEnded,
onSeeking: this.handleSeeking,
onSeeked: this.handleSeeked,
onPlay: this.handlePlay,
onPause: this.handlePause,
onProgress: this.handleProgress,
onDurationChange: this.handleDurationChange,
onError: this.handleError,
onSuspend: this.handleSuspend,
onAbort: this.handleAbort,
onEmptied: this.handleEmptied,
onStalled: this.handleStalled,
onLoadedMetadata: this.handleLoadedMetaData,
onLoadedData: this.handleLoadedData,
onTimeUpdate: this.handleTimeUpdate,
onRateChange: this.handleRateChange,
onVolumeChange: this.handleVolumeChange,
tabIndex: "-1"
}, this.renderChildren());
}
}, {
key: "playbackRate",
get: function get() {
return this.video.playbackRate;
} // set playback rate
// speed of video
,
set: function set(rate) {
this.video.playbackRate = rate;
}
}, {
key: "muted",
get: function get() {
return this.video.muted;
},
set: function set(val) {
this.video.muted = val;
}
}, {
key: "volume",
get: function get() {
return this.video.volume;
},
set: function set(val) {
if (val > 1) {
val = 1;
}
if (val < 0) {
val = 0;
}
this.video.volume = val;
} // video width
}, {
key: "videoWidth",
get: function get() {
return this.video.videoWidth;
} // video height
}, {
key: "videoHeight",
get: function get() {
return this.video.videoHeight;
}
}]);
return Video;
}(_react.Component);
exports["default"] = Video;
Video.propTypes = propTypes;
Video.displayName = 'Video';