kedao
Version:
Rich Text Editor Based On Draft.js
37 lines (36 loc) • 2.27 kB
JavaScript
import { classNameParser } from '../../utils/style';
import React, { useState } from 'react';
import Modal from '../Modal';
import styles from "./style.module.css";
import useLanguage from '../../hooks/use-language';
import CodeIcon from 'tabler-icons-react/dist/icons/code';
import MovieIcon from 'tabler-icons-react/dist/icons/movie';
import MusicIcon from 'tabler-icons-react/dist/icons/music';
import { tablerIconProps } from '../../constants';
import PlayerPlayIcon from 'tabler-icons-react/dist/icons/player-play';
import XIcon from 'tabler-icons-react/dist/icons/x';
const cls = classNameParser(styles);
const iconMap = {
video: React.createElement(MovieIcon, Object.assign({}, tablerIconProps)),
audio: React.createElement(MusicIcon, Object.assign({}, tablerIconProps)),
embed: React.createElement(CodeIcon, Object.assign({}, tablerIconProps))
};
const PlayerModal = ({ title, type, name, url, poster, children, onRemove }) => {
var _a;
const [modalVisible, setModalVisible] = useState(false);
const language = useLanguage();
return (React.createElement("div", { className: cls(`kedao-player-holder ${type}`) },
React.createElement("div", { className: cls('icon-badge') }, (_a = iconMap[type]) !== null && _a !== void 0 ? _a : null,
React.createElement("span", { className: cls('text') }, language.media[type])),
React.createElement("button", { onMouseDown: onRemove, className: cls('button-remove') },
React.createElement(XIcon, Object.assign({}, tablerIconProps))),
React.createElement("button", { onMouseDown: () => setModalVisible(true), className: cls('button-play') },
React.createElement(PlayerPlayIcon, Object.assign({}, tablerIconProps))),
name ? React.createElement("h5", { className: cls('kedao-name') }, name) : null,
React.createElement("h6", { className: cls('kedao-url') }, url),
poster
? (React.createElement("div", { className: cls('kedao-poster'), style: { backgroundImage: `url(${poster})` } }))
: null,
React.createElement(Modal, { visible: modalVisible, title: name ? `${title}:${name}` : title, onClose: () => setModalVisible(false), showFooter: false }, children)));
};
export default PlayerModal;