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

Better voice message layout

Browse Source
This commit is contained in:
morethanwords 2021-10-29 03:14:03 +03:00
parent 2ee82d7597
commit 606fec23ff
4 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/audio.ts
View File

@ -26,7 +26,7 @@ import { joinElementsWith } from "../lib/langPack";
import { MiddleEllipsisElement } from "./middleEllipsis"; import { MiddleEllipsisElement } from "./middleEllipsis";
import htmlToSpan from "../helpers/dom/htmlToSpan"; import htmlToSpan from "../helpers/dom/htmlToSpan";
import { formatFullSentTime } from "../helpers/date"; import { formatFullSentTime } from "../helpers/date";
import { formatBytes } from "../helpers/number"; import { clamp, formatBytes } from "../helpers/number";
import throttleWithRaf from "../helpers/schedulers/throttleWithRaf"; import throttleWithRaf from "../helpers/schedulers/throttleWithRaf";
rootScope.addEventListener('messages_media_read', ({mids, peerId}) => { rootScope.addEventListener('messages_media_read', ({mids, peerId}) => {
@ -90,7 +90,12 @@ function wrapVoiceMessage(audioEl: AudioElement) {
const barMargin = 2; //mediaSizes.isMobile ? 2 : 1; const barMargin = 2; //mediaSizes.isMobile ? 2 : 1;
const barHeightMin = 4; //mediaSizes.isMobile ? 3 : 2; const barHeightMin = 4; //mediaSizes.isMobile ? 3 : 2;
const barHeightMax = mediaSizes.isMobile ? 16 : 23; const barHeightMax = mediaSizes.isMobile ? 16 : 23;
const availW = 150; //mediaSizes.isMobile ? 152 : 190; // const availW = 150; //mediaSizes.isMobile ? 152 : 190;
const minW = mediaSizes.isMobile ? 152 : 190;
const maxW = mediaSizes.isMobile ? 190 : 256;
const duration = doc.duration;
const availW = clamp(duration / 60 * maxW, minW, maxW); // mediaSizes.isMobile ? 152 : 224;
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.classList.add('audio-waveform'); svg.classList.add('audio-waveform');

7
src/components/chat/bubbles.ts
View File

@ -2479,6 +2479,13 @@ export default class ChatBubbles {
bubbleContainer.prepend(messageDiv); bubbleContainer.prepend(messageDiv);
//bubble.prepend(timeSpan, messageDiv); // that's bad //bubble.prepend(timeSpan, messageDiv); // that's bad
if(message.views && !message.fwd_from?.saved_from_msg_id && this.chat.type !== 'pinned') {
const forward = document.createElement('div');
forward.classList.add('bubble-beside-button', 'forward', 'tgico-forward_filled');
bubbleContainer.prepend(forward);
bubble.classList.add('with-beside-button');
}
if(message.views && !message.pFlags.is_outgoing && this.viewsObserver) { if(message.views && !message.pFlags.is_outgoing && this.viewsObserver) {
this.viewsObserver.observe(bubble); this.viewsObserver.observe(bubble);
} }

7
src/components/chat/messageRender.ts
View File

@ -28,13 +28,6 @@ export namespace MessageRender {
bubble.classList.add('channel-post'); bubble.classList.add('channel-post');
time = '<span class="post-views">' + formatNumber(message.views, 1) + '</span> <i class="tgico-channelviews time-icon"></i> ' + (postAuthor ? RichTextProcessor.wrapEmojiText(postAuthor) + ', ' : '') + time; time = '<span class="post-views">' + formatNumber(message.views, 1) + '</span> <i class="tgico-channelviews time-icon"></i> ' + (postAuthor ? RichTextProcessor.wrapEmojiText(postAuthor) + ', ' : '') + time;
if(!message.fwd_from?.saved_from_msg_id && chat.type !== 'pinned') {
const forward = document.createElement('div');
forward.classList.add('bubble-beside-button', 'forward', 'tgico-forward_filled');
bubbleContainer.append(forward);
bubble.classList.add('with-beside-button');
}
} }
if(message.edit_date && chat.type !== 'scheduled' && !message.pFlags.edit_hide) { if(message.edit_date && chat.type !== 'scheduled' && !message.pFlags.edit_hide) {

6
src/scss/partials/_chatBubble.scss
View File

@ -1183,6 +1183,12 @@ $bubble-beside-button-width: 38px;
} }
} }
.message.voice-message {
.document-message {
max-width: fit-content;
}
}
.message.audio-message, .message.audio-message,
.message.voice-message { .message.voice-message {
padding: 8px !important; padding: 8px !important;