140 lines
5.5 KiB
JavaScript
140 lines
5.5 KiB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
||
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
||
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
||
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
||
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
||
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
||
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
||
var _excluded = ["className", "autoPlay", "config", "onCreate", "playId"];
|
||
import React, { Component } from 'react';
|
||
import flvjs from 'flv.js';
|
||
import { isEqual } from '@zhst/func';
|
||
export var FLV_EVENT = flvjs.Events;
|
||
var VideoPlayer = /*#__PURE__*/function (_Component) {
|
||
_inherits(VideoPlayer, _Component);
|
||
var _super = _createSuper(VideoPlayer);
|
||
function VideoPlayer() {
|
||
var _this;
|
||
_classCallCheck(this, VideoPlayer);
|
||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
args[_key] = arguments[_key];
|
||
}
|
||
_this = _super.call.apply(_super, [this].concat(args));
|
||
_defineProperty(_assertThisInitialized(_this), "state", {
|
||
curPlayUrl: '',
|
||
shouldReinit: false
|
||
});
|
||
_defineProperty(_assertThisInitialized(_this), "flvPlayer", null);
|
||
_defineProperty(_assertThisInitialized(_this), "videoElement", null);
|
||
_defineProperty(_assertThisInitialized(_this), "initFlv", function ($video) {
|
||
_this.videoElement = $video;
|
||
var _this$props = _this.props,
|
||
className = _this$props.className,
|
||
_this$props$autoPlay = _this$props.autoPlay,
|
||
autoPlay = _this$props$autoPlay === void 0 ? true : _this$props$autoPlay,
|
||
_this$props$config = _this$props.config,
|
||
config = _this$props$config === void 0 ? {} : _this$props$config,
|
||
onCreate = _this$props.onCreate,
|
||
playId = _this$props.playId,
|
||
others = _objectWithoutProperties(_this$props, _excluded);
|
||
if ($video) {
|
||
if (flvjs.isSupported() && _this.props.url && _this.props.url) {
|
||
var reload = function reload() {
|
||
var _this$flvPlayer;
|
||
if (_this.flvPlayer && _this.flvPlayer.destroy) {
|
||
try {
|
||
_this.flvPlayer.destroy();
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
var flvPlayer = flvjs.createPlayer(_objectSpread({}, others), _objectSpread({
|
||
deferLoadAfterSourceOpen: false
|
||
}, config));
|
||
flvPlayer.attachMediaElement($video);
|
||
flvPlayer.load();
|
||
_this.flvPlayer = flvPlayer;
|
||
// @ts-ignore
|
||
var controller = (_this$flvPlayer = _this.flvPlayer) === null || _this$flvPlayer === void 0 || (_this$flvPlayer = _this$flvPlayer._transmuxer) === null || _this$flvPlayer === void 0 ? void 0 : _this$flvPlayer._controller;
|
||
var wsLoader = controller._ioctl._loader;
|
||
var oldWsOnCompleteFunc = wsLoader._onComplete;
|
||
wsLoader._onComplete = function () {
|
||
if (!controller._remuxer) {
|
||
controller._remuxer = {
|
||
destroy: function destroy() {
|
||
console.log('组件销毁');
|
||
},
|
||
flushStashedSamples: function flushStashedSamples() {
|
||
console.log("flushStashedSamples");
|
||
}
|
||
};
|
||
}
|
||
oldWsOnCompleteFunc();
|
||
};
|
||
_this.flvPlayer.reload = reload;
|
||
onCreate === null || onCreate === void 0 || onCreate(_this.flvPlayer, $video);
|
||
};
|
||
reload();
|
||
}
|
||
}
|
||
});
|
||
return _this;
|
||
}
|
||
_createClass(VideoPlayer, [{
|
||
key: "componentWillUnmount",
|
||
value: function componentWillUnmount() {
|
||
if (this.flvPlayer) {
|
||
var _this$flvPlayer2, _this$flvPlayer3;
|
||
(_this$flvPlayer2 = this.flvPlayer) === null || _this$flvPlayer2 === void 0 || _this$flvPlayer2.unload();
|
||
(_this$flvPlayer3 = this.flvPlayer) === null || _this$flvPlayer3 === void 0 || _this$flvPlayer3.detachMediaElement();
|
||
}
|
||
}
|
||
}, {
|
||
key: "componentDidUpdate",
|
||
value: function componentDidUpdate() {
|
||
if (this.state.shouldReinit) {
|
||
this.setState({
|
||
shouldReinit: false
|
||
});
|
||
this.initFlv(this.videoElement);
|
||
}
|
||
}
|
||
}, {
|
||
key: "render",
|
||
value: function render() {
|
||
var _this$props2 = this.props,
|
||
className = _this$props2.className,
|
||
style = _this$props2.style;
|
||
return /*#__PURE__*/React.createElement("video", {
|
||
muted: true,
|
||
preload: "metadata",
|
||
className: className,
|
||
style: _objectSpread({
|
||
width: '100%',
|
||
height: '100%'
|
||
}, style),
|
||
ref: this.initFlv
|
||
});
|
||
}
|
||
}]);
|
||
return VideoPlayer;
|
||
}(Component);
|
||
_defineProperty(VideoPlayer, "getDerivedStateFromProps", function (nextProps, prevState) {
|
||
var _nextProps$playId = nextProps.playId,
|
||
playId = _nextProps$playId === void 0 ? 0 : _nextProps$playId;
|
||
var _prevState$playId = prevState.playId,
|
||
prePlayId = _prevState$playId === void 0 ? 0 : _prevState$playId;
|
||
if (nextProps.url !== undefined) {
|
||
if (!isEqual(nextProps.url, prevState.curPlayUrl) || !isEqual(playId, prePlayId)) {
|
||
return {
|
||
playId: playId,
|
||
curPlayUrl: nextProps.url,
|
||
shouldReinit: true
|
||
};
|
||
}
|
||
}
|
||
// 否则，对于state不进行任何操作
|
||
return null;
|
||
});
|
||
export { VideoPlayer as default }; |