From b9ca65650f98f2c871cb02f650204a567204197d Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sat, 10 Apr 2021 23:39:36 +0400 Subject: [PATCH] Shared media voice tab Fix colored animated emoji --- src/components/appSearchSuper..ts | 39 ++++++---- src/components/sidebarLeft/index.ts | 3 +- .../sidebarRight/tabs/sharedMedia.ts | 10 ++- src/lib/lottieLoader.ts | 78 ++++++++++++------- src/scss/partials/_rightSidebar.scss | 30 +++---- src/scss/style.scss | 2 +- 6 files changed, 101 insertions(+), 61 deletions(-) diff --git a/src/components/appSearchSuper..ts b/src/components/appSearchSuper..ts index e481029d..1b82cccc 100644 --- a/src/components/appSearchSuper..ts +++ b/src/components/appSearchSuper..ts @@ -112,8 +112,9 @@ export default class AppSearchSuper { public groupByMonth? = true; public hideEmptyTabs? = true; public onChangeTab?: (mediaTab: SearchSuperMediaTab) => void; + public showSender? = false; - constructor(options: Pick) { + constructor(options: Pick) { safeAssign(this, options); this.container = document.createElement('div'); @@ -401,25 +402,26 @@ export default class AppSearchSuper { return filtered; } - public async performSearchResult(messages: any[], type: SearchSuperType, append = true) { + public async performSearchResult(messages: any[], mediaTab: SearchSuperMediaTab, append = true) { const elemsToAppend: {element: HTMLElement, message: any}[] = []; - const sharedMediaDiv: HTMLElement = this.tabs[type]; + const sharedMediaDiv: HTMLElement = mediaTab.contentTab; const promises: Promise[] = []; const middleware = this.middleware.get(); + let inputFilter = mediaTab.inputFilter; await getHeavyAnimationPromise(); let searchGroup: SearchGroup; - if(type === 'inputMessagesFilterPhotoVideo' && !!this.searchContext.query.trim()) { - type = 'inputMessagesFilterEmpty'; + if(inputFilter === 'inputMessagesFilterPhotoVideo' && !!this.searchContext.query.trim()) { + inputFilter = 'inputMessagesFilterEmpty'; searchGroup = this.searchGroupMedia; sharedMediaDiv.append(searchGroup.container); - } else if(type === 'inputMessagesFilterEmpty') { + } else if(inputFilter === 'inputMessagesFilterEmpty') { searchGroup = this.searchGroups.messages; } // https://core.telegram.org/type/MessagesFilter - switch(type) { + switch(inputFilter) { case 'inputMessagesFilterEmpty': { for(const message of messages) { const {dialog, dom} = appDialogsManager.addDialogNew({ @@ -488,17 +490,20 @@ export default class AppSearchSuper { case 'inputMessagesFilterMusic': case 'inputMessagesFilterDocument': { for(const message of messages) { + const showSender = this.showSender || message.media.document.type === 'voice'; const div = wrapDocument({ message, - withTime: !this.asChatList, + withTime: !showSender, fontWeight: 400, voiceAsMusic: true, - showSender: this.asChatList, - searchContext: this.copySearchContext(type) + showSender: showSender, + searchContext: this.copySearchContext(inputFilter) }); - if(message.media.document.type === 'audio') { + + if(['audio', 'voice'].includes(message.media.document.type)) { div.classList.add('audio-48'); } + elemsToAppend.push({element: div, message}); } break; @@ -589,10 +594,10 @@ export default class AppSearchSuper { title = RichTextProcessor.wrapPlainText(webpage.display_url.split('/', 1)[0]); } - let sender = this.asChatList ? `
${appMessagesManager.getSenderToPeerText(message)}
` : ''; + let sender = this.showSender ? `
${appMessagesManager.getSenderToPeerText(message)}
` : ''; let titleAdditionHTML = ''; - if(this.asChatList) { + if(this.showSender) { titleAdditionHTML = `
${formatDateAccordingToToday(new Date(message.date * 1000))}
`; } @@ -634,7 +639,7 @@ export default class AppSearchSuper { const method = append ? 'append' : 'prepend'; elemsToAppend.forEach(details => { const {element, message} = details; - const monthContainer = this.getMonthContainerByTimestamp(this.groupByMonth ? message.date : 0, type); + const monthContainer = this.getMonthContainerByTimestamp(this.groupByMonth ? message.date : 0, inputFilter); element.classList.add('search-super-item'); element.dataset.mid = '' + message.mid; element.dataset.peerId = '' + message.peerId; @@ -643,7 +648,7 @@ export default class AppSearchSuper { } //if(type !== 'inputMessagesFilterEmpty') { - this.afterPerforming(type === 'inputMessagesFilterEmpty' ? 1 : messages.length, sharedMediaDiv); + this.afterPerforming(inputFilter === 'inputMessagesFilterEmpty' ? 1 : messages.length, sharedMediaDiv); //} } @@ -957,7 +962,7 @@ export default class AppSearchSuper { this.usedFromHistory[type] = used; //if(messages.length) { - return this.performSearchResult(messages, type).finally(() => { + return this.performSearchResult(messages, mediaTab).finally(() => { setTimeout(() => { this.scrollable.checkForTriggers(); }, 0); @@ -1030,7 +1035,7 @@ export default class AppSearchSuper { } //if(value.history.length) { - return this.performSearchResult(this.filterMessagesByType(value.history, type), type); + return this.performSearchResult(this.filterMessagesByType(value.history, type), mediaTab); //} }).catch(err => { this.log.error('load error:', err); diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 4e4d0532..7bc84f7a 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -230,7 +230,8 @@ export class AppSidebarLeft extends SidebarSlider { scrollable, searchGroups: this.searchGroups, asChatList: true, - hideEmptyTabs: false + hideEmptyTabs: false, + showSender: true }); searchContainer.prepend(searchSuper.nav.parentElement.parentElement); diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index 2abe9aa0..65ee1997 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -777,6 +777,10 @@ export default class AppSharedMediaTab extends SliderSuperTab { inputFilter: 'inputMessagesFilterMusic', name: 'SharedMusicTab2', type: 'music' + }, { + inputFilter: 'inputMessagesFilterVoice', + name: 'SharedVoiceTab2', + type: 'voice' }], scrollable: this.scrollable, onChangeTab: (mediaTab) => { @@ -864,8 +868,8 @@ export default class AppSharedMediaTab extends SliderSuperTab { if(!this.historiesStorage[peerId]) return; mids = mids.slice().reverse(); // ! because it will be ascend sorted array - for(const type of this.searchSuper.mediaTabs) { - const inputFilter = type.inputFilter; + for(const mediaTab of this.searchSuper.mediaTabs) { + const inputFilter = mediaTab.inputFilter; const filtered = this.searchSuper.filterMessagesByType(mids.map(mid => appMessagesManager.getMessageByPeer(peerId, mid)), inputFilter); if(filtered.length) { if(this.historiesStorage[peerId][inputFilter]) { @@ -874,7 +878,7 @@ export default class AppSharedMediaTab extends SliderSuperTab { if(this.peerId === peerId && this.searchSuper.usedFromHistory[inputFilter] !== -1) { this.searchSuper.usedFromHistory[inputFilter] += filtered.length; - this.searchSuper.performSearchResult(filtered, inputFilter, false); + this.searchSuper.performSearchResult(filtered, mediaTab, false); } break; diff --git a/src/lib/lottieLoader.ts b/src/lib/lottieLoader.ts index ba626e53..f2cff7d2 100644 --- a/src/lib/lottieLoader.ts +++ b/src/lib/lottieLoader.ts @@ -507,6 +507,13 @@ class QueryableWorker extends EventListenerBase { } } +type LottieShape = { + c: { + k: number[] + }, + ty: 'st' | 'fl', + it?: LottieShape[] +}; class LottieLoader { public isWebAssemblySupported = typeof(WebAssembly) !== 'undefined'; public loadPromise: Promise = !this.isWebAssemblySupported ? Promise.reject() : undefined; @@ -604,40 +611,59 @@ class LottieLoader { }); } - private applyReplacements(object: any, toneIndex: number) { + private applyReplacements(object: { + layers: Array<{shapes: LottieShape[]}> + }, toneIndex: number) { const replacements = LottieLoader.COLORREPLACEMENTS[Math.max(toneIndex - 1, 0)]; - const iterateIt = (it: any) => { - for(let smth of it) { - switch(smth.ty) { - case 'st': - case 'fl': - let k = smth.c.k; - let color = convert(k[2]) | (convert(k[1]) << 8) | (convert(k[0]) << 16); - - let foundReplacement = replacements.find(p => p[0] === color); - if(foundReplacement) { - k[0] = ((foundReplacement[1] >> 16) & 255) / 255; - k[1] = ((foundReplacement[1] >> 8) & 255) / 255; - k[2] = (foundReplacement[1] & 255) / 255; - } - - //console.log('foundReplacement!', foundReplacement, color.toString(16), k); - break; - } + const applyTo = (smth: LottieShape) => { + const k = smth.c.k; + const color = convert(k[2]) | (convert(k[1]) << 8) | (convert(k[0]) << 16); - if(smth.hasOwnProperty('it')) { - iterateIt(smth.it); - } + const foundReplacement = replacements.find(p => p[0] === color); + if(foundReplacement) { + k[0] = ((foundReplacement[1] >> 16) & 255) / 255; + k[1] = ((foundReplacement[1] >> 8) & 255) / 255; + k[2] = (foundReplacement[1] & 255) / 255; } + + //console.log('foundReplacement!', foundReplacement, color.toString(16), k); }; - for(let layer of object.layers) { - if(!layer.shapes) continue; + const checkSmth = (smth: LottieShape) => { + switch(smth.ty) { + case 'st': + case 'fl': + applyTo(smth); + break; + } - for(let shape of layer.shapes) { - iterateIt(shape.it); + if(smth.hasOwnProperty('it')) { + iterateIt(smth.it); } + }; + + const iterateIt = (it: LottieShape['it']) => { + for(const smth of it) { + checkSmth(smth); + } + }; + + try { + for(const layer of object.layers) { + if(!layer.shapes) continue; + + for(const shape of layer.shapes) { + if(!shape.it) { + checkSmth(shape); + continue; + } + + iterateIt(shape.it); + } + } + } catch(err) { + this.log.warn('cant apply replacements', err, object, toneIndex); } } diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index cb4d7ede..b7247257 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -193,6 +193,9 @@ } &-tabs { + width: auto; + flex: 1 1 auto; + //margin-top: 36px; i { padding-right: 1.5rem !important; @@ -222,6 +225,7 @@ .scrollable { position: relative; + display: flex; } } @@ -282,6 +286,19 @@ display: none; } + .document-name, .audio-title, .title { + display: flex; + justify-content: space-between; + } + + .sent-time { + flex: 0 0 auto; + margin-left: 8px; + margin-top: 3px; + font-size: 12px; + color: var(--secondary-text-color); + } + &-content-media { .search-super-month-name { border: none; @@ -500,19 +517,6 @@ } } - .document-name, .audio-title, .title { - display: flex; - justify-content: space-between; - } - - .sent-time { - flex: 0 0 auto; - margin-left: 8px; - margin-top: 3px; - font-size: 12px; - color: var(--secondary-text-color); - } - .search-group.is-short { li:nth-child(n + 4) { display: none; diff --git a/src/scss/style.scss b/src/scss/style.scss index fb862f35..ae700c96 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -213,13 +213,13 @@ html.night { @import "partials/crop"; @import "partials/sidebar"; @import "partials/profile"; +@import "partials/slider"; @import "partials/leftSidebar"; @import "partials/rightSidebar"; @import "partials/mediaViewer"; @import "partials/ckin"; @import "partials/emojiDropdown"; @import "partials/scrollable"; -@import "partials/slider"; @import "partials/selector"; @import "partials/gifsMasonry"; @import "partials/preloader";