bigger preview images & stickers preloader
This commit is contained in:
Eduard Kuzmenko
parent
196bcf485c
commit
e7539038e2
@ -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') {
|
||||
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);
|
||||
|
||||
let video = document.createElement('video');
|
||||
video.loop = true;
|
||||
video.autoplay = true;
|
||||
video.loop = controls;
|
||||
video.autoplay = controls;
|
||||
|
||||
if(!justLoader) {
|
||||
video.controls = true;
|
||||
video.controls = controls;
|
||||
} else {
|
||||
video.volume = 0;
|
||||
}
|
||||
|
||||
@ -477,6 +477,24 @@ export class AppImManager {
|
||||
|
||||
this.chatInner.addEventListener('click', (e) => {
|
||||
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') {
|
||||
let messageID = +target.getAttribute('message-id');
|
||||
let message = appMessagesManager.getMessage(messageID);
|
||||
@ -488,8 +506,6 @@ export class AppImManager {
|
||||
|
||||
appMediaViewer.openMedia(message, true);
|
||||
} else if(target.tagName == 'DIV') {
|
||||
let bubble = findUpClassName(e.target, 'bubble');
|
||||
|
||||
if(bubble) {
|
||||
if(bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) {
|
||||
let originalMessageID = +bubble.getAttribute('data-original-mid');
|
||||
@ -686,7 +702,7 @@ export class AppImManager {
|
||||
}
|
||||
|
||||
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());
|
||||
|
||||
@ -1324,7 +1340,8 @@ export class AppImManager {
|
||||
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.width = attachmentDiv.style.width;
|
||||
//appPhotosManager.setAttachmentSize(doc, bubble);
|
||||
@ -1335,11 +1352,11 @@ export class AppImManager {
|
||||
}
|
||||
|
||||
return true;
|
||||
}, null, 'chat', false, !!message.pending || !multipleRender)/* .then(() => {
|
||||
|
||||
attachmentDiv.style.width = '';
|
||||
attachmentDiv.style.height = '';
|
||||
}) */;
|
||||
}, null, 'chat', false, !!message.pending || !multipleRender).then(() => {
|
||||
preloader.detach();
|
||||
/* attachmentDiv.style.width = '';
|
||||
attachmentDiv.style.height = ''; */
|
||||
});
|
||||
|
||||
this.loadMediaQueuePush(load);
|
||||
|
||||
@ -1347,8 +1364,12 @@ export class AppImManager {
|
||||
} else if(doc.mime_type == 'video/mp4') {
|
||||
this.log('never get free 2', doc);
|
||||
|
||||
if(doc.type == 'round') {
|
||||
bubble.classList.add('round');
|
||||
}
|
||||
|
||||
bubble.classList.add('video');
|
||||
wrapVideo.call(this, doc, attachmentDiv, message);
|
||||
wrapVideo.call(this, doc, attachmentDiv, message, doc.type != 'round', null, false);
|
||||
|
||||
break;
|
||||
} else {
|
||||
@ -1378,9 +1399,9 @@ export class AppImManager {
|
||||
if((this.peerID < 0 && !our) || message.fwd_from || message.reply_to_mid) { // chat
|
||||
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) {
|
||||
this.log('message render hidden', message);
|
||||
this.log('message to render hidden', message);
|
||||
title = message.fwd_from.from_name;
|
||||
bubble.classList.add('hidden-profile');
|
||||
}
|
||||
@ -1413,7 +1434,7 @@ export class AppImManager {
|
||||
let originalMessage = appMessagesManager.getMessage(message.reply_to_mid);
|
||||
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 = '';
|
||||
if(originalMessage.message) {
|
||||
|
||||
@ -133,7 +133,7 @@ export class AppMediaViewer {
|
||||
|
||||
public openMedia(message: any, reverse = false) {
|
||||
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';
|
||||
|
||||
|
||||
@ -153,13 +153,13 @@ export class AppPhotosManager {
|
||||
let image = new Image();
|
||||
image.src = URL.createObjectURL(blob);
|
||||
|
||||
// image.style.width = '100%';
|
||||
// image.style.height = '100%';
|
||||
image.style.width = '100%';
|
||||
image.style.height = '100%';
|
||||
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;
|
||||
|
||||
if(typeof(photoID) === 'string') {
|
||||
@ -174,7 +174,7 @@ export class AppPhotosManager {
|
||||
|
||||
let sizes = photo.sizes || photo.thumbs;
|
||||
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') {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.chat-container {
|
||||
display: flex;
|
||||
display: flex;
|
||||
// padding: 200px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
@ -43,64 +43,64 @@
|
||||
z-index: 2;
|
||||
} */
|
||||
|
||||
#topbar {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
|
||||
#topbar {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
|
||||
padding: .5rem 1rem;
|
||||
flex: 0 0 auto; /* Forces side columns to stay same width */
|
||||
min-height: 60px;
|
||||
max-height: 60px;
|
||||
|
||||
& > * {
|
||||
margin: 0 2px;
|
||||
}
|
||||
& > * {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.chat-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.chat-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
.content {
|
||||
padding-left: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.person {
|
||||
display: flex;
|
||||
.person {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 44px;
|
||||
.user-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 14px;
|
||||
.bottom {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $placeholder-color;
|
||||
|
||||
.online {
|
||||
color: $darkblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#bubbles {
|
||||
#bubbles {
|
||||
/* overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none; */
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
flex: 1 1 auto; /* Lets middle column shrink/grow to available width */
|
||||
@ -109,7 +109,7 @@
|
||||
|
||||
&:not(.scrolled-down) {
|
||||
-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 {
|
||||
@ -167,7 +167,7 @@
|
||||
width: min-content;
|
||||
|
||||
.box.web {
|
||||
width: max-content;
|
||||
/* width: max-content; */ // commented 10.02.2020
|
||||
/* width: min-content; */
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -237,7 +237,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.sticker {
|
||||
&.sticker, &.round {
|
||||
cursor: pointer;
|
||||
background: none!important;
|
||||
box-shadow: none;
|
||||
@ -257,6 +257,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.round {
|
||||
.attachment {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.message:not(.message-empty) + .attachment,
|
||||
&.is-reply .attachment {
|
||||
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 {
|
||||
font-size: .95rem;
|
||||
margin: .25rem;
|
||||
@ -317,7 +332,7 @@
|
||||
|
||||
/* &:hover {
|
||||
cursor: pointer;
|
||||
} */
|
||||
} */
|
||||
|
||||
&.web {
|
||||
margin-top: -5px;
|
||||
@ -326,8 +341,10 @@
|
||||
overflow: hidden;
|
||||
|
||||
.preview {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
max-width: 380px;
|
||||
/* max-height: 100%;
|
||||
max-width: 100%; */
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
@ -340,7 +357,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 1.4;
|
||||
@ -387,6 +404,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
color: #000;
|
||||
|
||||
* {
|
||||
overflow: hidden;
|
||||
@ -418,20 +436,20 @@
|
||||
|
||||
.time {
|
||||
font-size: .8rem;
|
||||
user-select: none;
|
||||
float: right;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
float: right;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: .75rem;
|
||||
right: 0;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -484,7 +502,7 @@
|
||||
padding-top: .2675rem;
|
||||
}
|
||||
|
||||
&:not(.sticker):not(.emoji-big):last-child:after {
|
||||
&:not(.sticker):not(.emoji-big):not(.round):last-child:after {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
width: 11px;
|
||||
@ -507,18 +525,18 @@
|
||||
}
|
||||
|
||||
.in {
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
a {
|
||||
color: $darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
border-left: 2px $darkblue solid;
|
||||
border-left: 2px $darkblue solid;
|
||||
|
||||
.name {
|
||||
color: $darkblue;
|
||||
@ -528,37 +546,37 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: rgba($darkgrey, 0.6);
|
||||
width: 2rem;
|
||||
width: 2rem;
|
||||
|
||||
.inner {
|
||||
line-height: 19px;
|
||||
padding: 0 .35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px 12px 12px 6px;
|
||||
border-radius: 6px 12px 12px 6px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 12px 12px 12px 6px;
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: 12px 12px 12px 6px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:last-child {
|
||||
border-radius: 6px 12px 12px 0px;
|
||||
|
||||
&:after {
|
||||
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 {
|
||||
border-radius: 12px 12px 12px 0px;
|
||||
&:first-child:last-child {
|
||||
border-radius: 12px 12px 12px 0px;
|
||||
}
|
||||
|
||||
&.forwarded .attachment,
|
||||
@ -574,37 +592,37 @@
|
||||
|
||||
a {
|
||||
color: $darkgreen;
|
||||
}
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
background-color: rgba($green, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
border-left: 2px $darkgreen solid;
|
||||
border-left: 2px $darkgreen solid;
|
||||
|
||||
.name {
|
||||
color: $darkgreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: $darkgreen;
|
||||
width: 48px;
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
.time .tgico:after {
|
||||
font-size: 1.1rem;
|
||||
vertical-align: middle;
|
||||
margin-left: .1rem;
|
||||
vertical-align: middle;
|
||||
margin-left: .1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -618,32 +636,32 @@
|
||||
.time .tgico:after {
|
||||
content: $tgico-checks;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble.sent {
|
||||
.time .tgico:after {
|
||||
content: $tgico-check;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
background-color: #eeffde;
|
||||
border-radius: 12px 6px 6px 12px;
|
||||
border-radius: 12px 6px 6px 12px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 12px 12px 6px 12px;
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: 12px 12px 6px 12px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:last-child {
|
||||
border-radius: 12px 6px 0px 12px;
|
||||
|
||||
&:after {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -814,7 +832,7 @@
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 150px;
|
||||
width: 187px;
|
||||
margin-right: 1rem;
|
||||
max-height: 35px;
|
||||
/* padding: .25rem; */
|
||||
@ -852,20 +870,21 @@
|
||||
|
||||
&-subtitle {
|
||||
white-space: nowrap;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
/* #chat-closed {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: inherit;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: inherit;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@ -941,13 +960,13 @@
|
||||
box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, 0.14);
|
||||
border-radius: 12px;
|
||||
z-index: 2;
|
||||
/* display: none; */
|
||||
/* display: none; */
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
transition: all 0.2s ease-out;
|
||||
transform: scale(0);
|
||||
transform-origin: 0 100%;
|
||||
transform: scale(0);
|
||||
transform-origin: 0 100%;
|
||||
|
||||
&.active {
|
||||
/* display: flex; */
|
||||
|
||||
@ -112,7 +112,8 @@
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
/* object-fit: cover; */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.media-viewer-switcher-left, .media-viewer-switcher-right {
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
}
|
||||
|
||||
p {
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user