diff --git a/src/components/horizontalMenu.ts b/src/components/horizontalMenu.ts index 7ea875a6..6cb97dd5 100644 --- a/src/components/horizontalMenu.ts +++ b/src/components/horizontalMenu.ts @@ -42,7 +42,7 @@ function slideTabs(tabContent: HTMLElement, prevTabContent: HTMLElement, toRight tabContent.style.transform = ''; } -export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?: (id: number, tabContent: HTMLDivElement) => void, onTransitionEnd?: () => void, transitionTime = 300) { +export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick?: (id: number, tabContent: HTMLDivElement) => void, onTransitionEnd?: () => void, transitionTime = 250) { const hideTimeouts: {[id: number]: number} = {}; let prevTabContent: HTMLElement = null; let prevId = -1; @@ -99,13 +99,7 @@ export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick? }; if(tabs) { - let activeStripe: HTMLSpanElement; - if(!tabs.classList.contains('no-stripe')) { - activeStripe = document.createElement('span'); - activeStripe.classList.add('menu-horizontal__stripe'); - - tabs.append(activeStripe); - } + const useStripe = !tabs.classList.contains('no-stripe'); const tagName = 'LI';//tabs.firstElementChild.tagName; tabs.addEventListener('click', function(e) { @@ -139,16 +133,28 @@ export function horizontalMenu(tabs: HTMLElement, content: HTMLElement, onClick? const prev = tabs.querySelector(tagName.toLowerCase() + '.active') as HTMLElement; prev && prev.classList.remove('active'); - if(activeStripe) { - const tabsRect = tabs.getBoundingClientRect(); - const targetRect = target.getBoundingClientRect(); - const width = 50; - activeStripe.style.cssText = `width: ${width}px; transform: translateX(${targetRect.left - tabsRect.left + ((targetRect.width - width) / 2)}px);`; - /* const textRect = target.firstElementChild.getBoundingClientRect(); - activeStripe.style.cssText = `width: ${textRect.width + (2 * 2)}px; transform: translateX(${textRect.left - tabsRect.left}px);`; */ - //activeStripe.style.transform = `scaleX(${textRect.width}) translateX(${(textRect.left - tabsRect.left) / textRect.width + 0.5}px)`; - //console.log('tabs click:', tabsRect, textRect); + // stripe from ZINCHUK + if(useStripe && prevId != -1) { + const indicator = target.querySelector('i')!; + const currentIndicator = target.parentElement.children[prevId].querySelector('i')!; + + currentIndicator.classList.remove('animate'); + indicator.classList.remove('animate'); + + // We move and resize our indicator so it repeats the position and size of the previous one. + const shiftLeft = currentIndicator.parentElement.parentElement.offsetLeft - indicator.parentElement.parentElement.offsetLeft; + const scaleFactor = currentIndicator.clientWidth / indicator.clientWidth; + indicator.style.transform = `translate3d(${shiftLeft}px, 0, 0) scale3d(${scaleFactor}, 1, 1)`; + + console.log(`translate3d(${shiftLeft}px, 0, 0) scale3d(${scaleFactor}, 1, 1)`); + + requestAnimationFrame(() => { + // Now we remove the transform to let it animate to its own position and size. + indicator.classList.add('animate'); + indicator.style.transform = 'none'; + }); } + // stripe END target.classList.add('active'); selectTab(id); diff --git a/src/components/scrollable_new.ts b/src/components/scrollable_new.ts index 7414b5df..3fc0d328 100644 --- a/src/components/scrollable_new.ts +++ b/src/components/scrollable_new.ts @@ -1,6 +1,6 @@ import { logger, LogLevels } from "../lib/logger"; import smoothscroll from '../vendor/smoothscroll'; -import { touchSupport, isSafari } from "../lib/config"; +import { touchSupport, isSafari, mediaSizes } from "../lib/config"; //import { isInDOM } from "../lib/utils"; (window as any).__forceSmoothScrollPolyfill__ = true; smoothscroll.polyfill(); @@ -207,7 +207,7 @@ export default class Scrollable { const binded = this.onScroll.bind(this); window.addEventListener('resize', () => { - this.overflowContainer = window.innerWidth <= 720 && false ? document.documentElement : this.container; + this.overflowContainer = mediaSizes.isMobile && false ? document.documentElement : this.container; this.onScroll(); }); this.container.addEventListener('scroll', binded, {passive: true, capture: true}); @@ -221,7 +221,7 @@ export default class Scrollable { } //this.onScroll(); - this.overflowContainer = window.innerWidth <= 720 && false ? document.documentElement : this.container; + this.overflowContainer = mediaSizes.isMobile && false ? document.documentElement : this.container; /* scrollables.set(this.container, this); scrollsIntersector.observe(this.container); */ @@ -342,8 +342,13 @@ export default class Scrollable { public checkForTriggers(container: HTMLElement) { if(this.scrollLocked || (!this.onScrolledTop && !this.onScrolledBottom)) return; - const scrollTop = container.scrollTop; - const maxScrollTop = container.scrollHeight - container.clientHeight; + const scrollHeight = container.scrollHeight; + if(!scrollHeight) { // незачем вызывать триггеры если блок пустой или не виден + return; + } + + const {clientHeight, scrollTop} = container; + const maxScrollTop = scrollHeight - clientHeight; //this.log('checkForTriggers:', scrollTop, maxScrollTop); diff --git a/src/components/slider.ts b/src/components/slider.ts index 3399aeff..b4de565a 100644 --- a/src/components/slider.ts +++ b/src/components/slider.ts @@ -7,7 +7,7 @@ export interface SliderTab { onCloseAfterTimeout?: () => void } -const TRANSITIONTIME = 420; +const TRANSITIONTIME = 250; export default class SidebarSlider { protected _selectTab: (id: number) => void; diff --git a/src/index.hbs b/src/index.hbs index 91fe23c7..3fe0b94c 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -212,9 +212,9 @@
-
@@ -629,11 +629,11 @@
diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index 237acc05..1b64a5b1 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -703,7 +703,9 @@ export class AppDialogsManager { span.innerHTML = RichTextProcessor.wrapEmojiText(filter.title); const unreadSpan = document.createElement('span'); unreadSpan.classList.add('unread-count'); - li.append(span, unreadSpan); + const i = document.createElement('i'); + span.append(unreadSpan, i); + li.append(span); ripple(li); this.folders.menu.firstElementChild.append(li); diff --git a/src/lib/appManagers/appDocsManager.ts b/src/lib/appManagers/appDocsManager.ts index 9c3c1a26..35c2a584 100644 --- a/src/lib/appManagers/appDocsManager.ts +++ b/src/lib/appManagers/appDocsManager.ts @@ -232,68 +232,6 @@ class AppDocsManager { return getFileNameByLocation(this.getInput(doc, thumbSize), {fileName: doc.file_name}); } - public downloadDoc(docID: string | MTDocument, toFileEntry?: any): CancellablePromise { - const doc = this.getDoc(docID); - - if(doc._ == 'documentEmpty') { - return Promise.reject(); - } - - if(doc.downloaded && !toFileEntry) { - if(doc.url) return Promise.resolve(null); - - /* const cachedBlob = apiFileManager.getCachedFile(inputFileLocation); - if(cachedBlob) { - return Promise.resolve(cachedBlob); - } */ - } - - if(this.downloadPromises[doc.id]) { - return this.downloadPromises[doc.id]; - } - - const deferred = deferredPromise(); - - const url = this.getFileURL(doc); - fetch(url).then(res => res.blob()) - /* downloadPromise */.then((blob) => { - if(blob) { - doc.downloaded = true; - - if(doc.type == 'voice' && !opusDecodeController.isPlaySupported()/* && false */) { - let reader = new FileReader(); - - reader.onloadend = (e) => { - let uint8 = new Uint8Array(e.target.result as ArrayBuffer); - //console.log('sending uint8 to decoder:', uint8); - opusDecodeController.decode(uint8).then(result => { - doc.url = result.url; - deferred.resolve(blob); - }, (err) => { - delete doc.downloaded; - deferred.reject(err); - }); - }; - - reader.readAsArrayBuffer(blob); - - return; - } else if(doc.type && doc.sticker != 2) { - doc.url = url; - } - } - - deferred.resolve(blob); - }, (e) => { - console.log('document download failed', e); - deferred.reject(e); - }).finally(() => { - //deferred.notify = downloadPromise.notify = deferred.cancel = downloadPromise.cancel = null; - }); - - return this.downloadPromises[doc.id] = deferred; - } - public downloadDocNew(docID: string | MTDocument/* , method: ResponseMethod = 'blob' */): DownloadBlob { const doc = this.getDoc(docID); diff --git a/src/lib/appManagers/appMediaViewer.ts b/src/lib/appManagers/appMediaViewer.ts index e8da9936..28e8a0b2 100644 --- a/src/lib/appManagers/appMediaViewer.ts +++ b/src/lib/appManagers/appMediaViewer.ts @@ -13,6 +13,11 @@ import LazyLoadQueue from "../../components/lazyLoadQueue"; import appForward from "../../components/appForward"; import { isSafari, mediaSizes } from "../config"; import appAudio from "../../components/appAudio"; +import { deferredPromise } from "../polyfill"; +import { MTDocument } from "../../types"; + +// TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию +// TODO: картинки "обрезаются" если возвращаются или появляются с места, где есть их перекрытие (топбар, поле ввода) export class AppMediaViewer { public wholeDiv = document.querySelector('.media-viewer-whole') as HTMLDivElement; @@ -32,6 +37,7 @@ export class AppMediaViewer { public currentMessageID = 0; private preloader: ProgressivePreloader = null; + private preloaderStreamable: ProgressivePreloader = null; private lastTarget: HTMLElement = null; private prevTargets: { @@ -43,8 +49,6 @@ export class AppMediaViewer { //private loadMore: () => void = null; public log: ReturnType; - public onKeyDownBinded: any; - public onClickBinded: any; private peerID = 0; private loadMediaPromiseUp: Promise = null; @@ -58,18 +62,21 @@ export class AppMediaViewer { private pageEl = document.getElementById('page-chats') as HTMLDivElement; private setMoverPromise: Promise; + private setMoverAnimationPromise: Promise; private lazyLoadQueue: LazyLoadQueue; constructor() { this.log = logger('AMV'); this.preloader = new ProgressivePreloader(); + + this.preloaderStreamable = new ProgressivePreloader(undefined, false); + this.preloaderStreamable.preloader.classList.add('preloader-streamable'); + this.lazyLoadQueue = new LazyLoadQueue(undefined, true); parseMenuButtonsTo(this.buttons, this.wholeDiv.querySelectorAll(`[class*='menu']`) as NodeListOf); - this.onKeyDownBinded = this.onKeyDown.bind(this); - const close = (e: MouseEvent) => { cancelEvent(e); //this.overlaysDiv.classList.remove('active'); @@ -97,10 +104,10 @@ export class AppMediaViewer { }, 200); } - window.removeEventListener('keydown', this.onKeyDownBinded); + window.removeEventListener('keydown', this.onKeyDown); }; - [this.buttons.close, this.buttons["mobile-close"]].forEach(el => { + [this.buttons.close, this.buttons["mobile-close"], this.preloaderStreamable.preloader].forEach(el => { el.addEventListener('click', close); }); @@ -130,25 +137,8 @@ export class AppMediaViewer { } }); - const download = (e: MouseEvent) => { - let message = appMessagesManager.getMessage(this.currentMessageID); - if(message.media.photo) { - appPhotosManager.savePhotoFile(message.media.photo); - } else { - let document: any = null; - - if(message.media.webpage) document = message.media.webpage.document; - else document = message.media.document; - - if(document) { - console.log('will save document:', document); - appDocsManager.saveDocFile(document.id); - } - } - }; - [this.buttons.download, this.buttons["menu-download"]].forEach(el => { - el.addEventListener('click', download); + el.addEventListener('click', this.onClickDownload); }); const forward = (e: MouseEvent) => { @@ -159,31 +149,50 @@ export class AppMediaViewer { el.addEventListener('click', forward); }); - this.onClickBinded = (e: MouseEvent) => { - let target = e.target as HTMLElement; - if(target.tagName == 'A') return; - cancelEvent(e); - - let mover: HTMLElement = null; - ['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author'].find(s => { - try { - mover = findUpClassName(target, s); - if(mover) return true; - } catch(err) {return false;} - }); - - if(/* target == this.mediaViewerDiv */!mover || target.tagName == 'IMG' || target.tagName == 'image') { - this.buttons.close.click(); - } - }; - - this.wholeDiv.addEventListener('click', this.onClickBinded); + this.wholeDiv.addEventListener('click', this.onClick); //this.content.mover.addEventListener('click', this.onClickBinded); //this.content.mover.append(this.buttons.prev, this.buttons.next); this.setNewMover(); } - public onKeyDown(e: KeyboardEvent) { + onClickDownload = (e: MouseEvent) => { + const message = appMessagesManager.getMessage(this.currentMessageID); + if(message.media.photo) { + appPhotosManager.savePhotoFile(message.media.photo); + } else { + let document: MTDocument = null; + + if(message.media.webpage) document = message.media.webpage.document; + else document = message.media.document; + + if(document) { + //console.log('will save document:', document); + appDocsManager.saveDocFile(document); + } + } + }; + + onClick = (e: MouseEvent) => { + if(this.setMoverAnimationPromise) return; + + const target = e.target as HTMLElement; + if(target.tagName == 'A') return; + cancelEvent(e); + + let mover: HTMLElement = null; + ['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author'].find(s => { + try { + mover = findUpClassName(target, s); + if(mover) return true; + } catch(err) {return false;} + }); + + if(/* target == this.mediaViewerDiv */!mover || target.tagName == 'IMG' || target.tagName == 'image') { + this.buttons.close.click(); + } + }; + + onKeyDown = (e: KeyboardEvent) => { //this.log('onKeyDown', e); if(e.key == 'ArrowRight') { @@ -191,15 +200,17 @@ export class AppMediaViewer { } else if(e.key == 'ArrowLeft') { this.buttons.prev.click(); } - } + }; - public async setMoverToTarget(target: HTMLElement, closing = false, fromRight = 0) { + private async setMoverToTarget(target: HTMLElement, closing = false, fromRight = 0) { const mover = this.content.mover; if(!closing) { mover.innerHTML = ''; //mover.append(this.buttons.prev, this.buttons.next); } + + this.removeCenterFromMover(mover); const wasActive = fromRight !== 0; @@ -240,6 +251,17 @@ export class AppMediaViewer { top = rect.top; } + transform += `translate(${left}px,${top}px) `; + + /* if(wasActive) { + left = fromRight === 1 ? appPhotosManager.windowW / 2 : -(containerRect.width + appPhotosManager.windowW / 2); + transform += `translate(${left}px,-50%) `; + } else { + left = rect.left - (appPhotosManager.windowW / 2); + top = rect.top - (appPhotosManager.windowH / 2); + transform += `translate(${left}px,${top}px) `; + } */ + let aspecter: HTMLDivElement; if(target instanceof HTMLImageElement || target instanceof HTMLVideoElement) { if(mover.firstElementChild && mover.firstElementChild.classList.contains('media-viewer-aspecter')) { @@ -260,15 +282,13 @@ export class AppMediaViewer { } } else { aspecter = document.createElement('div'); - aspecter.classList.add('media-viewer-aspecter', 'disable-hover'); + aspecter.classList.add('media-viewer-aspecter'/* , 'disable-hover' */); mover.prepend(aspecter); } aspecter.style.cssText = `width: ${rect.width}px; height: ${rect.height}px; transform: scale(${containerRect.width / rect.width}, ${containerRect.height / rect.height});`; } - transform += `translate(${left}px,${top}px) `; - mover.style.width = containerRect.width + 'px'; mover.style.height = containerRect.height + 'px'; @@ -294,6 +314,13 @@ export class AppMediaViewer { let path: SVGPathElement; const isOut = target.classList.contains('is-out'); + const deferred = this.setMoverAnimationPromise = deferredPromise(); + const ret = {onAnimationEnd: deferred}; + + this.setMoverAnimationPromise.then(() => { + this.setMoverAnimationPromise = null; + }); + if(!closing) { let mediaElement: HTMLImageElement | HTMLVideoElement; let src: string; @@ -323,6 +350,10 @@ export class AppMediaViewer { newSvg.setAttributeNS(null, 'width', '' + width); newSvg.setAttributeNS(null, 'height', '' + height); + // нижние два свойства для масштабирования + newSvg.setAttributeNS(null, 'viewBox', `0 0 ${width} ${height}`); + newSvg.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid meet'); + newSvg.insertAdjacentHTML('beforeend', target.firstElementChild.outerHTML.replace(clipID, newClipID)); newSvg.insertAdjacentHTML('beforeend', target.lastElementChild.outerHTML.replace(clipID, newClipID)); @@ -393,6 +424,11 @@ export class AppMediaViewer { mover.classList.add(wasActive ? 'moving' : 'active'); }); } else { + /* if(mover.classList.contains('center')) { + mover.classList.remove('center'); + void mover.offsetLeft; // reflow + } */ + if(target instanceof SVGSVGElement) { path = mover.querySelector('path'); @@ -421,17 +457,21 @@ export class AppMediaViewer { mover.innerHTML = ''; mover.classList.remove('moving', 'active', 'hiding'); mover.style.display = 'none'; + + deferred.resolve(); }, delay); - return; + return ret; } //await new Promise((resolve) => setTimeout(resolve, 0)); await new Promise((resolve) => window.requestAnimationFrame(resolve)); + // чтобы проверить установленную позицию - раскомментировать //throw ''; mover.style.transform = `translate(${containerRect.left}px,${containerRect.top}px) scale(1,1)`; + //mover.style.transform = `translate(-50%,-50%) scale(1,1)`; if(aspecter) { this.setFullAspect(aspecter, containerRect, rect); @@ -449,22 +489,33 @@ export class AppMediaViewer { mover.classList.remove('moving'); if(aspecter) { // всё из-за видео, элементы управления скейлятся, так бы можно было этого не делать - if(mover.querySelector('video')) { + if(mover.querySelector('video') || true) { mover.classList.remove('active'); aspecter.style.cssText = ''; void mover.offsetLeft; // reflow } - aspecter.classList.remove('disable-hover'); + //aspecter.classList.remove('disable-hover'); } + // эти строки нужны для установки центральной позиции, в случае ресайза это будет нужно + mover.classList.add('center', 'no-transition'); + /* mover.style.left = mover.style.top = '50%'; + mover.style.transform = 'translate(-50%, -50%)'; + void mover.offsetLeft; // reflow */ + + // это уже нужно для будущих анимаций mover.classList.add('active'); delete mover.dataset.timeout; + + deferred.resolve(); }, delay); if(path) { this.sizeTailPath(path, containerRect, scaleX, delay, true, isOut, borderRadius); } + + return ret; } private setFullAspect(aspecter: HTMLDivElement, containerRect: DOMRect, rect: DOMRect) { @@ -493,7 +544,7 @@ export class AppMediaViewer { //} } - public sizeTailPath(path: SVGPathElement, rect: DOMRect, scaleX: number, delay: number, upscale: boolean, isOut: boolean, borderRadius: string) { + private sizeTailPath(path: SVGPathElement, rect: DOMRect, scaleX: number, delay: number, upscale: boolean, isOut: boolean, borderRadius: string) { const start = Date.now(); const {width, height} = rect; delay = delay / 2; @@ -521,9 +572,21 @@ export class AppMediaViewer { step(); } - public moveTheMover(mover: HTMLDivElement, toLeft = true) { + private removeCenterFromMover(mover: HTMLDivElement) { + if(mover.classList.contains('center')) { + const rect = mover.getBoundingClientRect(); + mover.style.transform = `translate(${rect.left}px,${rect.top}px)`; + mover.classList.remove('center'); + void mover.offsetLeft; // reflow + mover.classList.remove('no-transition'); + } + } + + private moveTheMover(mover: HTMLDivElement, toLeft = true) { const windowW = appPhotosManager.windowW; + this.removeCenterFromMover(mover); + //mover.classList.remove('active'); mover.classList.add('moving'); @@ -534,9 +597,8 @@ export class AppMediaViewer { const rect = mover.getBoundingClientRect(); const newTransform = mover.style.transform.replace(/translate\((.+?),/, (match, p1) => { - /////////this.log('replace func', match, p1); - let x = +p1.slice(0, -2); - x = toLeft ? -rect.width : windowW; + const x = toLeft ? -rect.width : windowW; + //const x = toLeft ? -(rect.right + (rect.width / 2)) : windowW / 2; return match.replace(p1, x + 'px'); }); @@ -549,7 +611,7 @@ export class AppMediaViewer { }, 350); } - public setNewMover() { + private setNewMover() { const newMover = document.createElement('div'); newMover.classList.add('media-viewer-mover'); @@ -560,8 +622,6 @@ export class AppMediaViewer { this.wholeDiv.append(newMover); } - newMover.addEventListener('click', this.onClickBinded); - return this.content.mover = newMover; } @@ -573,7 +633,7 @@ export class AppMediaViewer { } */ // нет смысла делать проверку для reverse и loadMediaPromise - public loadMoreMedia(older = true) { + private loadMoreMedia(older = true) { //if(!older && this.reverse) return; if(older && this.loadedAllMediaDown) return; @@ -648,7 +708,7 @@ export class AppMediaViewer { return promise; } - public updateMediaSource(target: HTMLElement, url: string, tagName: 'video' | 'img') { + private updateMediaSource(target: HTMLElement, url: string, tagName: 'video' | 'img') { //if(target instanceof SVGSVGElement) { const el = target.querySelector(tagName) as HTMLElement; renderImageFromUrl(el, url); @@ -737,8 +797,7 @@ export class AppMediaViewer { } let oldAvatar = this.author.avatarEl; - // @ts-ignore - this.author.avatarEl = this.author.avatarEl.cloneNode(); + this.author.avatarEl = (this.author.avatarEl.cloneNode() as AvatarElement); this.author.avatarEl.setAttribute('peer', '' + message.fromID); oldAvatar.parentElement.replaceChild(this.author.avatarEl, oldAvatar); @@ -749,7 +808,7 @@ export class AppMediaViewer { this.moveTheMover(this.content.mover, fromRight === 1); this.setNewMover(); } else { - window.addEventListener('keydown', this.onKeyDownBinded); + window.addEventListener('keydown', this.onKeyDown); this.wholeDiv.classList.add('active'); } @@ -767,18 +826,20 @@ export class AppMediaViewer { target = target.querySelector('img, video') || target; } */ + const preloader = media.supportsStreaming ? this.preloaderStreamable : this.preloader; + let setMoverPromise: Promise; if(isVideo) { ////////this.log('will wrap video', media, size); - setMoverPromise = this.setMoverToTarget(target, false, fromRight).then(() => { + setMoverPromise = this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => { //return; // set and don't move //if(wasActive) return; //return; const div = mover.firstElementChild && mover.firstElementChild.classList.contains('media-viewer-aspecter') ? mover.firstElementChild : mover; const video = mover.querySelector('video') || document.createElement('video'); - video.src = ''; + //video.src = ''; video.setAttribute('playsinline', ''); if(media.type == 'gif') { @@ -787,58 +848,104 @@ export class AppMediaViewer { video.loop = true; } + if(!video.parentElement) { + div.append(video); + } + + const canPlayThrough = new Promise((resolve) => { + video.addEventListener('canplaythrough', resolve, {once: true}); + }); + const createPlayer = () => { if(media.type != 'gif') { video.dataset.ckin = 'default'; video.dataset.overlay = '1'; - if(!video.parentElement) { - div.append(video); - } - // fix for simultaneous play appAudio.pause(); appAudio.willBePlayedAudio = null; - - new VideoPlayer(video, true, media.supportsStreaming); + + Promise.all([canPlayThrough, onAnimationEnd]).then(() => { + const player = new VideoPlayer(video, true, media.supportsStreaming); + /* div.append(video); + mover.append(player.wrapper); */ + }); } }; + + if(media.supportsStreaming) { + onAnimationEnd.then(() => { + if(video.readyState < video.HAVE_FUTURE_DATA) { + preloader.attach(mover, true); + } + + /* canPlayThrough.then(() => { + preloader.detach(); + }); */ + }); + + const attachCanPlay = () => { + video.addEventListener('canplay', () => { + //this.log('video waited and progress loaded'); + preloader.detach(); + video.parentElement.classList.remove('is-buffering'); + }, {once: true}); + }; + + video.addEventListener('waiting', (e) => { + const loading = video.networkState === video.NETWORK_LOADING; + const isntEnoughData = video.readyState < video.HAVE_FUTURE_DATA; + + //this.log('video waiting for progress', loading, isntEnoughData); + if(loading && isntEnoughData) { + attachCanPlay(); + + preloader.attach(mover, true); + + // поставлю класс для плеера, чтобы убрать большую иконку пока прелоадер на месте + video.parentElement.classList.add('is-buffering'); + } + }); + + attachCanPlay(); + } - if(!video.src || (media.url && media.url != video.src)) { + //if(!video.src || media.url != video.src) { const load = () => { - const promise = appDocsManager.downloadDoc(media.id); + const promise = media.supportsStreaming ? Promise.resolve() : appDocsManager.downloadDocNew(media); - //if(!streamable) { - this.preloader.attach(mover, true, promise); - //} + if(!media.supportsStreaming) { + onAnimationEnd.then(() => { + preloader.attach(mover, true, promise); + }); + } - promise.then(async() => { + (promise as Promise).then(async() => { if(this.currentMessageID != message.mid) { this.log.warn('media viewer changed video'); return; } const url = media.url; - if(target instanceof SVGSVGElement && (video.parentElement || !isSafari)) { // if video exists - if(!video.parentElement) { + if(target instanceof SVGSVGElement/* && (video.parentElement || !isSafari) */) { // if video exists + //if(!video.parentElement) { div.firstElementChild.lastElementChild.append(video); - } + //} this.updateMediaSource(mover, url, 'video'); - //this.updateMediaSource(target, url, 'source'); } else { //const promise = new Promise((resolve) => video.addEventListener('loadeddata', resolve, {once: true})); renderImageFromUrl(video, url); //await promise; - const first = div.firstElementChild as HTMLImageElement; + /* const first = div.firstElementChild as HTMLImageElement; if(!(first instanceof HTMLVideoElement) && first) { first.remove(); } if(!video.parentElement) { div.prepend(video); - } + } */ } // я хз что это такое, видео появляются просто чёрными и не включаются без этого кода снизу @@ -861,17 +968,19 @@ export class AppMediaViewer { load, wasSeen: true }); - } else createPlayer(); + //} else createPlayer(); }); } else { - setMoverPromise = this.setMoverToTarget(target, false, fromRight).then(() => { + setMoverPromise = this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => { //return; // set and don't move //if(wasActive) return; //return; let load = () => { let cancellablePromise = appPhotosManager.preloadPhoto(media.id, size); - this.preloader.attach(mover, true, cancellablePromise); + onAnimationEnd.then(() => { + this.preloader.attach(mover, true, cancellablePromise); + }); cancellablePromise.then(() => { if(this.currentMessageID != message.mid) { this.log.warn('media viewer changed photo'); @@ -914,7 +1023,9 @@ export class AppMediaViewer { }); } - return this.setMoverPromise = setMoverPromise.then(() => { + return this.setMoverPromise = setMoverPromise.catch(() => { + this.setMoverAnimationPromise = null; + }).finally(() => { this.setMoverPromise = null; }); } diff --git a/src/lib/config.ts b/src/lib/config.ts index 6eb56194..e8e21dd2 100644 --- a/src/lib/config.ts +++ b/src/lib/config.ts @@ -77,7 +77,8 @@ class MediaSizes { private handleResize() { const innerWidth = window.innerWidth; - this.isMobile = innerWidth <= 720; + //this.isMobile = innerWidth <= 720; + this.isMobile = innerWidth <= 896; this.active = this.isMobile ? this.sizes.handhelds : this.sizes.desktop; /* if(this.isMobile) { diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index 49f7c50f..d4a21d46 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -1,4 +1,4 @@ -import { cancelEvent } from "./utils"; +import { cancelEvent, whichChild } from "./utils"; export class ProgressLine { public container: HTMLDivElement; @@ -179,7 +179,7 @@ export class MediaProgressLine extends ProgressLine { const scrubTime = super.scrub(e); this.media.currentTime = scrubTime; return scrubTime; - }; + } protected setLoadProgress() { const buf = this.media.buffered; @@ -249,6 +249,9 @@ export default class VideoPlayer { public progress: MediaProgressLine; private skin: string; + /* private videoParent: HTMLElement; + private videoWhichChild: number; */ + constructor(public video: HTMLVideoElement, play = false, streamable = false) { this.wrapper = document.createElement('div'); this.wrapper.classList.add('ckin__player'); @@ -353,11 +356,19 @@ export default class VideoPlayer { this.togglePlay(); }); }); - + video.addEventListener('click', () => { this.togglePlay(); }); + /* player.addEventListener('click', (e) => { + if(e.target != player) { + return; + } + + this.togglePlay(); + }); */ + video.addEventListener('play', () => { this.updateButton(toggle); }); @@ -513,11 +524,21 @@ export default class VideoPlayer { public toggleFullScreen(fullScreenButton: HTMLElement) { // alternative standard method - let player = this.wrapper; - + const player = this.wrapper; + // @ts-ignore if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { player.classList.add('ckin__fullscreen'); + + /* const videoParent = this.video.parentElement; + const videoWhichChild = whichChild(this.video); + const needVideoRemount = videoParent != player; + + if(needVideoRemount) { + this.videoParent = videoParent; + this.videoWhichChild = videoWhichChild; + player.prepend(this.video); + } */ if(player.requestFullscreen) { player.requestFullscreen(); @@ -540,6 +561,18 @@ export default class VideoPlayer { fullScreenButton.setAttribute('title', 'Exit Full Screen'); } else { player.classList.remove('ckin__fullscreen'); + + /* if(this.videoParent) { + const {videoWhichChild, videoParent} = this; + if(!videoWhichChild) { + videoParent.prepend(this.video); + } else { + videoParent.insertBefore(this.video, videoParent.children[videoWhichChild]); + } + + this.videoParent = null; + this.videoWhichChild = -1; + } */ // @ts-ignore if(document.cancelFullScreen) { diff --git a/src/lib/mtproto/mtproto.service.ts b/src/lib/mtproto/mtproto.service.ts index 537a2f2d..caebddc2 100644 --- a/src/lib/mtproto/mtproto.service.ts +++ b/src/lib/mtproto/mtproto.service.ts @@ -257,12 +257,15 @@ const onFetch = (event: FetchEvent): void => { headers['Content-Range'] = `bytes ${offset}-${offset + ab.byteLength - 1}/${info.size || '*'}`; headers['Content-Length'] = `${ab.byteLength}`; } - - resolve(new Response(ab, { - status: 206, - statusText: 'Partial Content', - headers, - })); + + // simulate slow connection + //setTimeout(() => { + resolve(new Response(ab, { + status: 206, + statusText: 'Partial Content', + headers, + })); + //}, 2.5e3); }).catch(err => {}); }) ])); diff --git a/src/pages/pagesManager.ts b/src/pages/pagesManager.ts index 77f4f5f4..21263663 100644 --- a/src/pages/pagesManager.ts +++ b/src/pages/pagesManager.ts @@ -11,7 +11,7 @@ class PagesManager { constructor() { this.pagesDiv = document.getElementById('auth-pages') as HTMLDivElement; - this.selectTab = horizontalMenu(null, this.pagesDiv.firstElementChild as HTMLDivElement, null, null, 420); + this.selectTab = horizontalMenu(null, this.pagesDiv.firstElementChild as HTMLDivElement, null, null); } public setPage(page: Page) { diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index 22b8599b..76995955 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -220,6 +220,12 @@ } } + + &.is-buffering { + > .toggle { + display: none !important; + } + } } @media (max-width: 480px) { diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 0cf4fe46..59afb5d7 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -20,9 +20,21 @@ } li { - padding: 9px 16px 7px 16px; + height: 43px; + padding: 0 16px; display: flex; justify-content: center; + align-items: center; + + > span:first-child { + overflow: visible; + + i { + bottom: calc(-.625rem - -2px); + padding-right: 1rem !important; + margin-left: -.5rem !important; + } + } } &__stripe { @@ -38,7 +50,6 @@ font-weight: 500; color: white; line-height: 22px; - margin-top: 3px; min-width: 20px; padding: 0 6px; diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index 818da95e..cc893b83 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -177,10 +177,15 @@ $move-duration: .35s; //transition: .5s all; left: 0; top: 0; + /* left: 50%; + top: 50%; */ transform-origin: top left; overflow: hidden; //border-radius: 0; + max-width: 100%; + max-height: 100%; + .ckin__player { width: 100%; height: 100%; @@ -189,6 +194,11 @@ $move-duration: .35s; top: 0; } + > svg { + width: 100%; + height: 100%; + } + img, video { width: 100%; height: 100%; @@ -210,6 +220,20 @@ $move-duration: .35s; transition: $move-duration transform ease; } + /* &.center { + transition: none !important; + } */ + + &.no-transition { + transition: none !important; + } + + &.center { + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + } + &.hiding { img, video { transition: $open-duration opacity; diff --git a/src/scss/partials/_preloader.scss b/src/scss/partials/_preloader.scss new file mode 100644 index 00000000..32516398 --- /dev/null +++ b/src/scss/partials/_preloader.scss @@ -0,0 +1,147 @@ +.preloader { + &-circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + /* width: 100%; */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + &-path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */; + stroke-linecap: round; + stroke: white; + stroke-width: 3; + } + + &-container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: 50px; + height: 50px; + /* cursor: pointer; */ + } +} + +.preloader-container { + .you-spin-me-round { + width: 100%; + height: 100%; + animation: rotate 2s linear infinite; + } + + .preloader-circular { + animation: none; + cursor: pointer; + background-color: rgba(0, 0, 0, .7); + border-radius: 50%; + width: 100%; + height: 100%; + } + + .preloader-path-new { + stroke-dasharray: 5, 200; + stroke-dashoffset: 0; + transition: stroke-dasharray 400ms ease-in-out; + stroke-linecap: round; + stroke: white; + stroke-width: 1.5; + } + + &.preloader-swing { + cursor: default; + + .preloader-circular { + cursor: default; + } + + .preloader-path-new { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dashNew 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */; + } + } + + .preloader-close { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + color: #fff; + stroke: #fff; + width: 34%; + height: 34%; + + html.no-touch &:hover { + background: none; + } + } + + &.preloader-streamable { + &, svg { + cursor: pointer !important; + } + + &:after { + content: ""; + position: absolute; + width: .8125rem; + height: .8125rem; + border-radius: .125rem; + background-color: #fff; + left: 50%; + top: 50%; + transform: translate3d(-50%,-50%,0); + } + } +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} + +@keyframes dashNew { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -286%; + } +} \ No newline at end of file diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index 7d83234b..b3da6867 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -191,6 +191,7 @@ height: 120px; margin: 1px auto 10px; font-size: 2.5rem !important; + flex: 0 0 auto; @include respond-to(handhelds) { margin: 0 auto 10px; @@ -211,6 +212,11 @@ z-index: 2; background-color: #fff; + i { + padding-right: 1.5rem !important; + margin-left: -.75rem !important; + } + &-content { //min-height: 100%; min-height: calc(100% - 49px); diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss index 8c779e3f..ca653f15 100644 --- a/src/scss/partials/_slider.scss +++ b/src/scss/partials/_slider.scss @@ -1,3 +1,5 @@ +$slider-time: .25s; + .menu-horizontal { color: $color-gray; border-bottom: 1px solid $lightgrey; @@ -27,14 +29,24 @@ font-weight: 500; position: relative; border-top-left-radius: 6px; - border-top-right-radius: 6px; + border-top-right-radius: 6px; + + > span { + position: relative; + display: inline-flex; + align-items: center; + } &.active { color: $color-blue; + + i { + opacity: 1; + } } } - &__stripe { + /* &__stripe { position: absolute; background: $color-blue; left: 0; @@ -52,6 +64,26 @@ @include respond-to(handhelds) { display: none; } + } */ + + i { + position: absolute; + bottom: calc(-.625rem - 2px); + left: 0; + opacity: 0; + background-color: $color-blue; + height: .1875rem; + width: 100%; + border-radius: .1875rem .1875rem 0 0; + pointer-events: none; + padding-right: .5rem; + margin-left: -.25rem; + box-sizing: content-box; + transform-origin: left; + + &.animate { + transition: transform $slider-time; + } } } @@ -74,7 +106,7 @@ width: 100%; max-width: 100%; //transition: transform .42s, filter .42s; - transition: transform .2s, filter .2s; + transition: transform $slider-time, filter $slider-time; display: none; flex-direction: column; position: relative; @@ -98,4 +130,8 @@ position: relative; } } + + &[data-slider="tabs"] { + transition: transform $slider-time; + } } \ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index 80089c68..49d19cc2 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -16,13 +16,16 @@ $lightgrey: #dadce0; $light: rgba($color-gray, 0.08); -$small-screen: 720px; +//$small-screen: 720px; +$small-screen: 896px; +//$small-screen: 900px; $large-screen: 1680px; //$large-screen: 16800px; @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: $small-screen) { @content; } + //@media only screen and (orientation: landscape) and (max-device-width: 896px) { @content; } // iPhone 11 Pro Max } @else if $media == medium-screens { @media only screen and (min-width: $small-screen + 1) and (max-width: $large-screen) { @content; } @@ -49,6 +52,7 @@ $large-screen: 1680px; @import "partials/slider"; @import "partials/selector"; @import "partials/gifsMasonry"; +@import "partials/preloader"; @import "partials/popups/popup"; @import "partials/popups/editAvatar"; @@ -1188,136 +1192,6 @@ input:focus, button:focus { } } -.preloader { - &-circular { - animation: rotate 2s linear infinite; - height: 100%; - transform-origin: center center; - /* width: 100%; */ - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - } - - &-path { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - animation: dash 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */; - stroke-linecap: round; - stroke: white; - stroke-width: 3; - } - - &-container { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - width: 50px; - height: 50px; - /* cursor: pointer; */ - } -} - -.preloader-container { - .you-spin-me-round { - width: 100%; - height: 100%; - animation: rotate 2s linear infinite; - } - - .preloader-circular { - animation: none; - cursor: pointer; - background-color: rgba(0, 0, 0, .7); - border-radius: 50%; - width: 100%; - height: 100%; - } - - .preloader-path-new { - stroke-dasharray: 5, 200; - stroke-dashoffset: 0; - transition: stroke-dasharray 400ms ease-in-out; - stroke-linecap: round; - stroke: white; - stroke-width: 1.5; - } - - &.preloader-swing { - cursor: default; - - .preloader-circular { - cursor: default; - } - - .preloader-path-new { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - animation: dashNew 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */; - } - } - - .preloader-close { - cursor: pointer; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - margin: auto; - color: #fff; - stroke: #fff; - width: 34%; - height: 34%; - - html.no-touch &:hover { - background: none; - } - } -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes dash { - 0% { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -35px; - } - 100% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -124px; - } -} - -@keyframes dashNew { - 0% { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -35px; - } - 100% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -286%; - } -} - .emoji { display: inline-block; /* width: 100%;