mobile controls
This commit is contained in:
Eduard Kuzmenko
parent
b279abaeb4
commit
b9827563cd
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user