MrBesen
/
tweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #42 from morethanwords/viewer-fixes 

mobile controls
This commit is contained in:
Eduard Kuzmenko 2021-07-19 23:00:50 +03:00 committed by GitHub
parent e1f548fd14 4fa28662f2
commit 920fae3a0a
3 changed files with 108 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/appMediaViewer.ts
View File

@ -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) {

59
src/scss/partials/_ckin.scss
View File

@ -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;
}
}

77
src/scss/partials/_mediaViewer.scss
View File

@ -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;