Duplicate sizedImageHeight with thumbnail height calculation

src/plugins/imagery/components/ImageryView.vue

@@ -162,7 +162,8 @@
         class="c-imagery__thumbs-wrapper"
         :class="[
             { 'is-paused': isPaused && !isFixed },
-            { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
+            { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused },
+            { 'show-thumbnail': showImageThumbnails}
         ]"
     >
         <div
@@ -229,6 +230,9 @@ const SCROLL_LATENCY = 250;
 
 const ZOOM_SCALE_DEFAULT = 1;
 
+const THUMBNAIL_LAYOUT_MIN_WIDTH = 400;
+const THUMBNAIL_LAYOUT_MIN_HEIGHT = 300;
+
 export default {
     components: {
         Compass,
@@ -286,7 +290,8 @@ export default {
             imageTranslateY: 0,
             pan: undefined,
             animateZoom: true,
-            imagePanned: false
+            imagePanned: false,
+            showImageThumbnails: false
         };
     },
     computed: {
@@ -458,6 +463,7 @@ export default {
                 height: this.sizedImageHeight
             };
         }
+
     },
     watch: {
         imageHistory: {
@@ -502,6 +508,10 @@ export default {
             this.resetAgeCSS();
             this.updateRelatedTelemetryForFocusedImage();
             this.getImageNaturalDimensions();
+        },
+        sizedImageDimensions() {
+            const previousVisibility = this.showImageThumbnails;
+            this.showImageThumbnails = this.shouldDisplayThumbnails(previousVisibility);
         }
     },
     async mounted() {
@@ -1050,6 +1060,31 @@ export default {
         },
         setCursorStates(states) {
             this.cursorStates = states;
+        },
+        shouldDisplayThumbnails(previousVisibility) {
+            const focusedImageNaturalAspectRatio = this.$refs.focusedImage.naturalWidth / this.$refs.focusedImage.naturalHeight;
+            // FIXME: magic number of thumbnail height; 
+            // cannot use this.$refs.thumbsWrapper.getBoundingClientRect since zeroed out by display:none
+            const thumbnailContainerHeight = 135; 
+            let sizedImageWidth;
+            let sizedImageHeight;
+            // if the image thumbnail strip is not visible, subtract from container height
+            let imageContainerHeight = previousVisibility ? this.imageContainerHeight : this.imageContainerHeight - thumbnailContainerHeight;
+            let imageContainerWidth = this.imageContainerWidth;
+            if ((imageContainerWidth / imageContainerHeight) > focusedImageNaturalAspectRatio) {
+                // container is wider than image
+                sizedImageWidth = imageContainerHeight * focusedImageNaturalAspectRatio;
+                sizedImageHeight = imageContainerHeight;
+            } else {
+                // container is taller than image
+                sizedImageWidth = imageContainerWidth;
+                sizedImageHeight = imageContainerWidth / focusedImageNaturalAspectRatio;
+            }
+
+            return (
+                sizedImageWidth >= THUMBNAIL_LAYOUT_MIN_WIDTH
+                && sizedImageHeight >= THUMBNAIL_LAYOUT_MIN_HEIGHT
+            );
         }
     }
 };

src/plugins/imagery/components/imagery-view.scss

@@ -142,9 +142,9 @@
         }
     }
 
+
     &__thumbs-scroll-area {
         flex: 0 1 auto;
-        display: flex;
         flex-direction: row;
         height: 135px;
         overflow-x: auto;
@@ -200,6 +200,11 @@
         //  When Imagery is in a layout, hide the thumbs area
         display: none;
     }
+    .show-thumbnail {
+        .c-imagery__thumbs-scroll-area {
+            display: flex;
+        }
+    }   
 }
 
 /*************************************** IMAGERY LOCAL CONTROLS*/