Merge pull request #44 from MikeCheek/dev

Other performance improvements

Author: MikeCheek

src/assets/video/baldini_10s_low.mp4

@@ -14,7 +14,7 @@
   text-align: center;
 
   // mix-blend-mode: soft-light;
-  h4 {
+  h3 {
     font-size: 5rem;
     text-transform: uppercase;
     margin-bottom: 5px;
@@ -33,8 +33,7 @@
     width: 40%;
     text-align: right;
     right: 4%;
-    h4 {
-      opacity: 0.2;
+    h3 {
       font-size: 10rem;
     }
 

src/assets/video/millenium_10s_low.mp4

@@ -6,32 +6,6 @@ import { GatsbyImage } from 'gatsby-plugin-image';
 import Carousel from '../Carousel';
 
 const Index = ({ title, text, reverse = false, images, videos }: BigPictureSectionProps) => {
-  // let base = 0;
-  // const [offset, setOffset] = useState<number>(0);
-
-  // const [ref, inView, entry] = useInView({
-  //   threshold: 0.2,
-  //   fallbackInView: true,
-  //   triggerOnce: false,
-  // });
-
-  // const parallax = () => {
-  //   const rect = entry!.target.getBoundingClientRect();
-  //   const a = rect.top + rect.bottom;
-  //   setOffset((a / window.innerHeight) * 100);
-  // };
-
-  // useEffect(() => {
-  //   if (inView) {
-  //     base = window.scrollY;
-  //     window.addEventListener('scroll', () => parallax());
-  //   } else window.removeEventListener('scroll', () => {});
-
-  //   return window.removeEventListener('scroll', () => {});
-  // }, [inView]);
-
-  // const transform = `translateX(${reverse ? '-' : '+'}${Math.round(offset / 2)}%)`;
-
   const slides = [
     videos?.map((v, key) => (
       <video key={key} className={styles.video} height={500} muted autoPlay controls={false} loop playsInline>
@@ -56,7 +30,7 @@ const Index = ({ title, text, reverse = false, images, videos }: BigPictureSecti
   return (
     <div className={styles.wrap}>
       <ShowOnView className={reverse ? styles.wrapTextReverse : styles.wrapText}>
-        <h4 dangerouslySetInnerHTML={{ __html: title }}></h4>
+        <h3 dangerouslySetInnerHTML={{ __html: title }}></h3>
         <p dangerouslySetInnerHTML={{ __html: text ?? '' }}></p>
       </ShowOnView>
 

src/assets/video/moddilugitrix_10s_low.mp4

@@ -11,7 +11,7 @@ const Index = () => {
   return (
     <div className={styles.languagePicker} onMouseLeave={() => setDropdown(false)}>
       <p onClick={() => setDropdown((v) => !v)}>
-        <Flag className={styles.flag} code={enToUk(language)} />
+        <Flag className={styles.flag} code={enToUk(language)} alt={language + ' flag'} />
         {language.toUpperCase()}
         {/* <Down width={10} height={10} /> */}
       </p>
@@ -23,7 +23,7 @@ const Index = () => {
               to={originalPath}
               language={lng}
             >
-              <Flag className={styles.flag} code={enToUk(lng)} /> {lng.toUpperCase()}
+              <Flag className={styles.flag} code={enToUk(lng)} alt={lng + ' flag'} /> {lng.toUpperCase()}
             </Link>
             {key % 2 === 0 ? <div className={styles.separator}></div> : null}
           </div>

src/assets/video/shorty_10s_low.mp4

@@ -4,20 +4,24 @@ import * as styles from './index.module.scss';
 import BoscoCoste from '../../../assets/video/bosco_coste_forward.mp4';
 import ShowOnView from '../ShowOnView';
 
-const VideoMasked = ({}: VideoMaskedProps) => {
+const VideoMasked = ({ showOnView = false }: VideoMaskedProps) => {
   const [loadVideo, setLoadVideo] = useState<boolean>(false);
 
   useEffect(() => {
     setLoadVideo(true);
   }, []);
 
-  return (
-    <ShowOnView className={styles.videoWrap}>
-      <video height={500} muted autoPlay controls={false} loop playsInline>
-        {loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
-        Your browser doesn't support video tag
-      </video>
-    </ShowOnView>
+  const children = (
+    <video height={500} muted autoPlay controls={false} loop playsInline>
+      {loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
+      Your browser doesn't support video tag
+    </video>
+  );
+
+  return showOnView ? (
+    <ShowOnView className={styles.videoWrap}>{children}</ShowOnView>
+  ) : (
+    <div className={styles.videoWrap}>{children}</div>
   );
 };
 

src/assets/video/transplay_10s_low.mp4

@@ -1,3 +1,3 @@
 export default interface VideoMaskedProps {
-  
-}
+  showOnView?: boolean;
+}