3089: Added image contain to instagram feed

os2display · Nov 28, 2024 · e4a2cf1 · e4a2cf1
1 parent dfb2397
commit e4a2cf1
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 6 deletions.
diff --git a/src/image-text/image-text-admin.json b/src/image-text/image-text-admin.json
@@ -78,7 +78,7 @@
     "input": "checkbox",
     "name": "imageContain",
     "label": "Deaktivér billedbeskæring",
-    "helpText": "Billedet vil blive vist i fuld størrelse med tomme områder omkring"
+    "helpText": "Billedet vil blive vist ubeskåret med tomme områder omkring"
   },
   {
     "key": "form-background-color",

diff --git a/src/instagram-feed/instagram-feed-admin.json b/src/instagram-feed/instagram-feed-admin.json
@@ -81,5 +81,12 @@
     "label": "Maksimalt antal billeder/videoer fra feedet",
     "helpText": "Her kan du skrive maksimalt antal billeder/videoer fra feedet.",
     "formGroupClasses": "col-md-6"
+  },
+  {
+    "key": "form-image-contain",
+    "input": "checkbox",
+    "name": "imageContain",
+    "label": "Deaktivér billedbeskæring",
+    "helpText": "Billedet vil blive vist ubeskåret med tomme områder omkring"
   }
 ]
diff --git a/src/instagram-feed/instagram-feed.js b/src/instagram-feed/instagram-feed.js
@@ -34,7 +34,7 @@ function InstagramFeed({ slide, content, run, slideDone, executionId }) {
   const animationDuration = 1500;
 
   const { feedData = [] } = slide;
-  const { hashtagText, orientation, imageWidth = null } = content;
+  const { hashtagText, orientation, imageWidth = null, backgroundColor, mediaContain } = content;
 
   // @TODO: should duration depend on number of instagram posts to show?
   let { entryDuration: duration } = content;
@@ -92,6 +92,10 @@ function InstagramFeed({ slide, content, run, slideDone, executionId }) {
     rootStyle["--percentage-narrow"] = `${100 - imageWidth}%`;
   }
 
+  if (backgroundColor) {
+    rootStyle.backgroundColor = backgroundColor;
+  }
+
   return (
     <>
       {currentPost && (
@@ -104,7 +108,7 @@ function InstagramFeed({ slide, content, run, slideDone, executionId }) {
           <div className="media-section">
             {!currentPost.videoUrl && (
               <div
-                className="image"
+                className={`image${mediaContain ? " image-contain" : ""}`}
                 style={{
                   backgroundImage: `url("${currentPost.mediaUrl}")`,
                   ...(show
@@ -115,7 +119,7 @@ function InstagramFeed({ slide, content, run, slideDone, executionId }) {
             )}
             {currentPost.videoUrl && (
               <div className="video-container">
-                <video muted="muted" autoPlay loop src={currentPost.videoUrl}>
+                <video muted="muted" autoPlay loop src={currentPost.videoUrl} className={mediaContain ? 'video-contain' : ''}>
                   <track kind="captions" />
                 </video>
               </div>
@@ -169,6 +173,8 @@ InstagramFeed.propTypes = {
     entryDuration: PropTypes.number,
     maxEntries: PropTypes.number,
     imageWidth: PropTypes.number,
+    backgroundColor: PropTypes.string,
+    mediaContain: PropTypes.bool,
   }).isRequired,
   executionId: PropTypes.string.isRequired,
 };

diff --git a/src/instagram-feed/instagram-feed.scss b/src/instagram-feed/instagram-feed.scss
@@ -19,6 +19,11 @@
       background-position: center center;
     }
 
+    .image.image-contain {
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+
     .video-container {
       width: auto;
       height: 100%;
@@ -31,6 +36,10 @@
       width: 100%;
       height: 100%;
     }
+
+    video.video-contain {
+      object-fit: contain;
+    }
   }
 
   .author-section {

diff --git a/src/slides.js b/src/slides.js
@@ -553,14 +553,16 @@ const slides = [
   {
     id: "slide7-instagram",
     type: "instagram-feed",
-    themeFile: "themes/dokk1.css",
+    darkModeEnabled: false,
     content: {
       duration: 5000,
       hashtagText: "#myhashtag",
       orientation: "landscape",
       imageWidth: 40.0,
       entryDuration: 10,
       maxEntries: 5,
+      backgroundColor: "#fff",
+      mediaContain: true,
     },
     feedData: [
       {

diff --git a/src/slideshow/slideshow-admin.json b/src/slideshow/slideshow-admin.json
@@ -25,7 +25,7 @@
     "input": "checkbox",
     "name": "imageContain",
     "label": "Deaktivér billedbeskæring",
-    "helpText": "Billedet vil blive vist i fuld størrelse med tomme områder omkring"
+    "helpText": "Billedet vil blive vist ubeskåret med tomme områder omkring"
   },
   {
     "key": "form-background-color",