[同层播放器] #React

SimpleCZPlayerModal.jsx

import Mask from './Mask';
import SimpleCZPlayer from '@comp/course/SimpleCZPlayer';
import ReactDOM from 'react-dom';
import React from 'react';
import classnames from 'classnames';
import '../css/modals.scss';

export default class SimpleCZPlayerModal extends React.Component {
    static propTypes = {};
    static defaultProps = {
        onClose: () => {
        },
        onClick: () => {
        },
    };

    render () {
        const { closable = true, onClose, url, portrait } = this.props;
        return (
            <Mask
                onClose={onClose} closable={closable}
                wrapClassName={classnames("cz-player-mask-wrap", { "portrait": portrait })}
            >
                <div className="close" onClick={onClose}/>
                <div className={classnames("cz-player-container")}>
                    <SimpleCZPlayer src={url} canPlay={true}/>
                </div>
            </Mask>
        );
    }
}
let div;
SimpleCZPlayerModal.show = (properties = {}) => {
    const { getContainer, onClose, ...props } = properties || {};
    if (div) {
        return;
    }
    div = document.createElement('div');
    if (getContainer) {
        const root = getContainer();
        root.appendChild(div);
    } else {
        document.body.appendChild(div);
    }

    function destroy () {
        ReactDOM.unmountComponentAtNode(div);
        div.parentNode.removeChild(div);
        div = null;
        if (onClose) {
            onClose();
        }
    }

    if (div) {
        ReactDOM.render(<SimpleCZPlayerModal onClose={destroy} {...props} />, div);
        return {
            destroy,
        };
    }
};