diff --git a/src/components/scrollable.ts b/src/components/scrollable.ts index 1bbd7970..0beda155 100644 --- a/src/components/scrollable.ts +++ b/src/components/scrollable.ts @@ -66,6 +66,23 @@ export default class Scrollable { this.scrollType = 'scrollWidth'; this.scrollSide = 'scrollLeft'; this.clientAxis = 'clientX'; + + let scrollHorizontally = (e: any) => { + e = window.event || e; + var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); + this.container.scrollLeft -= (delta * 20); + e.preventDefault(); + }; + if(this.container.addEventListener) { + // IE9, Chrome, Safari, Opera + this.container.addEventListener("mousewheel", scrollHorizontally, false); + // Firefox + this.container.addEventListener("DOMMouseScroll", scrollHorizontally, false); + } else { + // IE 6/7/8 + // @ts-ignore + this.container.attachEvent("onmousewheel", scrollHorizontally); + } } else if(y) { this.container.classList.add('scrollable-y'); this.type = 'height'; diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index c75d0c79..70879213 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -45,7 +45,7 @@ export type MTPhotoSize = { }; export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader, controls = true, round = false) { - if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') { + if(!container.firstElementChild || (container.firstElementChild.tagName != 'IMG' && container.firstElementChild.tagName != 'VIDEO')) { let size = appPhotosManager.setAttachmentSize(doc, container); } @@ -220,6 +220,13 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement promise = null; } }); + + /* apiFileManager.getDownloadedFile(Object.assign({}, doc, {_: 'inputDocumentFileLocation'})).then(() => { + downloadDiv.classList.remove('downloading'); + downloadDiv.remove(); + }, () => { + + }); */ return docDiv; } diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 2ea149d4..14b7f064 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -475,13 +475,14 @@ class ChatInput { noWebPage: this.noWebPage, webPage: this.willSendWebPage }); + + appImManager.scroll.scrollTop = appImManager.scroll.scrollHeight; } this.editMsgID = 0; this.replyToMsgID = 0; this.noWebPage = false; this.replyElements.container.classList.remove('active'); - appImManager.scroll.scrollTop = appImManager.scroll.scrollHeight; this.willSendWebPage = null; this.messageInput.innerText = ''; @@ -815,7 +816,7 @@ export class AppImManager { return; } - appMediaViewer.openMedia(message, true); + appMediaViewer.openMedia(message, true, target as HTMLImageElement); } //console.log('chatInner click', e); diff --git a/src/lib/appManagers/appMediaViewer copy.ts b/src/lib/appManagers/appMediaViewer copy.ts new file mode 100644 index 00000000..6fea3f30 --- /dev/null +++ b/src/lib/appManagers/appMediaViewer copy.ts @@ -0,0 +1,330 @@ +//import { MTDocument, ProgressivePreloader, wrapVideo } from "../../components/misc"; +import appPeersManager from "./appPeersManager"; +import appDialogsManager from "./appDialogsManager"; +import appPhotosManager from "./appPhotosManager"; +import appSidebarRight from "./appSidebarRight"; +import { $rootScope } from "../utils"; +import appMessagesManager from "./appMessagesManager"; +//import { CancellablePromise } from "../mtproto/apiFileManager"; +import { RichTextProcessor } from "../richtextprocessor"; +import { logger } from "../polyfill"; +import ProgressivePreloader from "../../components/preloader"; +import { wrapVideo } from "../../components/wrappers"; + +export class AppMediaViewer { + private overlaysDiv = document.querySelector('.overlays') as HTMLDivElement; + private author = { + avatarEl: this.overlaysDiv.querySelector('.user-avatar') as HTMLDivElement, + nameEl: this.overlaysDiv.querySelector('.media-viewer-name') as HTMLDivElement, + date: this.overlaysDiv.querySelector('.media-viewer-date') as HTMLDivElement + }; + private buttons = { + delete: this.overlaysDiv.querySelector('.media-viewer-delete-button') as HTMLDivElement, + forward: this.overlaysDiv.querySelector('.media-viewer-forward-button') as HTMLDivElement, + download: this.overlaysDiv.querySelector('.media-viewer-download-button') as HTMLDivElement, + close: this.overlaysDiv.querySelector('.media-viewer-close-button') as HTMLDivElement, + prev: this.overlaysDiv.querySelector('.media-viewer-switcher-left') as HTMLDivElement, + next: this.overlaysDiv.querySelector('.media-viewer-switcher-right') as HTMLDivElement, + }; + private content = { + container: this.overlaysDiv.querySelector('.media-viewer-media') as HTMLDivElement, + caption: this.overlaysDiv.querySelector('.media-viewer-caption') as HTMLDivElement, + mover: this.overlaysDiv.querySelector('.media-viewer-mover') as HTMLDivElement + }; + + private reverse = false; + public currentMessageID = 0; + private higherMsgID: number | undefined = 0; + private lowerMsgID: number | undefined = 0; + private preloader: ProgressivePreloader = null; + private lastTarget: HTMLElement = null; + + public log: ReturnType; + + constructor() { + this.log = logger('AMV'); + this.preloader = new ProgressivePreloader(); + + this.buttons.close.addEventListener('click', () => { + //this.overlaysDiv.classList.remove('active'); + this.content.container.innerHTML = ''; + this.currentMessageID = 0; + + this.setMoverToTarget(this.lastTarget, true); + }); + + this.buttons.prev.addEventListener('click', () => { + let id = this.reverse ? this.lowerMsgID : this.higherMsgID; + if(id) { + this.openMedia(appMessagesManager.getMessage(id), this.reverse); + } else { + this.buttons.prev.style.display = 'none'; + } + }); + + this.buttons.next.addEventListener('click', () => { + let id = this.reverse ? this.higherMsgID : this.lowerMsgID; + if(id) { + this.openMedia(appMessagesManager.getMessage(id), this.reverse); + } else { + this.buttons.next.style.display = 'none'; + } + }); + + this.buttons.download.addEventListener('click', () => { + let message = appMessagesManager.getMessage(this.currentMessageID); + appPhotosManager.downloadPhoto(message.media.photo.id); + }); + /* this.buttons.prev.onclick = (e) => { + let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice(); + + let message: any; + + if(!this.reverse) { + for(let mid of history) { + if(mid > this.currentMessageID) { + let _message = appMessagesManager.getMessage(mid); + if(_message.media && _message.media.photo) { + message = _message; + } + } else break; + } + } else { + for(let mid of history) { + if(mid < this.currentMessageID) { + let _message = appMessagesManager.getMessage(mid); + if(_message.media && _message.media.photo) { + message = _message; + break; + } + } + } + } + + if(message) { + this.openMedia(message.media.photo, message.mid, this.reverse); + } else { + this.buttons.prev.style.display = 'none'; + } + }; + + this.buttons.next.onclick = (e) => { + let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice(); + + let message: any; + + if(this.reverse) { + for(let mid of history) { + if(mid > this.currentMessageID) { + let _message = appMessagesManager.getMessage(mid); + if(_message.media && _message.media.photo) { + message = _message; + } + } else break; + } + } else { + for(let mid of history) { + if(mid < this.currentMessageID) { + let _message = appMessagesManager.getMessage(mid); + if(_message.media && _message.media.photo) { + message = _message; + break; + } + } + } + } + + if(message) { + this.openMedia(message.media.photo, message.mid, this.reverse); + } else { + this.buttons.next.style.display = 'none'; + } + }; */ + } + + public setMoverToTarget(target: HTMLElement, closing = false) { + let mover = this.content.mover; + + if(!closing) { + mover.innerHTML = ''; + } + + let rect = target.getBoundingClientRect(); + mover.style.transform = `translate(${rect.left}px, ${rect.top}px)`; + mover.style.width = rect.width + 'px'; + mover.style.height = rect.height + 'px'; + + if(!closing) { + let img: HTMLImageElement; + let video: HTMLVideoElement; + + if(target.tagName == 'DIV') { // means backgrounded with cover + //img.style.objectFit = 'cover'; + img = new Image(); + img.src = target.style.backgroundImage.slice(5, -2); + } else if(target.tagName == 'IMG') { + img = new Image(); + img.src = (target as HTMLImageElement).src; + img.style.objectFit = 'contain'; + }/* else if(target.tagName == 'VIDEO') { + let video = document.createElement('video'); + let source = document.createElement('source'); + source.src = target.querySelector('source').src; + video.append(source); + } */ + + if(img) { + mover.appendChild(img); + } else if(video) { + mover.appendChild(video); + } + + mover.style.display = ''; + mover.classList.add('active'); + } else { + setTimeout(() => { + this.overlaysDiv.classList.remove('active'); + mover.classList.remove('active'); + mover.style.display = 'none'; + }, 250); + } + } + + public openMedia(message: any, reverse = false, target?: HTMLElement) { + this.log('openMedia doc:', message); + let media = message.media.photo || message.media.document || message.media.webpage.document || message.media.webpage.photo; + + let isVideo = media.mime_type == 'video/mp4'; + + this.currentMessageID = message.mid; + this.reverse = reverse; + + let container = this.content.container; + + if(container.firstElementChild) { + container.innerHTML = ''; + } + + let date = new Date(media.date * 1000); + let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + + let dateStr = months[date.getMonth()] + ' ' + date.getDate() + ' at '+ date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2); + this.author.date.innerText = dateStr; + + let name = appPeersManager.getPeerTitle(message.fromID); + this.author.nameEl.innerHTML = name; + + if(message.message) { + this.content.caption.innerHTML = RichTextProcessor.wrapRichText(message.message, { + entities: message.totalEntities + }); + } else { + this.content.caption.innerHTML = ''; + } + + appDialogsManager.loadDialogPhoto(this.author.avatarEl, message.fromID); + + this.overlaysDiv.classList.add('active'); + + container.classList.add('loading'); + + // ok set + let mover = this.content.mover; + + let rect = target.getBoundingClientRect(); + + this.lastTarget = target; + this.setMoverToTarget(target); + let maxWidth = appPhotosManager.windowW - 16; + let maxHeight = appPhotosManager.windowH - 100; + if(isVideo) { + //this.preloader.attach(container); + //this.preloader.setProgress(75); + + this.log('will wrap video'); + + let size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight); + let containerRect = container.getBoundingClientRect(); + let scaleX = containerRect.width / rect.width; + let scaleY = containerRect.height / rect.height; + mover.style.transform = `translate(${containerRect.left}px, ${containerRect.top}px) scale(${scaleX}, ${scaleY})`; + wrapVideo.call(this, media, mover, message, false, this.preloader).then(() => { + if(this.currentMessageID != message.mid) { + this.log.warn('media viewer changed video'); + return; + } + }); + + + /* appPhotosManager.setAttachmentSize(media, container, appPhotosManager.windowW, appPhotosManager.windowH); + wrapVideo.call(this, media, container, message, false, this.preloader).then(() => { + if(this.currentMessageID != message.mid) { + this.log.warn('media viewer changed video'); + return; + } + + container.classList.remove('loading'); + container.style.width = ''; + container.style.height = ''; + }); */ + } else { + let size = appPhotosManager.setAttachmentSize(media.id, container, maxWidth, maxHeight); + + let containerRect = container.getBoundingClientRect(); + let scaleX = containerRect.width / rect.width; + let scaleY = containerRect.height / rect.height; + mover.style.transform = `translate(${containerRect.left}px, ${containerRect.top}px) scale(${scaleX}, ${scaleY})`; + + this.preloader.attach(mover); + //this.preloader.setProgress(75); + + let cancellablePromise = appPhotosManager.preloadPhoto(media.id, size); + cancellablePromise.then((blob) => { + if(this.currentMessageID != message.mid) { + this.log.warn('media viewer changed photo'); + return; + } + + this.log('indochina', blob); + + let image = mover.firstElementChild as HTMLImageElement || new Image(); + image.src = URL.createObjectURL(blob); + mover.append(image); + + /* container.classList.remove('loading'); + + container.style.width = ''; + container.style.height = ''; */ + + this.preloader.detach(); + }).catch(err => { + this.log.error(err); + }); + } + + let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice(); + let index = history.findIndex(m => m == message.mid); + let comparer = (mid: number) => { + let _message = appMessagesManager.getMessage(mid); + let media = _message.media; + + if(media && (media.photo || (media.document && ['video', 'gif'].indexOf(media.document.type) !== -1))) return true; + return false; + }; + + this.higherMsgID = history.slice(0, index).reverse().find(comparer); + this.lowerMsgID = history.slice(index + 1).find(comparer); + + if(this.reverse) { + this.buttons.prev.style.display = this.lowerMsgID !== undefined ? '' : 'none'; + this.buttons.next.style.display = this.higherMsgID !== undefined ? '' : 'none'; + } else { + this.buttons.prev.style.display = this.higherMsgID !== undefined ? '' : 'none'; + this.buttons.next.style.display = this.lowerMsgID !== undefined ? '' : 'none'; + } + + //console.log('prev and next', prevMsgID, nextMsgID); + } +} + +export default new AppMediaViewer(); diff --git a/src/lib/appManagers/appMediaViewer.ts b/src/lib/appManagers/appMediaViewer.ts index d8e08286..42c83de4 100644 --- a/src/lib/appManagers/appMediaViewer.ts +++ b/src/lib/appManagers/appMediaViewer.ts @@ -13,6 +13,7 @@ import { wrapVideo } from "../../components/wrappers"; export class AppMediaViewer { private overlaysDiv = document.querySelector('.overlays') as HTMLDivElement; + private mediaViewerDiv = this.overlaysDiv.firstElementChild as HTMLDivElement; private author = { avatarEl: this.overlaysDiv.querySelector('.user-avatar') as HTMLDivElement, nameEl: this.overlaysDiv.querySelector('.media-viewer-name') as HTMLDivElement, @@ -28,7 +29,8 @@ export class AppMediaViewer { }; private content = { container: this.overlaysDiv.querySelector('.media-viewer-media') as HTMLDivElement, - caption: this.overlaysDiv.querySelector('.media-viewer-caption') as HTMLDivElement + caption: this.overlaysDiv.querySelector('.media-viewer-caption') as HTMLDivElement, + mover: this.overlaysDiv.querySelector('.media-viewer-mover') as HTMLDivElement }; private reverse = false; @@ -37,6 +39,10 @@ export class AppMediaViewer { private lowerMsgID: number | undefined = 0; private preloader: ProgressivePreloader = null; + private lastTarget: HTMLElement = null; + private prevTarget: HTMLElement = null; + private nextTarget: HTMLElement = null; + public log: ReturnType; constructor() { @@ -44,12 +50,14 @@ export class AppMediaViewer { this.preloader = new ProgressivePreloader(); this.buttons.close.addEventListener('click', () => { - this.overlaysDiv.classList.remove('active'); + //this.overlaysDiv.classList.remove('active'); this.content.container.innerHTML = ''; this.currentMessageID = 0; + + this.setMoverToTarget(this.lastTarget, true); }); - this.buttons.prev.addEventListener('click', () => { + /* this.buttons.prev.addEventListener('click', () => { let id = this.reverse ? this.lowerMsgID : this.higherMsgID; if(id) { this.openMedia(appMessagesManager.getMessage(id), this.reverse); @@ -65,12 +73,37 @@ export class AppMediaViewer { } else { this.buttons.next.style.display = 'none'; } + }); */ + this.buttons.prev.addEventListener('click', () => { + let target = this.prevTarget; + if(target) { + target.click(); + } else { + this.buttons.prev.style.display = 'none'; + } + }); + + this.buttons.next.addEventListener('click', () => { + let target = this.nextTarget; + if(target) { + target.click(); + } else { + this.buttons.next.style.display = 'none'; + } }); this.buttons.download.addEventListener('click', () => { let message = appMessagesManager.getMessage(this.currentMessageID); appPhotosManager.downloadPhoto(message.media.photo.id); }); + + this.overlaysDiv.addEventListener('click', (e) => { + let target = e.target as HTMLElement; + + if(target == this.mediaViewerDiv || target.tagName == 'IMG') { + this.buttons.close.click(); + } + }); /* this.buttons.prev.onclick = (e) => { let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice(); @@ -137,15 +170,75 @@ export class AppMediaViewer { } }; */ } + + public setMoverToTarget(target: HTMLElement, closing = false) { + let mover = this.content.mover; + + if(!closing) { + mover.innerHTML = ''; + } + + let rect = target.getBoundingClientRect(); + let containerRect = this.content.container.getBoundingClientRect(); + let scaleX = rect.width / containerRect.width; + let scaleY = rect.height / containerRect.height; + mover.style.transform = `translate(${rect.left}px, ${rect.top}px) scale(${scaleX}, ${scaleY})`; + mover.style.width = containerRect.width + 'px'; + mover.style.height = containerRect.height + 'px'; + + if(!closing) { + let img: HTMLImageElement; + let video: HTMLVideoElement; + + if(target.tagName == 'DIV') { // means backgrounded with cover + //img.style.objectFit = 'cover'; + img = new Image(); + img.src = target.style.backgroundImage.slice(5, -2); + } else if(target.tagName == 'IMG') { + img = new Image(); + img.src = (target as HTMLImageElement).src; + img.style.objectFit = 'contain'; + } else if(target.tagName == 'VIDEO') { + video = document.createElement('video'); + let source = document.createElement('source'); + source.src = target.querySelector('source').src; + video.append(source); + } + + if(img) { + mover.appendChild(img); + } else if(video) { + mover.appendChild(video); + } + + mover.style.display = ''; + mover.classList.add('active'); + } else { + setTimeout(() => { + this.overlaysDiv.classList.remove('active'); + }, 125); + setTimeout(() => { + mover.innerHTML = ''; + mover.classList.remove('active'); + mover.style.display = 'none'; + }, 250); + } + + return () => { + mover.style.transform = `translate(${containerRect.left}px, ${containerRect.top}px) scale(1, 1)`; + }; + } - public openMedia(message: any, reverse = false) { - this.log('openMedia doc:', message); + public openMedia(message: any, reverse = false, target?: HTMLElement, prevTarget?: HTMLElement, nextTarget?: HTMLElement) { + this.log('openMedia doc:', message, prevTarget, nextTarget); let media = message.media.photo || message.media.document || message.media.webpage.document || message.media.webpage.photo; let isVideo = media.mime_type == 'video/mp4'; this.currentMessageID = message.mid; this.reverse = reverse; + this.prevTarget = prevTarget || null; + this.nextTarget = nextTarget || null; let container = this.content.container; @@ -176,13 +269,35 @@ export class AppMediaViewer { container.classList.add('loading'); + // ok set + let mover = this.content.mover; + + this.lastTarget = target; + //this.setMoverToTarget(target); + let maxWidth = appPhotosManager.windowW - 16; + let maxHeight = appPhotosManager.windowH - 100; if(isVideo) { //this.preloader.attach(container); //this.preloader.setProgress(75); - this.log('will wrap video'); + let size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight); + + this.log('will wrap video', media, size); + + let afterTimeout = this.setMoverToTarget(target); + + setTimeout(() => { + afterTimeout(); + + wrapVideo.call(this, media, mover, message, false, this.preloader).then(() => { + if(this.currentMessageID != message.mid) { + this.log.warn('media viewer changed video'); + return; + } + }); + }); - appPhotosManager.setAttachmentSize(media, container, appPhotosManager.windowW, appPhotosManager.windowH); + /* appPhotosManager.setAttachmentSize(media, container, appPhotosManager.windowW, appPhotosManager.windowH); wrapVideo.call(this, media, container, message, false, this.preloader).then(() => { if(this.currentMessageID != message.mid) { this.log.warn('media viewer changed video'); @@ -192,41 +307,37 @@ export class AppMediaViewer { container.classList.remove('loading'); container.style.width = ''; container.style.height = ''; - }); + }); */ } else { - let size = appPhotosManager.setAttachmentSize(media.id, container, appPhotosManager.windowW, appPhotosManager.windowH); - - this.preloader.attach(container); - //this.preloader.setProgress(75); + let size = appPhotosManager.setAttachmentSize(media.id, container, maxWidth, maxHeight); + + let afterTimeout = this.setMoverToTarget(target); - let cancellablePromise = appPhotosManager.preloadPhoto(media.id, size); - cancellablePromise.then((blob) => { - if(this.currentMessageID != message.mid) { - this.log.warn('media viewer changed photo'); - return; - } - - this.log('indochina', blob); - if(container.firstElementChild) { - container.firstElementChild.remove(); - } - - let image = new Image(); - image.src = URL.createObjectURL(blob); - container.append(image); + setTimeout(() => { + afterTimeout(); + this.preloader.attach(mover); - container.classList.remove('loading'); - - container.style.width = ''; - container.style.height = ''; - - this.preloader.detach(); - }).catch(err => { - this.log.error(err); - }); + let cancellablePromise = appPhotosManager.preloadPhoto(media.id, size); + cancellablePromise.then((blob) => { + if(this.currentMessageID != message.mid) { + this.log.warn('media viewer changed photo'); + return; + } + + this.log('indochina', blob); + + let image = mover.firstElementChild as HTMLImageElement || new Image(); + image.src = URL.createObjectURL(blob); + mover.append(image); + + this.preloader.detach(); + }).catch(err => { + this.log.error(err); + }); + }, 0); } - let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice(); + /* let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice(); let index = history.findIndex(m => m == message.mid); let comparer = (mid: number) => { let _message = appMessagesManager.getMessage(mid); @@ -245,7 +356,10 @@ export class AppMediaViewer { } else { this.buttons.prev.style.display = this.higherMsgID !== undefined ? '' : 'none'; this.buttons.next.style.display = this.lowerMsgID !== undefined ? '' : 'none'; - } + } */ + + this.buttons.prev.style.display = this.prevTarget ? '' : 'none'; + this.buttons.next.style.display = this.nextTarget ? '' : 'none'; //console.log('prev and next', prevMsgID, nextMsgID); } diff --git a/src/lib/appManagers/appSidebarRight.ts b/src/lib/appManagers/appSidebarRight.ts index ea182b5c..b39ca7d6 100644 --- a/src/lib/appManagers/appSidebarRight.ts +++ b/src/lib/appManagers/appSidebarRight.ts @@ -82,6 +82,10 @@ class AppSidebarRight { private profileTabs: HTMLUListElement; private prevTabID = -1; + private mediaDivsByIDs: { + [mid: number]: HTMLDivElement + } = {}; + constructor() { let container = this.profileContentEl.querySelector('.profile-tabs-content') as HTMLDivElement; this.profileTabs = this.profileContentEl.querySelector('.profile-tabs') as HTMLUListElement; @@ -135,7 +139,14 @@ class AppSidebarRight { } let message = appMessagesManager.getMessage(messageID); - appMediaViewer.openMedia(message, false); + + let ids = Object.keys(this.mediaDivsByIDs).map(k => +k).sort(); + let idx = ids.findIndex(i => i == messageID); + + let prev = ids[idx + 1] || null; + let next = ids[idx - 1] || null; + + appMediaViewer.openMedia(message, false, target, this.mediaDivsByIDs[prev] || null, this.mediaDivsByIDs[next] || null); }); this.profileElements.notificationsCheckbox.addEventListener('change', () => { @@ -285,6 +296,8 @@ class AppSidebarRight { this.sharedMedia.contentMedia.append(this.lastSharedMediaDiv); this.lastSharedMediaDiv = document.createElement('div'); } + + this.mediaDivsByIDs[mid] = div; //this.sharedMedia.contentMedia.append(div); @@ -352,6 +365,8 @@ class AppSidebarRight { this.profileElements.notificationsCheckbox.checked = true; this.profileElements.notificationsStatus.innerText = 'Enabled'; + this.mediaDivsByIDs = {}; + this.lazyLoadQueueSidebar.clear(); Object.keys(this.sharedMedia).forEach(key => { diff --git a/src/lib/mtproto/apiFileManager.ts b/src/lib/mtproto/apiFileManager.ts index f1273314..e6860a7e 100644 --- a/src/lib/mtproto/apiFileManager.ts +++ b/src/lib/mtproto/apiFileManager.ts @@ -241,9 +241,11 @@ export class ApiFileManager { }); } - public getDownloadedFile(location: any, size: any) { + public getDownloadedFile(location: any, size?: any) { var fileStorage = this.getFileStorage(); - var fileName = this.getFileName(location); + var fileName = typeof(location) !== 'string' ? this.getFileName(location) : location; + + //console.log('getDownloadedFile', location, fileName); return fileStorage.getFile(fileName, size); } @@ -274,7 +276,7 @@ export class ApiFileManager { var cachedPromise = this.cachedSavePromises[fileName] || this.cachedDownloadPromises[fileName]; var fileStorage = this.getFileStorage(); - //this.log('downloadFile', fileStorage.name, fileName, fileName.length, location, arguments); + this.log('downloadFile', fileStorage.name, fileName, fileName.length, location, arguments); if(cachedPromise) { if(toFileEntry) { diff --git a/src/lib/utils.js b/src/lib/utils.js index ab6e275e..65944b7f 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -579,6 +579,10 @@ export function encodeEntities (value) { } export function calcImageInBox (imageW, imageH, boxW, boxH, noZooom) { + if(imageW < boxW && imageH < boxH) { + return {w: imageW, h: imageH}; + } + var boxedImageW = boxW var boxedImageH = boxH diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 1b9db58d..66945a66 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -776,7 +776,8 @@ } &.forwarded .attachment, - &.is-reply .attachment/* , + &.is-reply .attachment, + &:not(.hide-name) .message-empty + .attachment/* , &:not(.hide-name):not(.sticker) .attachment */ { border-top-left-radius: 0; border-top-right-radius: 0; diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index fab5dab2..9f17836f 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -10,7 +10,7 @@ align-items: center; justify-content: center; - .media-viewer-author { + &-author { position: absolute; top: 0; left: 0; @@ -43,7 +43,7 @@ } } - .media-viewer-buttons { + &-buttons { position: absolute; top: 0; right: 0; @@ -61,7 +61,7 @@ } } - .media-viewer-content { + &-content { display: flex; flex-direction: column; justify-content: center; @@ -90,6 +90,7 @@ display: flex; align-items: center; justify-content: center; + visibility: hidden; &.loading { img, video { @@ -103,6 +104,8 @@ img, video { max-height: calc(100vh - 100px); max-width: calc(100vw - 16px); + /* max-height: 720px; + max-width: 1280px; */ } img { @@ -123,7 +126,7 @@ width: 10rem; height: 100%; cursor: pointer; - z-index: 2; + z-index: 5; &:hover { > span { @@ -147,7 +150,7 @@ transform: translateY(-50%) rotate(90deg); opacity: 0; transition: .2s opacity; - z-index: 3; + z-index: 5; /* box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07); */ } @@ -172,4 +175,29 @@ } } } + + &-mover { + position: fixed; + z-index: 4; + display: flex; + //transition: .5s all; + left: 0; + top: 0; + transform-origin: top left; + + .ckin__player { + width: 100%; + height: 100%; + } + + img, video { + /* object-fit: contain; */ + width: 100%; + height: 100%; + } + + &.active { + transition: .25s all; + } + } } diff --git a/src/scss/style.scss b/src/scss/style.scss index 5278cd4f..8abb0cb1 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1224,10 +1224,19 @@ span.popup-close { position: fixed!important; background-color: rgba(0, 0, 0, .2); z-index: 4; - display: none; + //display: none; + opacity: 0; + visibility: hidden; + -webkit-transition: opacity 0.25s 0s, visibility 0s 0.25s; + -moz-transition: opacity 0.25s 0s, visibility 0s 0.25s; + transition: opacity 0.25s 0s, visibility 0s 0.25s; &.active { - display: block; + opacity: 1; + visibility: visible; + -webkit-transition: opacity 0.25s 0s, visibility 0s 0s; + -moz-transition: opacity 0.25s 0s, visibility 0s 0s; + transition: opacity 0.25s 0s, visibility 0s 0s; } }