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 theme from '../theme';
@ -34,76 +34,77 @@ const VideoLink = styled.a`
}
`;
const VideoButton = styled.div`
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90px;
height: 90px;
margin: auto;
color: ${theme.colors.blue};
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);
border-radius: 100px;
transition: 0.1s;
// const VideoButton = styled.div`
// position: absolute;
// top: 0;
// bottom: 0;
// left: 0;
// right: 0;
// width: 90px;
// height: 90px;
// margin: auto;
// color: ${theme.colors.blue};
// 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);
// border-radius: 100px;
// transition: 0.1s;
svg {
position: absolute;
left: 30px;
top: 24px;
width: 44px;
height: 44px;
fill: #3a69c7;
}
`;
// svg {
// position: absolute;
// left: 30px;
// top: 24px;
// width: 44px;
// height: 44px;
// fill: #3a69c7;
// }
// `;
/**
* 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'.
*/
function PlayIcon({ className }) {
return (
<svg className={className} viewBox="0 0 43 44">
<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"
id="Triangle"
fillRule="nonzero"
/>
</svg>
);
}
// function PlayIcon({ className }) {
// return (
// <svg className={className} viewBox="0 0 43 44">
// <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"
// id="Triangle"
// fillRule="nonzero"
// />
// </svg>
// );
// }
function VideoEmbed() {
const [toggled, setToggled] = useState(false);
// const [toggled, setToggled] = useState(false);
function toggleVideo() {
return setToggled(true);
}
// function toggleVideo() {
// return setToggled(true);
// }
const embedcode = (
<iframe
title="Simple CMS video"
width={560}
height={315}
src="https://www.youtube-nocookie.com/embed/p6h-rYSVX90?rel=0&showinfo=0&autoplay=1"
frameBorder={0}
allow="autoplay; encrypted-media"
allowFullScreen
/>
);
// const embedcode = (
// <iframe
// title="Simple CMS video"
// width={560}
// height={315}
// src="https://www.youtube-nocookie.com/embed/p6h-rYSVX90?rel=0&showinfo=0&autoplay=1"
// frameBorder={0}
// allow="autoplay; encrypted-media"
// allowFullScreen
// />
// );
const imgPlaceholder = <img src={screenshotEditor} alt="Simple CMS editor" />;
return (
<VideoLink onClick={toggleVideo}>
{toggled ? embedcode : imgPlaceholder}
<VideoLink /*onClick={toggleVideo}*/>
{imgPlaceholder}
{/* {toggled ? embedcode : imgPlaceholder}
{!toggled && (
<VideoButton>
<PlayIcon />
</VideoButton>
)}
)} */}
</VideoLink>
);
}