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

bigger preview images & stickers preloader

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-02-10 16:52:47 +07:00
parent 196bcf485c
commit e7539038e2
7 changed files with 331 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/misc.ts
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
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
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
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') {

211
src/scss/partials/_chat.scss
View File

@ -1,5 +1,5 @@
.chat-container { .chat-container {
display: flex; display: flex;
// padding: 200px; // padding: 200px;
width: 100%; width: 100%;
align-items: center; align-items: center;
@ -43,64 +43,64 @@
z-index: 2; z-index: 2;
} */ } */
#topbar { #topbar {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
display: flex; display: flex;
align-items: center; align-items: center;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07); box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
padding: .5rem 1rem; padding: .5rem 1rem;
flex: 0 0 auto; /* Forces side columns to stay same width */ flex: 0 0 auto; /* Forces side columns to stay same width */
min-height: 60px; min-height: 60px;
max-height: 60px; max-height: 60px;
& > * { & > * {
margin: 0 2px; margin: 0 2px;
} }
.chat-info { .chat-info {
flex-grow: 1; flex-grow: 1;
} }
.content { .content {
padding-left: 1rem; padding-left: 1rem;
flex: 1; flex: 1;
} }
.person { .person {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
} }
.user-avatar { .user-avatar {
width: 44px; width: 44px;
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
} }
.bottom { .bottom {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $placeholder-color; color: $placeholder-color;
.online { .online {
color: $darkblue; color: $darkblue;
} }
} }
} }
} }
#bubbles { #bubbles {
/* overflow-y: scroll; /* overflow-y: scroll;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; */ -ms-overflow-style: none; */
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
flex: 1 1 auto; /* Lets middle column shrink/grow to available width */ flex: 1 1 auto; /* Lets middle column shrink/grow to available width */
@ -109,7 +109,7 @@
&:not(.scrolled-down) { &:not(.scrolled-down) {
-webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px); -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px);
mask-image: linear-gradient(0deg, transparent 0, #000 20px); mask-image: linear-gradient(0deg, transparent 0, #000 20px);
} }
.preloader { .preloader {
@ -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;
@ -317,7 +332,7 @@
/* &:hover { /* &:hover {
cursor: pointer; cursor: pointer;
} */ } */
&.web { &.web {
margin-top: -5px; margin-top: -5px;
@ -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;
@ -340,7 +357,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
line-height: 1.4; line-height: 1.4;
@ -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;
@ -418,20 +436,20 @@
.time { .time {
font-size: .8rem; font-size: .8rem;
user-select: none; user-select: none;
float: right; float: right;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
.inner { .inner {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
font-size: .75rem; font-size: .75rem;
} }
} }
@ -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;
@ -507,18 +525,18 @@
} }
.in { .in {
align-items: flex-start; align-items: flex-start;
a { a {
color: $darkblue; color: $darkblue;
} }
.box:hover { .box:hover {
background-color: $light; background-color: $light;
} }
.quote { .quote {
border-left: 2px $darkblue solid; border-left: 2px $darkblue solid;
.name { .name {
color: $darkblue; color: $darkblue;
@ -528,37 +546,37 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.time { .time {
color: rgba($darkgrey, 0.6); color: rgba($darkgrey, 0.6);
width: 2rem; width: 2rem;
.inner { .inner {
line-height: 19px; line-height: 19px;
padding: 0 .35rem; padding: 0 .35rem;
} }
} }
.bubble { .bubble {
background-color: #ffffff; background-color: #ffffff;
border-radius: 6px 12px 12px 6px; border-radius: 6px 12px 12px 6px;
&:first-child { &:first-child {
border-radius: 12px 12px 12px 6px; border-radius: 12px 12px 12px 6px;
} }
&:last-child { &:last-child {
border-radius: 6px 12px 12px 0px; border-radius: 6px 12px 12px 0px;
&:after { &:after {
left: -8.4px; left: -8.4px;
background-image: url('../../assets/img/msg-tail-left.svg'); background-image: url('../../assets/img/msg-tail-left.svg');
} }
} }
&:first-child:last-child { &:first-child:last-child {
border-radius: 12px 12px 12px 0px; border-radius: 12px 12px 12px 0px;
} }
&.forwarded .attachment, &.forwarded .attachment,
@ -574,37 +592,37 @@
a { a {
color: $darkgreen; color: $darkgreen;
} }
.box:hover { .box:hover {
background-color: rgba($green, 0.12); background-color: rgba($green, 0.12);
} }
.quote { .quote {
border-left: 2px $darkgreen solid; border-left: 2px $darkgreen solid;
.name { .name {
color: $darkgreen; color: $darkgreen;
} }
} }
.time { .time {
color: $darkgreen; color: $darkgreen;
width: 48px; width: 48px;
display: inline-block; display: inline-block;
.inner { .inner {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 .25rem; padding: 0 .25rem;
} }
} }
.bubble { .bubble {
.time .tgico:after { .time .tgico:after {
font-size: 1.1rem; font-size: 1.1rem;
vertical-align: middle; vertical-align: middle;
margin-left: .1rem; margin-left: .1rem;
} }
} }
@ -618,32 +636,32 @@
.time .tgico:after { .time .tgico:after {
content: $tgico-checks; content: $tgico-checks;
} }
} }
.bubble.sent { .bubble.sent {
.time .tgico:after { .time .tgico:after {
content: $tgico-check; content: $tgico-check;
} }
} }
.bubble { .bubble {
background-color: #eeffde; background-color: #eeffde;
border-radius: 12px 6px 6px 12px; border-radius: 12px 6px 6px 12px;
&:first-child { &:first-child {
border-radius: 12px 12px 6px 12px; border-radius: 12px 12px 6px 12px;
} }
&:last-child { &:last-child {
border-radius: 12px 6px 0px 12px; border-radius: 12px 6px 0px 12px;
&:after { &:after {
right: -8.4px; right: -8.4px;
background-image: url('../../assets/img/msg-tail-right.svg'); background-image: url('../../assets/img/msg-tail-right.svg');
} }
} }
&:first-child:last-child { &:first-child:last-child {
border-radius: 12px 12px 0px 12px; border-radius: 12px 12px 0px 12px;
} }
@ -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,20 +870,21 @@
&-subtitle { &-subtitle {
white-space: nowrap; white-space: nowrap;
color: #111;
} }
} }
/* #chat-closed { /* #chat-closed {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: inherit; background-color: inherit;
z-index: 3; z-index: 3;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
@ -941,13 +960,13 @@
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;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
transform: scale(0); transform: scale(0);
transform-origin: 0 100%; transform-origin: 0 100%;
&.active { &.active {
/* display: flex; */ /* display: flex; */

3
src/scss/partials/_mediaViewer.scss
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
View File

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