diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts
index 49bc194e..804378c9 100644
--- a/src/components/wrappers.ts
+++ b/src/components/wrappers.ts
@@ -259,6 +259,8 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
if(withTime) {
subtitle += (subtitle ? ' ยท ' : '') + formatDate(doc.date);
+ } else if(!subtitle) {
+ subtitle = 'Unknown Artist';
}
div.innerHTML = `
@@ -309,8 +311,14 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
div.removeEventListener('click', onClick);
let toggle = div.querySelector('.audio-toggle') as HTMLDivElement;
let subtitle = div.querySelector('.audio-subtitle') as HTMLDivElement;
+ let launched = false;
toggle.addEventListener('click', () => {
+ if(!launched) {
+ div.classList.add('audio-show-progress');
+ launched = true;
+ }
+
subtitle.innerHTML = '';
subtitle.append(progress.container);
@@ -326,8 +334,6 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
toggle.classList.remove('tgico-largeplay');
toggle.classList.add('tgico-largepause');
-
-
} else {
audio.pause();
toggle.classList.add('tgico-largeplay');
@@ -344,7 +350,6 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
audio.style.display = 'none';
audio.append(source);
- div.classList.add('audio-show-progress');
div.append(audio);
});
diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts
index 6e602f19..ab567a28 100644
--- a/src/lib/appManagers/appImManager.ts
+++ b/src/lib/appManagers/appImManager.ts
@@ -1,6 +1,6 @@
//import apiManager from '../mtproto/apiManager';
import apiManager from '../mtproto/mtprotoworker';
-import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName, formatNumber, placeCaretAtEnd, calcImageInBox, findUpTag, langPack } from "../utils";
+import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName, formatNumber, placeCaretAtEnd, findUpTag, langPack } from "../utils";
import appUsersManager from "./appUsersManager";
import appMessagesManager from "./appMessagesManager";
import appPeersManager from "./appPeersManager";
@@ -19,7 +19,7 @@ import appMessagesIDsManager from "./appMessagesIDsManager";
import apiUpdatesManager from './apiUpdatesManager';
import { wrapDocument, wrapPhoto, wrapVideo, wrapSticker, wrapReply, MTPhotoSize } from '../../components/wrappers';
import ProgressivePreloader from '../../components/preloader';
-import { openBtnMenu, renderImageFromUrl } from '../../components/misc';
+import { openBtnMenu, renderImageFromUrl, formatPhoneNumber } from '../../components/misc';
import { ChatInput } from '../../components/chatInput';
import Scrollable from '../../components/scrollable';
import BubbleGroups from '../../components/bubbleGroups';
@@ -359,7 +359,7 @@ export class AppImManager {
if(!isNaN(peerID)) {
this.setPeer(peerID);
}
- } else if(((target.tagName == 'IMG' || target.tagName == 'image') && !target.classList.contains('emoji')) || target.tagName == 'VIDEO') {
+ } else if((target.tagName == 'IMG' && !target.classList.contains('emoji')) || target.tagName == 'image' || target.tagName == 'VIDEO') {
let messageID = 0;
for(let mid in this.bubbles) {
if(this.bubbles[mid] == bubble) {
@@ -384,7 +384,7 @@ export class AppImManager {
let targets = ids.map(id => ({
//element: (this.bubbles[id].querySelector('img, video') || this.bubbles[id].querySelector('image')) as HTMLElement,
- element: this.bubbles[id].querySelector('.attachment img, .preview img, video, .bubble__media-container') as HTMLElement,
+ element: this.bubbles[id].querySelector('.attachment img, .preview img, video, .bubble__media-container, .album-item') as HTMLElement,
mid: id
}));
@@ -1680,10 +1680,38 @@ export class AppImManager {
bubble.classList.remove('is-message-empty');
messageDiv.append(docDiv);
+ messageDiv.classList.add((doc.type || 'document') + '-message');
processingWebPage = true;
break;
}
+
+ break;
+ }
+
+ case 'messageMediaContact': {
+ this.log('wrapping contact', message);
+
+ let contactDiv = document.createElement('div');
+ contactDiv.classList.add('contact');
+ messageDiv.classList.add('contact-message');
+ processingWebPage = true;
+
+ let texts = [];
+ if(message.media.first_name) texts.push(RichTextProcessor.wrapEmojiText(message.media.first_name));
+ if(message.media.last_name) texts.push(RichTextProcessor.wrapEmojiText(message.media.last_name));
+
+ contactDiv.innerHTML = `
+
+ `;
+
+ bubble.classList.remove('is-message-empty');
+ messageDiv.append(contactDiv);
+
+ break;
}
default:
diff --git a/src/lib/richtextprocessor.js b/src/lib/richtextprocessor.js
index 074a1e22..6b0e845a 100644
--- a/src/lib/richtextprocessor.js
+++ b/src/lib/richtextprocessor.js
@@ -9,7 +9,7 @@ var EmojiHelper = {
var emojiData = Config.Emoji;
var emojiIconSize = emojiData.img_size;
-var emojiSupported = navigator.userAgent.search(/OS X|iPhone|iPad|iOS|Android/i) != -1/* && false */,
+var emojiSupported = navigator.userAgent.search(/OS X|iPhone|iPad|iOS/i) != -1/* && false */,
emojiCode;
//var emojiRegExp = '\\u0023\\u20E3|\\u00a9|\\u00ae|\\u203c|\\u2049|\\u2139|[\\u2194-\\u2199]|\\u21a9|\\u21aa|\\u231a|\\u231b|\\u23e9|[\\u23ea-\\u23ec]|\\u23f0|\\u24c2|\\u25aa|\\u25ab|\\u25b6|\\u2611|\\u2614|\\u26fd|\\u2705|\\u2709|[\\u2795-\\u2797]|\\u27a1|\\u27b0|\\u27bf|\\u2934|\\u2935|[\\u2b05-\\u2b07]|\\u2b1b|\\u2b1c|\\u2b50|\\u2b55|\\u3030|\\u303d|\\u3297|\\u3299|[\\uE000-\\uF8FF\\u270A-\\u2764\\u2122\\u25C0\\u25FB-\\u25FE\\u2615\\u263a\\u2648-\\u2653\\u2660-\\u2668\\u267B\\u267F\\u2693\\u261d\\u26A0-\\u26FA\\u2708\\u2702\\u2601\\u260E]|[\\u2600\\u26C4\\u26BE\\u23F3\\u2764]|\\uD83D[\\uDC00-\\uDFFF]|\\uD83C[\\uDDE8-\\uDDFA\uDDEC]\\uD83C[\\uDDEA-\\uDDFA\uDDE7]|[0-9]\\u20e3|\\uD83C[\\uDC00-\\uDFFF]';
//var emojiRegExp = '\\u00a9|\\u00ae|[\\u2000-\\u3300]|\\ud83c[\\ud000-\\udfff]|\\ud83d[\\ud000-\\udfff]|\\ud83e[\\ud000-\\udfff]';
diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss
index b8afdeb7..3ec9699f 100644
--- a/src/scss/partials/_chat.scss
+++ b/src/scss/partials/_chat.scss
@@ -1,5 +1,9 @@
$chat-max-width: 696px;
+#bubble-contextmenu > div {
+ padding: 0 84px 0 16px;
+}
+
.chat-container {
display: flex;
// padding: 200px;
@@ -184,6 +188,12 @@ $chat-max-width: 696px;
}
}
+ &:not(.is-channel), &.is-chat {
+ .message {
+ max-width: 480px;
+ }
+ }
+
&.is-scrolling .is-sticky {
opacity: 1;
}
@@ -273,6 +283,17 @@ $chat-max-width: 696px;
/* font-size: 0; */
width: max-content;
height: fit-content;
+
+ > .user-avatar {
+ position: absolute;
+ left: -3rem;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ bottom: 0;
+ font-size: 1rem;
+ cursor: pointer;
+ }
}
&.service {
@@ -723,10 +744,10 @@ $chat-max-width: 696px;
line-height: 21px;
word-break: break-word;
- * {
+ /* * {
overflow: hidden;
text-overflow: ellipsis;
- }
+ } */
&:last-child {
//padding-top: .2675rem;
@@ -738,6 +759,129 @@ $chat-max-width: 696px;
}
}
+ // all for audio (not voice)
+ .message.audio-message {
+ .audio {
+ justify-content: unset;
+ max-width: none;
+
+ &-time {
+ padding-bottom: 7px;
+ }
+
+ &-time, &-subtitle {
+ color: #4fae4e;
+ line-height: 1.45;
+ margin-top: 0;
+ }
+
+ &-title {
+ font-weight: 500;
+ margin-left: -1px;
+ }
+
+ &-details {
+ margin-top: 8px;
+ }
+
+ &-ico {
+ font-size: 2.15rem;
+ }
+ }
+
+ .media-progress {
+ /* width: calc(100% + 50px); */
+ width: 191px;
+ margin: 9px 0 9px;
+
+ &__filled {
+ background-color: #47aa41;
+ transform-origin: left;
+ height: 2px;
+ }
+
+ &__seek {
+ height: 2px;
+ overflow: visible !important;
+ background: rgba(124, 195, 107, 0.52);
+
+ &::-webkit-slider-thumb {
+ height: 12px;
+ width: 12px;
+ background: #47aa41;
+ }
+ }
+ }
+
+ //&.audio-message {
+ min-width: 275px;
+ //max-width: 380px !important;
+ max-width: 275px !important;
+ padding-top: 8px !important;
+ padding-left: 8px !important;
+
+ /* .audio-details * {
+ overflow: visible;
+ } */
+ //}
+
+ .tgico-largeplay:before {
+ content: "\e929";
+ margin-right: -2px;
+ }
+ }
+
+ .message.contact-message {
+ min-width: 200px;
+ padding-left: 8px;
+
+ .contact {
+ display: flex;
+ padding: 2px 0;
+
+ &-avatar {
+ color: #fff;
+ }
+
+ &-details {
+ padding-left: 12px;
+ margin-top: 8px;
+ }
+
+ &-name {
+ font-size: 1rem;
+ font-weight: 500;
+ }
+
+ &-number {
+ font-size: 14px;
+ line-height: 1.4;
+ }
+ }
+
+ .time {
+ width: unset;
+ }
+ }
+
+ .message.document-message {
+ max-width: 325px !important;
+
+ .time {
+ width: unset;
+ }
+
+ .document {
+ padding-left: 66px;
+ height: 58px;
+
+ &-name {
+ line-height: 1.4;
+ margin-top: 1px;
+ }
+ }
+ }
+
&.is-message-empty {
.message {
position: absolute;
@@ -810,17 +954,6 @@ $chat-max-width: 696px;
width: 90px;
}
- .user-avatar {
- position: absolute;
- left: -3rem;
- width: 40px;
- height: 40px;
- line-height: 40px;
- bottom: 0;
- font-size: 1rem;
- cursor: pointer;
- }
-
&:not(.forwarded).hide-name, &.emoji-big {
.name {
display: none;
@@ -998,6 +1131,10 @@ $chat-max-width: 696px;
}
}
}
+
+ .audio-subtitle, .contact-number {
+ color: #707579;
+ }
}
.is-out {
@@ -1005,6 +1142,11 @@ $chat-max-width: 696px;
margin-left: auto;
background-color: #eeffde;
border-radius: 12px 6px 6px 12px;
+
+ > .user-avatar {
+ left: auto;
+ right: -2.5rem;
+ }
}
&.is-group-first .bubble__container {
@@ -1104,11 +1246,6 @@ $chat-max-width: 696px;
&.is-edited .time {
width: 85px;
}
-
- .user-avatar {
- left: auto;
- right: -2.5rem;
- }
.document-ico:after {
border-top-color: #eeffde;
@@ -1146,6 +1283,10 @@ $chat-max-width: 696px;
}
}
}
+
+ .audio-subtitle, .contact-number, .document-size {
+ color: #4FAE4E;
+ }
}
}
diff --git a/src/scss/partials/_rightSIdebar.scss b/src/scss/partials/_rightSIdebar.scss
index 8abdff62..b04dad76 100644
--- a/src/scss/partials/_rightSIdebar.scss
+++ b/src/scss/partials/_rightSIdebar.scss
@@ -28,7 +28,6 @@
.sidebar-header {
flex: 0 0 auto;
- padding: 10px 20px 11px 15px;
}
#search-private-container {
@@ -133,7 +132,7 @@
}
&-label {
- color: $placeholder-color !important;
+ color: #707579 !important;
font-size: 14px !important;
}
@@ -146,7 +145,7 @@
&-avatar.user-avatar {
width: 120px;
height: 120px;
- margin: 0 auto 21px;
+ margin: 1px auto 21px;
font-size: 4rem !important;
&.tgico-avatar_deletedaccount {
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 346b3de6..b8810142 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -187,7 +187,7 @@ input {
top: 100%;
margin-top: 8px;
padding: 9px 0;
- border-radius: $border-radius;
+ border-radius: $border-radius-medium;
opacity: 0;
transform: scale(.8);
transition-property: opacity,transform,visibility;
@@ -250,7 +250,7 @@ input {
&:before {
color: $color-gray;
font-size: 1.5rem;
- margin-right: 35px;
+ margin-right: 32px;
}
&.danger:before {
@@ -265,7 +265,7 @@ input {
height: 54px;
line-height: 54px;
border-radius: 50%;
- background-color: $button-primary-background;
+ background-color: $blue;
text-align: center;
font-size: 1.25em;
/* overflow: hidden; */
@@ -311,12 +311,16 @@ input {
}
}
-.user-title, b, .user-last-message b {
+.user-title, b/* , .user-last-message b */ {
color: #000;
font-weight: 500;
//font-weight: normal;
}
+.user-last-message b {
+ font-weight: 400;
+}
+
.rp {
position: relative;
}
@@ -545,6 +549,13 @@ input {
margin-top: 3px;
margin-left: -1px;
}
+
+ &-title, &:not(.audio-show-progress) &-subtitle {
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+ text-overflow: ellipsis;
+ }
}
#auth-pages {