Fix media viewer escape closing

src/components/appMediaViewer.ts

@@ -1,7 +1,7 @@
 import { deferredPromise } from "../helpers/cancellablePromise";
 import mediaSizes from "../helpers/mediaSizes";
 import { isTouchSupported } from "../helpers/touchSupport";
-import { isSafari } from "../helpers/userAgent";
+import { isMobileSafari, isSafari } from "../helpers/userAgent";
 import appDocsManager, { MyDocument } from "../lib/appManagers/appDocsManager";
 import appImManager from "../lib/appManagers/appImManager";
 import appMessagesManager from "../lib/appManagers/appMessagesManager";
@@ -28,6 +28,7 @@ import SwipeHandler from "./swipeHandler";
 import { months, ONE_DAY } from "../helpers/date";
 import { SearchSuperContext } from "./appSearchSuper.";
 import DEBUG from "../config/debug";
+import appNavigationController from "./appNavigationController";
 
 // TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию
 // TODO: картинки "обрезаются" если возвращаются или появляются с места, где есть их перекрытие (топбар, поле ввода)
@@ -238,6 +239,8 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
 
     if(this.setMoverAnimationPromise) return;
 
+    appNavigationController.removeByType('media');
+
     this.lazyLoadQueue.clear();
 
     const promise = this.setMoverToTarget(this.lastTarget, true).then(({onAnimationEnd}) => onAnimationEnd);
@@ -302,12 +305,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     }
   };
 
-  onKeyDown = (e: KeyboardEvent) => {
+  private onKeyDown = (e: KeyboardEvent) => {
     //this.log('onKeyDown', e);
     
-    if(e.key === 'Escape') {
-      this.close();
-    } else if(e.key === 'ArrowRight') {
+    if(e.key === 'ArrowRight') {
       this.buttons.next.click();
     } else if(e.key === 'ArrowLeft') {
       this.buttons.prev.click();
@@ -883,6 +884,19 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
       this.wholeDiv.classList.add('active');
       rootScope.overlayIsActive = true;
       animationIntersector.checkAnimations(true);
+
+      if(!isMobileSafari) {
+        appNavigationController.pushItem({
+          type: 'media',
+          onPop: (canAnimate) => {
+            if(this.setMoverAnimationPromise) {
+              return false;
+            }
+            
+            this.close();
+          }
+        });
+      }
     }
 
     ////////this.log('wasActive:', wasActive);

src/scss/partials/_leftSidebar.scss

@@ -824,13 +824,17 @@
 .sidebar-left {
   &-section {
     padding: .5rem 0 1rem;
+
+    @include respond-to(handhelds) {
+      padding-bottom: .5rem;
+    }
   
     &-content {
-      //margin: 0 .125rem;
+      margin: 0 .5rem;
 
-      //@include respond-to(not-handhelds) {
-        margin: 0 .5rem;
-      //}
+      @include respond-to(handhelds) {
+        margin: 0 .25rem;
+      }
 
       > .btn-primary {
         margin: 0;
@@ -848,7 +852,7 @@
 
     &-caption {
       margin-top: 1rem;
-      font-size: .875rem;
+      font-size: 1rem;
       color: #707579;
       line-height: 1.3125;
       padding: 0 1rem;
@@ -911,8 +915,6 @@
       max-width: 342px;
       margin-left: auto;
       margin-right: auto;
-      font-size: 1rem;
-      line-height: 1.3125;
       margin-bottom: 1.125rem;
     }
   }
@@ -992,14 +994,11 @@
 }
 
 .privacy-tab {
-  .sidebar-left-section-caption { // * Last Seen & Online verified with mockup
-    font-size: 1rem;
-    line-height: 1.3125;
-  }
-
   // * just to match mockup
-  .sidebar-left-section:first-child {
-    padding-bottom: 1.125rem;
+  @include respond-to(not-handhelds) {
+    .sidebar-left-section:first-child {
+      padding-bottom: 1.125rem;
+    }
   }
 
   form {
@@ -1040,10 +1039,6 @@
 }
 
 .blocked-users-container {
-  .sidebar-left-section-caption {
-    font-size: 1rem;
-  }
-
   li > .rp {
     height: 66px;
     max-height: 66px;