chore: longevity p8

.github/workflows/pull-request-check.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '18'
+          node-version: '20.19.0'
 
       - name: Install Dependencies
         run: yarn install

src/api/longevity/environment.ts

@@ -1,5 +1,5 @@
 export async function getEnvironment(locale: string) {
-  const currentLocale = locale === 'ru' ? 'ru' : 'en';
+  const currentLocale = 'en';
   const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/longevity-environment?populate[home][populate]=icon&populate[principles][populate]=icon&populate[data_tracking][populate]=icon&[populate]=image&populate[OGTags][populate]=ogImage&populate=Seo&locale=${currentLocale}`;
 
   const res = await fetch(url, {

src/components/Navbar/Navbar.tsx

@@ -52,20 +52,21 @@ const Navbar: FC<NavbarProps> = ({ handleToggleSidebar, handleClick }) => {
       target: '',
       id: 'companyManagement',
     },
-    {
-      name: articles,
-      path: '/articles',
-      logo: isDarkTheme ? <ArticlesDarkIcon /> : <ArticlesIcon />,
-      target: '',
-      id: 'articles',
-    },
+
     {
       name: tools,
       path: '/tools/longevity-protocol/about-project',
       logo: isDarkTheme ? <ToolsIcon /> : <ToolsDarkIcon />,
       target: '',
       id: 'tools',
     },
+    {
+      name: articles,
+      path: '/articles',
+      logo: isDarkTheme ? <ArticlesDarkIcon /> : <ArticlesIcon />,
+      target: '',
+      id: 'articles',
+    },
   ];
 
   return (

src/components/longevity/BorderedPill/BorderedPill.module.scss

@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   background-color: #ffffff66;
-
+  color: #000000d9;
   width: 100%;
   max-width: 320px;
   min-height: 42px;

src/components/longevity/DietResults/DietResults.module.scss

@@ -90,18 +90,41 @@
 
 @media (max-width: 965px) {
   .results {
+    padding: 0 8px;
+    margin: 16px 12px 16px 12px;
     max-width: unset;
+    background-image: url('/keepsimple_/assets/longevity/diet/scale/scale-bg-mobile.webp');
     background-size: cover;
-    height: 82px;
+    height: unset;
     gap: 8px;
 
+    .tooltip {
+      font-size: 12px;
+    }
+
+    .selected {
+      left: 0;
+      font-size: 8px;
+    }
+
     .item {
-      max-width: 50px;
-      max-height: 50px;
+      width: unset;
+      height: unset;
+      max-width: unset;
+      max-height: unset;
+      padding: 12px 0;
+
+      &.active {
+        &::after {
+          top: 10px;
+          background-size: contain;
+        }
+      }
 
       img {
-        max-width: 50px;
-        max-height: 50px;
+        max-width: unset;
+        width: 100%;
+        height: auto;
       }
     }
   }

src/components/longevity/WeeklyWorkout/WeeklyWorkout.module.scss

@@ -30,7 +30,7 @@
       font-weight: 600;
     }
     .orangeMinutes {
-      color: #ffae01;
+      color: #df8804;
     }
     .greenMinutes {
       color: #4d8539;
@@ -85,7 +85,7 @@
       font-weight: 700;
     }
     .orangeRisk {
-      color: #ffae01;
+      color: #df8804;
     }
 
     .greenRisk {

src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss

@@ -1,5 +1,5 @@
 .whyDoThisTooltip {
-  background-image: url('/keepsimple_/assets/longevity/habits/tooltip-bg.png');
+  background-image: url('/keepsimple_/assets/longevity/habits/what-is-this-bg.webp');
   background-size: contain;
   width: 700px;
   height: 100%;

src/components/longevity/YourDiet/YourDiet.module.scss

@@ -56,10 +56,30 @@
 
 @media (max-width: 965px) {
   .selectedDiet {
+    background-size: contain;
     max-width: unset;
+    background-position: center;
+    margin: 0 12px;
+
+    .yourDietHeading {
+      h3 {
+        font-size: 18px !important;
+        text-align: center;
+      }
+    }
 
     .wrapper {
       flex-direction: column;
+      align-items: center;
+      margin-top: unset;
+      gap: 20px;
+      padding: 38px 0px;
+
+      .hasGapP {
+        display: flex;
+        justify-content: space-between;
+        padding-right: 20px;
+      }
 
       .icon {
         width: 100%;

src/components/longevity/YourDiet/YourDiet.tsx

@@ -42,6 +42,7 @@ const YourDiet: FC<YourDietProps> = ({
         showLeftIcon={false}
         showRightIcon={false}
         isBold
+        className={styles.yourDietHeading}
       />
       <div className={styles.wrapper}>
         <Image
@@ -61,7 +62,7 @@ const YourDiet: FC<YourDietProps> = ({
             <span> +20% </span> Years of life gained!
           </p>
           <hr className={styles.divider} />
-          <p>
+          <p className={styles.hasGapP}>
             Biological Age:{' '}
             <span>
               -{selectedDiet.biologicalAge} year
@@ -70,7 +71,7 @@ const YourDiet: FC<YourDietProps> = ({
           </p>
           <hr className={styles.divider} />
 
-          <p>
+          <p className={styles.hasGapP}>
             Skin Age:{' '}
             <span>
               -{selectedDiet.skinAge} year
@@ -79,7 +80,7 @@ const YourDiet: FC<YourDietProps> = ({
           </p>
           <hr className={styles.divider} />
 
-          <p>
+          <p className={styles.hasGapP}>
             Joint Age:{' '}
             <span>
               -{selectedDiet.jointAge} year
@@ -88,7 +89,7 @@ const YourDiet: FC<YourDietProps> = ({
           </p>
           <hr className={styles.divider} />
 
-          <p>
+          <p className={styles.hasGapP}>
             Metabolic Age:{' '}
             <span>
               -{selectedDiet.metabolicAge} year

src/constants/longevity.ts

@@ -16,7 +16,8 @@ export const scaleLevels = [
   {
     id: 1,
     imagePath: scaleImgPath + 'borderline-ok-foods.png',
-    backgroundUrlMobile: backgroundImgPath + 'borderline-ok-mobile-bg.webp',
+    backgroundUrlMobile:
+      backgroundImgPath + 'borderline-ok-foods-mobile-bg.webp',
     backgroundUrl: backgroundImgPath + 'borderline-ok-foods-bg.png',
     biologicalAge: '0',
     skinAge: '0',
@@ -47,7 +48,7 @@ export const scaleLevels = [
     id: 4,
     imagePath: scaleImgPath + 'clean-nutrients.png',
     backgroundUrl: backgroundImgPath + 'clean-nutrients-bg.png',
-    backgroundUrlMobile: backgroundImgPath + 'clean-nutrients-mobile-bg.webp',
+    backgroundUrlMobile: backgroundImgPath + 'clean-nutrient-mobile-bg.webp',
     biologicalAge: '3.5',
     skinAge: '5.5',
     jointAge: '4.5',
@@ -57,7 +58,7 @@ export const scaleLevels = [
     id: 5,
     imagePath: scaleImgPath + 'metabolic-gold.png',
     backgroundUrl: backgroundImgPath + 'metabolic-gold-bg.png',
-    backgroundUrlMobile: backgroundImgPath + 'metabolic-gold-mobile-bg.webp',
+    backgroundUrlMobile: backgroundImgPath + 'metabolic-gold-mobile.bg.webp',
     biologicalAge: '5',
     skinAge: '7',
     jointAge: '6',

src/layouts/EnvironmentLayout/EnvironmentLayout.tsx

@@ -31,7 +31,7 @@ const EnvironmentLayout: FC<EnvironmentLayoutProps> = ({ locale, data }) => {
             key={index}
             description={item?.explanation}
             name={item?.title}
-            iconUrl={`${strapiURl}${item?.icon?.data?.attributes.url}`}
+            iconUrl={`${strapiURl}${item?.icon?.data?.attributes?.url}`}
           />
         ))}
       </LongevitySubSection>

src/layouts/Layout.tsx

@@ -1,5 +1,12 @@
 import { useRouter } from 'next/router';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { GlobalContext } from '@components/Context/GlobalContext';
 
 import Header from '@components/Header';
 import Hero from '@components/longevity/Hero';
@@ -34,6 +41,7 @@ function pickLayer(pathname: string): LayerKey {
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
+  const { setVideosReady, videosReady } = useContext(GlobalContext);
 
   const sectionRef = useRef<HTMLElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -223,6 +231,80 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     });
   }, [isLongevityProtocolPage]);
 
+  useEffect(() => {
+    if (!isLongevityProtocolPage) return;
+
+    let cancelled = false;
+    setVideosReady(false);
+
+    const keys = Object.keys(SOURCES) as LayerKey[];
+
+    const readyByKey: Record<string, boolean> = {};
+    keys.forEach(k => (readyByKey[k] = false));
+
+    const checkAll = () => {
+      if (cancelled) return;
+      const allReady = keys.every(k => readyByKey[k]);
+      if (allReady) setVideosReady(true);
+    };
+
+    const cleanupFns: Array<() => void> = [];
+
+    keys.forEach(k => {
+      const v = videosRef.current[k];
+      if (!v) return;
+
+      const markReady = () => {
+        readyByKey[k] = true;
+        checkAll();
+      };
+
+      if (v.readyState >= 2) {
+        markReady();
+        return;
+      }
+
+      const onCanPlay = () => markReady();
+      const onError = () => markReady(); // don't deadlock if one fails
+
+      v.addEventListener('canplay', onCanPlay, { once: true });
+      v.addEventListener('error', onError, { once: true });
+
+      v.load?.();
+      v.play?.().catch(() => {});
+
+      cleanupFns.push(() => {
+        v.removeEventListener('canplay', onCanPlay);
+        v.removeEventListener('error', onError);
+      });
+    });
+
+    const t = window.setTimeout(() => {
+      if (!cancelled) setVideosReady(true);
+    }, 2500);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(t);
+      cleanupFns.forEach(fn => fn());
+    };
+  }, [isLongevityProtocolPage, setVideosReady]);
+
+  useEffect(() => {
+    if (!videosReady) return;
+    const base = videosRef.current['default'];
+    if (!base) return;
+
+    const t = base.currentTime || 0;
+    (Object.keys(SOURCES) as LayerKey[]).forEach(k => {
+      const v = videosRef.current[k];
+      if (!v) return;
+      try {
+        if (v.duration) v.currentTime = t % v.duration;
+      } catch {}
+    });
+  }, [videosReady]);
+
   return (
     <>
       <Header />

src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
 import ReactGA from 'react-ga4';
 import { SessionProvider } from 'next-auth/react';
@@ -37,6 +37,7 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) {
   const [heroReady, setHeroReady] = useState(true);
   const [routeLoading, setRouteLoading] = useState(false);
   const [longevityTransition, setLongevityTransition] = useState(false);
+  const [videosReady, setVideosReady] = useState(false);
 
   const isIndexingOn = process.env.NEXT_PUBLIC_INDEXING === 'on';
   const isProduction = process.env.NEXT_PUBLIC_ENV === 'prod';
@@ -257,9 +258,23 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) {
       router.events.off('routeChangeComplete', onDone);
       router.events.off('routeChangeError', onDone);
     };
-  }, [router]);
+  }, [router.events, router.asPath]);
 
-  const overlayOn = longevityTransition && (routeLoading || !heroReady);
+  useLayoutEffect(() => {
+    const initialIsLongevity = isLongevityUrl(router.asPath);
+    if (!initialIsLongevity) return;
+
+    setHeroReady(false);
+    setRouteLoading(true);
+
+    const id = requestAnimationFrame(() => setRouteLoading(false));
+    return () => cancelAnimationFrame(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const isLongevityNow = isLongevityUrl(router.asPath);
+  const overlayOn =
+    isLongevityNow && (routeLoading || !heroReady || !videosReady);
 
   return (
     <SessionProvider session={session}>
@@ -275,6 +290,8 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) {
           routeLoading,
           longevityTransition,
           setHeroReady,
+          setVideosReady,
+          videosReady,
         }}
       >
         {showLoader && !isSmallScreen && (