feat: updates videos

src/components/common/footer/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import MailchimpSubscribe from 'react-mailchimp-subscribe'
 
 import { ArrowLink } from '~/components/icons/arrow'
@@ -10,6 +10,7 @@ import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
 import Link from '~/components/primitives/link'
+import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
 
 import {
   AboutLinks,
@@ -81,6 +82,7 @@ const SimpleForm = ({
 
 export const Footer = () => {
   const router = useRouter()
+  const videoRef = useRef<HTMLVideoElement>(null)
 
   const [show, setShow] = useState(true)
   const [is404, setIs404] = useState(false)
@@ -105,6 +107,19 @@ export const Footer = () => {
     }
   }, [router?.pathname])
 
+  useIsomorphicLayoutEffect(() => {
+    if (!videoRef.current || !show) return
+    videoRef.current.addEventListener(
+      'ended',
+      () => {
+        if (!videoRef.current) return
+        videoRef.current.currentTime = 0.07
+        videoRef.current.play()
+      },
+      false
+    )
+  }, [show])
+
   const url =
     'https://xylm.us20.list-manage.com/subscribe/post?u=97d7d4662c941dd625d4c4261&amp;id=b72fe1118a'
 
@@ -117,10 +132,10 @@ export const Footer = () => {
             autoPlay
             className={clsx('hide-on-mobile', s['video'])}
             controls={false}
-            loop
             muted
             playsInline={true}
             preload="true"
+            ref={videoRef}
           >
             <source src="/videos/hero-grid.mp4" type="video/mp4" />
           </video>

src/components/sections/community/hero/hero.module.scss

@@ -39,9 +39,9 @@
   }
 
   position: absolute;
-  right: tovw(620px, 'default', 80px);
+  right: tovw(630px, 'default', 80px);
   z-index: -3;
-  padding-top: tovw(220px, 'default', 90px);
+  padding-top: tovw(250px, 'default', 90px);
 
   video {
     @include respond-to('mobile') {

src/components/sections/homepage/hero/index.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { useRef } from 'react'
 
 import { ArrowDotted } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
@@ -6,20 +7,35 @@ import Section from '~/components/layout/section'
 import { Button } from '~/components/primitives/button'
 import Heading from '~/components/primitives/heading'
 import HighlightedText from '~/components/primitives/highlighted-text'
+import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
 
 import s from './hero.module.scss'
 
 const Hero = () => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useIsomorphicLayoutEffect(() => {
+    if (!videoRef.current) return
+    videoRef.current.addEventListener(
+      'ended',
+      () => {
+        if (!videoRef.current) return
+        videoRef.current.currentTime = 0.07
+        videoRef.current.play()
+      },
+      false
+    )
+  }, [])
   return (
     <Section className={s['section']} disableFadeIn>
       <video
         autoPlay
         className={clsx('hide-on-mobile', s['video'])}
         controls={false}
-        loop
         muted
         playsInline={true}
         preload="true"
+        ref={videoRef}
       >
         <source src="/videos/hero-grid.mp4" type="video/mp4" />
       </video>

src/components/sections/homepage/what-others-say/item/item.module.scss

@@ -17,7 +17,6 @@
   left: 50%;
   transform: translate3d(0, 0, tovw(-10px));
   transform-origin: 50% 50%;
-  min-height: tovw(235px, 'default', 235px);
   z-index: 5;
   margin: tovw(-210px) 0 0 tovw(-210px);
   border: tovw(1.5px, 'default', 1px) solid var(--color-grey-light);
@@ -25,6 +24,7 @@
   background-color: rgb(0 0 0 / 0.9);
   padding: tovw(24px, 'default', 22px);
   width: tovw(420px);
+  height: tovw(270px, 'default', 270px);
   color: var(--color-white);
 
   &__header {
@@ -64,8 +64,8 @@
     width: tovw(48px, 'default', 48px);
     height: tovw(48px, 'default', 48px);
     overflow: hidden;
-    user-select: none;
     pointer-events: none;
+    user-select: none;
   }
 
   p {