From 4028fc94250c68bf32e08377fb5fe4572d82be14 Mon Sep 17 00:00:00 2001
From: Alex Anderson <anderson.john.alexander@gmail.com>
Date: Tue, 14 Feb 2017 05:04:31 -0800
Subject: [PATCH] Squashed commit of the following:

commit 03e8dbffe34dd432f1d703e7604f41cfddf4e3b8
Author: Alex <theunknownartisthour@gmail.com>
Date:   Wed Oct 19 22:04:00 2016 -0700

    Run comparison on images for orientation

    Switch classes based on width and height

commit e46051570dcace1a1e5edc5f07adfd5e0338949f
Author: Alex <theunknownartisthour@gmail.com>
Date:   Wed Oct 19 21:23:24 2016 -0700

    Add minds-img-landscape and minds-img-portrait

    Add scss stylings for archive view

commit 9bb99f55b121d85bd6ad03812b6cc7b6f178f365
Author: Alex <theunknownartisthour@gmail.com>
Date:   Wed Oct 19 19:44:25 2016 -0700

    Resize images in archive view

    Pure css scaling in browsers w/ polyfill support.
---
 plugins/archive/app/archive.scss          | 16 +++++++++++++---
 plugins/archive/app/view/views/theatre.ts | 11 ++++++++++-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/plugins/archive/app/archive.scss b/plugins/archive/app/archive.scss
index 7375b3301f..e0eb248346 100644
--- a/plugins/archive/app/archive.scss
+++ b/plugins/archive/app/archive.scss
@@ -64,10 +64,20 @@ minds-archive-theatre{
     left: 0;
     bottom: 0;
     right: 0;
-
+    .minds-img-landscape{
+      img{
+        width: 100%;
+        height: auto;
+      }
+    }
+    .minds-img-portrait{
+      img{
+        height: 100%;
+        width: auto;
+      }
+    }
     img{
-      max-width:100%;
-      height:100%;
+      object-fit: contain;
     }
     minds-video{
       background:#000;
diff --git a/plugins/archive/app/view/views/theatre.ts b/plugins/archive/app/view/views/theatre.ts
index 697d5b35a8..45883210f7 100644
--- a/plugins/archive/app/view/views/theatre.ts
+++ b/plugins/archive/app/view/views/theatre.ts
@@ -18,7 +18,7 @@ import { Material } from '../../../../directives/material';
       [hidden]="object.container_guid == object.owner_guid || !object.album_children_guids || object.album_children_guids.length <= 1">
         keyboard_arrow_left
     </i>
-    <div class="minds-archive-stage" *ngIf="object.subtype == 'image'">
+    <div class="minds-archive-stage" [ngClass]="{minds-image-landscape: orientation == 'landscape', minds-image-portrait: orientation == 'portrait'}" *ngIf="object.subtype == 'image'">
       <img src="/archive/thumbnail/{{object.guid}}/xlarge"/>
     </div>
     <div class="minds-archive-stage" *ngIf="object.subtype == 'video'">
@@ -44,6 +44,7 @@ import { Material } from '../../../../directives/material';
 export class ArchiveTheatre {
 
   object: any = {};
+  orientation: string;
   session = SessionFactory.build();
 
   constructor(public client: Client, public router: Router){
@@ -53,6 +54,14 @@ export class ArchiveTheatre {
     if(!value.guid)
       return;
     this.object = value;
+    if(this.object.subtype == 'image'){
+      /*Check image's aspect ratio for landscape or l*/
+      if(this.object.naturalWidth >= this.object.naturalHeight){
+        this.orientation = 'landscape';
+      } else {
+        this.orientation = 'portrait';
+      }
+    }
   }
 
   prev(){