Merge pull request #49 from MikeCheek/dev

Improving video performances

global.d.ts

@@ -7,6 +7,7 @@ declare module '*.svg' {
 }
 
 declare module '*.mp4';
+declare module '*.webm';
 
 declare type LinkType = 'internal' | 'external';
 

package.json

@@ -49,6 +49,7 @@
     "react-i18next": "^13.5.0",
     "react-intersection-observer": "^9.4.3",
     "react-p5": "^1.4.1",
+    "react-player": "^2.16.0",
     "react-slick": "^0.29.0",
     "sass": "^1.60.0",
     "slick-carousel": "^1.8.1"

src/components/atoms/BigPictureSection/index.module.scss

@@ -20,7 +20,7 @@
     margin-bottom: 5px;
     opacity: 0.4;
     font-family: 'Alba';
-    width: 100%;
+    width: fit-content;
   }
   p {
     margin: 0 20px;
@@ -90,6 +90,12 @@
   width: 100vw;
   height: 100vh;
   object-fit: cover;
+
+  video {
+    width: 100vw !important;
+    height: 100vh !important;
+    object-fit: cover;
+  }
 }
 
 .scrollingImages {

src/components/atoms/BigPictureSection/index.tsx

@@ -4,14 +4,24 @@ import * as styles from './index.module.scss';
 import ShowOnView from '../ShowOnView';
 import { GatsbyImage } from 'gatsby-plugin-image';
 import Carousel from '../Carousel';
+import Player from 'react-player/lazy';
 
 const Index = ({ title, text, reverse = false, images, videos }: BigPictureSectionProps) => {
   const slides = [
     videos?.map((v, key) => (
-      <video key={key} className={styles.video} height={500} muted autoPlay controls={false} loop playsInline>
-        <source src={v} type="video/mp4" />
-        Your browser doesn't support video tag
-      </video>
+      <Player
+        key={key}
+        url={v}
+        className={styles.video}
+        height={500}
+        muted
+        autoPlay
+        playing
+        controls={false}
+        loop
+        playsInline
+        config={{ file: { forceVideo: true } }}
+      />
     )),
     images?.edges.map((e, index) => (
       <GatsbyImage

src/components/atoms/VideoMasked/index.module.scss

@@ -7,14 +7,24 @@
   mask-repeat: no-repeat;
   mask-size: contain;
   mask-position: center;
-
-  animation: morph 10s infinite alternate;
-
+  max-height: 25vh !important;
+  @media screen and (min-width: '768px') {
+    max-height: 45vh !important;
+  }
   video {
+    width: 100%;
+    height: auto;
     object-fit: cover;
     width: 100%;
     height: 100%;
-    max-height: 45vh;
-    transition: transform 200ms ease;
+
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+
+    @media screen and (min-width: '768px') {
+      width: 80vw !important;
+    }
   }
 }

src/components/atoms/VideoMasked/index.tsx

@@ -1,22 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import VideoMaskedProps from './index.types';
 import * as styles from './index.module.scss';
-import BoscoCoste from '../../../assets/video/bosco_coste_forward.mp4';
+import BoscoCoste from '../../../assets/video/webm/bosco_coste_forward.webm';
 import ShowOnView from '../ShowOnView';
+import Player from 'react-player/lazy';
 
 const VideoMasked = ({ showOnView = false }: VideoMaskedProps) => {
-  const [loadVideo, setLoadVideo] = useState<boolean>(false);
-
-  useEffect(() => {
-    setLoadVideo(true);
-  }, []);
-
-  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>
-  );
+  const children = <Player url={BoscoCoste} height={500} muted autoPlay playing controls={false} loop playsInline />;
 
   return showOnView ? (
     <ShowOnView className={styles.videoWrap}>{children}</ShowOnView>

src/components/molecules/NaturalmenteTecnologici/index.tsx

@@ -7,11 +7,11 @@ import WhenAndWhere from '../WhenAndWhere';
 import { useTranslation } from 'react-i18next';
 import BigPictureSection from '../../atoms/BigPictureSection';
 import { images as ntImages } from '../../../utilities/ntPhotos';
-import Shorty from '../../../assets/video/shorty_10s_low.mp4';
-import Moddilugitrix from '../../../assets/video/moddilugitrix_10s_low.mp4';
-import Baldini from '../../../assets/video/baldini_10s_low.mp4';
-import Millenium from '../../../assets/video/millenium_10s_low.mp4';
-import Transplay from '../../../assets/video/transplay_10s_low.mp4';
+import Shorty from '../../../assets/video/webm/shorty_10s_low.webm';
+import Moddilugitrix from '../../../assets/video/webm/moddilugitrix_10s_low.webm';
+import Baldini from '../../../assets/video/webm/baldini_10s_low.webm';
+import Millenium from '../../../assets/video/webm/millenium_10s_low.webm';
+import Transplay from '../../../assets/video/webm/transplay_10s_low.webm';
 import VideoMasked from '../../atoms/VideoMasked';
 
 const Index = () => {

yarn.lock

@@ -4256,7 +4256,7 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.2.2, deepmerge@^4.3.1:
+deepmerge@^4.0.0, deepmerge@^4.2.2, deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -7373,6 +7373,11 @@ [email protected]:
     "@lmdb/lmdb-linux-x64" "2.5.3"
     "@lmdb/lmdb-win32-x64" "2.5.3"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -7649,6 +7654,11 @@ memfs@^3.1.2, memfs@^3.2.2:
   dependencies:
     fs-monkey "^1.0.4"
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memoizee@^0.4.15:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.15.tgz#e6f3d2da863f318d02225391829a6c5956555b72"
@@ -8919,7 +8929,7 @@ prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9113,6 +9123,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-i18next@^13.5.0:
   version "13.5.0"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.5.0.tgz#44198f747628267a115c565f0c736a50a76b1ab0"
@@ -9140,6 +9155,17 @@ react-p5@^1.4.1:
     opencollective-postinstall "2.0.2"
     p5 "1.7.0"
 
+react-player@^2.16.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"
+  integrity sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"