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

right sidebar links & half of audiomessages

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-02-15 22:20:38 +07:00
parent cd806a8778
commit 2a3a5cdd2f
14 changed files with 395 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/wrappers.ts
View File

@ -155,6 +155,10 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
}
export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement {
if(doc.type == 'voice') {
return wrapAudio(doc, withTime);
}
let docDiv = document.createElement('div');
docDiv.classList.add('document');
@ -231,6 +235,69 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
return docDiv;
}
export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
let div = document.createElement('div');
div.classList.add('audio');
div.innerHTML = `
<div class="audio-toggle audio-ico tgico-largeplay"></div>
<div class="audio-download"><div class="tgico-download"></div></div>
<div class="audio-title"></div>
<div class="audio-subtitle"></div>
<div class="audio-time"></div>
`;
console.log('wrapping audio', doc);
let downloadDiv = div.querySelector('.audio-download') as HTMLDivElement;
let preloader: ProgressivePreloader;
let promise: CancellablePromise<Blob>;
let onClick = () => {
if(!promise) {
if(downloadDiv.classList.contains('downloading')) {
return; // means not ready yet
}
if(!preloader) {
preloader = new ProgressivePreloader(null, true);
}
let promise = appDocsManager.downloadDoc(doc.id);
preloader.attach(downloadDiv, true, promise);
promise.then(blob => {
downloadDiv.classList.remove('downloading');
downloadDiv.remove();
let audio = document.createElement('audio');
let source = document.createElement('source');
source.src = URL.createObjectURL(blob);
source.type = doc.mime_type;
div.removeEventListener('click', onClick);
div.querySelector('.audio-toggle').addEventListener('click', () => {
audio.currentTime = 0;
audio.play();
});
audio.append(source);
});
downloadDiv.classList.add('downloading');
} else {
downloadDiv.classList.remove('downloading');
promise = null;
}
};
div.addEventListener('click', onClick);
div.click();
return div;
}
export function wrapPhoto(this: AppImManager, photo: any, message: any, container: HTMLDivElement) {
//container.classList.add('photo');

17
src/lib/appManagers/appDialogsManager.ts
View File

@ -7,6 +7,7 @@ import appMessagesManager from "./appMessagesManager";
import appUsersManager from "./appUsersManager";
import { RichTextProcessor } from "../richtextprocessor";
import { ripple } from "../../components/misc";
import appSidebarLeft from "./appSidebarLeft";
type DialogDom = {
avatarDiv: HTMLDivElement,
@ -246,6 +247,8 @@ export class AppDialogsManager {
lastMessage = appMessagesManager.getMessage(dialog.top_message);
}
console.log('setlastMessage:', lastMessage);
if(lastMessage._ == 'messageEmpty') return;
if(!dom) {
@ -402,6 +405,20 @@ export class AppDialogsManager {
dom.unreadMessagesSpan.classList.remove('unread', 'unread-muted');
dom.unreadMessagesSpan.classList.add('tgico-pinnedchat');
}
// set archived new count
if(dialog.folder_id == 1) {
let sum = Object.keys(this.domsArchived).map(p => +p).reduce((acc: number, peerID: number) => {
let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
if(dialog) {
return acc + dialog.unread_count;
}
return acc;
}, 0);
appSidebarLeft.archivedCount.innerText = '' + sum;
}
}
public getDialogDom(peerID: number) {

48
src/lib/appManagers/appImManager.ts
View File

@ -575,6 +575,8 @@ export class AppImManager {
cancelBtn?: HTMLButtonElement
} = {};
private setPeerPromise: Promise<boolean> = null;
constructor() {
this.log = logger('IM');
@ -818,7 +820,26 @@ export class AppImManager {
return;
}
appMediaViewer.openMedia(message, target as HTMLImageElement);
let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
let message = appMessagesManager.getMessage(id);
return message.media && (message.media.photo
|| (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif'))
|| (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo)));
}).sort();
let idx = ids.findIndex(i => i == messageID);
let prev = ids[idx + 1] || null;
let next = ids[idx - 1] || null;
let prevTarget = this.bubbles[prev] ? this.bubbles[prev].querySelector('img, video') as HTMLElement : null;
let nextTarget = this.bubbles[next] ? this.bubbles[next].querySelector('img, video') as HTMLElement : null;
this.log('ids', ids, idx, this.bubbles[prev], this.bubbles[next]);
appMediaViewer.openMedia(message, target, nextTarget, prevTarget);
//appMediaViewer.openMedia(message, target as HTMLImageElement);
}
//console.log('chatInner click', e);
@ -979,7 +1000,7 @@ export class AppImManager {
this.contextMenu.querySelector('.menu-reply').addEventListener('click', () => {
let message = appMessagesManager.getMessage(this.contextMenuMsgID);
this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID), message.message);
this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID, true), message.message);
this.chatInputC.replyToMsgID = this.contextMenuMsgID;
this.chatInputC.editMsgID = 0;
});
@ -1417,7 +1438,11 @@ export class AppImManager {
let samePeer = this.peerID == peerID;
appMessagesManager.readHistory(this.peerID, lastMsgID); // lol
if(this.setPeerPromise && samePeer) return this.setPeerPromise;
if(lastMsgID) {
appMessagesManager.readHistory(peerID, lastMsgID); // lol
}
if(samePeer) {
if(!testScroll && !lastMsgID) {
@ -1488,7 +1513,7 @@ export class AppImManager {
this.chatInner.classList.remove('is-chat');
}
return Promise.all([
return this.setPeerPromise = Promise.all([
this.getHistory(forwarding ? lastMsgID + 1 : lastMsgID).then(() => {
this.log('setPeer removing preloader');
@ -1528,8 +1553,19 @@ export class AppImManager {
}) */,
appSidebarRight.fillProfileElements()
]).catch(err => {
]).then(() => {
if(this.peerID == peerID) {
this.setPeerPromise = null;
}
return true;
}).catch(err => {
if(this.peerID == peerID) {
this.setPeerPromise = null;
}
this.log.error('setPeer promises error:', err);
return false;
});
}
@ -1591,7 +1627,7 @@ export class AppImManager {
}
public renderMessagesByIDs(msgIDs: number[]) {
if(!this.bubbles[this.firstTopMsgID]) { // seems search active
if(!this.bubbles[this.firstTopMsgID] && Object.keys(this.bubbles).length) { // seems search active
this.log('seems search is active, skipping render:', msgIDs);
return;
}

8
src/lib/appManagers/appMediaViewer.ts
View File

@ -209,11 +209,11 @@ export class AppMediaViewer {
if(mover.firstElementChild) {
(mover.firstElementChild as HTMLElement).style.borderRadius = borderRadius;
}
}, delay / 2);
if(target.tagName == 'DIV') {
mover.classList.add('cover');
}
if(target.tagName == 'DIV') {
mover.classList.add('cover');
}
}, delay / 2);
setTimeout(() => {
mover.innerHTML = '';

2
src/lib/appManagers/appMessagesManager.ts
View File

@ -1349,7 +1349,7 @@ export class AppMessagesManager {
let wasDialogBefore = this.getDialogByPeerID(peerID)[0];
// here need to just replace, not FULL replace dialog! WARNING
if(wasDialogBefore.pFlags.pinned) {
if(wasDialogBefore && wasDialogBefore.pFlags && wasDialogBefore.pFlags.pinned) {
if(!dialog.pFlags) dialog.pFlags = {};
dialog.pFlags.pinned = true;
dialog.pinnedIndex = wasDialogBefore.pinnedIndex;

54
src/lib/appManagers/appSidebarLeft.ts
View File

@ -3,7 +3,7 @@ import { putPreloader, formatPhoneNumber } from "../../components/misc";
import Scrollable from '../../components/scrollable';
import appMessagesManager, { AppMessagesManager } from "./appMessagesManager";
import appDialogsManager from "./appDialogsManager";
import { isElementInViewport, numberWithCommas } from "../utils";
import { isElementInViewport, numberWithCommas, cancelEvent } from "../utils";
import appMessagesIDsManager from "./appMessagesIDsManager";
import appImManager from "./appImManager";
import appUsersManager from "./appUsersManager";
@ -42,12 +42,13 @@ class AppSidebarLeft {
private sidebarEl = document.querySelector('.page-chats .chats-container') as HTMLDivElement;
private searchInput = document.getElementById('global-search') as HTMLInputElement;
private toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
private backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
private searchContainer = this.sidebarEl.querySelector('#search-container') as HTMLDivElement;
private menuEl = this.toolsBtn.querySelector('.btn-menu');
private savedBtn = this.menuEl.querySelector('.menu-saved');
private archivedBtn = this.menuEl.querySelector('.menu-archive');
private archivedCount = this.archivedBtn.querySelector('.archived-count') as HTMLSpanElement;
public archivedCount = this.archivedBtn.querySelector('.archived-count') as HTMLSpanElement;
private listsContainer: HTMLDivElement = null;
@ -120,8 +121,10 @@ class AppSidebarLeft {
this.archivedBtn.addEventListener('click', (e) => {
this.chatsArchivedContainer.classList.add('active');
this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
this.toolsBtn.classList.add('tgico-back');
this.toolsBtn.classList.remove('active');
this.backBtn.classList.add('active');
//this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
//this.toolsBtn.classList.add('tgico-back');
});
/* this.listsContainer.insertBefore(this.searchMessagesList, this.listsContainer.lastElementChild);
@ -135,10 +138,11 @@ class AppSidebarLeft {
//this.searchContainer.append(this.listsContainer);
let clickTimeout = 0;
this.searchInput.addEventListener('focus', (e) => {
this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
this.toolsBtn.classList.add('tgico-back');
/* this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
this.toolsBtn.classList.add('tgico-back'); */
this.toolsBtn.classList.remove('active');
this.backBtn.classList.add('active');
this.searchContainer.classList.add('active');
if(!this.searchInput.value) {
@ -149,15 +153,17 @@ class AppSidebarLeft {
this.searchInput.addEventListener('blur', (e) => {
if(!this.searchInput.value) {
this.toolsBtn.classList.add('tgico-menu');
this.toolsBtn.classList.remove('tgico-back');
/* this.toolsBtn.classList.add('tgico-menu');
this.toolsBtn.classList.remove('tgico-back'); */
this.toolsBtn.classList.add('active');
this.backBtn.classList.remove('active');
this.searchContainer.classList.remove('active');
setTimeout(() => {
/* setTimeout(() => {
//this.toolsBtn.click();
this.toolsBtn.classList.add('btn-menu-toggle');
}, 200);
}, 200); */
}
/* this.peerID = 0;
@ -188,24 +194,12 @@ class AppSidebarLeft {
this.searchPromise = null;
this.searchMore();
});
this.toolsBtn.addEventListener('click', (e) => {
this.log('click', this.toolsBtn.classList.contains('tgico-back'));
if(this.toolsBtn.classList.contains('tgico-back')) {
this.searchInput.value = '';
this.toolsBtn.classList.add('tgico-menu', 'btn-menu-toggle');
this.toolsBtn.classList.remove('tgico-back');
this.searchContainer.classList.remove('active');
this.chatsArchivedContainer.classList.remove('active');
this.peerID = 0;
e.stopPropagation();
e.cancelBubble = true;
e.preventDefault();
return false;
}
return true;
}, true);
this.backBtn.addEventListener('click', (e) => {
this.chatsArchivedContainer.classList.remove('active');
this.toolsBtn.classList.add('active');
this.backBtn.classList.remove('active');
});
window.addEventListener('resize', () => {
this.chatsLoadCount = Math.round(document.body.scrollHeight / 70 * 1.5);
@ -250,10 +244,10 @@ class AppSidebarLeft {
});
}
if(archived) {
/* if(archived) {
let count = result.count;
this.archivedCount.innerText = '' + count;
}
} */
this.log('loaded ' + this.chatsLoadCount + ' dialogs by offset:', offset, result, this.scroll.hiddenElements);
this.scroll.onScroll();

76
src/lib/appManagers/appSidebarRight.ts
View File

@ -11,7 +11,7 @@ import { logger } from "../polyfill";
import appImManager from "./appImManager";
import appMediaViewer from "./appMediaViewer";
import LazyLoadQueue from "../../components/lazyLoadQueue";
import { wrapDocument } from "../../components/wrappers";
import { wrapDocument, wrapAudio } from "../../components/wrappers";
class AppSidebarRight {
public sidebarEl = document.querySelector('.profile-container') as HTMLDivElement;
@ -305,7 +305,7 @@ class AppSidebarRight {
}
case 'inputMessagesFilterDocument': {
if(!message.media.document) {
if(!message.media.document || message.media.document.type == 'voice') {
break;
}
@ -322,9 +322,79 @@ class AppSidebarRight {
this.sharedMedia.contentDocuments.append(div);
break;
}
case 'inputMessagesFilterUrl': {
if(!message.media.webpage || message.media.webpage._ == 'webPageEmpty') {
break;
}
let webpage = message.media.webpage;
let div = document.createElement('div');
let previewDiv = document.createElement('div');
previewDiv.classList.add('preview');
this.log('wrapping webpage', webpage);
if(webpage.photo) {
let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 380, 0))
.then((blob) => {
if($rootScope.selectedPeerID != peerID) {
this.log.warn('peer changed');
return;
}
previewDiv.style.backgroundImage = 'url(' + URL.createObjectURL(blob) + ')';
});
this.lazyLoadQueueSidebar.push({div: previewDiv, load});
} else {
previewDiv.innerText = (webpage.title || webpage.description || webpage.url || webpage.display_url).slice(0, 1);
previewDiv.classList.add('empty');
}
let title = webpage.rTitle || '';
let subtitle = webpage.rDescription || '';
let url = RichTextProcessor.wrapRichText(webpage.url || '');
if(!title) {
//title = new URL(webpage.url).hostname;
title = webpage.display_url.split('/', 1)[0];
}
div.append(previewDiv);
div.insertAdjacentHTML('beforeend', `
<div class="title">${title}</div>
<div class="subtitle">${subtitle}</div>
<div class="url">${url}</div>
`);
if(div.innerText.trim().length) {
this.sharedMedia.contentLinks.append(div);
}
break;
}
/* case 'inputMessagesFilterVoice': {
//this.log('wrapping audio', message.media);
if(!message.media || !message.media.document || message.media.document.type != 'voice') {
break;
}
let doc = message.media.document;
this.log('wrapping audio', doc);
let audioDiv = wrapAudio(doc);
this.sharedMedia.contentAudio.append(audioDiv);
break;
} */
default:
//console.warn('death is my friend', message);
console.warn('death is my friend', message);
break;
}
});

2
src/lib/appManagers/appUsersManager.ts
View File

@ -291,7 +291,7 @@ export class AppUsersManager {
public getUserInput(id: number) {
var user = this.getUser(id);
if(user.pFlags.self) {
if(user.pFlags && user.pFlags.self) {
return {_: 'inputUserSelf'};
}

5
src/lib/utils.js
View File

@ -328,7 +328,8 @@ export const langPack = {
"messageActionChannelCreate": "Channel created",
"messageActionChannelEditTitle": "Channel renamed",
"messageActionChannelEditPhoto": "Channel photo updated",
"messageActionChannelDeletePhoto": "Channel photo removed",
"messageActionChannelDeletePhoto": "Channel photo removed",
"messageActionHistoryClear": "History cleared",
"messageActionPhoneCall.in_ok": "Incoming Call",
"messageActionPhoneCall.out_ok": "Outgoing Call",
@ -582,7 +583,7 @@ export function calcImageInBox (imageW, imageH, boxW, boxH, noZooom) {
if(imageW < boxW && imageH < boxH) {
return {w: imageW, h: imageH};
}
var boxedImageW = boxW
var boxedImageH = boxH

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

@ -52,6 +52,7 @@
background-color: #fff;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
display: flex;
align-items: center;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
@ -171,6 +172,7 @@
opacity: 0;
transition: .2s opacity;
user-select: none;
-webkit-user-select: none;
&:before {
margin-left: .75px;
@ -279,6 +281,7 @@
box-shadow: none;
line-height: 1;
user-select: none;
-webkit-user-select: none;
.attachment {
padding-top: .5rem;
@ -445,6 +448,7 @@
margin-bottom: 3px;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
cursor: pointer;
position: relative;
@ -1236,6 +1240,7 @@
border-radius: 8px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
width: 44px;
height: 44px;
@ -1282,6 +1287,7 @@
/* overflow: hidden; */
cursor: pointer;
user-select: none;
-webkit-user-select: none;
/* margin: 3.5px 0;
margin-right: 6.25px; */
padding: 1px 2.5px;

40
src/scss/partials/_leftSidebar.scss
View File

@ -38,6 +38,42 @@
}
}
.sidebar-header__btn-container {
position: relative;
width: 39.75px;
height: 39px;
> * {
visibility: hidden;
opacity: 0;
position: absolute;
left: 0;
top: 0;
transition: .2s opacity;
z-index: 2;
&:before {
transition: .2s transform;
transform: rotate(180deg);
}
& + * {
margin-left: 0!important;
}
&.active {
margin-top: 1px;
opacity: 1;
visibility: visible;
color: #707579;
&:before {
transform: rotate(0deg);
}
}
}
}
.sidebar-tools-button .btn-menu {
width: 217px;
@ -55,6 +91,10 @@
position: absolute;
right: 16px;
}
.archived-count:empty {
display: none;
}
}
.search-group {

4
src/scss/partials/_mediaViewer.scss
View File

@ -200,6 +200,9 @@
img, video {
width: 100%;
height: 100%;
opacity: 1;
transition: .2s opacity;
user-select: none;
}
&.cover {
@ -209,6 +212,7 @@
width: auto;
height: auto;
overflow: hidden;
opacity: 0;
}
}

55
src/scss/partials/_sidebar.scss
View File

@ -184,5 +184,60 @@
text-overflow: ellipsis;
}
}
#content-links {
padding: 0 15px 15px 15px;
> div {
display: flex;
flex-direction: column;
margin-top: 15px;
padding-bottom: 10px;
position: relative;
padding-left: 60px;
overflow: hidden;
//min-height: 48px;
min-height: 58px;
.preview {
height: 48px;
width: 48px;
border-radius: $border-radius;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
&.empty {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #fff;
text-transform: uppercase;
background-color: $blue;
}
}
.url {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
#content-audio {
padding: 0 15px 15px 15px;
> div {
margin-top: 15px;
padding-bottom: 10px;
min-height: 60px;
}
}
}
}

91
src/scss/style.scss
View File

@ -391,49 +391,20 @@ input {
.document {
padding-left: 4.5rem;
display: flex;
flex-direction: column;
height: 70px;
justify-content: center;
cursor: pointer;
position: relative;
.document-ico, .document-download {
position: absolute;
left: 0;
width: 54px;
height: 54px;
color: #fff;
&-ico, &-download {
font-weight: 500;
letter-spacing: 1px;
font-size: 1.1rem;
display: flex;
justify-content: center;
background-size: contain;
overflow: hidden;
text-overflow: ellipsis;
}
.document-download {
z-index: 3;
&-download {
background-color: rgb(101, 161, 227);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
.tgico-download {
transform: scale(1);
transition: .2s scale;
}
&.downloading {
.tgico-download {
transform: scale(0);
}
}
}
&:not(.photo) {
@ -449,19 +420,55 @@ input {
}
}
.document-name {
&-name {
white-space: nowrap;
font-weight: 500;
line-height: 1.3;
}
.document-size {
&-size {
white-space: nowrap;
color: $darkgrey;
font-size: 14px;
padding-right: 32px;
line-height: 1.3;
}
}
.document, .audio {
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
position: relative;
&-ico, &-download {
position: absolute;
left: 0;
width: 54px;
height: 54px;
color: #fff;
display: flex;
justify-content: center;
}
&-download {
z-index: 3;
align-items: center;
font-size: 24px;
cursor: pointer;
.tgico-download {
transform: scale(1);
transition: .2s scale;
}
&.downloading {
.tgico-download {
transform: scale(0);
}
}
}
.preloader-container {
width: 42px;
@ -469,6 +476,24 @@ input {
}
}
.audio {
position: relative;
padding-left: 67px;
min-height: 54px;
width: 256px;
&-toggle, &-download {
border-radius: 50%;
background-color: $blue;
font-size: 2.5rem;
align-items: center;
}
&-download {
z-index: 2;
}
}
.page-signUp {
.auth-image {
border-radius: 50%;