From d1ac9e797b51f5e17d4be5cd58bd0c412c90c5fc Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Mon, 19 Jul 2021 16:51:53 +0300 Subject: [PATCH] mobile controls --- src/components/appMediaViewer.ts | 34 ++++++++----- src/scss/partials/_ckin.scss | 61 +++++++++++++---------- src/scss/partials/_mediaViewer.scss | 77 ++++++++++++++++++++--------- 3 files changed, 109 insertions(+), 63 deletions(-) diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index b4235ee3..4d676952 100644 --- a/src/components/appMediaViewer.ts +++ b/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 { - 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 void = null; - public log: ReturnType; + protected log: ReturnType; protected isFirstOpen = true; protected loadMediaPromiseUp: Promise = null; @@ -116,6 +116,14 @@ class AppMediaViewerBase`; - 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 { + [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 = Promise.resolve(); const size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight, mediaSizes.isMobile ? false : true).photoSize; if(useContainerAsTarget) { diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index 68ef0f0d..8704226d 100644 --- a/src/scss/partials/_ckin.scss +++ b/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; } } } @@ -99,13 +98,17 @@ border: 0; color: #fff; outline: 0; - padding: 3px 10px 6px 10px; + padding: 0 .625rem; cursor: pointer; - font-size: 24px; + font-size: 1.5rem; line-height: 1; display: flex; align-items: center; + @include respond-to(handhelds) { + font-size: 1.375rem; + } + i { align-self: center; } @@ -125,9 +128,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; + } } } @@ -197,8 +204,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); } } @@ -226,25 +235,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; } } @@ -271,12 +280,6 @@ } } -@media (max-width: 480px) { - .ckin__player button { - font-size: 18px; - } -} - video::-webkit-media-controls-enclosure { display: none !important; } @@ -429,8 +432,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; + } } diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index 02f6cea7..22c81448 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/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) { @@ -366,6 +361,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 { @@ -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;