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

bigger preview images & stickers preloader

master
Eduard Kuzmenko 5 years ago
parent
196bcf485c
commit
e7539038e2
7 changed files with 331 additions and 289 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. 8
      src/components/misc.ts
  2. 47
      src/lib/appManagers/appImManager.ts
  3. 2
      src/lib/appManagers/appMediaViewer.ts
  4. 8
      src/lib/appManagers/appPhotosManager.ts
  5. 33
      src/scss/partials/_chat.scss
  6. 3
      src/scss/partials/_mediaViewer.scss
  7. 1
      src/scss/partials/_sidebar.scss

8
src/components/misc.ts
Unescape View File

@ -221,7 +221,7 @@ export class LazyLoadQueue {
} }
} }
export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader) { export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader, controls = true) {
//if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') { //if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') {
let size = appPhotosManager.setAttachmentSize(doc, container); let size = appPhotosManager.setAttachmentSize(doc, container);
//} //}
@ -260,11 +260,11 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
console.log('loaded doc:', doc, blob, container); console.log('loaded doc:', doc, blob, container);
let video = document.createElement('video'); let video = document.createElement('video');
video.loop = true; video.loop = controls;
video.autoplay = true; video.autoplay = controls;
if(!justLoader) { if(!justLoader) {
video.controls = true; video.controls = controls;
} else { } else {
video.volume = 0; video.volume = 0;
} }

47
src/lib/appManagers/appImManager.ts
Unescape View File

@ -477,6 +477,24 @@ export class AppImManager {
this.chatInner.addEventListener('click', (e) => { this.chatInner.addEventListener('click', (e) => {
let target = e.target as HTMLElement; let target = e.target as HTMLElement;
let bubble: HTMLDivElement = null;
try {
bubble = findUpClassName(e.target, 'bubble');
} catch(err) {}
if(target.tagName == 'VIDEO' && bubble && bubble.classList.contains('round')) {
let video = target as HTMLVideoElement;
video.currentTime = 0;
if(video.paused) {
video.play();
video.volume = 1;
} else {
video.pause();
video.volume = 0;
}
return;
}
if(target.tagName == 'IMG' || target.tagName == 'VIDEO') { if(target.tagName == 'IMG' || target.tagName == 'VIDEO') {
let messageID = +target.getAttribute('message-id'); let messageID = +target.getAttribute('message-id');
let message = appMessagesManager.getMessage(messageID); let message = appMessagesManager.getMessage(messageID);
@ -488,8 +506,6 @@ export class AppImManager {
appMediaViewer.openMedia(message, true); appMediaViewer.openMedia(message, true);
} else if(target.tagName == 'DIV') { } else if(target.tagName == 'DIV') {
let bubble = findUpClassName(e.target, 'bubble');
if(bubble) { if(bubble) {
if(bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) { if(bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) {
let originalMessageID = +bubble.getAttribute('data-original-mid'); let originalMessageID = +bubble.getAttribute('data-original-mid');
@ -686,7 +702,7 @@ export class AppImManager {
} }
public async loadMediaQueueProcess(): Promise<void[]> { public async loadMediaQueueProcess(): Promise<void[]> {
if(this.loadMediaQueuePromise /* || 1 == 1 */) return this.loadMediaQueuePromise; if(this.loadMediaQueuePromise/* || 1 == 1 */) return this.loadMediaQueuePromise;
let woo = this.loadMediaQueue.splice(-5, 5).reverse().map(f => f()); let woo = this.loadMediaQueue.splice(-5, 5).reverse().map(f => f());
@ -1324,7 +1340,8 @@ export class AppImManager {
bubble.classList.add('sticker-animated'); bubble.classList.add('sticker-animated');
} }
appPhotosManager.setAttachmentSize(doc, attachmentDiv); appPhotosManager.setAttachmentSize(doc, attachmentDiv, undefined, undefined, true);
let preloader = new ProgressivePreloader(attachmentDiv, false);
bubble.style.height = attachmentDiv.style.height; bubble.style.height = attachmentDiv.style.height;
bubble.style.width = attachmentDiv.style.width; bubble.style.width = attachmentDiv.style.width;
//appPhotosManager.setAttachmentSize(doc, bubble); //appPhotosManager.setAttachmentSize(doc, bubble);
@ -1335,11 +1352,11 @@ export class AppImManager {
} }
return true; return true;
}, null, 'chat', false, !!message.pending || !multipleRender)/* .then(() => { }, null, 'chat', false, !!message.pending || !multipleRender).then(() => {
preloader.detach();
attachmentDiv.style.width = ''; /* attachmentDiv.style.width = '';
attachmentDiv.style.height = ''; attachmentDiv.style.height = ''; */
}) */; });
this.loadMediaQueuePush(load); this.loadMediaQueuePush(load);
@ -1347,8 +1364,12 @@ export class AppImManager {
} else if(doc.mime_type == 'video/mp4') { } else if(doc.mime_type == 'video/mp4') {
this.log('never get free 2', doc); this.log('never get free 2', doc);
if(doc.type == 'round') {
bubble.classList.add('round');
}
bubble.classList.add('video'); bubble.classList.add('video');
wrapVideo.call(this, doc, attachmentDiv, message); wrapVideo.call(this, doc, attachmentDiv, message, doc.type != 'round', null, false);
break; break;
} else { } else {
@ -1378,9 +1399,9 @@ export class AppImManager {
if((this.peerID < 0 && !our) || message.fwd_from || message.reply_to_mid) { // chat if((this.peerID < 0 && !our) || message.fwd_from || message.reply_to_mid) { // chat
let title = appPeersManager.getPeerTitle(message.fwdFromID || message.fromID); let title = appPeersManager.getPeerTitle(message.fwdFromID || message.fromID);
let isHidden = message.fwd_from && !message.fwd_from.from_id; let isHidden = message.fwd_from && !message.fwd_from.from_id && !message.fwd_from.channel_id;
if(isHidden) { if(isHidden) {
this.log('message render hidden', message); this.log('message to render hidden', message);
title = message.fwd_from.from_name; title = message.fwd_from.from_name;
bubble.classList.add('hidden-profile'); bubble.classList.add('hidden-profile');
} }
@ -1413,7 +1434,7 @@ export class AppImManager {
let originalMessage = appMessagesManager.getMessage(message.reply_to_mid); let originalMessage = appMessagesManager.getMessage(message.reply_to_mid);
let originalPeerTitle = appPeersManager.getPeerTitle(originalMessage.fromID) || ''; let originalPeerTitle = appPeersManager.getPeerTitle(originalMessage.fromID) || '';
this.log('message to render one more time punks not dead', originalMessage, originalPeerTitle, bubble); this.log('message to render reply', originalMessage, originalPeerTitle, bubble);
let originalText = ''; let originalText = '';
if(originalMessage.message) { if(originalMessage.message) {

2
src/lib/appManagers/appMediaViewer.ts
Unescape View File

@ -133,7 +133,7 @@ export class AppMediaViewer {
public openMedia(message: any, reverse = false) { public openMedia(message: any, reverse = false) {
this.log('openMedia doc:', message); this.log('openMedia doc:', message);
let media = message.media.photo || message.media.document || message.media.webpage.document; let media = message.media.photo || message.media.document || message.media.webpage.photo || message.media.webpage.document;
let isVideo = media.mime_type == 'video/mp4'; let isVideo = media.mime_type == 'video/mp4';

8
src/lib/appManagers/appPhotosManager.ts
Unescape View File

@ -153,13 +153,13 @@ export class AppPhotosManager {
let image = new Image(); let image = new Image();
image.src = URL.createObjectURL(blob); image.src = URL.createObjectURL(blob);
// image.style.width = '100%'; image.style.width = '100%';
// image.style.height = '100%'; image.style.height = '100%';
div.append(image); div.append(image);
} }
} }
public setAttachmentSize(photoID: any, div: HTMLDivElement, w = 380, h = 0/* 380 */) { public setAttachmentSize(photoID: any, div: HTMLDivElement, w = 380, h = 380, isSticker = false) {
let photo: /* MTDocument | MTPhoto */any = null; let photo: /* MTDocument | MTPhoto */any = null;
if(typeof(photoID) === 'string') { if(typeof(photoID) === 'string') {
@ -174,7 +174,7 @@ export class AppPhotosManager {
let sizes = photo.sizes || photo.thumbs; let sizes = photo.sizes || photo.thumbs;
if(sizes && sizes[0].bytes) { if(sizes && sizes[0].bytes) {
this.setAttachmentPreview(sizes[0].bytes, div); this.setAttachmentPreview(sizes[0].bytes, div, isSticker);
} }
if(photo._ == 'document' /* && photo.type != 'video' */ && photo.type != 'gif') { if(photo._ == 'document' /* && photo.type != 'video' */ && photo.type != 'gif') {

33
src/scss/partials/_chat.scss
Unescape View File

@ -167,7 +167,7 @@
width: min-content; width: min-content;
.box.web { .box.web {
width: max-content; /* width: max-content; */ // commented 10.02.2020
/* width: min-content; */ /* width: min-content; */
max-width: 100%; max-width: 100%;
} }
@ -237,7 +237,7 @@
} }
} }
&.sticker { &.sticker, &.round {
cursor: pointer; cursor: pointer;
background: none!important; background: none!important;
box-shadow: none; box-shadow: none;
@ -257,6 +257,13 @@
} }
} }
&.round {
.attachment {
max-width: 200px;
max-height: 200px;
}
}
.message:not(.message-empty) + .attachment, .message:not(.message-empty) + .attachment,
&.is-reply .attachment { &.is-reply .attachment {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@ -307,6 +314,14 @@
} }
} }
&.round.video {
.attachment {
//max-height: fit-content;
-webkit-clip-path: ellipse(100px 100px at center);
clip-path: ellipse(100px 100px at center);
}
}
.box { .box {
font-size: .95rem; font-size: .95rem;
margin: .25rem; margin: .25rem;
@ -326,8 +341,10 @@
overflow: hidden; overflow: hidden;
.preview { .preview {
max-height: 100%; max-height: 300px;
max-width: 100%; max-width: 380px;
/* max-height: 100%;
max-width: 100%; */
border-radius: 4px; border-radius: 4px;
margin-bottom: 6px; margin-bottom: 6px;
overflow: hidden; overflow: hidden;
@ -387,6 +404,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 100%; max-width: 100%;
color: #000;
* { * {
overflow: hidden; overflow: hidden;
@ -484,7 +502,7 @@
padding-top: .2675rem; padding-top: .2675rem;
} }
&:not(.sticker):not(.emoji-big):last-child:after { &:not(.sticker):not(.emoji-big):not(.round):last-child:after {
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
width: 11px; width: 11px;
@ -814,7 +832,7 @@
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
width: 150px; width: 187px;
margin-right: 1rem; margin-right: 1rem;
max-height: 35px; max-height: 35px;
/* padding: .25rem; */ /* padding: .25rem; */
@ -852,6 +870,7 @@
&-subtitle { &-subtitle {
white-space: nowrap; white-space: nowrap;
color: #111;
} }
} }
@ -941,7 +960,7 @@
box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, 0.14); box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, 0.14);
border-radius: 12px; border-radius: 12px;
z-index: 2; z-index: 2;
/* display: none; */ /* display: none; */
display: flex; display: flex;
overflow: hidden; overflow: hidden;

3
src/scss/partials/_mediaViewer.scss
Unescape View File

@ -112,7 +112,8 @@
video { video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; /* object-fit: cover; */
object-fit: contain;
} }
.media-viewer-switcher-left, .media-viewer-switcher-right { .media-viewer-switcher-left, .media-viewer-switcher-right {

1
src/scss/partials/_sidebar.scss
Unescape View File

@ -69,6 +69,7 @@
} }
p { p {
color: #000;
margin: 0; margin: 0;
} }

Write Preview
Loading…
Cancel
Save