diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index 32c64282..c464a2d0 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -1316,7 +1316,26 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet this.content.main.prepend(stub); */ this.content.caption = document.createElement('div'); - this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */); + this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption', MEDIA_VIEWER_CLASSNAME + '-appear'/* , 'media-viewer-stub' */); + + let captionTimeout: number; + this.content.caption.addEventListener('touchstart', () => { + if(!mediaSizes.isMobile) return; + + this.content.caption.classList.add('is-focused'); + + if(captionTimeout) { + clearTimeout(captionTimeout); + captionTimeout = undefined; + } + + document.addEventListener('touchend', () => { + captionTimeout = window.setTimeout(() => { + captionTimeout = undefined; + this.content.caption.classList.remove('is-focused'); + }, 1000); + }, {once: true}); + }); new Scrollable(this.content.caption); diff --git a/src/components/preloader.ts b/src/components/preloader.ts index 8a2a55de..6085685f 100644 --- a/src/components/preloader.ts +++ b/src/components/preloader.ts @@ -31,7 +31,7 @@ export default class ProgressivePreloader { private tryAgainOnFail = true; private attachMethod: 'append' | 'prepend' = 'append'; - public loadFunc: () => {download: CancellablePromise}; + public loadFunc: (e?: Event) => {download: CancellablePromise}; private totalLength: number; @@ -120,7 +120,7 @@ export default class ProgressivePreloader { if(this.preloader.classList.contains('manual')) { if(this.loadFunc) { - this.loadFunc(); + this.loadFunc(e); } } else { if(this.promise && this.promise.cancel) { diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 55698344..5ddd5403 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -575,11 +575,14 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS } }; - const load = () => { + const load = (e: Event) => { + const save = !e || e.isTrusted; const doc = appDocsManager.getDoc(docDiv.dataset.docId); let download: DownloadBlob; const queueId = appImManager.chat.bubbles ? appImManager.chat.bubbles.lazyLoadQueue.queueId : undefined; - if(doc.type === 'pdf') { + if(!save) { + download = appDocsManager.downloadDoc(doc, queueId); + } else if(doc.type === 'pdf') { download = appDocsManager.downloadDoc(doc, queueId); download.then(() => { const cacheContext = appDownloadManager.getCacheContext(doc); @@ -624,7 +627,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS if(preloader) { preloader.onClick(e); } else { - load(); + load(e); } }); diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index 526c79a2..20de99f2 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -123,15 +123,16 @@ bottom: .75rem; left: 0; right: 0; - padding: 0 .5rem; + padding: .5rem .5rem 0; // background-color: rgba(0, 0, 0, .6); // border-radius: 8px; opacity: 0; line-height: var(--line-height); white-space: pre-wrap; + background-color: transparent; @include animation-level(2) { - transition: opacity var(--open-duration); + transition: opacity var(--open-duration), background-color var(--open-duration); } a { @@ -175,12 +176,22 @@ } @include animation-level(2) { - transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out; + transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out, background-color var(--open-duration); } .media-viewer-whole.has-video-controls & { transform: translate3d(0, -69px, 0); } + + @include hover() { + background-color: #000; + opacity: 1 !important; + } + } + + &.is-focused { + background-color: #000; + opacity: 1 !important; } }