react-videoplayer
Version:
A configrable react html5 video component
1,409 lines (1,278 loc) • 74.6 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["ReactVideoPlayer"] = factory(require("react"));
else
root["ReactVideoPlayer"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_3__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(1);
module.exports = __webpack_require__(1);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _VideoPlayer = __webpack_require__(2);
var _VideoPlayer2 = _interopRequireDefault(_VideoPlayer);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _VideoPlayer2.default;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(4);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Notification = __webpack_require__(13);
var _Notification2 = _interopRequireDefault(_Notification);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var VideoPlayer = function (_React$Component) {
_inherits(VideoPlayer, _React$Component);
function VideoPlayer(props) {
_classCallCheck(this, VideoPlayer);
var _this = _possibleConstructorReturn(this, (VideoPlayer.__proto__ || Object.getPrototypeOf(VideoPlayer)).call(this, props));
_this.state = {
videoPlaying: _this.props.autoPlay,
videoProgress: _this.props.videoProgress,
videoBufferedProgressStart: 0,
videoBufferedProgressEnd: 0,
videoDuration: '',
videoCurrentTime: '',
videoVolume: _this.props.videoVolume,
videoPlaybackRate: _this.props.videoPlaybackRate,
showVolumeSlider: false,
showPlaybackRateSlider: false,
videoControlContainerDisplay: 'none',
videoClassName: '',
hideMouse: '',
showNotification: false
};
_this.changePlaybackRate = _this.changePlaybackRate.bind(_this);
_this.toggleVideoPlay = _this.toggleVideoPlay.bind(_this);
_this.videoOnClick = _this.videoOnClick.bind(_this);
_this.showVideoControls = _this.showVideoControls.bind(_this);
_this.hideVideoControls = _this.hideVideoControls.bind(_this);
_this.onDurationChange = _this.onDurationChange.bind(_this);
_this.onPlay = _this.onPlay.bind(_this);
_this.onPlaying = _this.onPlaying.bind(_this);
_this.onEnded = _this.onEnded.bind(_this);
_this.putFoucsOnMe = _this.putFoucsOnMe.bind(_this);
_this.playNext = _this.playNext.bind(_this);
_this.playPrevious = _this.playPrevious.bind(_this);
_this.seek = _this.seek.bind(_this);
_this.changeDefaultSeekingTime = _this.changeDefaultSeekingTime.bind(_this);
_this.changeVolume = _this.changeVolume.bind(_this);
_this.volumeSliderDragStart = _this.volumeSliderDragStart.bind(_this);
_this.volumeSliderDragEnd = _this.volumeSliderDragEnd.bind(_this);
_this.changeDefaultVolumeChange = _this.changeDefaultVolumeChange.bind(_this);
_this.updateProgressBar = _this.updateProgressBar.bind(_this);
_this.progressBarOnClick = _this.progressBarOnClick.bind(_this);
_this.progressBarDragStart = _this.progressBarDragStart.bind(_this);
_this.progressBarDragEnd = _this.progressBarDragEnd.bind(_this);
_this.toggleVolume = _this.toggleVolume.bind(_this);
_this.showVolumeSlider = _this.showVolumeSlider.bind(_this);
_this.hideVolumeSlider = _this.hideVolumeSlider.bind(_this);
_this.showPlaybackRateSlider = _this.showPlaybackRateSlider.bind(_this);
_this.hidePlaybackRateSlider = _this.hidePlaybackRateSlider.bind(_this);
_this.videoHandleKeyDown = _this.videoHandleKeyDown.bind(_this);
_this.videoFullScreenToggle = _this.videoFullScreenToggle.bind(_this);
_this.toggleTheaterMode = _this.toggleTheaterMode.bind(_this);
_this.showNotification = _this.showNotification.bind(_this);
_this.hideNotification = _this.hideNotification.bind(_this);
_this.showHelpBox = _this.showHelpBox.bind(_this);
//utilities
_this.formatTime = _this.formatTime.bind(_this);
return _this;
}
_createClass(VideoPlayer, [{
key: 'componentWillMount',
value: function componentWillMount() {
if (this.props.autoPlay) {
this.videoButton = this.props.pauseButtonImg;
} else {
this.videoButton = this.props.playButtonImg;
}
this.volumeButtonImg = this.props.volumeButtonImg;
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.video = this.refs.video;
this.videoControlContainer = this.refs.videoControlContainer;
this.lastSavedVolume = this.video.volume;
this.defaultSeekTime = this.props.defaultSeekTime;
this.defaultVolumeChange = this.props.defaultVolumeChange / 100;
this.progressBarWrapper = this.refs.progressBar;
this.preventSliderHide = false;
this.theaterModeOriginal = false;
this.helpBox = false;
this.videoKeyBinding = {
38: { action: 'increaseVolume', key: 'Up-arrow' }, // arrow-up
40: { action: 'decreaseVolume', key: 'Down-arrow' }, // arrow-down
39: { action: 'seekForward', key: 'Right-arrow' }, // arrow-right
37: { action: 'seekBackward', key: 'Left-arrow' }, // arrow-left
221: { action: 'increasePlayBackRate', key: 'C' }, // ]
219: { action: 'decreasePlayBackRate', key: 'X' }, // [
220: { action: 'defaultPlaybackRate', key: 'Z' }, // |
13: { action: 'fullScreenToggle', key: 'Enter' }, // enter
70: { action: 'fullScreenToggle', key: 'F' }, // f
32: { action: 'playPauseToggle', key: 'Space' }, // space
75: { action: 'playPauseToggle', key: 'K' }, // k
76: { action: 'seekForward', key: 'L' }, // l
74: { action: 'seekBackward', key: 'J' }, // j
77: { action: 'toggleVolume', key: 'M' }, // m
84: { action: 'toggleTheaterMode', key: 'T' }, // t
190: { action: 'playNextVideo', key: '>' }, // >
188: { action: 'playPreviousVideo', key: '<' }, // <
72: { action: 'showHelpBox', key: 'H' // h
} };
this.video.volume = this.props.videoVolume / 100;
this.video.playbackRate = this.props.videoPlaybackRate;
if (this.props.autoPlay) {
this.video.play();
}
if (this.props.videoProgress.length > 0) {
var time = this.props.videoProgress.split('m');
var minutes = time[0];
var seconds = time[1].split('s')[0];
var totalSeconds = parseFloat(minutes) * 60 + parseFloat(seconds);
this.video.currentTime = totalSeconds;
}
if (!this.props.defaultBrowserControls) {
this.videoDefaultControls = 'hide-video-controls';
}
if (this.props.muted === true) {
this.toggleVolume();
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
clearTimeout(this.hideAgain);
clearTimeout(this.hideNotificationTimeOut);
}
//utilities
}, {
key: 'formatTime',
value: function formatTime(givenSeconds) {
// return time as "hh:mm:ss"
var hours = Math.floor(givenSeconds / (60 * 60));
givenSeconds = givenSeconds - hours * 60 * 60;
var minutes = Math.floor(givenSeconds / 60);
givenSeconds = givenSeconds - minutes * 60;
var seconds = givenSeconds;
if (seconds < 10) {
seconds = "0" + seconds;
}
if (hours > 0) {
return hours + ":" + minutes + ":" + seconds;
} else {
return minutes + ":" + seconds;
}
}
//video functions
}, {
key: 'changePlaybackRate',
value: function changePlaybackRate(option) {
var newPlaybackRate = this.video.playbackRate;
if (option === 'increase') {
newPlaybackRate = newPlaybackRate < 4 ? newPlaybackRate + 0.25 : newPlaybackRate;
} else if (option === 'decrease') {
newPlaybackRate = newPlaybackRate > 0.5 ? newPlaybackRate - 0.25 : newPlaybackRate;
} else if (option === 'default') {
newPlaybackRate = this.props.videoPlaybackRate;
} else if (option === 'custom') {
var playbackControl = this.refs.playbackRateControl;
var playbackRateSliderHeight = this.refs.playbackRateSlider.offsetHeight;
newPlaybackRate = (1 - (event.clientY - (playbackControl.offsetTop - playbackRateSliderHeight)) / playbackRateSliderHeight) * 4;
}
this.video.playbackRate = newPlaybackRate;
this.showNotification(['Playback Speed: ' + newPlaybackRate]);
this.setState({
videoPlaybackRate: newPlaybackRate
});
}
}, {
key: 'toggleVideoPlay',
value: function toggleVideoPlay() {
if (this.props.videoSrc === '') {
return;
}
if (!this.state.videoPlaying) {
this.videoButton = this.props.pauseButtonImg;
this.video.play();
} else {
this.videoButton = this.props.playButtonImg;
this.video.pause();
}
this.setState(function (prevState) {
return {
videoPlaying: !prevState.videoPlaying
};
});
}
}, {
key: 'onDurationChange',
value: function onDurationChange() {
this.setState({
videoProgress: 0,
videoDuration: this.formatTime(Math.ceil(this.video.duration))
});
}
}, {
key: 'onPlay',
value: function onPlay() {
this.setState({
videoVolume: this.video.volume
});
if (this.props.onPlay) {
this.props.onPlay();
}
}
}, {
key: 'onPlaying',
value: function onPlaying() {
if (this.props.onPlaying) {
this.props.onPlaying();
}
}
}, {
key: 'onEnded',
value: function onEnded() {
this.setState({
videoProgress: 0
});
this.videoButton = this.props.playButtonImg;
if (this.props.onEnded) {
this.props.onEnded();
}
}
}, {
key: 'playNext',
value: function playNext() {
if (!this.props.playNext) {
this.showNotification(['No file found']);
} else {
this.props.playNext();
this.videoButton = this.props.pauseButtonImg;
}
}
}, {
key: 'playPrevious',
value: function playPrevious() {
if (!this.props.playPrevious) {
this.showNotification(['No file found']);
} else {
this.props.playPrevious();
this.videoButton = this.props.pauseButtonImg;
}
}
}, {
key: 'seek',
value: function seek(direction) {
if (direction === 'forward') {
this.video.currentTime += this.defaultSeekTime;
} else if (direction === 'backward') {
this.video.currentTime -= this.defaultSeekTime;
}
}
}, {
key: 'changeDefaultSeekingTime',
value: function changeDefaultSeekingTime(newTime) {
if (newTime > 0) {
this.seekTime = newTime;
}
}
}, {
key: 'changeVolume',
value: function changeVolume(event, keyevent, direction) {
var volume = 0;
if (event.type === 'keydown') {
if (direction === 'up' && this.video.volume <= 1) {
volume = this.video.volume + this.defaultVolumeChange;
} else if (direction === 'down' && this.video.volume >= 0) {
volume = this.video.volume - this.defaultVolumeChange;
}
volume = Math.round(volume * 10) / 10;
} else {
if (this.state.showVolumeSlider === false) {
return;
}
var videoControlContainer = this.refs.videoControlContainer;
var volumeSliderHeight = this.refs.volumeSlider.offsetHeight;
if (this.state.videoClassName === '') {
volume = 1 - (event.clientY - (videoControlContainer.offsetTop - window.scrollY - volumeSliderHeight + 8)) / volumeSliderHeight;
} else {
volume = 1 - (event.clientY - (videoControlContainer.offsetTop - window.scrollY - volumeSliderHeight)) / volumeSliderHeight;
}
volume = volume > .97 ? 1 : volume;
volume = volume < .03 ? 0 : volume;
}
this.volumeButtonImg = this.props.volumeButtonImg;
if (volume > 1) {
volume = 1;
} else if (volume <= 0) {
this.volumeButtonImg = this.props.volumeButtonMuteImg;
volume = 0;
}
if (event.type === 'keydown') {
this.showNotification(['Volume: ' + volume * 100]);
}
this.video.volume = volume;
this.setState({
videoVolume: volume
});
}
}, {
key: 'volumeSliderDragStart',
value: function volumeSliderDragStart(event) {
this.changeVolume(event);
this.preventSliderHide = true;
document.addEventListener('mousemove', this.changeVolume);
document.addEventListener('mouseup', this.volumeSliderDragEnd);
}
}, {
key: 'volumeSliderDragEnd',
value: function volumeSliderDragEnd() {
document.removeEventListener('mousemove', this.changeVolume);
document.removeEventListener('mouseup', this.volumeSliderDragEnd);
this.hideVolumeSlider();
}
}, {
key: 'changeDefaultVolumeChange',
value: function changeDefaultVolumeChange(newVolume) {
if (newVolume <= 1 && newVolume >= 0) {
this.defaultVolumeChange = newVolume;
}
}
}, {
key: 'updateProgressBar',
value: function updateProgressBar() {
var buffered = this.video.buffered;
var videoBufferedProgressStart = 0;
var videoBufferedProgressEnd = 0;
var minValue = Number.MAX_SAFE_INTEGER;
var minIndex = -1;
for (var i = 0; i < buffered.length; i++) {
var temp = Math.abs(this.video.currentTime - buffered.start(i));
if (temp < minValue) {
minValue = temp;
minIndex = i;
}
}
/* TODO: Fix buffered progress bar */
if (buffered.length !== 0) {
videoBufferedProgressStart = this.video.buffered.start(minIndex) / this.video.duration * 100;
videoBufferedProgressEnd = this.video.buffered.end(minIndex) / this.video.duration * 100;
}
this.setState({
videoProgress: this.video.currentTime / this.video.duration * 100,
videoCurrentTime: this.formatTime(Math.ceil(this.video.currentTime)),
videoBufferedProgressStart: videoBufferedProgressStart,
videoBufferedProgressEnd: videoBufferedProgressEnd
});
}
}, {
key: 'progressBarOnClick',
value: function progressBarOnClick(event) {
var progressValue = (event.clientX - (this.progressBarWrapper.offsetLeft + this.refs.videoContainer.offsetLeft)) / this.progressBarWrapper.offsetWidth;
if (this.state.videoClassName !== '') {
progressValue += 8 / this.progressBarWrapper.offsetWidth;
}
if (progressValue > 1) {
progressValue = 1;
}
this.video.currentTime = progressValue * this.video.duration;
this.setState({
videoProgress: progressValue * 100
});
}
}, {
key: 'progressBarDragStart',
value: function progressBarDragStart(event) {
this.progressBarOnClick(event);
document.addEventListener('mousemove', this.progressBarDragStart);
document.addEventListener('mouseup', this.progressBarDragEnd);
}
}, {
key: 'progressBarDragEnd',
value: function progressBarDragEnd() {
document.removeEventListener('mousemove', this.progressBarDragStart);
document.removeEventListener('mouseup', this.progressBarDragEnd);
}
}, {
key: 'toggleVolume',
value: function toggleVolume() {
var currentVolume = this.video.volume;
if (currentVolume > 0) {
this.lastSavedVolume = currentVolume;
this.volumeButtonImg = this.props.volumeButtonMuteImg;
this.video.volume = 0;
} else if (currentVolume === 0) {
this.video.volume = this.lastSavedVolume;
this.volumeButtonImg = this.props.volumeButtonImg;
}
this.setState({
videoVolume: this.video.volume
});
}
}, {
key: 'showVolumeSlider',
value: function showVolumeSlider() {
this.setState({
showVolumeSlider: true
});
}
}, {
key: 'hideVolumeSlider',
value: function hideVolumeSlider() {
if (!this.preventSliderHide) {
this.setState({
showVolumeSlider: false
});
} else {
this.preventSliderHide = false;
}
}
}, {
key: 'showPlaybackRateSlider',
value: function showPlaybackRateSlider() {
this.setState({
showPlaybackRateSlider: true
});
}
}, {
key: 'hidePlaybackRateSlider',
value: function hidePlaybackRateSlider() {
this.setState({
showPlaybackRateSlider: false
});
}
}, {
key: 'videoFullScreenToggle',
value: function videoFullScreenToggle() {
var isFullScreenWebkit = document.webkitIsFullScreen;
var isFullScreenMoz = document.mozFullScreen;
var videoClassName = '';
if (isFullScreenWebkit !== undefined) {
if (isFullScreenWebkit) {
videoClassName = '';
document.webkitExitFullscreen();
} else {
this.refs.videoContainer.webkitRequestFullscreen();
videoClassName = 'video-fit-to-screen';
this.showNotification(['Press [T] to toggle between Video Mode']);
}
} else if (isFullScreenMoz !== undefined) {
if (isFullScreenMoz) {
document.isFullScreenWebkit();
videoClassName = '';
} else {
this.refs.videoContainer.mozRequestFullScreen();
videoClassName = 'video-fit-to-screen';
this.showNotification(['Press [T] to toggle between Video Mode']);
}
}
this.setState({
videoClassName: videoClassName
});
}
}, {
key: 'putFoucsOnMe',
value: function putFoucsOnMe(event) {
event.target.focus();
}
}, {
key: 'videoHandleKeyDown',
value: function videoHandleKeyDown(event) {
if (!this.props.keyboardControls) {
return;
}
event.preventDefault();
var handle = '';
if (this.videoKeyBinding[event.keyCode]) {
handle = this.videoKeyBinding[event.keyCode].action;
} else {
handle = 'helpNotification';
}
switch (handle) {
case 'increaseVolume':
this.changeVolume(event, true, 'up');
break;
case 'decreaseVolume':
this.changeVolume(event, true, 'down');
break;
case 'toggleVolume':
this.toggleVolume();
break;
case 'seekForward':
this.seek('forward');
break;
case 'seekBackward':
this.seek('backward');
break;
case 'playPauseToggle':
this.toggleVideoPlay();
break;
case 'increasePlayBackRate':
this.changePlaybackRate('increase');
break;
case 'decreasePlayBackRate':
this.changePlaybackRate('decrease');
break;
case 'defaultPlaybackRate':
this.changePlaybackRate('default');
break;
case 'playNextVideo':
this.playNext();
break;
case 'playPreviousVideo':
this.playPrevious();
break;
case 'fullScreenToggle':
this.videoFullScreenToggle();
break;
case 'toggleTheaterMode':
this.toggleTheaterMode();
break;
case 'showHelpBox':
this.showHelpBox();
break;
case 'helpNotification':
this.showNotification(['Press [H] for Help']);
break;
default:
break;
}
}
}, {
key: 'videoOnClick',
value: function videoOnClick(event) {
this.putFoucsOnMe(event);
this.toggleVideoPlay();
}
}, {
key: 'showVideoControls',
value: function showVideoControls() {
clearTimeout(this.hideAgain);
this.setState({
hideMouse: 'none',
videoControlContainerDisplay: 'flex'
});
this.hideAgain = setTimeout(this.hideVideoControls, 3000);
}
}, {
key: 'hideVideoControls',
value: function hideVideoControls() {
this.setState({
hideMouse: 'hide-mouse-cursor',
videoControlContainerDisplay: 'none'
});
}
}, {
key: 'toggleTheaterMode',
value: function toggleTheaterMode() {
var className = '';
if (this.theaterModeOriginal) {
className = 'video-fit-to-screen';
} else {
className = 'video-original';
}
this.theaterModeOriginal = !this.theaterModeOriginal;
this.setState({
videoClassName: className
});
}
}, {
key: 'showNotification',
value: function showNotification(value, className, duration) {
clearTimeout(this.hideNotificationTimeOut);
this.notificationClass = className || this.props.notificationClass;
var Duration = duration || this.props.notificationDuration;
// const Duration = duration || 15000;
this.notificationValue = value;
this.setState({
showNotification: true
});
this.hideNotificationTimeOut = setTimeout(this.hideNotification, Duration);
}
}, {
key: 'hideNotification',
value: function hideNotification() {
clearTimeout(this.hideNotificationTimeOut);
this.setState({
showNotification: false
});
}
}, {
key: 'showHelpBox',
value: function showHelpBox() {
if (!this.helpBox) {
var values = [];
var keyBinding = this.videoKeyBinding;
for (var key in keyBinding) {
if (keyBinding.hasOwnProperty(key)) {
values.push(keyBinding[key].key + ' : ' + keyBinding[key].action);
}
}
this.showNotification(values, 'help-box', 15000);
} else {
this.hideNotification();
}
this.helpBox = !this.helpBox;
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: 'video-player-wrapper-row' },
_react2.default.createElement(
'div',
{ className: 'react-video-player-columns' },
_react2.default.createElement(
'div',
{
className: 'video-player-wrapper',
ref: 'videoContainer',
onMouseEnter: this.showVideoControls,
onMouseLeave: this.hideVideoControls,
onMouseMove: this.showVideoControls
},
this.state.showNotification && _react2.default.createElement(_Notification2.default, { className: this.notificationClass, values: this.notificationValue }),
_react2.default.createElement('video', {
className: this.state.videoClassName + ' ' + this.videoDefaultControls + ' ' + this.state.hideMouse + ' react-video-player-align-middle',
onKeyDown: this.videoHandleKeyDown,
onClick: this.videoOnClick,
onDoubleClick: this.videoFullScreenToggle,
ref: 'video',
src: this.props.videoSrc,
controls: true,
autoPlay: this.props.autoPlay,
onDurationChange: this.onDurationChange,
onPlay: this.onPlay,
onPlaying: this.onPlaying,
onEnded: this.onEnded,
onTimeUpdate: this.updateProgressBar
}),
this.props.customHtmlControls && _react2.default.createElement(
'div',
{ className: 'video-controls react-video-player-row react-video-player-align-middle',
ref: 'videoControlContainer',
style: { 'display': this.state.videoControlContainerDisplay } },
_react2.default.createElement(
'div',
{ className: 'playback-control react-video-player-columns react-video-player-shrink' },
this.props.playlist && _react2.default.createElement(
'button',
{ className: 'previous ' + this.props.previousButtonClassName,
onClick: this.playPrevious },
_react2.default.createElement('img', { src: this.props.previousButtonImg })
),
_react2.default.createElement(
'button',
{ className: 'play-pause', onClick: this.toggleVideoPlay },
_react2.default.createElement('img', { src: this.videoButton })
),
this.props.playlist && _react2.default.createElement(
'button',
{ className: 'next ' + this.props.nextButtonClassName,
onClick: this.props.playNext },
_react2.default.createElement('img', { src: this.props.nextButtonImg })
)
),
_react2.default.createElement(
'div',
{ className: 'time-box react-video-player-columns react-video-player-shrink' },
_react2.default.createElement(
'span',
{ style: { color: 'white' } },
this.state.videoCurrentTime
),
'/',
_react2.default.createElement(
'span',
{ style: { color: 'white' } },
this.state.videoDuration
)
),
_react2.default.createElement(
'div',
{ className: 'progress-bar-control react-video-player-columns' },
_react2.default.createElement(
'div',
{ className: 'progress-bar',
onMouseDown: this.progressBarDragStart,
ref: 'progressBar' },
_react2.default.createElement('div', { className: 'progress', style: { 'width': this.state.videoProgress + '%' } }),
_react2.default.createElement('div', { className: 'progress-buffered',
style: {
'width': this.state.videoBufferedProgressEnd - this.state.videoBufferedProgressStart + '%',
'left': this.state.videoBufferedProgressStart + '%'
}
})
)
),
_react2.default.createElement(
'div',
{ className: 'react-video-player-columns react-video-player-shrink', style: { height: "100%" } },
_react2.default.createElement(
'div',
{
ref: 'volumeControl',
className: 'volume-control',
onMouseLeave: this.hideVolumeSlider },
_react2.default.createElement(
'button',
{
className: 'volume-button',
onClick: this.toggleVolume,
onMouseEnter: this.showVolumeSlider },
_react2.default.createElement('img', {
src: this.volumeButtonImg })
),
this.state.showVolumeSlider && _react2.default.createElement(
'div',
{
className: 'volume-slider',
ref: 'volumeSlider',
onClick: this.changeVolume,
onMouseDown: this.volumeSliderDragStart
},
_react2.default.createElement(
'div',
{ className: 'volume-wrapper-box' },
_react2.default.createElement(
'div',
{ className: 'volume-wrapper' },
_react2.default.createElement('div', { className: 'volume',
style: { 'height': this.state.videoVolume * 100 + '%' } })
)
)
)
)
),
_react2.default.createElement(
'div',
{ className: 'react-video-player-columns react-video-player-shrink' },
_react2.default.createElement(
'div',
{ ref: 'fullScreen', className: 'fullscreen-control' },
_react2.default.createElement(
'button',
{
className: 'volumeButton',
onClick: this.videoFullScreenToggle
},
_react2.default.createElement('img', { src: this.props.fullScreenButtonImg })
)
)
)
)
)
)
);
}
}]);
return VideoPlayer;
}(_react2.default.Component);
VideoPlayer.propTypes = {
videoSrc: _propTypes2.default.string.isRequired,
videoVolume: _propTypes2.default.number,
videoProgress: _propTypes2.default.string,
videoPlaybackRate: _propTypes2.default.number,
autoPlay: _propTypes2.default.bool,
muted: _propTypes2.default.bool,
playButtonImg: _propTypes2.default.string,
pauseButtonImg: _propTypes2.default.string,
nextButtonImg: _propTypes2.default.string,
previousButtonImg: _propTypes2.default.string,
volumeButtonImg: _propTypes2.default.string,
volumeButtonMuteImg: _propTypes2.default.string,
fullScreenButtonImg: _propTypes2.default.string,
playbackRateButtonImg: _propTypes2.default.string,
previousButtonClassName: _propTypes2.default.string,
nextButtonClassName: _propTypes2.default.string,
onPlay: _propTypes2.default.func,
onPlaying: _propTypes2.default.func,
onEnded: _propTypes2.default.func,
playlist: _propTypes2.default.bool, // is there any playlist
playNext: _propTypes2.default.func,
playPrevious: _propTypes2.default.func,
defaultSeekTime: _propTypes2.default.number,
defaultVolumeChange: _propTypes2.default.number,
defaultBrowserControls: _propTypes2.default.bool,
customHtmlControls: _propTypes2.default.bool,
keyboardControls: _propTypes2.default.bool,
notificationClass: _propTypes2.default.string,
notificationDuration: _propTypes2.default.number
};
VideoPlayer.defaultProps = {
videoVolume: 100,
videoProgress: '',
videoPlaybackRate: 1,
autoPlay: false,
muted: false,
playButtonImg: __webpack_require__(14),
pauseButtonImg: __webpack_require__(15),
nextButtonImg: __webpack_require__(16),
previousButtonImg: __webpack_require__(17),
volumeButtonImg: __webpack_require__(18),
volumeButtonMuteImg: __webpack_require__(19),
fullScreenButtonImg: __webpack_require__(20),
playbackRateButtonImg: __webpack_require__(21),
pauseButtonClassName: '',
nextButtonClassName: '',
playlist: false,
defaultSeekTime: 10,
defaultVolumeChange: 10,
settings: false,
defaultBrowserControls: false,
customHtmlControls: true,
keyboardControls: true,
notificationClass: 'video-player-notifications',
notificationDuration: 1500
};
exports.default = VideoPlayer;
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
if (process.env.NODE_ENV !== 'production') {
var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
Symbol.for &&
Symbol.for('react.element')) ||
0xeac7;
var isValidElement = function(object) {
return typeof object === 'object' &&
object !== null &&
object.$$typeof === REACT_ELEMENT_TYPE;
};
// By explicitly using `prop-types` you are opting into new development behavior.
// http://fb.me/prop-types-in-prod
var throwOnDirectAccess = true;
module.exports = __webpack_require__(6)(isValidElement, throwOnDirectAccess);
} else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = __webpack_require__(12)();
}
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5)))
/***/ }),
/* 5 */
/***/ (function(module, exports) {
// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
function defaultSetTimout() {
throw new Error('setTimeout has not been defined');
}
function defaultClearTimeout () {
throw new Error('clearTimeout has not been defined');
}
(function () {
try {
if (typeof setTimeout === 'function') {
cachedSetTimeout = setTimeout;
} else {
cachedSetTimeout = defaultSetTimout;
}
} catch (e) {
cachedSetTimeout = defaultSetTimout;
}
try {
if (typeof clearTimeout === 'function') {
cachedClearTimeout = clearTimeout;
} else {
cachedClearTimeout = defaultClearTimeout;
}
} catch (e) {
cachedClearTimeout = defaultClearTimeout;
}
} ())
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
//normal enviroments in sane situations
return setTimeout(fun, 0);
}
// if setTimeout wasn't available but was latter defined
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
cachedSetTimeout = setTimeout;
return setTimeout(fun, 0);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedSetTimeout(fun, 0);
} catch(e){
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedSetTimeout.call(null, fun, 0);
} catch(e){
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
return cachedSetTimeout.call(this, fun, 0);
}
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
//normal enviroments in sane situations
return clearTimeout(marker);
}
// if clearTimeout wasn't available but was latter defined
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
cachedClearTimeout = clearTimeout;
return clearTimeout(marker);
}
try {
// when when somebody has screwed with setTimeout but no I.E. maddness
return cachedClearTimeout(marker);
} catch (e){
try {
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
return cachedClearTimeout.call(null, marker);
} catch (e){
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
// Some versions of I.E. have different rules for clearTimeout vs setTimeout
return cachedClearTimeout.call(this, marker);
}
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.prependListener = noop;
process.prependOnceListener = noop;
process.listeners = function (name) { return [] }
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
var emptyFunction = __webpack_require__(7);
var invariant = __webpack_require__(8);
var warning = __webpack_require__(9);
var ReactPropTypesSecret = __webpack_require__(10);
var checkPropTypes = __webpack_require__(11);
module.exports = function(isValidElement, throwOnDirectAccess) {
/* global Symbol */
var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
/**
* Returns the iterator method function contained on the iterable object.
*
* Be sure to invoke the function with the iterable as context:
*
* var iteratorFn = getIteratorFn(myIterable);
* if (iteratorFn) {
* var iterator = iteratorFn.call(myIterable);
* ...
* }
*
* @param {?object} maybeIterable
* @return {?function}
*/
function getIteratorFn(maybeIterable) {
var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
if (typeof iteratorFn === 'function') {
return iteratorFn;
}
}
/**
* Collection of methods that allow declaration and validation of props that are
* supplied to React components. Example usage:
*
* var Props = require('ReactPropTypes');
* var MyArticle = React.createClass({
* propTypes: {
* // An optional string prop named "description".
* description: Props.string,
*
* // A required enum prop named "category".
* category: Props.oneOf(['News','Photos']).isRequired,
*
* // A prop named "dialog" that requires an instance of Dialog.
* dialog: Props.instanceOf(Dialog).isRequired
* },
* render: function() { ... }
* });
*
* A more formal specification of how these methods are used:
*
* type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
* decl := ReactPropTypes.{type}(.isRequired)?
*
* Each and every declaration produces a function with the same signature. This
* allows the creation of custom validation functions. For example:
*
* var MyLink = React.createClass({
* propTypes: {
* // An optional string or URI prop named "href".
* href: function(props, propName, componentName) {
* var propValue = props[propName];
* if (propValue != null && typeof propValue !== 'string' &&
* !(propValue instanceof URI)) {
* return new Error(
* 'Expected a string or an URI for ' + propName + ' in ' +
* componentName
* );
* }
* }
* },
* render: function() {...}
* });
*
* @internal
*/
var ANONYMOUS = '<<anonymous>>';
// Important!
// Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
var ReactPropTypes = {
array: createPrimitiveTypeChecker('array'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
number: createPrimitiveTypeChecker('number'),
object: createPrimitiveTypeChecker('object'),
string: createPrimitiveTypeChecker('string'),
symbol: createPrimitiveTypeChecker('symbol'),
any: createAnyTypeChecker(),
arrayOf: createArrayOfTypeChecker,
element: createElementTypeChecker(),
instanceOf: createInstanceTypeChecker,
node: createNodeChecker(),
objectOf: createObjectOfTypeChecker,
oneOf: createEnumTypeChecker,
oneOfType: createUnionTypeChecker,
shape: createShapeTypeChecker
};
/**
* inlined Object.is polyfill to avoid requiring consumers ship their own
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
*/
/*eslint-disable no-self-compare*/
function is(x, y) {
// SameValue algorithm
if (x === y) {
// Steps 1-5, 7-10
// Steps 6.b-6.e: +0 != -0
return x !== 0 || 1 / x === 1 / y;
} else {
// Step 6.a: NaN == NaN
return x !== x && y !== y;
}
}
/*eslint-enable no-self-compare*/
/**
* We use an Error-like object for backward compatibility as people may call
* PropTypes directly and inspect their output. However, we don't use real
* Errors anymore. We don't inspect their stack anyway, and creating them
* is prohibitively expensive if they are created too often, such as what
* happens in oneOfType() for any type before the one that matched.
*/
function PropTypeError(message) {
this.message = message;
this.stack = '';
}
// Make `instanceof Error` still work for returned errors.
PropTypeError.prototype = Error.prototype;
function createChainableTypeChecker(validate) {
if (process.env.NODE_ENV !== 'production') {
var manualPropTypeCallCache = {};
var manualPropTypeWarningCount = 0;
}
function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
componentName = componentName || ANONYMOUS;
propFullName = propFullName || propName;
if (secret !== ReactPropTypesSecret) {
if (throwOnDirectAccess) {
// New behavior only for users of `prop-types` package
invariant(
false,
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
'Use `PropTypes.checkPropTypes()` to call them. ' +
'Read more at http://fb.me/use-check-prop-types'
);
} else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
// Old behavior for people using React.PropTypes
var cacheKey = componentName + ':' + propName;
if (
!manualPropTypeCallCache[cacheKey] &&
// Avoid spamming the console because they are often not actionable except for lib authors
manualPropTypeWarningCount < 3
) {
warning(
false,
'You are manually calling a React.PropTypes validation ' +
'function for the `%s` prop on `%s`. This is deprecated ' +
'and will throw in the standalone `prop-types` package. ' +
'You may be seeing this warning due to a third-party PropTypes ' +
'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.',
propFullName,
componentName
);
manualPropTypeCallCache[cacheKey] = true;
manualPropTypeWarningCount++;
}
}
}
if (props[propName] == null) {
if (isRequired) {
if (props[propName] === null) {
return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
}
return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
}
return null;
} else {
return validate(props, propName, componentName, location, propFullName);
}
}
var chainedCheckType = checkType.bind(null, false);