Sbit-93: style video component

src/components/quote/Quote.js

@@ -1,36 +1,81 @@
 import "./quote.scss"
-
+import MarkdownView from "react-showdown"
 import React from "react"
 
 const Quote = ({
-  data: { description, title, variant, profile, image, strapi_component, id },
+  data: { description, title, variant, profileDescription, videoUrl, button, profile, image, strapi_component, id },
 }) => {
+
+
+  const url = videoUrl?.replace("watch?v=", "embed/")
+  let code = url?.substring(url.lastIndexOf("/") + 1, url.length)
+  const codeIndex = code?.indexOf("?")
+
+  if (codeIndex !== -1 && code !== undefined) {
+    code = code.substring(0, code.indexOf("?"))
+  }    
+
+
   return (
-    <div className="container my-3" id={strapi_component + "-" + id}>
+    <div className="container my-3 mb-lg-5" id={strapi_component + "-" + id}>
       <section className={`quote variant-${variant}`}>
-        {image && (
+        {(image && !videoUrl) && (
           <div className="quote-body">
             <img
-              placeholder="https://via.placeholder.com/900"
               src={image.url}
-              alt=""
+              alt={image.name}
             />
           </div>
         )}
 
+        {(videoUrl !== null && videoUrl !== undefined) && (
+          <div className="quote-body">
+            {(url !== undefined && code !==undefined) && (
+              <iframe
+              loading="lazy"
+              type="text/html"
+              src={url}
+              frameBorder="0"
+              allowFullScreen
+              title="benefits_video"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;
+                            width:100%;height:100%;object-fit: cover;top:0;bottom:0;max-height: 500px}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;margin:auto;text-shadow:0 0 0.5em black}</style>
+                            <a href=${url}>
+                            <img src=https://img.youtube.com/vi/${code}/hqdefault.jpg alt='Video'>
+                            <span>▶</span></a>`}
+              webkitallowfullscreen="true"
+              mozallowfullscreen="true"
+            ></iframe>
+
+            )}
+
+          </div>
+        )}
+
         <div className="quote-person">
           <h4 className="quote-person-title">{title}</h4>
           <p className="quote-person-text">{description}</p>
+
+          {profile && (
+            <div className="quote-profile make-it-fast my-3 my-md-2 my-xl-4 d-flex gap-3 justify-content-between">
+              <img
+                src={profile.url}
+                alt="quote author"
+              />
+              <div className="flex-grow-1">
+                <MarkdownView markdown={profileDescription} className="markdown" />
+              </div>
+            </div>
+          )}
+          {button && (
+            <div className="quote-btn">
+              <a href={button.url || button.landing_page?.slug}>
+                <button>{button.content}</button>
+              </a>
+            </div>
+          )}
         </div>
-        {profile && (
-          <div className="quote-profile make-it-fast">
-            <img
-              placeholder="https://via.placeholder.com/300"
-              src={profile.url}
-              alt=""
-            />
-          </div>
-        )}
       </section>
     </div>
   )
@@ -40,6 +85,9 @@ Quote.defaultProps = {
   description: "",
   title: "",
   variant: "",
+  profileDescription: "",
+  videoUrl: "",
+  button: {},
   profile: {},
   image: {},
 }

src/components/quote/quote.scss

@@ -8,111 +8,151 @@
     grid-area: quote-body;
     img {
       width: 100%;
-      height: 70vh;
       object-fit: cover;
     }
+    iframe {
+      width: 100%;
+      margin-bottom: 0;
+      min-height: 250px;
+      max-height: 400px;
+    }
   }
 
   &-person {
-    padding-top: 1em;
     grid-area: quote-person;
     display: flex;
     flex-direction: column;
 
     &-title {
-      margin-bottom: 1.5em;
       font-weight: 700;
+      margin-bottom: 5px;
+      line-height: 35px;
     }
     &-text {
-      font-weight: 700;
       max-height: 300px;
+      margin-bottom: 0;
+      text-align: justify;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
     }
-    @keyframes move-shadow {
-      0% {
-        transform: translate3d(12px, 0px, 0px);
-      }
-      25% {
-        transform: translate3d(0px, 12px, 0px);
-      }
-      50% {
-        transform: translate3d(-12px, 0px, 0px);
-      }
-      75% {
-        transform: translate3d(0px, -12px, 0px);
-      }
-      100% {
-        transform: translate3d(12px, 0px, 0px);
-      }
-    }
   }
 
   &-profile {
     grid-area: quote-profile;
     flex-grow: 0;
     align-self: flex-start;
     border-radius: 50%;
-    position: relative;
-    width: 200px;
-    height: 200px;
+    width: 100%;
     z-index: 4;
-    &::before {
-      content: "";
-      inset: 0px 0px 0px 0px;
-      position: absolute;
-      background-color: #22c0c329;
+    img {
+      width: 65px;
+      height: 65px;
       border-radius: 50%;
-      animation: move-shadow 7s infinite linear;
-      z-index: -1;
     }
-    &::after {
-      content: "";
-      inset: 0px 0px 0px 0px;
-      position: absolute;
-      background-color: #22c0c325;
-      border-radius: 50%;
-      animation: move-shadow 7s infinite linear;
-      animation-delay: 3s;
-      z-index: -1;
+    .markdown {
+      p {
+        margin: 0;
+      }
     }
-    img {
-      width: 200px;
-      height: 200px;
-      border-radius: 50%;
+  }
+  &-btn {
+    button {
+      @include primaryBtn;
+      border-radius: 8px;
+      width: 131px;
+      height: 30px;
     }
   }
 }
 
+@media (min-width: $breakpoint-md) {
+  .quote {
+    &-body {
+      iframe {
+        min-height: 300px !important;
+      }
+    }
+  }
+}
+@media (min-width: $breakpoint-lg) {
+  .quote {
+    &-body {
+      iframe {
+        min-height: 350px !important;
+      }
+    }
+    &-btn {
+      button {
+        width: 150px;
+        height: 40px;
+      }
+    }
+    &-profile {
+      img {
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .quote {
+    &-body {
+      iframe {
+        min-height: 500px !important;
+      }
+    }
+    &-person {
+      &-title {
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
 // variantes
 .variant {
   &-quote {
-    grid-template-areas: "quote-person quote-body" "quote-profile quote-body";
+    grid-template-areas:
+      "quote-person quote-body"
+      "quote-profile quote-body";
     grid-template-columns: 1fr 2fr;
     @extend .variant;
   }
 
-  &-image {
-    grid-template-areas: "quote-body quote-person" "quote-body quote-profile";
+  &-media {
+    grid-template-areas:
+      "quote-body quote-person"
+      "quote-body quote-profile";
     grid-template-columns: 2fr 1fr;
     @extend .variant;
   }
 
   grid-template-rows: auto 1fr;
-  @media screen and (max-width: $breakpoint-lg) {
+  @media screen and (max-width: calc($breakpoint-md - 3px)) {
     grid-template-areas: "quote-body quote-body" "quote-profile quote-person";
     grid-template-columns: auto 1fr;
-    padding: 1em;
+    padding: 0.5em;
   }
-
-  @media screen and (max-width: $breakpoint-md) {
+  @media screen and (max-width: calc($breakpoint-md - 3px)) {
     display: flex;
     flex-direction: column;
     gap: 1em;
     p {
       margin-bottom: 0;
     }
   }
+  /*  @media screen and (max-width: calc($breakpoint-xl - 3px)) {
+    .variant {
+      &-quote {
+        grid-template-columns: 1fr 2fr !important;
+      }
+
+      &-media {
+        grid-template-columns: 2fr 1fr;
+      }
+    }
+  } */
 }

src/styles/global.scss

@@ -143,12 +143,12 @@ body {
 
 @media screen and (min-width: $breakpoint-lg) {
   body {
-    font-size: 18px;
+    font-size: 20px;
     p {
       em {
-        font-size: 18px;
+        font-size: 20px;
       }
-      font-size: 18px;
+      font-size: 20px;
     }
     h1 {
       font-size: 69px;