feat: sphere image in hero for safari browser

landing/fragments/landing-hero/src/helpers/define-safari-browser.helper.ts

@@ -0,0 +1,17 @@
+import { Browser } from '../landing-hero.constants'
+
+export const defineSafariBrowser = (): boolean => {
+  if (typeof navigator !== 'undefined') {
+    const userAgent = navigator.userAgent.toLowerCase()
+
+    return (
+      userAgent.includes(Browser.SAFARI) &&
+      !userAgent.includes(Browser.CHROME) &&
+      !userAgent.includes(Browser.OPERA) &&
+      !userAgent.includes(Browser.YANDEX) &&
+      !userAgent.includes(Browser.FIREFOX)
+    )
+  }
+
+  return false
+}

landing/fragments/landing-hero/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './define-safari-browser.helper'

landing/fragments/landing-hero/src/landing-hero.component.tsx

@@ -1,56 +1,31 @@
-import React                      from 'react'
-import { FastAverageColor }       from 'fast-average-color'
-import { FastAverageColorResult } from 'fast-average-color'
-import { FC }                     from 'react'
-import { useEffect }              from 'react'
-import { useState }               from 'react'
+import React                   from 'react'
+import { FC }                  from 'react'
+import { useState }            from 'react'
 
-import { Layout }                 from '@ui/layout'
-import { Column }                 from '@ui/layout'
-import { Box }                    from '@ui/layout'
-import { AnimateOnLoad }          from '@ui/preloader'
-import { extractObject }          from '@globals/data'
+import { Condition }           from '@ui/condition'
+import { Image }               from '@ui/image'
+import { Layout }              from '@ui/layout'
+import { Column }              from '@ui/layout'
+import { Box }                 from '@ui/layout'
+import { AnimateOnLoad }       from '@ui/preloader'
+import { extractObject }       from '@globals/data'
 
-import { Content }                from './content'
-import { CDN_VIDEO_MINE }         from './landing-hero.constants'
-import { FAST_BLACK_COLOR_RGBA }  from './landing-hero.constants'
-import { CDN_VIDEO_PATH }         from './landing-hero.constants'
-import { HeroProps }              from './landing-hero.interface'
-import { Video }                  from './video'
-import { useHero }                from './data'
-
-const fac = new FastAverageColor()
+import { Content }             from './content'
+import { HeroProps }           from './landing-hero.interface'
+import { Sphere }              from './sphere/sphere.component'
+import { useHero }             from './data'
+import { defineSafariBrowser } from './helpers'
 
 const LandingHero: FC<HeroProps> = ({ language }) => {
+
+  const isSafari = defineSafariBrowser()
+
   const { heroData } = useHero()
 
   const [backgroundColor, setBackgroundColor] = useState<string>('background.purple')
-  const [videoIsPlaying, setVideoIsPlaying] = useState<boolean>(false)
 
   const { title, content } = extractObject('contentAddons', 'lead', heroData[language])
 
-  useEffect(() => {
-    if (!videoIsPlaying) return
-
-    const videoElement = document.querySelector('video')
-
-    const getColor = () => {
-      try {
-        let color: FastAverageColorResult | undefined
-
-        color = fac.getColor(videoElement, { algorithm: 'dominant' })
-        if (color.value.every(value => value === 0)) return
-
-        setBackgroundColor(color?.rgb)
-      } catch (error) {
-        if (process.env.NODE_ENV !== 'production') throw error
-      }
-    }
-
-    getColor()
-  }, [videoIsPlaying])
-
-
   return (
     <Box
       height={['auto', 'auto', '100vh']}
@@ -67,11 +42,14 @@ const LandingHero: FC<HeroProps> = ({ language }) => {
             animation={{ y: 0, opacity: 1 }}
             delay={600}
           >
-            <Video
-              mimeType={CDN_VIDEO_MINE}
-              src={CDN_VIDEO_PATH}
-              onPlay={() => setVideoIsPlaying(true)}
-            />
+            <Condition match={!isSafari}>
+              <Sphere setBackgroundColor={setBackgroundColor} />
+            </Condition>
+            <Condition match={isSafari}>
+              <Layout>
+                <Image src='/sphere.svg' width={630} height={630} />
+              </Layout>
+            </Condition>
           </AnimateOnLoad>
           <Layout marginRight='120px' />
           <Layout display={['flex', 'flex', 'none']} height={80} />

landing/fragments/landing-hero/src/landing-hero.constants.ts

@@ -18,3 +18,11 @@ export const messages = {
 
 export const sphereStyleDesktop = { width: 600, height: 600 }
 export const sphereStyleMobile = { width: 300, height: 300 }
+
+export enum Browser {
+  SAFARI = 'safari',
+  CHROME = 'chrome',
+  OPERA = 'opr',
+  YANDEX = 'yabrowser',
+  FIREFOX = 'firefox',
+}

landing/fragments/landing-hero/src/sphere/sphere.component.tsx

@@ -0,0 +1,41 @@
+import React                      from 'react'
+import { FastAverageColorResult } from 'fast-average-color'
+import { FastAverageColor }       from 'fast-average-color'
+import { useEffect }              from 'react'
+import { useState }               from 'react'
+
+import { CDN_VIDEO_PATH }         from '../landing-hero.constants'
+import { CDN_VIDEO_MINE }         from '../landing-hero.constants'
+import { Video }                  from '../video'
+
+const fac = new FastAverageColor()
+
+export const Sphere = ({ setBackgroundColor }) => {
+  const [videoIsPlaying, setVideoIsPlaying] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (!videoIsPlaying) return
+
+    const videoElement = document.querySelector('video')
+
+    const getColor = () => {
+      try {
+        let color: FastAverageColorResult | undefined
+
+        // eslint-disable-next-line prefer-const
+        color = fac.getColor(videoElement, { algorithm: 'dominant' })
+        if (color.value.every((value) => value === 0)) return
+
+        setBackgroundColor(color?.rgb)
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') throw error
+      }
+    }
+
+    getColor()
+  }, [videoIsPlaying, setBackgroundColor])
+
+  return (
+    <Video mimeType={CDN_VIDEO_MINE} src={CDN_VIDEO_PATH} onPlay={() => setVideoIsPlaying(true)} />
+  )
+}

landing/pages/contacts-page/src/get-static-props.ts

@@ -5,9 +5,9 @@ import { GET_SEO }          from '@globals/data'
 import { PageUri }          from '@globals/data'
 import { GET_CONTACTS }     from '@landing/contacts-fragment'
 import { GET_NAVIGATION }   from '@landing/navigation-fragment'
+import { GET_FORMS }        from '@ui/form'
 import { initializeApollo } from '@globals/data'
 import { addApolloState }   from '@globals/data'
-import {GET_FORMS} from '@ui/form'
 
 export const getStaticProps = async () => {
   const client = initializeApollo({})
@@ -22,12 +22,11 @@ export const getStaticProps = async () => {
 
   const formsPromise = client.query({ query: GET_FORMS })
 
-
-  ;[seoContent, navigationContent, contactsContent,formsContent] = await Promise.allSettled([
+  ;[seoContent, navigationContent, contactsContent, formsContent] = await Promise.allSettled([
     seoPromise,
     navigationPromise,
     contactsPromise,
-    formsPromise
+    formsPromise,
   ])
 
   const SEO = {
@@ -43,7 +42,7 @@ export const getStaticProps = async () => {
       SEO,
       navigationData,
       contactsData,
-      formsData
+      formsData,
     },
     revalidate: 3600,
   })

landing/pages/index-page/src/get-static-props.ts

@@ -11,9 +11,9 @@ import { GET_NAVIGATION }   from '@landing/navigation-fragment'
 import { GET_REVIEWS }      from '@landing/reviews-fragment'
 import { GET_RECRUITS }     from '@landing/team-fragment'
 import { GET_SKILLS }       from '@landing/work-directions-fragment'
+import { GET_FORMS }        from '@ui/form'
 import { addApolloState }   from '@globals/data'
 import { initializeApollo } from '@globals/data'
-import {GET_FORMS} from '@ui/form'
 export const getStaticProps = async () => {
   const client = initializeApollo({})
 
@@ -26,7 +26,7 @@ export const getStaticProps = async () => {
     feedbackContent,
     skillsContent,
     recruitsContent,
-      formsContent
+    formsContent
 
   const seoPromise = client.query({ query: GET_SEO, variables: { uri: PageUri.INDEX } })
   const navigationPromise = client.query({ query: GET_NAVIGATION })
@@ -40,7 +40,6 @@ export const getStaticProps = async () => {
   const recruitsPromise = client.query({ query: GET_RECRUITS })
   const formsPromise = client.query({ query: GET_FORMS })
 
-
   ;[
     seoContent,
     navigationContent,
@@ -52,7 +51,7 @@ export const getStaticProps = async () => {
     feedbackContent,
     skillsContent,
     recruitsContent,
-    formsContent
+    formsContent,
   ] = await Promise.allSettled([
     seoPromise,
     navigationPromise,
@@ -63,7 +62,7 @@ export const getStaticProps = async () => {
     feedbackPromise,
     skillsPromise,
     recruitsPromise,
-    formsPromise
+    formsPromise,
   ])
 
   const SEO = {
@@ -93,7 +92,7 @@ export const getStaticProps = async () => {
       feedbackData,
       skillsData,
       recruitsData,
-      formData
+      formData,
     },
     revalidate: 3600,
   })

landing/pages/index-page/src/index.page.tsx

@@ -26,7 +26,7 @@ const IndexPage: FC<IndexPageProps> = ({ SEO }) => {
   const language = useReactiveVar<Language>(languageVar)
   const containerRef = useRef(null)
   return (
-    <Preloader seconds={6}>
+    <Preloader>
       <LocomotiveScrollProvider
         options={LOCOMOTIVE_SCROLL_OPTIONS}
         watch={LOCOMOTIVE_SCROLL_WATCH}
@@ -43,7 +43,7 @@ const IndexPage: FC<IndexPageProps> = ({ SEO }) => {
           <LandingFooter language={language} />
         </ScrollContainer>
       </LocomotiveScrollProvider>
-     </Preloader>
+    </Preloader>
   )
 }