Crab fit promo video

crabfit-frontend/public/i18n/en/common.json

@@ -62,5 +62,9 @@
       "close": "Close",
       "reload": "Reload"
     }
+  },
+  "video": {
+    "title": "Crab Fit Promotional Video",
+    "button": "Watch the video"
   }
 }

crabfit-frontend/src/pages/Help/Help.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { useTranslation, Trans } from 'react-i18next';
 
@@ -14,6 +14,8 @@ import {
   StyledMain,
   AboutSection,
   P,
+  VideoWrapper,
+  VideoLink,
 } from '../Home/homeStyle';
 
 import {
@@ -23,9 +25,12 @@ import {
   ButtonArea,
 } from './helpStyle';
 
+import video_thumb from 'res/video_thumb.jpg';
+
 const Help = () => {
   const { push } = useHistory();
   const { t } = useTranslation(['common', 'help']);
+  const [videoPlay, setVideoPlay] = useState(false);
 
   useEffect(() => {
     document.title = t('help:name');
@@ -39,6 +44,22 @@ const Help = () => {
 
       <StyledMain>
         <h1>{t('help:name')}</h1>
+        {videoPlay ? (
+          <VideoWrapper>
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/yXGd4VXZzcY?modestbranding=1&rel=0&autoplay=1" title={t('common:video.title')} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          </VideoWrapper>
+        ) : (
+          <VideoLink
+            href="https://www.youtube.com/watch?v=yXGd4VXZzcY"
+            onClick={e => {
+              e.preventDefault();
+              setVideoPlay(true);
+            }}
+          >
+            <img src={video_thumb} alt={t('common:video.button')} />
+            <span>{t('common:video.button')}</span>
+          </VideoLink>
+        )}
         <P>{t('help:p1')}</P>
         <P>{t('help:p2')}</P>
 

crabfit-frontend/src/pages/Home/Home.tsx

@@ -35,6 +35,8 @@ import {
   StatLabel,
   OfflineMessage,
   ButtonArea,
+  VideoWrapper,
+  VideoLink,
 } from './homeStyle';
 
 import api from 'services';
@@ -42,6 +44,7 @@ import { detect_browser } from 'utils';
 import { useTWAStore } from 'stores';
 
 import logo from 'res/logo.svg';
+import video_thumb from 'res/video_thumb.jpg';
 import timezones from 'res/timezones.json';
 
 dayjs.extend(utc);
@@ -62,6 +65,7 @@ const Home = ({ offline }) => {
     version: 'loading...',
   });
   const [browser, setBrowser] = useState(undefined);
+  const [videoPlay, setVideoPlay] = useState(false);
   const { push } = useHistory();
   const { t } = useTranslation(['common', 'home']);
   const isTWA = useTWAStore(state => state.TWA);
@@ -233,6 +237,24 @@ const Home = ({ offline }) => {
             </Stat>
           </Stats>
           <P><Trans i18nKey="home:about.content.p1">Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.<br /><Link to="/how-to" rel="help">Learn more about how to Crab Fit</Link>.</Trans></P>
+
+          {videoPlay ? (
+            <VideoWrapper>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/yXGd4VXZzcY?modestbranding=1&rel=0&autoplay=1" title={t('common:video.title')} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </VideoWrapper>
+          ) : (
+            <VideoLink
+              href="https://www.youtube.com/watch?v=yXGd4VXZzcY"
+              onClick={e => {
+                e.preventDefault();
+                setVideoPlay(true);
+              }}
+            >
+              <img src={video_thumb} alt={t('common:video.button')} />
+              <span>{t('common:video.button')}</span>
+            </VideoLink>
+          )}
+
           {isTWA !== true && (
             <ButtonArea>
               {['chrome', 'firefox', 'safari'].includes(browser) && (

crabfit-frontend/src/pages/Home/homeStyle.ts

@@ -138,3 +138,68 @@ export const ButtonArea = styled.div`
   gap: 12px;
   margin: 30px 0;
 `;
+
+export const VideoWrapper = styled.div`
+  margin: 0 auto;
+  position: relative;
+  padding-bottom: 56.4%;
+  width: 100%;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+  }
+`;
+
+export const VideoLink = styled.a`
+  display: block;
+  text-decoration: none;
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  transition: transform .15s;
+
+  :hover, :focus {
+    transform: translateY(-2px);
+  }
+  :active {
+    transform: translateY(-1px);
+  }
+
+  img {
+    width: 100%;
+    display: block;
+    border-radius: 10px;
+    background-color: #CCC;
+  }
+  span {
+    color: #FFFFFF;
+    position: absolute;
+    top: 50%;
+    font-size: 1.5rem;
+    text-align: center;
+    width: 100%;
+    display: block;
+    transform: translateY(-50%);
+    text-shadow: 0 0 20px rgba(0,0,0,.8);
+    user-select: none;
+
+    ::before {
+      content: '';
+      display: block;
+      height: 2em;
+      width: 2em;
+      background: currentColor;
+      border-radius: 100%;
+      margin: 0 auto .4em;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='${props => encodeURIComponent(props.theme.primaryDark)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 1em;
+      box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
+    }
+  }
+`;