wotnot-video-react
Version:
Video-React is a web video player built from the ground up for an HTML5 world using React library.
267 lines (233 loc) • 9.18 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 _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 _Menu = _interopRequireDefault(require("./Menu"));
var _MenuItem = _interopRequireDefault(require("./MenuItem"));
var _ClickableComponent = _interopRequireDefault(require("../ClickableComponent"));
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 = {
inline: _propTypes["default"].bool,
items: _propTypes["default"].array,
className: _propTypes["default"].string,
onSelectItem: _propTypes["default"].func,
children: _propTypes["default"].any,
selectedIndex: _propTypes["default"].number
};
var MenuButton = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(MenuButton, _Component);
var _super = _createSuper(MenuButton);
function MenuButton(props, context) {
var _this;
(0, _classCallCheck2["default"])(this, MenuButton);
_this = _super.call(this, props, context);
_this.state = {
active: false,
activateIndex: props.selectedIndex || 0
};
_this.commitSelection = _this.commitSelection.bind((0, _assertThisInitialized2["default"])(_this));
_this.activateMenuItem = _this.activateMenuItem.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2["default"])(_this));
_this.renderMenu = _this.renderMenu.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleUpArrow = _this.handleUpArrow.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleDownArrow = _this.handleDownArrow.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleEscape = _this.handleEscape.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleReturn = _this.handleReturn.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleTab = _this.handleTab.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleKeyPress = _this.handleKeyPress.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleSelectItem = _this.handleSelectItem.bind((0, _assertThisInitialized2["default"])(_this));
_this.handleIndexChange = _this.handleIndexChange.bind((0, _assertThisInitialized2["default"])(_this));
return _this;
}
(0, _createClass2["default"])(MenuButton, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.selectedIndex !== this.props.selectedIndex) {
this.activateMenuItem(this.props.selectedIndex);
}
}
}, {
key: "commitSelection",
value: function commitSelection(index) {
this.setState({
activateIndex: index
});
this.handleIndexChange(index);
}
}, {
key: "activateMenuItem",
value: function activateMenuItem(index) {
this.setState({
activateIndex: index
});
this.handleIndexChange(index);
}
}, {
key: "handleIndexChange",
value: function handleIndexChange(index) {
var onSelectItem = this.props.onSelectItem;
onSelectItem(index);
}
}, {
key: "handleClick",
value: function handleClick() {
this.setState(function (prevState) {
return {
active: !prevState.active
};
});
}
}, {
key: "handleFocus",
value: function handleFocus() {
document.addEventListener('keydown', this.handleKeyPress);
}
}, {
key: "handleBlur",
value: function handleBlur() {
this.setState({
active: false
});
document.removeEventListener('keydown', this.handleKeyPress);
}
}, {
key: "handleUpArrow",
value: function handleUpArrow(e) {
var items = this.props.items;
if (this.state.active) {
e.preventDefault();
var newIndex = this.state.activateIndex - 1;
if (newIndex < 0) {
newIndex = items.length ? items.length - 1 : 0;
}
this.activateMenuItem(newIndex);
}
}
}, {
key: "handleDownArrow",
value: function handleDownArrow(e) {
var items = this.props.items;
if (this.state.active) {
e.preventDefault();
var newIndex = this.state.activateIndex + 1;
if (newIndex >= items.length) {
newIndex = 0;
}
this.activateMenuItem(newIndex);
}
}
}, {
key: "handleTab",
value: function handleTab(e) {
if (this.state.active) {
e.preventDefault();
this.commitSelection(this.state.activateIndex);
}
}
}, {
key: "handleReturn",
value: function handleReturn(e) {
e.preventDefault();
if (this.state.active) {
this.commitSelection(this.state.activateIndex);
} else {
this.setState({
active: true
});
}
}
}, {
key: "handleEscape",
value: function handleEscape() {
this.setState({
active: false,
activateIndex: 0
});
}
}, {
key: "handleKeyPress",
value: function handleKeyPress(event) {
// Escape (27) key
if (event.which === 27) {
this.handleEscape(event);
} else if (event.which === 9) {
// Tab (9) key
this.handleTab(event);
} else if (event.which === 13) {
// Enter (13) key
this.handleReturn(event);
} else if (event.which === 38) {
// Up (38) key
this.handleUpArrow(event);
} else if (event.which === 40) {
// Down (40) key press
this.handleDownArrow(event);
}
}
}, {
key: "handleSelectItem",
value: function handleSelectItem(i) {
this.commitSelection(i);
}
}, {
key: "renderMenu",
value: function renderMenu() {
var _this2 = this;
if (!this.state.active) {
return null;
}
var items = this.props.items;
return /*#__PURE__*/_react["default"].createElement(_Menu["default"], null, items.map(function (item, i) {
return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
item: item,
index: i,
onSelectItem: _this2.handleSelectItem,
activateIndex: _this2.state.activateIndex,
key: "item-".concat(i++)
});
}));
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props = this.props,
inline = _this$props.inline,
className = _this$props.className;
return /*#__PURE__*/_react["default"].createElement(_ClickableComponent["default"], {
className: (0, _classnames["default"])(className, {
'video-react-menu-button-inline': !!inline,
'video-react-menu-button-popup': !inline,
'video-react-menu-button-active': this.state.active
}, 'video-react-control video-react-button video-react-menu-button'),
role: "button",
tabIndex: "0",
ref: function ref(c) {
_this3.menuButton = c;
},
onClick: this.handleClick,
onFocus: this.handleFocus,
onBlur: this.handleBlur
}, this.props.children, this.renderMenu());
}
}]);
return MenuButton;
}(_react.Component);
exports["default"] = MenuButton;
MenuButton.propTypes = propTypes;
MenuButton.displayName = 'MenuButton';