76 lines
1.7 KiB
TypeScript
76 lines
1.7 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import styled from "styled-components";
|
||
|
|
import Icon, { IconSize } from "./Icon";
|
||
|
|
import Text, { TextType } from "./Text";
|
||
|
|
import { Classes } from "./common";
|
||
|
|
|
||
|
|
type GifPlayerProps = {
|
||
|
|
gif: string;
|
||
|
|
thumbnail: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const PlayButton = styled.div`
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
.${Classes.ICON} {
|
||
|
|
svg {
|
||
|
|
width: 34px;
|
||
|
|
height: 34px;
|
||
|
|
margin-right: 0px;
|
||
|
|
path {
|
||
|
|
fill: ${(props) => props.theme.colors.gif.iconPath};
|
||
|
|
}
|
||
|
|
circle {
|
||
|
|
fill: ${(props) => props.theme.colors.gif.iconCircle};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.${Classes.TEXT} {
|
||
|
|
color: ${(props) => props.theme.colors.gif.text};
|
||
|
|
margin-top: ${(props) => props.theme.spaces[3]}px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const ThumnailContainer = styled.div`
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const Overlay = styled.div`
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
background: ${(props) => props.theme.colors.gif.overlay};
|
||
|
|
opacity: 0.7;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
transition: 0.5s ease;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const GifPlayerComponent = (props: GifPlayerProps) => {
|
||
|
|
const [startGif, setStartGif] = useState(false);
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
{!startGif ? (
|
||
|
|
<ThumnailContainer onClick={() => setStartGif(!startGif)}>
|
||
|
|
<Overlay />
|
||
|
|
<img src={props.thumbnail} />
|
||
|
|
<PlayButton>
|
||
|
|
<Icon name="play" size={IconSize.XXXL} />
|
||
|
|
<Text type={TextType.P3}>Click to play</Text>
|
||
|
|
</PlayButton>
|
||
|
|
</ThumnailContainer>
|
||
|
|
) : (
|
||
|
|
<img src={props.gif} />
|
||
|
|
)}
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GifPlayerComponent;
|