75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
|
import React from "react";
|
||
|
|
import ReactPlayer from "react-player";
|
||
|
|
import {
|
||
|
|
Popover,
|
||
|
|
PopoverInteractionKind,
|
||
|
|
PopoverPosition,
|
||
|
|
} from "@blueprintjs/core";
|
||
|
|
import { ControlIcons } from "icons/ControlIcons";
|
||
|
|
import styled, { AnyStyledComponent } from "styled-components";
|
||
|
|
import { Colors } from "constants/Colors";
|
||
|
|
|
||
|
|
const PlayerWrapper = styled.div`
|
||
|
|
width: 600px;
|
||
|
|
height: 400px;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const YoutubeIcon = styled(ControlIcons.OPEN_YOUTUBE as AnyStyledComponent)`
|
||
|
|
position: relative;
|
||
|
|
top: 10px;
|
||
|
|
left: -13px;
|
||
|
|
&:hover {
|
||
|
|
svg {
|
||
|
|
path {
|
||
|
|
fill: ${Colors.POMEGRANATE};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
interface VideoComponentProps {
|
||
|
|
url: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const VideoComponent = (props: VideoComponentProps) => {
|
||
|
|
return (
|
||
|
|
<div onClick={e => e.stopPropagation()}>
|
||
|
|
<Popover
|
||
|
|
position={PopoverPosition.AUTO}
|
||
|
|
interactionKind={PopoverInteractionKind.CLICK}
|
||
|
|
minimal
|
||
|
|
usePortal
|
||
|
|
enforceFocus={false}
|
||
|
|
lazy={true}
|
||
|
|
modifiers={{
|
||
|
|
flip: {
|
||
|
|
behavior: ["right", "left", "bottom", "top"],
|
||
|
|
},
|
||
|
|
keepTogether: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
arrow: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
preventOverflow: {
|
||
|
|
enabled: true,
|
||
|
|
boundariesElement: "viewport",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<YoutubeIcon width="80" height="52" color="black" />
|
||
|
|
<PlayerWrapper>
|
||
|
|
<ReactPlayer
|
||
|
|
playing={true}
|
||
|
|
url={props.url}
|
||
|
|
width="100%"
|
||
|
|
height="100%"
|
||
|
|
/>
|
||
|
|
</PlayerWrapper>
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default VideoComponent;
|