90 lines
1.8 KiB
JavaScript
90 lines
1.8 KiB
JavaScript
|
import { Modal } from "antd";
|
||
|
|
import { useEffect, useRef, useState } from "react";
|
||
|
|
import { getFileUrl } from "../../utils";
|
||
|
|
import AliPlayer from "./AliPlayer";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 视频播放组件
|
||
|
|
*/
|
||
|
|
const Video = ({
|
||
|
|
source = "",
|
||
|
|
vid = "",
|
||
|
|
playAuth = "",
|
||
|
|
cover = "",
|
||
|
|
autoplay = true,
|
||
|
|
showProgress = true,
|
||
|
|
playTime = 0,
|
||
|
|
inline = false,
|
||
|
|
isLive = false,
|
||
|
|
width = "100%",
|
||
|
|
height = "600px",
|
||
|
|
title = "视频",
|
||
|
|
visible: externalVisible = false,
|
||
|
|
onCancel,
|
||
|
|
...restProps
|
||
|
|
}) => {
|
||
|
|
const [internalVisible, setInternalVisible] = useState(false);
|
||
|
|
const playerRef = useRef(null);
|
||
|
|
|
||
|
|
const visible = onCancel ? externalVisible : internalVisible;
|
||
|
|
const setVisible = onCancel || setInternalVisible;
|
||
|
|
|
||
|
|
const getSource = () => {
|
||
|
|
if (!source)
|
||
|
|
return;
|
||
|
|
if (source.includes("http") || source.includes("https"))
|
||
|
|
return source;
|
||
|
|
else return getFileUrl() + source;
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!inline) {
|
||
|
|
if (visible) {
|
||
|
|
playerRef.current && playerRef.current.play();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
playerRef.current && playerRef.current.pause();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [visible, inline]);
|
||
|
|
|
||
|
|
const playerElement = (
|
||
|
|
<AliPlayer
|
||
|
|
ref={playerRef}
|
||
|
|
source={getSource()}
|
||
|
|
vid={vid}
|
||
|
|
playAuth={playAuth}
|
||
|
|
cover={cover}
|
||
|
|
autoplay={autoplay}
|
||
|
|
showProgress={showProgress}
|
||
|
|
playTime={playTime}
|
||
|
|
isLive={isLive}
|
||
|
|
width={width}
|
||
|
|
height={height}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!inline) {
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
open={visible}
|
||
|
|
title={title}
|
||
|
|
footer={[
|
||
|
|
<button key="cancel" onClick={() => setVisible(false)}>
|
||
|
|
取消
|
||
|
|
</button>,
|
||
|
|
]}
|
||
|
|
maskClosable={false}
|
||
|
|
onCancel={() => setVisible(false)}
|
||
|
|
{...restProps}
|
||
|
|
>
|
||
|
|
{playerElement}
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return playerElement;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Video;
|