@lahzenegar/video-react
Version:
Video-React is a web video player built from the ground up for an HTML5 world using React library.
277 lines (239 loc) • 11.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _react3 = require('@tippyjs/react');
var _react4 = _interopRequireDefault(_react3);
var _Menu = require('../menu/Menu');
var _Menu2 = _interopRequireDefault(_Menu);
var _MenuItem = require('../menu/MenuItem');
var _MenuItem2 = _interopRequireDefault(_MenuItem);
var _PlaybackRateMenuButton = require('./PlaybackRateMenuButton');
var _PlaybackRateMenuButton2 = _interopRequireDefault(_PlaybackRateMenuButton);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var SettingMenu = function (_Component) {
(0, _inherits3.default)(SettingMenu, _Component);
function SettingMenu(props, context) {
(0, _classCallCheck3.default)(this, SettingMenu);
var _this = (0, _possibleConstructorReturn3.default)(this, (SettingMenu.__proto__ || (0, _getPrototypeOf2.default)(SettingMenu)).call(this, props, context));
_this.handleSelectQualityItem = _this.handleSelectQualityItem.bind(_this);
_this.handleSelectPlaybackRateItem = _this.handleSelectPlaybackRateItem.bind(_this);
_this.handleClick = _this.handleClick.bind(_this);
_this.state = {
active: false,
activateQualityIndex: 0,
activatePlaybackRateIndex: 0
};
return _this;
}
(0, _createClass3.default)(SettingMenu, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _props = this.props,
activeTrack = _props.activeTrack,
tracks = _props.tracks,
rates = _props.rates,
playbackRate = _props.playbackRate;
if (tracks && tracks.length > 1) {
var activeTrackLabel = tracks.filter(function (item) {
return item.id === activeTrack;
})[0];
this.setState({
activateQualityIndex: activeTrackLabel.id === -1 ? 0 : activeTrackLabel.id
});
}
this.setState({
activatePlaybackRateIndex: rates.indexOf(playbackRate) || 0
});
}
}, {
key: 'handleSelectQualityItem',
value: function handleSelectQualityItem(index) {
var _props2 = this.props,
tracks = _props2.tracks,
actions = _props2.actions;
if (index >= -1 && index < tracks.length) {
actions.handleTrackChange(index - 1);
}
}
}, {
key: 'handleSelectPlaybackRateItem',
value: function handleSelectPlaybackRateItem(index) {
var _props3 = this.props,
rates = _props3.rates,
actions = _props3.actions;
if (index >= 0 && index < rates.length) {
actions.changeRate(rates[index]);
}
}
}, {
key: 'handleClick',
value: function handleClick() {
this.setState({
active: !this.state.active
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props4 = this.props,
className = _props4.className,
inline = _props4.inline,
realActiveTrack = _props4.realActiveTrack,
switchingTrack = _props4.switchingTrack,
tracks = _props4.tracks,
rates = _props4.rates,
isLive = _props4.isLive,
activeTrack = _props4.activeTrack,
playbackRate = _props4.playbackRate;
var active = this.state.active;
var qualityItems = void 0,
realActiveTrackLabel = void 0,
activateQualityIndex = void 0,
activatePlaybackRateIndex = void 0;
if (tracks && tracks.length > 1) {
var activeTrackLabel = tracks.filter(function (item) {
return item.id === activeTrack;
})[0];
activateQualityIndex = activeTrackLabel.id === -1 ? 0 : activeTrackLabel.id + 1;
realActiveTrackLabel = tracks.filter(function (item) {
return item.id === realActiveTrack;
})[0];
qualityItems = tracks.map(function (item, index) {
return {
label: item.label,
value: index
};
});
}
var playbackRateItems = rates.map(function (rate) {
return {
label: rate + 'x',
value: rate
};
});
activatePlaybackRateIndex = rates.indexOf(playbackRate) || 0;
return _react2.default.createElement(
_react4.default,
{
interactive: true,
animation: 'shift-away',
arrow: false,
interactiveBorder: 16,
offset: [0, 0],
content: _react2.default.createElement(
'div',
null,
!isLive && playbackRateItems && _react2.default.createElement(
'div',
{ className: 'video-react-settings-wrapper' },
_react2.default.createElement(
'div',
{ className: 'video-react-settings-title' },
'\u0633\u0631\u0639\u062A \u067E\u062E\u0634'
),
_react2.default.createElement(
_Menu2.default,
{ className: 'video-react-settings-content' },
playbackRateItems.map(function (item, i) {
return _react2.default.createElement(_MenuItem2.default, {
item: item,
index: i,
onSelectItem: _this2.handleSelectPlaybackRateItem,
activateIndex: activatePlaybackRateIndex,
key: 'playback-rate-item-' + i++
});
})
)
),
tracks && tracks.length > 1 && qualityItems && _react2.default.createElement(
'div',
{ className: 'video-react-settings-wrapper' },
_react2.default.createElement(
'div',
{ className: 'video-react-settings-title' },
'\u06A9\u06CC\u0641\u06CC\u062A \u067E\u062E\u0634'
),
_react2.default.createElement(
_Menu2.default,
{ className: 'video-react-settings-content' },
qualityItems.map(function (item, i) {
return _react2.default.createElement(_MenuItem2.default, {
item: item,
index: i,
onSelectItem: _this2.handleSelectQualityItem,
activateIndex: activateQualityIndex,
key: 'quality-item-' + i++
});
})
)
)
) },
_react2.default.createElement(
'div',
{
className: (0, _classnames2.default)(className, {
'video-react-settings-control': true,
'video-react-control': true,
'video-react-button': true,
'video-react-icon-settings': true,
'video-react-icon-spin': switchingTrack,
'video-react-menu-button-inline': !!inline,
'video-react-menu-button-popup': !inline,
'video-react-menu-button-active': active
}, 'video-react-control video-react-button video-react-menu-button'),
role: 'button',
tabIndex: '0',
onClick: this.handleClick,
ref: function ref(c) {
_this2.menuButton = c;
} },
_react2.default.createElement(
'div',
{ className: 'video-react-settings-label' },
playbackRate && Number(playbackRate) !== 1 && _react2.default.createElement(
'div',
{ className: 'video-react-playback-rate-value' },
playbackRate,
'x'
),
realActiveTrackLabel && _react2.default.createElement(
'div',
{ className: 'video-react-active-track-label' },
realActiveTrackLabel.label
)
)
)
);
}
}]);
return SettingMenu;
}(_react.Component);
SettingMenu.propTypes = {
activeTrack: _propTypes2.default.number,
tracks: _propTypes2.default.array,
rates: _propTypes2.default.array,
onSetTrack: _propTypes2.default.func
};
SettingMenu.defaultProps = {
rates: [0.5, 0.75, 1, 1.25, 1.5]
};
SettingMenu.displayName = 'PlaybackRateMenuButton';
exports.default = SettingMenu;