45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
|
import Box from "@mui/material/Box";
|
||
|
|
import { FC } from "react";
|
||
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
||
|
|
import { IconButton, SxProps, Theme } from "@mui/material";
|
||
|
|
|
||
|
|
type VideoElementProps = {
|
||
|
|
videoSrc: string;
|
||
|
|
width: string;
|
||
|
|
theme: Theme;
|
||
|
|
onDeleteClick: () => void;
|
||
|
|
deleteIconSx?: SxProps<Theme>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const VideoElement: FC<VideoElementProps> = ({
|
||
|
|
videoSrc,
|
||
|
|
width,
|
||
|
|
theme,
|
||
|
|
onDeleteClick,
|
||
|
|
deleteIconSx,
|
||
|
|
}) => {
|
||
|
|
// const onDeleteClick = () => {
|
||
|
|
// alert("delete video");
|
||
|
|
// };
|
||
|
|
return (
|
||
|
|
<Box sx={{ position: "relative", width: `${width}px` }}>
|
||
|
|
<video src={videoSrc} width={width} controls />
|
||
|
|
<IconButton
|
||
|
|
onClick={onDeleteClick}
|
||
|
|
sx={{
|
||
|
|
position: "absolute",
|
||
|
|
right: 0,
|
||
|
|
top: 0,
|
||
|
|
color: theme.palette.orange.main,
|
||
|
|
borderRadius: "8px",
|
||
|
|
borderBottomRightRadius: 0,
|
||
|
|
borderTopLeftRadius: 0,
|
||
|
|
...deleteIconSx,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DeleteIcon />
|
||
|
|
</IconButton>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|