Merge pull request #42 from morethanwords/viewer-fixes

mobile controls

src/components/appMediaViewer.ts

@@ -26,7 +26,7 @@ import { LazyLoadQueueBase } from "./lazyLoadQueue";
 import PopupForward from "./popups/forward";
 import ProgressivePreloader from "./preloader";
 import Scrollable from "./scrollable";
-import appSidebarRight, { AppSidebarRight } from "./sidebarRight";
+import appSidebarRight from "./sidebarRight";
 import SwipeHandler from "./swipeHandler";
 import { months, ONE_DAY } from "../helpers/date";
 import { SearchSuperContext } from "./appSearchSuper.";
@@ -37,7 +37,6 @@ import { forEachReverse } from "../helpers/array";
 import AppSharedMediaTab from "./sidebarRight/tabs/sharedMedia";
 import findUpClassName from "../helpers/dom/findUpClassName";
 import renderImageFromUrl from "../helpers/dom/renderImageFromUrl";
-import findUpAsChild from "../helpers/dom/findUpAsChild";
 import getVisibleRect from "../helpers/dom/getVisibleRect";
 import appDownloadManager from "../lib/appManagers/appDownloadManager";
 import { cancelEvent } from "../helpers/dom/cancelEvent";
@@ -53,11 +52,12 @@ import PeerTitle from "./peerTitle";
 const MEDIA_VIEWER_CLASSNAME = 'media-viewer';
 
 class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType extends string, TargetType extends object> {
-  public wholeDiv: HTMLElement;
+  protected wholeDiv: HTMLElement;
   protected overlaysDiv: HTMLElement;
   protected author: {[k in 'container' | 'avatarEl' | 'nameEl' | 'date']: HTMLElement} = {} as any;
   protected content: {[k in 'main' | 'container' | 'media' | 'mover' | ContentAdditionType]: HTMLElement} = {} as any;
-  public buttons: {[k in 'download' | 'close' | 'prev' | 'next' | 'mobile-close' | ButtonsAdditionType]: HTMLElement} = {} as any;
+  protected buttons: {[k in 'download' | 'close' | 'prev' | 'next' | 'mobile-close' | ButtonsAdditionType]: HTMLElement} = {} as any;
+  protected topbar: HTMLElement;
   
   protected tempId = 0;
   protected preloader: ProgressivePreloader = null;
@@ -69,7 +69,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
   //protected targetContainer: HTMLElement = null;
   //protected loadMore: () => void = null;
 
-  public log: ReturnType<typeof logger>; 
+  protected log: ReturnType<typeof logger>; 
 
   protected isFirstOpen = true;
   protected loadMediaPromiseUp: Promise<void> = null;
@@ -116,6 +116,14 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     const mainDiv = document.createElement('div');
     mainDiv.classList.add(MEDIA_VIEWER_CLASSNAME);
 
+    const topbar = this.topbar = document.createElement('div');
+    topbar.classList.add(MEDIA_VIEWER_CLASSNAME + '-topbar');
+
+    const topbarLeft = document.createElement('div');
+    topbarLeft.classList.add(MEDIA_VIEWER_CLASSNAME + '-topbar-left');
+
+    this.buttons['mobile-close'] = ButtonIcon('close', {onlyMobile: true});
+
     // * author
     this.author.container = document.createElement('div');
     this.author.container.classList.add(MEDIA_VIEWER_CLASSNAME + '-author', 'no-select');
@@ -154,11 +162,12 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     this.content.container.append(this.content.media);
 
     this.content.main.append(this.content.container);
-    mainDiv.append(this.author.container, buttonsDiv, this.content.main);
+    mainDiv.append(this.content.main);
     this.overlaysDiv.append(mainDiv);
     // * overlays end
     
-    this.buttons["mobile-close"] = ButtonIcon('close', {onlyMobile: true});
+    topbarLeft.append(this.buttons['mobile-close'], this.author.container);
+    topbar.append(topbarLeft, buttonsDiv);
 
     this.buttons.prev = document.createElement('div');
     this.buttons.prev.className = `${MEDIA_VIEWER_CLASSNAME}-switcher ${MEDIA_VIEWER_CLASSNAME}-switcher-left`;
@@ -168,7 +177,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     this.buttons.next.className = `${MEDIA_VIEWER_CLASSNAME}-switcher ${MEDIA_VIEWER_CLASSNAME}-switcher-right`;
     this.buttons.next.innerHTML = `<span class="tgico-down ${MEDIA_VIEWER_CLASSNAME}-next-button"></span>`;
 
-    this.wholeDiv.append(this.overlaysDiv, this.buttons['mobile-close'], this.buttons.prev, this.buttons.next);
+    this.wholeDiv.append(this.overlaysDiv, this.buttons.prev, this.buttons.next, this.topbar);
 
     // * constructing html end
     
@@ -177,7 +186,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
 
   protected setListeners() {
     this.buttons.download.addEventListener('click', this.onDownloadClick);
-    [this.buttons.close, this.buttons["mobile-close"], this.preloaderStreamable.preloader].forEach(el => {
+    [this.buttons.close, this.buttons['mobile-close'], this.preloaderStreamable.preloader].forEach(el => {
       el.addEventListener('click', this.close.bind(this));
     });
 
@@ -251,7 +260,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
 
   protected setBtnMenuToggle(buttons: ButtonMenuItemOptions[]) {
     const btnMenuToggle = ButtonMenuToggle({onlyMobile: true}, 'bottom-left', buttons);
-    this.wholeDiv.append(btnMenuToggle);
+    this.topbar.append(btnMenuToggle);
   }
 
   public close(e?: MouseEvent) {
@@ -965,8 +974,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
 
     //const maxWidth = appPhotosManager.windowW - 16;
     const maxWidth = mediaSizes.isMobile ? this.pageEl.scrollWidth : this.pageEl.scrollWidth - 16;
-    // TODO: const maxHeight = mediaSizes.isMobile ? appPhotosManager.windowH : appPhotosManager.windowH - 100;
-    const maxHeight = appPhotosManager.windowH - 100;
+    const maxHeight = mediaSizes.isMobile ? appPhotosManager.windowH : appPhotosManager.windowH - 100;
     let thumbPromise: Promise<any> = Promise.resolve();
     const size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight, mediaSizes.isMobile ? false : true).photoSize;
     if(useContainerAsTarget) {

src/scss/partials/_ckin.scss

@@ -33,13 +33,12 @@
     }
 
     .time {
-      float: right;
-      padding: 7px 0px 9px 14px;
-      font-size: 15px;
-      color: white;
+      margin-left: .875rem;
+      font-size: .875rem;
+      color: #fff;
       
       @include respond-to(handhelds) {
-        padding: 7px 0px 9px;
+        margin-left: 1rem;
       }
     }
   }
@@ -98,7 +97,11 @@
     width: 2rem;
     height: 2rem;
     color: #fff;
-    padding: 0;
+    padding: 0 .625rem;
+
+    @include respond-to(handhelds) {
+      font-size: 1.375rem;
+    }
 
     i {
       align-self: center;
@@ -119,9 +122,13 @@
       top: 50%;
       left: 50%;
       transform: translate3d(-50%, -50%, 0) scale(1);
-      font-size: 64px;
+      font-size: 4rem;
       transition: visibility .2s, opacity .2s;
       touch-action: manipulation;
+
+      @include respond-to(handhelds) {
+        font-size: 3rem;
+      }
     }
   }
 
@@ -191,8 +198,10 @@
 
     /* html.no-touch &:hover,*/
     &.show-controls.ckin__fullscreen, 
-    &.show-controls:not(.ckin__fullscreen):hover {
-      .default__gradient-bottom, .default__controls {
+    &.show-controls:not(.ckin__fullscreen):hover,
+    html.is-touch &.show-controls {
+      .default__gradient-bottom, 
+      .default__controls {
         transform: translateZ(0);
       }
     }
@@ -220,25 +229,25 @@
   }
 
   .player-volume {
-    margin: -3px 2px 0 10px;
+    margin: 0 .125rem 0 .625rem;
     display: flex;
     align-items: center;
 
-    @include respond-to(handhelds) {
-      //margin: -3px .75rem 0 2px;
-      margin: -3px 2px 0 2px;
+    html.is-touch & {
+      // margin-left: .125rem;
+      display: none;
     }
     
     &__icon {
       fill: #fff;
-      width: 24px;
-      height: 24px;
-      margin-right: 8px;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: .5rem;
       cursor: pointer;
 
       @include respond-to(handhelds) {
-        width: 20px;
-        height: 20px;
+        width: 1.25rem;
+        height: 1.25rem;
       }
     }
 
@@ -265,12 +274,6 @@
   }
 }
 
-@media (max-width: 480px) {
-  .ckin__player button {
-    font-size: 18px;
-  }
-}
-
 video::-webkit-media-controls-enclosure {
   display: none !important;
 }
@@ -425,8 +428,14 @@ input[type=range] {
 }
 
 .bottom-controls {
-  padding: 3px 4px 0px 4px;
+  padding: 0 .25rem;
+  height: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  @include respond-to(handhelds) {
+    height: 3.5rem;
+    padding: 0 .375rem;
+  }
 }

src/scss/partials/_mediaViewer.scss

@@ -21,20 +21,11 @@
   }
 
   &-author {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 3.75rem;
-    padding: .5rem .5rem .5rem 5rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    color: #8b8b8b;
-    transition: var(--open-duration);
+    height: 100%;
     cursor: pointer;
 
-    @include hover() {
-      color: #fff;
+    @include respond-to(handhelds) {
+      margin-left: 1.5rem;
     }
   }
 
@@ -49,11 +40,14 @@
   }
 
   &-name {
+    line-height: var(--line-height);
     font-weight: 500;
+    margin: .0625rem 0;
   }
   
   &-date {
-    font-size: 15px;
+    line-height: var(--line-height);
+    font-size: .875rem;
   }
 
   &-buttons {
@@ -312,6 +306,7 @@
         width: 100% !important;
         height: 100% !important;
         max-width: 100vw !important;
+        max-height: 100vh !important;
         // TODO: max-height: calc((var(--vh, 1vh) * 100));
         //height: calc(100% - 100px) !important;
         /* height: calc(100% - 50px) !important;
@@ -325,7 +320,7 @@
           max-height: calc(100% - 100px);
         } */
 
-        .ckin__player:not(.ckin__fullscreen) {
+        /* .ckin__player:not(.ckin__fullscreen) {
           .default__controls {
             bottom: -50px;
           }
@@ -333,7 +328,7 @@
           .default__gradient-bottom {
             bottom: -50px;
           }
-        }
+        } */
       }
 
       /* @include respond-to(handhelds) {
@@ -367,6 +362,45 @@
     }
   }
   
+  &-topbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 5;
+    padding: 0 .5rem;
+
+    .btn-icon, .media-viewer-author {
+      color: #8b8b8b;
+
+      @include animation-level(2) {
+        transition: color var(--open-duration) ease-in-out;
+      }
+
+      @include hover() {
+        color: #fff;
+      }
+    }
+
+    &-left {
+      display: flex;
+      align-items: center;
+    }
+
+    @include respond-to(handhelds) {
+      // transform: translateY(-3.5rem);
+      // background: rgba(0, 0, 0, .2);
+
+      @include animation-level(2) {
+        transition: transform var(--open-duration) ease-in-out;
+      }
+    }
+  }
+
   // возможно тут это вообще не нужно
   &-aspecter {
     width: 100%;
@@ -408,7 +442,8 @@
       visibility: visible;
       transition-delay: 0s;
 
-      .overlays, > .btn-icon {
+      .overlays/* , 
+      > .btn-icon */ {
         opacity: 1;
         visibility: visible;
         transition: opacity var(--open-duration) 0s, visibility 0s 0s;
@@ -416,21 +451,15 @@
     }
 
     @include respond-to(handhelds) {
-      .tgico-close.only-handhelds {
-        left: 20px;
-      }
-
-      > .btn-icon {
+      /* > .btn-icon {
         top: 8px;
         position: fixed;
         z-index: 5;
         opacity: 0;
         transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration);
-      }
+      } */
   
       .btn-menu-toggle {
-        right: 8px;
-  
         &.menu-open {
           color: #fff;
           background-color: rgba(112, 117, 121, .2) !important;