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

Fix video play button 

Photo as file thumb
Fix topbar layout
master
morethanwords 4 years ago
parent
043bdeedb0
commit
9bf0e2353b
7 changed files with 122 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      src/components/chat/input.ts
  2. 22
      src/components/wrappers.ts
  3. 3
      src/lib/appManagers/appDocsManager.ts
  4. 19
      src/lib/appManagers/appImManager.ts
  5. 53
      src/lib/appManagers/appMessagesManager.ts
  6. 25
      src/scss/partials/_chat.scss
  7. 10
      src/scss/style.scss

27
src/components/chat/input.ts
Unescape View File

@ -277,17 +277,36 @@ export class ChatInput {
} }
case 'document': { case 'document': {
const isPhoto = file.type.indexOf('image/') !== -1;
params.objectURL = URL.createObjectURL(file);
let docDiv = wrapDocument({ let docDiv = wrapDocument({
file: file, file: file,
file_name: file.name || '', file_name: file.name || '',
size: file.size, size: file.size,
type: file.type.indexOf('image/') !== -1 ? 'photo' : 'doc' type: isPhoto ? 'photo' : 'doc',
url: params.objectURL
} as any, false, true); } 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; break;
} }
} }

22
src/components/wrappers.ts
Unescape View File

@ -293,10 +293,23 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
let docDiv = document.createElement('div'); let docDiv = document.createElement('div');
docDiv.classList.add('document', `ext-${ext}`); docDiv.classList.add('document', `ext-${ext}`);
let ext2 = ext; const icoDiv = document.createElement('div');
icoDiv.classList.add('document-ico');
if(doc.type == 'photo') { if(doc.type == 'photo') {
docDiv.classList.add('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 fileName = doc.file_name || 'Unknown.file';
@ -307,12 +320,13 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
} }
docDiv.innerHTML = ` docDiv.innerHTML = `
<div class="document-ico">${ext2}</div>
${!uploading ? `<div class="document-download"><div class="tgico-download"></div></div>` : ''} ${!uploading ? `<div class="document-download"><div class="tgico-download"></div></div>` : ''}
<div class="document-name">${fileName}</div> <div class="document-name">${fileName}</div>
<div class="document-size">${size}</div> <div class="document-size">${size}</div>
`; `;
docDiv.prepend(icoDiv);
if(!uploading) { if(!uploading) {
let downloadDiv = docDiv.querySelector('.document-download') as HTMLDivElement; let downloadDiv = docDiv.querySelector('.document-download') as HTMLDivElement;
let preloader: ProgressivePreloader; let preloader: ProgressivePreloader;
@ -441,7 +455,7 @@ export function wrapPhoto(photo: MyPhoto | MyDocument, message: any, container:
const cacheContext = appPhotosManager.getCacheContext(photo); const cacheContext = appPhotosManager.getCacheContext(photo);
let preloader: ProgressivePreloader; let preloader: ProgressivePreloader;
if(message.media.preloader) { // means upload if(message?.media?.preloader) { // means upload
message.media.preloader.attach(container); message.media.preloader.attach(container);
} else if(!cacheContext.downloaded) { } else if(!cacheContext.downloaded) {
preloader = new ProgressivePreloader(container, false); preloader = new ProgressivePreloader(container, false);

3
src/lib/appManagers/appDocsManager.ts
Unescape View File

@ -9,6 +9,8 @@ import { InputFileLocation, Document, PhotoSize } from '../../layer';
export type MyDocument = Document.document; export type MyDocument = Document.document;
// TODO: если залить картинку файлом, а потом перезайти в диалог - превьюшка заново скачается
class AppDocsManager { class AppDocsManager {
private docs: {[docID: string]: MyDocument} = {}; private docs: {[docID: string]: MyDocument} = {};
@ -97,6 +99,7 @@ class AppDocsManager {
break; break;
case 'documentAttributeImageSize': case 'documentAttributeImageSize':
doc.type = 'photo';
doc.w = attribute.w; doc.w = attribute.w;
doc.h = attribute.h; doc.h = attribute.h;
break; break;

19
src/lib/appManagers/appImManager.ts
Unescape View File

@ -420,14 +420,14 @@ export class AppImManager {
} }
//this.log('chatInner click:', target); //this.log('chatInner click:', target);
if(target.tagName == 'SPAN') { const isVideoComponentElement = target.tagName == 'SPAN';
let video = (target.parentElement.querySelector('video') as HTMLElement); /* if(isVideoComponentElement) {
const video = target.parentElement.querySelector('video') as HTMLElement;
if(video) { if(video) {
video.click(); // hot-fix for time and play button video.click(); // hot-fix for time and play button
return;
} }
} */
return;
}
if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) { if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) {
const messageID = +bubble.dataset.mid; const messageID = +bubble.dataset.mid;
@ -442,8 +442,9 @@ export class AppImManager {
return; 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') || target.classList.contains('album-item')
|| isVideoComponentElement
|| (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) { || (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) {
let messageID = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid; let messageID = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid;
let message = appMessagesManager.getMessage(messageID); let message = appMessagesManager.getMessage(messageID);
@ -486,10 +487,16 @@ export class AppImManager {
this.log('open mediaViewer single with ids:', ids, idx, targets); 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, appMediaViewer.openMedia(message, targets[idx].element, true,
this.scroll.parentElement, targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */); this.scroll.parentElement, targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */);
//appMediaViewer.openMedia(message, target as HTMLImageElement); //appMediaViewer.openMedia(message, target as HTMLImageElement);
return;
} }
if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV'); if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV');

53
src/lib/appManagers/appMessagesManager.ts
Unescape View File

@ -6,7 +6,7 @@ import { RichTextProcessor } from "../richtextprocessor";
import { nextRandomInt, bigint } from "../bin_utils"; import { nextRandomInt, bigint } from "../bin_utils";
import { telegramMeWebService } from "../mtproto/mtproto"; import { telegramMeWebService } from "../mtproto/mtproto";
import apiUpdatesManager from "./apiUpdatesManager"; import apiUpdatesManager from "./apiUpdatesManager";
import appPhotosManager from "./appPhotosManager"; import appPhotosManager, { MyPhoto } from "./appPhotosManager";
import AppStorage from '../storage'; import AppStorage from '../storage';
import appPeersManager from "./appPeersManager"; import appPeersManager from "./appPeersManager";
@ -903,7 +903,9 @@ export class AppMessagesManager {
caption = RichTextProcessor.parseMarkdown(caption, entities); caption = RichTextProcessor.parseMarkdown(caption, entities);
} }
const attributes: any[] = []; const attributes: DocumentAttribute[] = [];
const isPhoto = ['image/jpeg', 'image/png', 'image/bmp'].indexOf(fileType) >= 0;
let actionName = ''; let actionName = '';
if(!options.isMedia) { if(!options.isMedia) {
@ -913,26 +915,27 @@ export class AppMessagesManager {
} else if(isDocument) { // maybe it's a sticker or gif } else if(isDocument) { // maybe it's a sticker or gif
attachType = 'document'; attachType = 'document';
apiFileName = ''; apiFileName = '';
} else if(['image/jpeg', 'image/png', 'image/bmp'].indexOf(fileType) >= 0) { } else if(isPhoto) {
attachType = 'photo'; attachType = 'photo';
apiFileName = 'photo.' + fileType.split('/')[1]; apiFileName = 'photo.' + fileType.split('/')[1];
actionName = 'sendMessageUploadPhotoAction'; actionName = 'sendMessageUploadPhotoAction';
let photo: any = { let photo: MyPhoto = {
_: 'photo', _: 'photo',
id: '' + messageID, id: '' + messageID,
sizes: [{ sizes: [{
_: 'photoSize', _: 'photoSize',
w: options.width, w: options.width,
h: options.height, h: options.height,
type: 'm', type: 'full',
location: null,
size: file.size size: file.size
} as PhotoSize], }],
w: options.width, w: options.width,
h: options.height, h: options.height,
downloaded: file.size, downloaded: file.size,
url: options.objectURL || '' url: options.objectURL || ''
}; } as any;
appPhotosManager.savePhoto(photo); appPhotosManager.savePhoto(photo);
} else if(fileType.indexOf('audio/') === 0 || ['video/ogg'].indexOf(fileType) >= 0) { } else if(fileType.indexOf('audio/') === 0 || ['video/ogg'].indexOf(fileType) >= 0) {
@ -947,14 +950,13 @@ export class AppMessagesManager {
attachType = 'voice'; attachType = 'voice';
} }
let attribute = { let attribute: DocumentAttribute.documentAttributeAudio = {
_: 'documentAttributeAudio', _: 'documentAttributeAudio',
flags: flags, flags: flags,
pFlags: { // that's only for client, not going to telegram pFlags: { // that's only for client, not going to telegram
voice: options.isVoiceMessage voice: options.isVoiceMessage || undefined
}, },
waveform: options.waveform, waveform: options.waveform,
voice: options.isVoiceMessage,
duration: options.duration || 0 duration: options.duration || 0
}; };
@ -966,15 +968,13 @@ export class AppMessagesManager {
let flags = 1; let flags = 1;
if(options.isRoundMessage) flags |= 2; if(options.isRoundMessage) flags |= 2;
let videoAttribute = { let videoAttribute: DocumentAttribute.documentAttributeVideo = {
_: 'documentAttributeVideo', _: 'documentAttributeVideo',
flags: flags, flags: flags,
pFlags: { // that's only for client, not going to telegram pFlags: { // that's only for client, not going to telegram
supports_streaming: true, supports_streaming: true,
round_message: options.isRoundMessage round_message: options.isRoundMessage || undefined
}, },
round_message: options.isRoundMessage,
supports_streaming: true,
duration: options.duration, duration: options.duration,
w: options.width, w: options.width,
h: options.height h: options.height
@ -990,20 +990,39 @@ export class AppMessagesManager {
attributes.push({_: 'documentAttributeFilename', file_name: fileName || apiFileName}); attributes.push({_: 'documentAttributeFilename', file_name: fileName || apiFileName});
if(['document', 'video', 'audio', 'voice'].indexOf(attachType) !== -1 && !isDocument) { if(['document', 'video', 'audio', 'voice'].indexOf(attachType) !== -1 && !isDocument) {
let doc: MyDocument = { const thumbs: PhotoSize[] = [];
const doc: MyDocument = {
_: 'document', _: 'document',
id: '' + messageID, id: '' + messageID,
duration: options.duration, duration: options.duration,
attributes: attributes, attributes,
w: options.width, w: options.width,
h: options.height, h: options.height,
downloaded: file.size, downloaded: file.size,
thumbs: [], thumbs,
mime_type: fileType, mime_type: fileType,
url: options.objectURL || '', url: options.objectURL || '',
size: file.size size: file.size
} as any; } 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); appDocsManager.saveDoc(doc);
} }

25
src/scss/partials/_chat.scss
Unescape View File

@ -77,12 +77,13 @@ $beside-button-margin: 2.875rem;
} }
.chat-info { .chat-info {
flex-grow: 1; flex: 1 1 auto;
overflow: hidden;
} }
.chat-join { .chat-join {
width: auto; width: auto;
padding: 0 22.185px; width: 117px;
height: 36px; height: 36px;
font-weight: 400; font-weight: 400;
font-size: 0.875rem; font-size: 0.875rem;
@ -94,11 +95,10 @@ $beside-button-margin: 2.875rem;
} }
.content { .content {
flex: 1; flex: 1 1 auto;
// padding-left: 17px;
// line-height: 1.6;
padding-left: 10px; padding-left: 10px;
//line-height: 1.3; max-width: 100%;
overflow: hidden;
@include respond-to(handhelds) { @include respond-to(handhelds) {
max-width: 208px; max-width: 208px;
@ -132,6 +132,7 @@ $beside-button-margin: 2.875rem;
line-height: 40px; line-height: 40px;
//font-size: 16px; //font-size: 16px;
font-size: 16px; font-size: 16px;
flex: 0 0 auto;
&:before { &:before {
font-size: 20px; font-size: 20px;
@ -324,13 +325,17 @@ $beside-button-margin: 2.875rem;
#im-title { #im-title {
cursor: pointer; cursor: pointer;
font-size: 18px; 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; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} } */
span.emoji { span.emoji {
vertical-align: inherit; vertical-align: inherit;
@ -637,6 +642,8 @@ $beside-button-margin: 2.875rem;
} }
.pinned-container { .pinned-container {
flex: 0 0 auto;
@include respond-to(handhelds) { @include respond-to(handhelds) {
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);

10
src/scss/style.scss
Unescape View File

@ -628,10 +628,20 @@ avatar-element {
background: #000; background: #000;
border-radius: $border-radius; border-radius: $border-radius;
.document-thumb {
object-fit: cover;
width: 100%;
height: 100%;
}
&:after { &:after {
display: none; display: none;
} }
} }
.document-download {
background-color: rgba(0, 0, 0, .15);
}
} }
&-name { &-name {

Write Preview
Loading…
Cancel
Save