Merge pull request MikeCheek#42 from MikeCheek/dev

Dev
bernardoforcillo · May 26, 2024 · 4529f64 · 4529f64
2 parents 1fd027d + b936a5b
commit 4529f64
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 40 deletions.
diff --git a/src/components/atoms/BigPictureSection/index.tsx b/src/components/atoms/BigPictureSection/index.tsx
@@ -36,17 +36,7 @@ const Index = ({ title, text, reverse = false, images, videos }: BigPictureSecti
 
   const slides = [
     videos?.map((v, key) => (
-      <video
-        key={key}
-        className={styles.video}
-        height={500}
-        muted
-        autoPlay
-        controls={false}
-        loop
-        playsInline
-        poster="/images/bosco-1-low.JPG"
-      >
+      <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>

diff --git a/src/components/molecules/NaturalmenteTecnologici/index.module.scss b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
@@ -17,15 +17,15 @@
   position: relative;
   width: 80vw;
   height: auto;
-  margin: 30px 0;
+  margin: 0;
   video {
+    object-fit: cover;
     width: 100%;
-    height: auto;
-    position: absolute;
-    z-index: -1;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
+    height: 100%;
+    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzU0LjUiIGhlaWdodD0iNzQuNzAxIiB2aWV3Qm94PSIwIDAgMzU0LjUgNzQuNzAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGlkPSJzdmdHcm91cCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZvbnQtc2l6ZT0iOXB0IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMG1tIiBmaWxsPSIjMDAwIiBzdHlsZT0ic3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjBtbTtmaWxsOiMwMDAiPjxwYXRoIGQ9Ik0gOTEuMyAzMi42MDEgTCA3NS41IDMyLjYwMSBMIDczLjUgNDIuMTAxIEwgODQuNSA0Mi4xMDEgTCA4NC41IDYyLjMwMSBMIDY5LjEgNjIuMzAxIEwgNjYuNSA3NC43MDEgTCA0NS45IDc0LjcwMSBMIDQ4LjUgNjIuMzAxIEwgMzQuNiA2Mi4zMDEgTCAzMiA3NC43MDEgTCAxMS41IDc0LjcwMSBMIDE0LjEgNjIuMzAxIEwgMCA2Mi4zMDEgTCAwIDQyLjEwMSBMIDE4LjUgNDIuMTAxIEwgMjAuNSAzMi42MDEgTCA2LjggMzIuNjAxIEwgNi44IDEyLjQwMSBMIDI0LjggMTIuNDAxIEwgMjcuMyAwLjcwMSBMIDQ3LjggMC43MDEgTCA0NS4zIDEyLjQwMSBMIDU5LjIgMTIuNDAxIEwgNjEuNyAwLjcwMSBMIDgyLjMgMC43MDEgTCA3OS44IDEyLjQwMSBMIDkxLjMgMTIuNDAxIEwgOTEuMyAzMi42MDEgWiBNIDE2NS4yIDMuOTAxIEwgMTY1LjIgNzQuNzAxIEwgMTQzIDc0LjcwMSBMIDExOS41IDM5LjEwMSBMIDExOS41IDc0LjcwMSBMIDk3LjMgNzQuNzAxIEwgOTcuMyAzLjkwMSBMIDExOS41IDMuOTAxIEwgMTQzIDQwLjEwMSBMIDE0MyAzLjkwMSBMIDE2NS4yIDMuOTAxIFogTSAyNTUuOCAyNi45MDEgTCAyMzQuMyAyNi45MDEgQSA0MC4yOTcgNDAuMjk3IDAgMCAxIDIzNS4wMSAyMC4zOSBRIDIzNS43MjYgMTYuNzY4IDIzNy4xMzggMTMuODEyIEEgMjIuMzI5IDIyLjMyOSAwIDAgMSAyMzguMzUgMTEuNjAxIEEgMjMuNjg2IDIzLjY4NiAwIDAgMSAyNDMuOTk3IDUuMjg4IEEgMjEuOTQxIDIxLjk0MSAwIDAgMSAyNDguMSAyLjgwMSBBIDMwLjE2IDMwLjE2IDAgMCAxIDI1OS4wNzkgMC4wNjkgQSAzNS42NTkgMzUuNjU5IDAgMCAxIDI2MS4zIDAuMDAxIEEgNDIuMjExIDQyLjIxMSAwIDAgMSAyNjguMTI4IDAuNTE1IFEgMjcxLjczMiAxLjEwNyAyNzQuNTc3IDIuMzgyIEEgMTcuNDM3IDE3LjQzNyAwIDAgMSAyODAuMDUgNi4xNTEgQSAyMC45MDggMjAuOTA4IDAgMCAxIDI4NS44MjQgMTguNzAzIEEgMjguMzQgMjguMzQgMCAwIDEgMjg2IDIxLjkwMSBBIDMxLjAzMiAzMS4wMzIgMCAwIDEgMjgwLjg4NCAzOC45IEEgMzguNzE4IDM4LjcxOCAwIDAgMSAyNzkuNTUgNDAuODUxIFEgMjczLjEgNDkuNzAxIDI2My40IDU1LjgwMSBMIDI4Ni4zIDU1LjgwMSBMIDI4Ni4zIDczLjcwMSBMIDIzNC42IDczLjcwMSBMIDIzNC42IDU3LjAwMSBBIDI0OC42NDQgMjQ4LjY0NCAwIDAgMCAyNDMuNTA4IDUwLjA1MiBRIDI0Ny42MTIgNDYuNjg4IDI1MC45ODggNDMuNTY1IEEgMTExLjEzMSAxMTEuMTMxIDAgMCAwIDI1NS44IDM4Ljg1MSBRIDI2MC40MjUgMzQuMDE5IDI2Mi4zMDcgMjkuNTU2IEEgMTUuMjcyIDE1LjI3MiAwIDAgMCAyNjMuNiAyMy42MDEgQSA4LjgwNiA4LjgwNiAwIDAgMCAyNjMuNDkyIDIyLjE3NiBRIDI2My4yNjQgMjAuNzg0IDI2Mi41NSAxOS45MDEgUSAyNjEuNSAxOC42MDEgMjU5LjggMTguNjAxIEEgMy4yNTggMy4yNTggMCAwIDAgMjU3LjE5NCAxOS44NTIgQSA1LjI2MyA1LjI2MyAwIDAgMCAyNTYuNjUgMjAuNjUxIFEgMjU1LjUgMjIuNzAxIDI1NS44IDI2LjkwMSBaIE0gMTcxLjIgMy45MDEgTCAyMzAuOCAzLjkwMSBMIDIzMC44IDIxLjUwMSBMIDIxMiAyMS41MDEgTCAyMTIgNzQuNzAxIEwgMTg5LjggNzQuNzAxIEwgMTg5LjggMjEuNTAxIEwgMTcxLjIgMjEuNTAxIEwgMTcxLjIgMy45MDEgWiBNIDMyNC45IDYzLjcwMSBMIDI5My42IDYzLjcwMSBMIDI5My42IDQ1LjIwMSBMIDMyMy40IDIuNzAxIEwgMzQ3LjMgMi43MDEgTCAzNDcuMyA0NC41MDEgTCAzNTQuNSA0NC41MDEgTCAzNTQuNSA2My43MDEgTCAzNDcuMyA2My43MDEgTCAzNDcuMyA3NC43MDEgTCAzMjQuOSA3NC43MDEgTCAzMjQuOSA2My43MDEgWiBNIDUyLjkgNDIuMTAxIEwgNTQuOSAzMi42MDEgTCA0MSAzMi42MDEgTCAzOSA0Mi4xMDEgTCA1Mi45IDQyLjEwMSBaIE0gMzI2LjcgNDQuNTAxIEwgMzI2LjcgMjguMDAxIEwgMzE1LjkgNDQuNTAxIEwgMzI2LjcgNDQuNTAxIFoiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIvPjwvZz48L3N2Zz4=);
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    mask-position: center;
   }
 }
 

diff --git a/src/components/molecules/NaturalmenteTecnologici/index.tsx b/src/components/molecules/NaturalmenteTecnologici/index.tsx
@@ -96,28 +96,10 @@ const Index = () => {
         <ShowOnView className={styles.singleSections}>
           <Heading text={t('EventTitle')} smaller={false} simple showOnView={false} />
           <div className={styles.videoWrap}>
-            <svg viewBox="-5 -5 364.5 84.701" preserveAspectRatio="none" clipPathUnits="objectBoundingBox">
-              <defs>
-                <clipPath id="clip-00">
-                  <path d="M 91.3 32.601 L 75.5 32.601 L 73.5 42.101 L 84.5 42.101 L 84.5 62.301 L 69.1 62.301 L 66.5 74.701 L 45.9 74.701 L 48.5 62.301 L 34.6 62.301 L 32 74.701 L 11.5 74.701 L 14.1 62.301 L 0 62.301 L 0 42.101 L 18.5 42.101 L 20.5 32.601 L 6.8 32.601 L 6.8 12.401 L 24.8 12.401 L 27.3 0.701 L 47.8 0.701 L 45.3 12.401 L 59.2 12.401 L 61.7 0.701 L 82.3 0.701 L 79.8 12.401 L 91.3 12.401 L 91.3 32.601 Z M 165.2 3.901 L 165.2 74.701 L 143 74.701 L 119.5 39.101 L 119.5 74.701 L 97.3 74.701 L 97.3 3.901 L 119.5 3.901 L 143 40.101 L 143 3.901 L 165.2 3.901 Z M 255.8 26.901 L 234.3 26.901 A 40.297 40.297 0 0 1 235.01 20.39 Q 235.726 16.768 237.138 13.812 A 22.329 22.329 0 0 1 238.35 11.601 A 23.686 23.686 0 0 1 243.997 5.288 A 21.941 21.941 0 0 1 248.1 2.801 A 30.16 30.16 0 0 1 259.079 0.069 A 35.659 35.659 0 0 1 261.3 0.001 A 42.211 42.211 0 0 1 268.128 0.515 Q 271.732 1.107 274.577 2.382 A 17.437 17.437 0 0 1 280.05 6.151 A 20.908 20.908 0 0 1 285.824 18.703 A 28.34 28.34 0 0 1 286 21.901 A 31.032 31.032 0 0 1 280.884 38.9 A 38.718 38.718 0 0 1 279.55 40.851 Q 273.1 49.701 263.4 55.801 L 286.3 55.801 L 286.3 73.701 L 234.6 73.701 L 234.6 57.001 A 248.644 248.644 0 0 0 243.508 50.052 Q 247.612 46.688 250.988 43.565 A 111.131 111.131 0 0 0 255.8 38.851 Q 260.425 34.019 262.307 29.556 A 15.272 15.272 0 0 0 263.6 23.601 A 8.806 8.806 0 0 0 263.492 22.176 Q 263.264 20.784 262.55 19.901 Q 261.5 18.601 259.8 18.601 A 3.258 3.258 0 0 0 257.194 19.852 A 5.263 5.263 0 0 0 256.65 20.651 Q 255.5 22.701 255.8 26.901 Z M 171.2 3.901 L 230.8 3.901 L 230.8 21.501 L 212 21.501 L 212 74.701 L 189.8 74.701 L 189.8 21.501 L 171.2 21.501 L 171.2 3.901 Z M 324.9 63.701 L 293.6 63.701 L 293.6 45.201 L 323.4 2.701 L 347.3 2.701 L 347.3 44.501 L 354.5 44.501 L 354.5 63.701 L 347.3 63.701 L 347.3 74.701 L 324.9 74.701 L 324.9 63.701 Z M 52.9 42.101 L 54.9 32.601 L 41 32.601 L 39 42.101 L 52.9 42.101 Z M 326.7 44.501 L 326.7 28.001 L 315.9 44.501 L 326.7 44.501 Z" />
-                </clipPath>
-              </defs>
-              <foreignObject clipPath="url(#clip-00)" width="100%" height="100%">
-                <video
-                  className={styles.video}
-                  height={500}
-                  muted
-                  autoPlay
-                  controls={false}
-                  loop
-                  playsInline
-                  poster="/images/bosco-1-low.JPG"
-                >
-                  <source src={BoscoCoste} type="video/mp4" />
-                  Your browser doesn't support video tag
-                </video>
-              </foreignObject>
-            </svg>
+            <video height={500} muted autoPlay controls={false} loop playsInline poster="/images/bosco-1-low.JPG">
+              <source src={BoscoCoste} type="video/mp4" />
+              Your browser doesn't support video tag
+            </video>
           </div>
           <p dangerouslySetInnerHTML={{ __html: t('EventDescription') }}></p>
         </ShowOnView>