fix(grid-list): fullscreen landscape aspect ratio (#165)

flocasts · Jun 25, 2019 · f66bdd2 · f66bdd2
1 parent c15db27
commit f66bdd2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/projects/flosportsinc/ng-grid-list/common/grid/grid.component.spec.ts b/projects/flosportsinc/ng-grid-list/common/grid/grid.component.spec.ts
@@ -160,6 +160,15 @@ describe(FloGridListViewComponent.name, () => {
       const sut = createSut().instance
       expect(sut.getNativeAspectRatio()).toEqual(`${window.screen.height / window.screen.width * 100}%`)
     })
+
+    it('should get native when orientation is landscape', () => {
+      const sut = createSut().instance;
+      (<any>window).screen = { width: 300, height: 400 }
+      expect(window.screen.height).toEqual(400)
+      expect(window.screen.width).toEqual(300)
+      expect(sut.getNativeAspectRatio()).toEqual(`${window.screen.width / window.screen.height * 100}%`)
+    })
+
     it('should run change detection on fullscreen change', () => {
       const sut = createSut()
       const event = new Event('fullscreenchange', { bubbles: true })

diff --git a/projects/flosportsinc/ng-grid-list/common/grid/grid.component.ts b/projects/flosportsinc/ng-grid-list/common/grid/grid.component.ts
@@ -288,7 +288,10 @@ export class FloGridListViewComponent<TItem extends IFloGridListBaseItem> implem
   }
 
   isFullscreen = () => isPlatformBrowser(this._platformId) ? 1 >= window.outerHeight - window.innerHeight : false
-  getNativeAspectRatio = () => `${window.screen.height / window.screen.width * 100}%`
+  getNativeAspectRatio = () => window.screen.height > window.screen.width
+    ? `${window.screen.width / window.screen.height * 100}%`
+    : `${window.screen.height / window.screen.width * 100}%`
+
   getAspectRatio = () => this.isFullscreen() ? this.getNativeAspectRatio() : this.aspectRatio
 
   @HostListener('fullscreenchange')