r4sas
/
tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #42 from morethanwords/viewer-fixes 

mobile controls
master
Eduard Kuzmenko 3 years ago committed by GitHub
parent
0cdf511f59 d10f355031
commit
9876d30b3f
3 changed files with 108 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      src/components/appMediaViewer.ts
  2. 59
      src/scss/partials/_ckin.scss
  3. 77
      src/scss/partials/_mediaViewer.scss

34
src/components/appMediaViewer.ts
Unescape View File

@ -26,7 +26,7 @@ import { LazyLoadQueueBase } from "./lazyLoadQueue"; @@ -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"; @@ -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"; @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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
Unescape View File

@ -33,13 +33,12 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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] { @@ -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
Unescape View File

@ -21,20 +21,11 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -333,7 +328,7 @@
.default__gradient-bottom {
bottom: -50px;
}
}
} */
}
/* @include respond-to(handhelds) {
@ -366,6 +361,45 @@ @@ -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 @@ @@ -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 @@ @@ -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;

Write Preview
Loading…
Cancel
Save