sfc-utils 1.3.69 → 1.3.70

package/components/topper2.mjs

@@ -9,7 +9,7 @@ import * as imageStyles from "../styles/modules/topperimage.module.less"
 
 const Topper2 = ({ settings, wcmData }) => {
   const {
-    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Image_Caption, Image_Credits,
+    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Video_Mp4, Image_Caption, Image_Credits,
     HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset,
     HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout, Inverted_Text_Color,
     Topper_Background_Color
@@ -161,8 +161,40 @@ const Topper2 = ({ settings, wcmData }) => {
     return list;
   }
 
+  /** Returns the HTML to support video */
+  const getVideoHtml = () => {
+    let videoCss = "";
+
+    switch (Topper_Style) {
+      case "stacked":
+        videoCss = topperStyles.videoStacked;
+        break;
+      case "full-screen":
+        videoCss = topperStyles.videoFullscreen;
+        break;
+      case "side-by-side":
+        videoCss = topperStyles.videoStacked;
+        break;
+      case "side-by-side-portrait":
+        videoCss = `${topperStyles.videoSideBySidePortrait} ${sideBySidePortraitFloatCss()}`;
+        break;
+      case "no-visual":
+      default:
+        break;
+    }
+
+    return (
+      <video className={videoCss} muted loop autoPlay playsInline poster={Video_Mp4.trim().replace('.mp4', '.jpg')}           >
+        <source src={Video_Mp4.trim().replace('.mp4', '.m3u8')} type="application/vnd.apple.mpegurl" />
+        <source src={Video_Mp4.trim()} type="video/mp4" />
+      </video>
+    )
+  }
+
   /* Returns the corresponding image HTML for each topper style and slideshow status */
-  const getImageHTML = (isSlideshow) => {
+  const getMediaHTML = (isSlideshow) => {
+    if (Video_Mp4) return getVideoHtml();
+
     if (isSlideshow) return (
       <ImageSlideshow
         wcmData={wcmData}
@@ -175,14 +207,22 @@ const Topper2 = ({ settings, wcmData }) => {
 
     switch (Topper_Style) {
       case "stacked":
-        return (<TopperImage wcm={Image} alt={Image_Alt} wcmData={wcmData} />)
+        return (
+          <TopperImage
+            wcm={Image}
+            alt={Image_Alt}
+            wcmData={wcmData}
+            containerCssList={[imageStyles.cContainerStacked]}
+            imageCssList={[imageStyles.cImgStacked]}
+          />
+        )
       case "full-screen":
         return (
           <TopperImage
             wcm={Image}
             alt={Image_Alt}
             wcmData={wcmData}
-            overrideCssList={[imageStyles.cImgFullscreen]}
+            imageCssList={[imageStyles.cImgFullscreen]}
           />
         )
       case "side-by-side":
@@ -192,7 +232,7 @@ const Topper2 = ({ settings, wcmData }) => {
             alt={Image_Alt}
             wcmData={wcmData}
             containerCssList={[imageStyles.cContainerSideBySide]}
-            overrideCssList={[imageStyles.cImgSideBySide]}
+            imageCssList={[imageStyles.cImgSideBySide]}
           />)
       case "side-by-side-portrait":
         return (
@@ -201,7 +241,7 @@ const Topper2 = ({ settings, wcmData }) => {
             alt={Image_Alt}
             wcmData={wcmData}
             containerCssList={[imageStyles.cContainerSideBySidePortrait, sideBySidePortraitFloatCss()]}
-            overrideCssList={[imageStyles.cImgSideBySidePortrait]}
+            imageCssList={[imageStyles.cImgSideBySidePortrait]}
           />
         )
       case "no-visual":
@@ -219,7 +259,7 @@ const Topper2 = ({ settings, wcmData }) => {
           <>
             <div className={containerCss}>
               <figure className={`topper-image ${topperStyles.imageFullScreen}`} aria-labelledby="topperCaptionText">
-                {getImageHTML(isSlideshow(wcmIdList))}
+                {getMediaHTML(isSlideshow(wcmIdList))}
 
                 {/* This caption-credit only shows when the screen size is tablet or mobile */}
                 {isSlideshow(wcmIdList) &&
@@ -273,7 +313,7 @@ const Topper2 = ({ settings, wcmData }) => {
                 />
               </div>
               <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageStacked}`}>
-                {getImageHTML(isSlideshow(wcmIdList))}
+                {getMediaHTML(isSlideshow(wcmIdList))}
 
                 {isSlideshow(wcmIdList) &&
                   <CaptionCreditSlideshow
@@ -327,7 +367,7 @@ const Topper2 = ({ settings, wcmData }) => {
               />
             </div>
             <figure className={figureCss}>
-              {getImageHTML(isSlideshow(wcmIdList))}
+              {getMediaHTML(isSlideshow(wcmIdList))}
 
               {isSlideshow(wcmIdList) &&
                 <CaptionCreditSlideshow
@@ -362,7 +402,7 @@ const Topper2 = ({ settings, wcmData }) => {
                 />
               </div>
               <figure className={portraitFigureCss}>
-                {getImageHTML(isSlideshow(wcmIdList))}
+                {getMediaHTML(isSlideshow(wcmIdList))}
 
                 {isSlideshow(wcmIdList) &&
                   <CaptionCreditSlideshow

package/components/topperimage.mjs

@@ -5,9 +5,9 @@ import { debounce } from './helpers/utilfunctions.mjs'
 
 const currentEnv = process.env.GATSBY_DEPLOY_ENV
 
-const ImageHTML = ({ fullPath, imageRez, alt, overrideCssList }) => {
+const ImageHTML = ({ fullPath, imageRez, alt, imageCssList }) => {
   let imageCss = [wcmimageStyles.cImg];
-  if (overrideCssList) imageCss = overrideCssList
+  if (imageCssList) imageCss = imageCssList
 
   return (
     <img
@@ -17,7 +17,7 @@ const ImageHTML = ({ fullPath, imageRez, alt, overrideCssList }) => {
   )
 }
 
-const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], overrideCssList = [] }) => {
+const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], imageCssList = [] }) => {
   // When the wrapping div is rendered, we're going to figure out the best size for this image to be
   let picRef = useRef(null)
   let [imageRez, setImageRez] = useState(0)
@@ -104,7 +104,7 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], override
 
   return (
     <div className={containerCssList.join(' ')} ref={picRef}>
-      <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} overrideCssList={overrideCssList} />
+      <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} imageCssList={imageCssList} />
     </div>
   )
 }
@@ -115,7 +115,7 @@ TopperImage.propTypes = {
   ratio: PropTypes.string, // This prop is currently not being used, might be ok to delete? 
   wcmData: PropTypes.object,
   containerCssList: PropTypes.array,
-  overrideCssList: PropTypes.array
+  imageCssList: PropTypes.array
 }
 
 export default TopperImage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.3.69",
+  "version": "1.3.70",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",

package/styles/modules/topper2.module.less

@@ -409,4 +409,36 @@
   @media (max-width: @lg) {
     float: none;
   }
+}
+
+.videoStacked {
+  width: 100%;
+  object-fit: cover;
+}
+
+.videoFullscreen {
+  width: 100%;
+  height: calc(100vh - 37px);
+  object-fit: cover;
+
+  @media @tablet {
+    height: 100%;
+  }
+}
+
+.videoSideBySidePortrait {
+  object-fit: cover;
+  width: calc(90vh * 2/3);
+  height: 100%;
+  max-width: calc(50vw - @s32);
+  min-width: 400px;
+  min-height: 600px;
+
+  @media (max-width: @lg) {
+    width: 90vw;
+    height: auto;
+    max-width: unset;
+    min-height: unset;
+    min-width: unset;
+  }
 }

package/styles/modules/topperimage.module.less

@@ -64,6 +64,10 @@
   }
 }
 
+.c-container-stacked {
+  padding-bottom: var(--img-bottom-padding-ratio);
+}
+
 .c-img {
   display: block;
   position: relative;
@@ -73,6 +77,15 @@
   height: auto;
 }
 
+.c-img-stacked {
+  display: block;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: auto;
+}
+
 .c-img-fullscreen {
   position: static;
   object-fit: cover;