gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove homepage video

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2022-09-30 12:19:39 -04:00
parent d39debb9d0
commit 8ccf53e5b3
1 changed files with 54 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
website/src/components/video-embed.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import theme from '../theme'; import theme from '../theme';
@ -34,76 +34,77 @@ const VideoLink = styled.a`
} }
`; `;
const VideoButton = styled.div` // const VideoButton = styled.div`
position: absolute; // position: absolute;
top: 0; // top: 0;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
right: 0; // right: 0;
width: 90px; // width: 90px;
height: 90px; // height: 90px;
margin: auto; // margin: auto;
color: ${theme.colors.blue}; // color: ${theme.colors.blue};
background-color: rgba(255, 255, 255, 0.85); // background-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.15); // box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
border-radius: 100px; // border-radius: 100px;
transition: 0.1s; // transition: 0.1s;
svg { // svg {
position: absolute; // position: absolute;
left: 30px; // left: 30px;
top: 24px; // top: 24px;
width: 44px; // width: 44px;
height: 44px; // height: 44px;
fill: #3a69c7; // fill: #3a69c7;
} // }
`; // `;
/** /**
* We should be able to import complete inline svg's rather than base64, this * We should be able to import complete inline svg's rather than base64, this
* component is a stopgap for now. Source in '../img/play.svg'. * component is a stopgap for now. Source in '../img/play.svg'.
*/ */
function PlayIcon({ className }) { // function PlayIcon({ className }) {
return ( // return (
<svg className={className} viewBox="0 0 43 44"> // <svg className={className} viewBox="0 0 43 44">
<path // <path
d="M41.5156904,23.7808694 L2.91022212,43.5125531 C1.92667513,44.0152549 0.721832431,43.6254529 0.219130636,42.6419059 C0.07510106,42.3601089 -3.51395713e-15,42.048155 -3.55271368e-15,41.7316838 L-1.77635684e-15,2.26831623 C-2.40215499e-15,1.16374673 0.8954305,0.268316226 2,0.268316226 C2.31647127,0.268316226 2.62842512,0.343417285 2.91022212,0.487446861 L41.5156904,20.2191306 C42.4992374,20.7218324 42.8890394,21.9266751 42.3863376,22.9102221 C42.1949001,23.2847739 41.8902421,23.5894318 41.5156904,23.7808694 Z" // d="M41.5156904,23.7808694 L2.91022212,43.5125531 C1.92667513,44.0152549 0.721832431,43.6254529 0.219130636,42.6419059 C0.07510106,42.3601089 -3.51395713e-15,42.048155 -3.55271368e-15,41.7316838 L-1.77635684e-15,2.26831623 C-2.40215499e-15,1.16374673 0.8954305,0.268316226 2,0.268316226 C2.31647127,0.268316226 2.62842512,0.343417285 2.91022212,0.487446861 L41.5156904,20.2191306 C42.4992374,20.7218324 42.8890394,21.9266751 42.3863376,22.9102221 C42.1949001,23.2847739 41.8902421,23.5894318 41.5156904,23.7808694 Z"
id="Triangle" // id="Triangle"
fillRule="nonzero" // fillRule="nonzero"
/> // />
</svg> // </svg>
); // );
} // }
function VideoEmbed() { function VideoEmbed() {
const [toggled, setToggled] = useState(false); // const [toggled, setToggled] = useState(false);
function toggleVideo() { // function toggleVideo() {
return setToggled(true); // return setToggled(true);
} // }
const embedcode = ( // const embedcode = (
<iframe // <iframe
title="Simple CMS video" // title="Simple CMS video"
width={560} // width={560}
height={315} // height={315}
src="https://www.youtube-nocookie.com/embed/p6h-rYSVX90?rel=0&showinfo=0&autoplay=1" // src="https://www.youtube-nocookie.com/embed/p6h-rYSVX90?rel=0&showinfo=0&autoplay=1"
frameBorder={0} // frameBorder={0}
allow="autoplay; encrypted-media" // allow="autoplay; encrypted-media"
allowFullScreen // allowFullScreen
/> // />
); // );
const imgPlaceholder = <img src={screenshotEditor} alt="Simple CMS editor" />; const imgPlaceholder = <img src={screenshotEditor} alt="Simple CMS editor" />;
return ( return (
<VideoLink onClick={toggleVideo}> <VideoLink /*onClick={toggleVideo}*/>
{toggled ? embedcode : imgPlaceholder} {imgPlaceholder}
{/* {toggled ? embedcode : imgPlaceholder}
{!toggled && ( {!toggled && (
<VideoButton> <VideoButton>
<PlayIcon /> <PlayIcon />
</VideoButton> </VideoButton>
)} )} */}
</VideoLink> </VideoLink>
); );
} }