109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
import { Button, Modal } from "antd";
|
|
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
import { getFileUrl } from "../../utils";
|
|
import AliPlayer from "./AliPlayer";
|
|
|
|
/**
|
|
* 视频播放组件
|
|
*/
|
|
const Video = forwardRef(({
|
|
source = "",
|
|
vid = "",
|
|
playAuth = "",
|
|
cover = "",
|
|
autoplay = true,
|
|
showProgress = true,
|
|
playTime = 0,
|
|
inline = false,
|
|
isLive = false,
|
|
width = "100%",
|
|
height = "600px",
|
|
title = "视频",
|
|
visible: externalVisible = false,
|
|
onCancel,
|
|
onEnded,
|
|
onTimeupdate,
|
|
onGetPlayerInstance,
|
|
aliPlayerProps = {},
|
|
}, ref) => {
|
|
const [internalVisible, setInternalVisible] = useState(false);
|
|
const playerRef = useRef(null);
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
play: () => {
|
|
playerRef.current && playerRef.current.play();
|
|
},
|
|
pause: () => {
|
|
playerRef.current && playerRef.current.pause();
|
|
},
|
|
getPlayerInstance: () => playerRef.current && playerRef.current.getPlayerInstance(),
|
|
}));
|
|
|
|
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}
|
|
aliPlayerProps={aliPlayerProps}
|
|
onEnded={onEnded}
|
|
onTimeupdate={onTimeupdate}
|
|
onGetPlayerInstance={onGetPlayerInstance}
|
|
/>
|
|
);
|
|
|
|
if (!inline) {
|
|
return (
|
|
<Modal
|
|
open={visible}
|
|
width={800}
|
|
title={title}
|
|
footer={[
|
|
<Button key="cancel" onClick={() => setVisible(false)}>
|
|
关闭
|
|
</Button>,
|
|
]}
|
|
maskClosable={false}
|
|
onCancel={() => setVisible(false)}
|
|
>
|
|
{playerElement}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
return playerElement;
|
|
});
|
|
|
|
Video.displayName = "Video";
|
|
|
|
export default Video;
|