@react-element/bg-music/dist/index.es.js

React (微信) 背景音乐

import { Children, createElement, Suspense, lazy, PureComponent, createRef, Component } from 'react';
import cx from 'classnames';
import withoutProps from '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 = Children.only(children);
        if (disable || resolve || this.resolveFlag) {
            return finalChildren;
        }
        return (createElement(Suspense, { fallback: null }, createElement(lazy(function () {
            return _this.getWindowOnLoadPromise().then(function () { return ({
                default: function () {
                    return finalChildren;
                },
            }); });
        }))));
    };
    SuspendTillWindowOnload.defaultProps = {
        disable: false,
    };
    return SuspendTillWindowOnload;
}(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 = 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 (createElement(SuspendTillWindowOnload, { resolve: !isHidden },
            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 (createElement(SuspendTillWindowOnload, { resolve: !isHidden },
            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 (createElement("a", { className: cx("" + prefixCls, className), onClick: this.onClick },
            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;
}(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 (createElement(BgMusic, { src: img, playContent: createElement("img", { src: img$1, alt: "\u64AD\u653E" }), pauseContent: createElement("img", { src: img$2, alt: "\u6682\u505C" }) }));
    };
    return Default;
}(PureComponent));

BgMusic.Default = Default;

export default BgMusic;
//# sourceMappingURL=index.es.js.map