react-videoplayer
Version:
A configrable react html5 video component
886 lines (823 loc) • 32 kB
JavaScript
'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 = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Notification = require('./Notification');
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: require('./media/fi-play.svg'),
pauseButtonImg: require('./media/pause-button.svg'),
nextButtonImg: require('./media/next.svg'),
previousButtonImg: require('./media/back.svg'),
volumeButtonImg: require('./media/speaker.svg'),
volumeButtonMuteImg: require('./media/speaker-mute.svg'),
fullScreenButtonImg: require('./media/switch-to-full-screen-button.svg'),
playbackRateButtonImg: require('./media/speedometer.svg'),
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;