@react-element/bg-music
Version:
React (微信) 背景音乐
375 lines (344 loc) • 14.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var cx = _interopDefault(require('classnames'));
var withoutProps = _interopDefault(require('without-props'));
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
}
/**
* 判断是否是微信浏览器
*/
function isWeixin() {
return navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1;
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = ".xc-bg-music {\n display: inline-block;\n font-size: 0;\n}\n.xc-bg-music-play-content {\n will-change: transform;\n}\n.xc-bg-music:active {\n opacity: 0.8;\n}\n.xc-bg-music-rotate {\n -webkit-backface-visibility: hidden;\n animation: xc-bg-music-rotation 3000ms linear infinite;\n}\n.xc-bg-music-audio {\n display: none;\n}\n.xc-bg-music-hide {\n display: none;\n}\n@keyframes xc-bg-music-rotation {\n 0% {\n transform: translateZ(0) rotate(0deg);\n }\n 100% {\n transform: translateZ(0) rotate(360deg);\n }\n}\n";
styleInject(css);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics$1 = function(d, b) {
extendStatics$1 = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics$1(d, b);
};
function __extends$1(d, b) {
extendStatics$1(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var SuspendTillWindowOnload = /** @class */ (function (_super) {
__extends$1(SuspendTillWindowOnload, _super);
function SuspendTillWindowOnload() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.resolveFlag = false;
return _this;
}
SuspendTillWindowOnload.isDocumentLoaded = function () {
return document.readyState === 'complete';
};
SuspendTillWindowOnload.prototype.getWindowOnLoadPromise = function () {
var _this = this;
if (!this.getWindowOnLoadPromise['promise']) {
if (SuspendTillWindowOnload.isDocumentLoaded()) {
this.getWindowOnLoadPromise['promise'] = Promise.resolve();
}
else {
this.getWindowOnLoadPromise['promise'] = new Promise(function (resolve) {
if (SuspendTillWindowOnload.isDocumentLoaded()) {
resolve();
return;
}
_this.getWindowOnLoadPromise['resolve'] = resolve;
window.addEventListener('load', resolve, false);
});
}
this.getWindowOnLoadPromise['promise'].then(function () {
_this.resolveFlag = true;
});
}
return this.getWindowOnLoadPromise['promise'];
};
SuspendTillWindowOnload.prototype.autoResolve = function (nextProps) {
if (!this.resolveFlag) {
var resolve = (nextProps || this.props).resolve;
if (resolve) {
this.resolveFlag = true;
this.removeWindowLoadEventListener();
this.triggerResolve();
}
}
};
SuspendTillWindowOnload.prototype.triggerResolve = function () {
this.getWindowOnLoadPromise['resolve'] && this.getWindowOnLoadPromise['resolve']();
this.getWindowOnLoadPromise['resolve'] = null;
};
SuspendTillWindowOnload.prototype.componentWillMount = function () {
this.autoResolve();
};
SuspendTillWindowOnload.prototype.componentWillUpdate = function (nextProps) {
this.autoResolve(nextProps);
};
SuspendTillWindowOnload.prototype.removeWindowLoadEventListener = function () {
if (this.getWindowOnLoadPromise['resolve']) {
window.removeEventListener('load', this.getWindowOnLoadPromise['resolve'], false);
}
};
SuspendTillWindowOnload.prototype.componentWillUnmount = function () {
this.removeWindowLoadEventListener();
};
SuspendTillWindowOnload.prototype.render = function () {
var _this = this;
var _a = this.props, children = _a.children, disable = _a.disable, resolve = _a.resolve;
var finalChildren = React.Children.only(children);
if (disable || resolve || this.resolveFlag) {
return finalChildren;
}
return (React.createElement(React.Suspense, { fallback: null }, React.createElement(React.lazy(function () {
return _this.getWindowOnLoadPromise().then(function () { return ({
default: function () {
return finalChildren;
},
}); });
}))));
};
SuspendTillWindowOnload.defaultProps = {
disable: false,
};
return SuspendTillWindowOnload;
}(React.PureComponent));
var BgMusic = /** @class */ (function (_super) {
__extends(BgMusic, _super);
function BgMusic(props) {
var _this = _super.call(this, props) || this;
/**
* 微信 bridge ready
* @param isPlaying
*/
_this.onWeixinJSBridgeReady = function (isPlaying) {
if (isPlaying === undefined) {
isPlaying = _this.checkIsPlaying();
}
isPlaying ? _this.playAudio() : _this.pauseAudio();
};
/**
* 播放音频
*/
_this.playAudio = function () {
var audioEl = _this.audioRef.current;
if (audioEl) {
// noinspection JSIgnoredPromiseFromCall
audioEl.play();
audioEl.paused && _this.updateState({ isPlaying: false });
}
};
/**
* 暂停音频
*/
_this.pauseAudio = function () {
var audioEl = _this.audioRef.current;
if (audioEl) {
audioEl.pause();
audioEl.paused || _this.updateState({ isPlaying: false });
}
};
/**
* 处理点击事件
*/
_this.onClick = function () {
var nextIsPlaying = !_this.checkIsPlaying();
_this.updateState({ isPlaying: nextIsPlaying });
_this.onWeixinJSBridgeReady(nextIsPlaying);
};
if (!_this.isDumbComponent()) {
_this.state = _this.createInitState();
}
_this.audioRef = React.createRef();
return _this;
}
/**
* 更新 state 状态
* @param nextState
*/
BgMusic.prototype.updateState = function (nextState) {
if (this.isDumbComponent()) {
var onChange = this.props.onChange;
onChange && onChange(nextState);
}
else {
this.setState(nextState);
}
};
/**
* 创建初始状态
*/
BgMusic.prototype.createInitState = function () {
return {
isPlaying: this.props.isPlaying,
};
};
/**
* 判断是否是无状态组件
*/
BgMusic.prototype.isDumbComponent = function () {
return !!this.props.onChange;
};
/**
* 获取 isPlaying 的播放状态
*/
BgMusic.prototype.checkIsPlaying = function () {
return !!(this.isDumbComponent() ? this.props.isPlaying : this.state.isPlaying);
};
/**
* 处理微信 audio 播放
*/
BgMusic.prototype.onWeixinAudioPlay = function () {
document.addEventListener('WeixinJSBridgeReady', this.playAudio.bind(this), false);
};
/**
* 处理非微信 audio 播放
*/
BgMusic.prototype.onNonWeixinAudioPlay = function () {
var _this = this;
this.onWeixinJSBridgeReady();
var audioRef = this.audioRef.current;
if (audioRef && audioRef.paused) {
var onTouchStartOnce_1 = function () {
var isPlaying = _this.checkIsPlaying();
isPlaying && _this.playAudio();
window.removeEventListener('touchstart', onTouchStartOnce_1, false);
};
window.addEventListener('touchstart', onTouchStartOnce_1, false);
}
};
/**
* 首次加载完 dom
*/
BgMusic.prototype.componentDidMount = function () {
var isPlaying = this.checkIsPlaying();
if (isPlaying) {
isWeixin() ? this.onWeixinAudioPlay() : this.onNonWeixinAudioPlay();
}
};
/**
* 渲染播放内容
*/
BgMusic.prototype.renderPlayContent = function (isHidden) {
var _a = this.props, rotate = _a.rotate, playContent = _a.playContent, prefixCls = _a.prefixCls;
return (React.createElement(SuspendTillWindowOnload, { resolve: !isHidden },
React.createElement("div", { className: cx(prefixCls + "-play-content", rotate && prefixCls + "-rotate", isHidden && prefixCls + "-hide") }, playContent)));
};
/**
* 渲染暂停内容
*/
BgMusic.prototype.renderPauseContent = function (isHidden) {
var _a = this.props, pauseContent = _a.pauseContent, prefixCls = _a.prefixCls;
return (React.createElement(SuspendTillWindowOnload, { resolve: !isHidden },
React.createElement("div", { className: cx(isHidden && prefixCls + "-hide") }, pauseContent)));
};
BgMusic.prototype.render = function () {
var _a = withoutProps(this.props, ['isPlaying', 'rotate', 'rotate', 'onChange', 'pauseContent', 'playContent']), className = _a.className, prefixCls = _a.prefixCls, restProps = __rest(_a, ["className", "prefixCls"]);
var isPlaying = this.checkIsPlaying();
return (React.createElement("a", { className: cx("" + prefixCls, className), onClick: this.onClick },
React.createElement("audio", __assign({ className: prefixCls + "-audio", ref: this.audioRef }, restProps)),
this.renderPlayContent(!isPlaying),
this.renderPauseContent(isPlaying)));
};
BgMusic.defaultProps = {
prefixCls: 'xc-bg-music',
rotate: true,
loop: true,
isPlaying: true,
};
return BgMusic;
}(React.Component));
const img = require('./bg.mp3');
const img$1 = require('./play.png');
const img$2 = require('./pause.png');
var Default = /** @class */ (function (_super) {
__extends(Default, _super);
function Default() {
return _super !== null && _super.apply(this, arguments) || this;
}
Default.prototype.render = function () {
return (React.createElement(BgMusic, { src: img, playContent: React.createElement("img", { src: img$1, alt: "\u64AD\u653E" }), pauseContent: React.createElement("img", { src: img$2, alt: "\u6682\u505C" }) }));
};
return Default;
}(React.PureComponent));
BgMusic.Default = Default;
exports.default = BgMusic;
//# sourceMappingURL=index.js.map