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

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

@ -33,13 +33,12 @@
} }
.time { .time {
float: right; margin-left: .875rem;
padding: 7px 0px 9px 14px; font-size: .875rem;
font-size: 15px; color: #fff;
color: white;
@include respond-to(handhelds) { @include respond-to(handhelds) {
padding: 7px 0px 9px; margin-left: 1rem;
} }
} }
} }
@ -98,7 +97,11 @@
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #fff; color: #fff;
padding: 0; padding: 0 .625rem;
@include respond-to(handhelds) {
font-size: 1.375rem;
}
i { i {
align-self: center; align-self: center;
@ -119,9 +122,13 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate3d(-50%, -50%, 0) scale(1); transform: translate3d(-50%, -50%, 0) scale(1);
font-size: 64px; font-size: 4rem;
transition: visibility .2s, opacity .2s; transition: visibility .2s, opacity .2s;
touch-action: manipulation; touch-action: manipulation;
@include respond-to(handhelds) {
font-size: 3rem;
}
} }
} }
@ -191,8 +198,10 @@
/* html.no-touch &:hover,*/ /* html.no-touch &:hover,*/
&.show-controls.ckin__fullscreen, &.show-controls.ckin__fullscreen,
&.show-controls:not(.ckin__fullscreen):hover { &.show-controls:not(.ckin__fullscreen):hover,
.default__gradient-bottom, .default__controls { html.is-touch &.show-controls {
.default__gradient-bottom,
.default__controls {
transform: translateZ(0); transform: translateZ(0);
} }
} }
@ -220,25 +229,25 @@
} }
.player-volume { .player-volume {
margin: -3px 2px 0 10px; margin: 0 .125rem 0 .625rem;
display: flex; display: flex;
align-items: center; align-items: center;
@include respond-to(handhelds) { html.is-touch & {
//margin: -3px .75rem 0 2px; // margin-left: .125rem;
margin: -3px 2px 0 2px; display: none;
} }
&__icon { &__icon {
fill: #fff; fill: #fff;
width: 24px; width: 1.5rem;
height: 24px; height: 1.5rem;
margin-right: 8px; margin-right: .5rem;
cursor: pointer; cursor: pointer;
@include respond-to(handhelds) { @include respond-to(handhelds) {
width: 20px; width: 1.25rem;
height: 20px; height: 1.25rem;
} }
} }
@ -265,12 +274,6 @@
} }
} }
@media (max-width: 480px) {
.ckin__player button {
font-size: 18px;
}
}
video::-webkit-media-controls-enclosure { video::-webkit-media-controls-enclosure {
display: none !important; display: none !important;
} }
@ -425,8 +428,14 @@ input[type=range] {
} }
.bottom-controls { .bottom-controls {
padding: 3px 4px 0px 4px; padding: 0 .25rem;
height: 2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 @@
} }
&-author { &-author {
position: absolute; height: 100%;
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);
cursor: pointer; cursor: pointer;
@include hover() { @include respond-to(handhelds) {
color: #fff; margin-left: 1.5rem;
} }
} }
@ -49,11 +40,14 @@
} }
&-name { &-name {
line-height: var(--line-height);
font-weight: 500; font-weight: 500;
margin: .0625rem 0;
} }
&-date { &-date {
font-size: 15px; line-height: var(--line-height);
font-size: .875rem;
} }
&-buttons { &-buttons {
@ -312,6 +306,7 @@
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
max-width: 100vw !important; max-width: 100vw !important;
max-height: 100vh !important;
// TODO: max-height: calc((var(--vh, 1vh) * 100)); // TODO: max-height: calc((var(--vh, 1vh) * 100));
//height: calc(100% - 100px) !important; //height: calc(100% - 100px) !important;
/* height: calc(100% - 50px) !important; /* height: calc(100% - 50px) !important;
@ -325,7 +320,7 @@
max-height: calc(100% - 100px); max-height: calc(100% - 100px);
} */ } */
.ckin__player:not(.ckin__fullscreen) { /* .ckin__player:not(.ckin__fullscreen) {
.default__controls { .default__controls {
bottom: -50px; bottom: -50px;
} }
@ -333,7 +328,7 @@
.default__gradient-bottom { .default__gradient-bottom {
bottom: -50px; bottom: -50px;
} }
} } */
} }
/* @include respond-to(handhelds) { /* @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 { &-aspecter {
@ -408,7 +442,8 @@
visibility: visible; visibility: visible;
transition-delay: 0s; transition-delay: 0s;
.overlays, > .btn-icon { .overlays/* ,
> .btn-icon */ {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: opacity var(--open-duration) 0s, visibility 0s 0s; transition: opacity var(--open-duration) 0s, visibility 0s 0s;
@ -416,21 +451,15 @@
} }
@include respond-to(handhelds) { @include respond-to(handhelds) {
.tgico-close.only-handhelds { /* > .btn-icon {
left: 20px;
}
> .btn-icon {
top: 8px; top: 8px;
position: fixed; position: fixed;
z-index: 5; z-index: 5;
opacity: 0; opacity: 0;
transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration); transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration);
} } */
.btn-menu-toggle { .btn-menu-toggle {
right: 8px;
&.menu-open { &.menu-open {
color: #fff; color: #fff;
background-color: rgba(112, 117, 121, .2) !important; background-color: rgba(112, 117, 121, .2) !important;

Write Preview
Loading…
Cancel
Save