feat: inline play Hero videos

safe-global · Dec 6, 2023 · e043a2e · e043a2e
1 parent aea87d0
commit e043a2e
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 12 deletions.
diff --git a/public/images/intro-chip.png → public/images/Core/intro-chip.png b/public/images/intro-chip.png → public/images/Core/intro-chip.png
diff --git a/public/videos/intro-chip.hevc.mp4 → public/videos/Core/intro-chip.hevc.mp4 b/public/videos/intro-chip.hevc.mp4 → public/videos/Core/intro-chip.hevc.mp4
diff --git a/public/videos/intro-chip.mp4 → public/videos/Core/intro-chip.mp4 b/public/videos/intro-chip.mp4 → public/videos/Core/intro-chip.mp4
diff --git a/public/videos/intro-chip.webm → public/videos/Core/intro-chip.webm b/public/videos/intro-chip.webm → public/videos/Core/intro-chip.webm
diff --git a/public/videos/safe-logo.mp4 → public/videos/Home/safe-logo.mp4 b/public/videos/safe-logo.mp4 → public/videos/Home/safe-logo.mp4
diff --git a/src/components/Core/AASdk/index.tsx b/src/components/Core/AASdk/index.tsx
@@ -32,7 +32,7 @@ const AASdk = ({ title, caption, text, link }: BaseBlock) => {
           )}
         </Grid>
         <div className={css.videoWrapper}>
-          <video autoPlay muted loop className={css.video}>
+          <video autoPlay muted playsInline loop className={css.video}>
             <source src={isSmallScreen ? '/videos/aa-sdk-mobile.webm' : '/videos/aa-sdk.webm'} type="video/webm" />
             <source
               src={isSmallScreen ? '/videos/aa-sdk-mobile.hevc.mp4' : '/videos/aa-sdk.hevc.mp4'}

diff --git a/src/components/Core/Intro/index.tsx b/src/components/Core/Intro/index.tsx
@@ -3,12 +3,11 @@ import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
 import { scrollToElement } from '@/lib/scrollSmooth'
 
-const CoreIntro = ({ title, text, link, scroll }: BaseBlock & { scroll?: { title: string; target: string } }) => {
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, target: string) => {
+const CoreIntro = ({ title, text, link }: BaseBlock) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
 
-    // TODO: move offset to CSS
-    scrollToElement(target, 200)
+    scrollToElement('#masthead', 200)
   }
 
   return (
@@ -42,11 +41,9 @@ const CoreIntro = ({ title, text, link, scroll }: BaseBlock & { scroll?: { title
             </Button>
           )}
         </Grid>
-        {scroll && (
-          <a onClick={(e) => handleClick(e, scroll.target)} className={css.scroll}>
-            <Typography variant="caption">{scroll.title}</Typography>
-          </a>
-        )}
+        <a onClick={handleClick} className={css.scroll}>
+          <Typography variant="caption">New Whitepaper</Typography>
+        </a>
       </Grid>
       <Divider />
     </Container>

diff --git a/src/components/Home/Intro/index.tsx b/src/components/Home/Intro/index.tsx
@@ -19,8 +19,8 @@ const Intro = ({ title, text, buttons }: BaseBlock) => {
           </Grid>
         </Grid>
         <div className={css.filter}>
-          <video autoPlay muted loop className={css.video}>
-            <source src="/videos/safe-logo.mp4" type="video/mp4" />
+          <video autoPlay muted playsInline loop className={css.video}>
+            <source src="/videos/Home/safe-logo.mp4" type="video/mp4" />
           </video>
           <div className={css.frame} />
         </div>