Fix video play button
Photo as file thumb Fix topbar layout
This commit is contained in:
morethanwords
parent
025b0d0c02
commit
b50e6a24cc
|
|
@ -277,17 +277,36 @@ export class ChatInput {
|
|||
}
|
||||
|
||||
case 'document': {
|
||||
const isPhoto = file.type.indexOf('image/') !== -1;
|
||||
params.objectURL = URL.createObjectURL(file);
|
||||
let docDiv = wrapDocument({
|
||||
file: file,
|
||||
file_name: file.name || '',
|
||||
size: file.size,
|
||||
type: file.type.indexOf('image/') !== -1 ? 'photo' : 'doc'
|
||||
type: isPhoto ? 'photo' : 'doc',
|
||||
url: params.objectURL
|
||||
} as any, false, true);
|
||||
|
||||
params.objectURL = URL.createObjectURL(file);
|
||||
const finish = () => {
|
||||
itemDiv.append(docDiv);
|
||||
resolve(itemDiv);
|
||||
};
|
||||
|
||||
if(isPhoto) {
|
||||
let img = new Image();
|
||||
img.src = params.objectURL;
|
||||
img.onload = () => {
|
||||
params.width = img.naturalWidth;
|
||||
params.height = img.naturalHeight;
|
||||
|
||||
finish();
|
||||
};
|
||||
|
||||
img.onerror = finish;
|
||||
} else {
|
||||
finish();
|
||||
}
|
||||
|
||||
itemDiv.append(docDiv);
|
||||
resolve(itemDiv);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -292,13 +292,26 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
|
|||
|
||||
let docDiv = document.createElement('div');
|
||||
docDiv.classList.add('document', `ext-${ext}`);
|
||||
|
||||
let ext2 = ext;
|
||||
|
||||
const icoDiv = document.createElement('div');
|
||||
icoDiv.classList.add('document-ico');
|
||||
|
||||
if(doc.type == 'photo') {
|
||||
docDiv.classList.add('photo');
|
||||
ext2 = `<img src="${URL.createObjectURL(doc.file)}">`;
|
||||
|
||||
if(uploading) {
|
||||
icoDiv.innerHTML = `<img src="${doc.url}">`;
|
||||
} else {
|
||||
wrapPhoto(doc, null, icoDiv, 54, 54, false, null, null, null);
|
||||
icoDiv.style.width = icoDiv.style.height = '';
|
||||
}
|
||||
|
||||
const img = icoDiv.querySelector('img');
|
||||
if(img) img.classList.add('document-thumb');
|
||||
} else {
|
||||
icoDiv.innerText = ext;
|
||||
}
|
||||
|
||||
|
||||
let fileName = doc.file_name || 'Unknown.file';
|
||||
let size = formatBytes(doc.size);
|
||||
|
||||
|
|
@ -307,12 +320,13 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
|
|||
}
|
||||
|
||||
docDiv.innerHTML = `
|
||||
<div class="document-ico">${ext2}</div>
|
||||
${!uploading ? `<div class="document-download"><div class="tgico-download"></div></div>` : ''}
|
||||
<div class="document-name">${fileName}</div>
|
||||
<div class="document-size">${size}</div>
|
||||
`;
|
||||
|
||||
|
||||
docDiv.prepend(icoDiv);
|
||||
|
||||
if(!uploading) {
|
||||
let downloadDiv = docDiv.querySelector('.document-download') as HTMLDivElement;
|
||||
let preloader: ProgressivePreloader;
|
||||
|
|
@ -441,7 +455,7 @@ export function wrapPhoto(photo: MyPhoto | MyDocument, message: any, container:
|
|||
const cacheContext = appPhotosManager.getCacheContext(photo);
|
||||
|
||||
let preloader: ProgressivePreloader;
|
||||
if(message.media.preloader) { // means upload
|
||||
if(message?.media?.preloader) { // means upload
|
||||
message.media.preloader.attach(container);
|
||||
} else if(!cacheContext.downloaded) {
|
||||
preloader = new ProgressivePreloader(container, false);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import { InputFileLocation, Document, PhotoSize } from '../../layer';
|
|||
|
||||
export type MyDocument = Document.document;
|
||||
|
||||
// TODO: если залить картинку файлом, а потом перезайти в диалог - превьюшка заново скачается
|
||||
|
||||
class AppDocsManager {
|
||||
private docs: {[docID: string]: MyDocument} = {};
|
||||
|
||||
|
|
@ -97,6 +99,7 @@ class AppDocsManager {
|
|||
break;
|
||||
|
||||
case 'documentAttributeImageSize':
|
||||
doc.type = 'photo';
|
||||
doc.w = attribute.w;
|
||||
doc.h = attribute.h;
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -420,14 +420,14 @@ export class AppImManager {
|
|||
}
|
||||
|
||||
//this.log('chatInner click:', target);
|
||||
if(target.tagName == 'SPAN') {
|
||||
let video = (target.parentElement.querySelector('video') as HTMLElement);
|
||||
const isVideoComponentElement = target.tagName == 'SPAN';
|
||||
/* if(isVideoComponentElement) {
|
||||
const video = target.parentElement.querySelector('video') as HTMLElement;
|
||||
if(video) {
|
||||
video.click(); // hot-fix for time and play button
|
||||
return;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
} */
|
||||
|
||||
if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) {
|
||||
const messageID = +bubble.dataset.mid;
|
||||
|
|
@ -442,8 +442,9 @@ export class AppImManager {
|
|||
return;
|
||||
}
|
||||
|
||||
if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT")
|
||||
if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT" && !target.classList.contains('document-thumb'))
|
||||
|| target.classList.contains('album-item')
|
||||
|| isVideoComponentElement
|
||||
|| (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) {
|
||||
let messageID = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid;
|
||||
let message = appMessagesManager.getMessage(messageID);
|
||||
|
|
@ -486,10 +487,16 @@ export class AppImManager {
|
|||
|
||||
this.log('open mediaViewer single with ids:', ids, idx, targets);
|
||||
|
||||
if(!targets[idx]) {
|
||||
this.log('no target for media viewer!', target);
|
||||
return;
|
||||
}
|
||||
|
||||
appMediaViewer.openMedia(message, targets[idx].element, true,
|
||||
this.scroll.parentElement, targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */);
|
||||
|
||||
//appMediaViewer.openMedia(message, target as HTMLImageElement);
|
||||
return;
|
||||
}
|
||||
|
||||
if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV');
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { RichTextProcessor } from "../richtextprocessor";
|
|||
import { nextRandomInt, bigint } from "../bin_utils";
|
||||
import { telegramMeWebService } from "../mtproto/mtproto";
|
||||
import apiUpdatesManager from "./apiUpdatesManager";
|
||||
import appPhotosManager from "./appPhotosManager";
|
||||
import appPhotosManager, { MyPhoto } from "./appPhotosManager";
|
||||
|
||||
import AppStorage from '../storage';
|
||||
import appPeersManager from "./appPeersManager";
|
||||
|
|
@ -903,7 +903,9 @@ export class AppMessagesManager {
|
|||
caption = RichTextProcessor.parseMarkdown(caption, entities);
|
||||
}
|
||||
|
||||
const attributes: any[] = [];
|
||||
const attributes: DocumentAttribute[] = [];
|
||||
|
||||
const isPhoto = ['image/jpeg', 'image/png', 'image/bmp'].indexOf(fileType) >= 0;
|
||||
|
||||
let actionName = '';
|
||||
if(!options.isMedia) {
|
||||
|
|
@ -913,26 +915,27 @@ export class AppMessagesManager {
|
|||
} else if(isDocument) { // maybe it's a sticker or gif
|
||||
attachType = 'document';
|
||||
apiFileName = '';
|
||||
} else if(['image/jpeg', 'image/png', 'image/bmp'].indexOf(fileType) >= 0) {
|
||||
} else if(isPhoto) {
|
||||
attachType = 'photo';
|
||||
apiFileName = 'photo.' + fileType.split('/')[1];
|
||||
actionName = 'sendMessageUploadPhotoAction';
|
||||
|
||||
let photo: any = {
|
||||
let photo: MyPhoto = {
|
||||
_: 'photo',
|
||||
id: '' + messageID,
|
||||
sizes: [{
|
||||
_: 'photoSize',
|
||||
w: options.width,
|
||||
h: options.height,
|
||||
type: 'm',
|
||||
type: 'full',
|
||||
location: null,
|
||||
size: file.size
|
||||
} as PhotoSize],
|
||||
}],
|
||||
w: options.width,
|
||||
h: options.height,
|
||||
downloaded: file.size,
|
||||
url: options.objectURL || ''
|
||||
};
|
||||
} as any;
|
||||
|
||||
appPhotosManager.savePhoto(photo);
|
||||
} else if(fileType.indexOf('audio/') === 0 || ['video/ogg'].indexOf(fileType) >= 0) {
|
||||
|
|
@ -947,14 +950,13 @@ export class AppMessagesManager {
|
|||
attachType = 'voice';
|
||||
}
|
||||
|
||||
let attribute = {
|
||||
let attribute: DocumentAttribute.documentAttributeAudio = {
|
||||
_: 'documentAttributeAudio',
|
||||
flags: flags,
|
||||
pFlags: { // that's only for client, not going to telegram
|
||||
voice: options.isVoiceMessage
|
||||
voice: options.isVoiceMessage || undefined
|
||||
},
|
||||
waveform: options.waveform,
|
||||
voice: options.isVoiceMessage,
|
||||
duration: options.duration || 0
|
||||
};
|
||||
|
||||
|
|
@ -966,15 +968,13 @@ export class AppMessagesManager {
|
|||
|
||||
let flags = 1;
|
||||
if(options.isRoundMessage) flags |= 2;
|
||||
let videoAttribute = {
|
||||
let videoAttribute: DocumentAttribute.documentAttributeVideo = {
|
||||
_: 'documentAttributeVideo',
|
||||
flags: flags,
|
||||
pFlags: { // that's only for client, not going to telegram
|
||||
supports_streaming: true,
|
||||
round_message: options.isRoundMessage
|
||||
round_message: options.isRoundMessage || undefined
|
||||
},
|
||||
round_message: options.isRoundMessage,
|
||||
supports_streaming: true,
|
||||
duration: options.duration,
|
||||
w: options.width,
|
||||
h: options.height
|
||||
|
|
@ -990,19 +990,38 @@ export class AppMessagesManager {
|
|||
attributes.push({_: 'documentAttributeFilename', file_name: fileName || apiFileName});
|
||||
|
||||
if(['document', 'video', 'audio', 'voice'].indexOf(attachType) !== -1 && !isDocument) {
|
||||
let doc: MyDocument = {
|
||||
const thumbs: PhotoSize[] = [];
|
||||
const doc: MyDocument = {
|
||||
_: 'document',
|
||||
id: '' + messageID,
|
||||
duration: options.duration,
|
||||
attributes: attributes,
|
||||
attributes,
|
||||
w: options.width,
|
||||
h: options.height,
|
||||
downloaded: file.size,
|
||||
thumbs: [],
|
||||
thumbs,
|
||||
mime_type: fileType,
|
||||
url: options.objectURL || '',
|
||||
size: file.size
|
||||
} as any;
|
||||
|
||||
if(isPhoto) {
|
||||
attributes.push({
|
||||
_: 'documentAttributeImageSize',
|
||||
w: options.width,
|
||||
h: options.height
|
||||
});
|
||||
|
||||
thumbs.push({
|
||||
_: 'photoSize',
|
||||
w: options.width,
|
||||
h: options.height,
|
||||
type: 'full',
|
||||
location: null,
|
||||
size: file.size,
|
||||
url: options.objectURL
|
||||
});
|
||||
}
|
||||
|
||||
appDocsManager.saveDoc(doc);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,12 +77,13 @@ $beside-button-margin: 2.875rem;
|
|||
}
|
||||
|
||||
.chat-info {
|
||||
flex-grow: 1;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-join {
|
||||
width: auto;
|
||||
padding: 0 22.185px;
|
||||
width: 117px;
|
||||
height: 36px;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -94,11 +95,10 @@ $beside-button-margin: 2.875rem;
|
|||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
// padding-left: 17px;
|
||||
// line-height: 1.6;
|
||||
flex: 1 1 auto;
|
||||
padding-left: 10px;
|
||||
//line-height: 1.3;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
max-width: 208px;
|
||||
|
|
@ -132,6 +132,7 @@ $beside-button-margin: 2.875rem;
|
|||
line-height: 40px;
|
||||
//font-size: 16px;
|
||||
font-size: 16px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&:before {
|
||||
font-size: 20px;
|
||||
|
|
@ -324,13 +325,17 @@ $beside-button-margin: 2.875rem;
|
|||
#im-title {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 1.5rem);
|
||||
overflow: hidden;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
/* @include respond-to(handhelds) {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
} */
|
||||
|
||||
span.emoji {
|
||||
vertical-align: inherit;
|
||||
|
|
@ -637,6 +642,8 @@ $beside-button-margin: 2.875rem;
|
|||
}
|
||||
|
||||
.pinned-container {
|
||||
flex: 0 0 auto;
|
||||
|
||||
@include respond-to(handhelds) {
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
|
||||
|
||||
|
|
|
|||
|
|
@ -628,10 +628,20 @@ avatar-element {
|
|||
background: #000;
|
||||
border-radius: $border-radius;
|
||||
|
||||
.document-thumb {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.document-download {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user