From 3c0e640dafab36572c13e00b147c2b91c00f13f0 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 23 Jan 2021 00:12:57 +0200 Subject: [PATCH] Fix sticker sets opening Fix round video time layout Fix round video playback --- src/components/appMediaPlaybackController.ts | 15 +++-- src/components/chat/bubbles.ts | 7 ++- src/components/emoticonsDropdown/index.ts | 15 ++--- src/components/sidebarRight/tabs/stickers.ts | 3 +- src/components/wrappers.ts | 25 ++++---- src/lib/appManagers/appImManager.ts | 2 +- src/lib/appManagers/appStickersManager.ts | 7 ++- src/lib/mediaPlayer.ts | 43 +++++--------- src/lib/richtextprocessor.ts | 2 +- src/lib/storage.ts | 20 ++++--- src/scss/partials/_badge.scss | 6 +- src/scss/partials/_chatBubble.scss | 13 +++-- src/scss/partials/_chatPinned.scss | 8 +-- src/scss/partials/_chatlist.scss | 19 +++++- src/scss/partials/_ckin.scss | 61 ++++++++++---------- src/scss/partials/_leftSidebar.scss | 1 + src/scss/style.scss | 1 + 17 files changed, 134 insertions(+), 114 deletions(-) diff --git a/src/components/appMediaPlaybackController.ts b/src/components/appMediaPlaybackController.ts index c625ab3f..a277eae7 100644 --- a/src/components/appMediaPlaybackController.ts +++ b/src/components/appMediaPlaybackController.ts @@ -47,12 +47,13 @@ class AppMediaPlaybackController { const storage = this.media[peerId] ?? (this.media[peerId] = {}); if(storage[mid]) return storage[mid]; - const media = document.createElement(doc.type == 'round' ? 'video' : 'audio'); + const media = document.createElement(doc.type === 'round' ? 'video' : 'audio'); //const source = document.createElement('source'); //source.type = doc.type == 'voice' && !opusDecodeController.isPlaySupported() ? 'audio/wav' : doc.mime_type; - if(doc.type == 'round') { + if(doc.type === 'round') { media.setAttribute('playsinline', 'true'); + //media.muted = true; } media.dataset.mid = '' + mid; @@ -67,7 +68,9 @@ class AppMediaPlaybackController { media.addEventListener('playing', () => { this.currentPeerId = peerId; - if(this.playingMedia != media) { + //console.log('appMediaPlaybackController: video playing', this.currentPeerId, this.playingMedia, media); + + if(this.playingMedia !== media) { if(this.playingMedia && !this.playingMedia.paused) { this.playingMedia.pause(); } @@ -86,7 +89,9 @@ class AppMediaPlaybackController { media.addEventListener('ended', this.onEnded); const onError = (e: Event) => { - if(this.nextMid == mid) { + //console.log('appMediaPlaybackController: video onError', e); + + if(this.nextMid === mid) { this.loadSiblingsMedia(peerId, doc.type as MediaType, mid).then(() => { if(this.nextMid && storage[this.nextMid]) { storage[this.nextMid].play(); @@ -111,7 +116,7 @@ class AppMediaPlaybackController { //media.autoplay = true; //console.log('will set media url:', media, doc, doc.type, doc.url); - if(doc.type == 'audio' && doc.supportsStreaming && isSafari) { + if(doc.type === 'audio' && doc.supportsStreaming && isSafari) { this.handleSafariStreamable(media); } diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index fa7d8721..c68f6477 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -2870,10 +2870,11 @@ export default class ChatBubbles { } public deleteEmptyDateGroups() { - for(let i in this.dateMessages) { - let dateMessage = this.dateMessages[i]; + const mustBeCount = 1 + +!!this.stickyIntersector; + for(const i in this.dateMessages) { + const dateMessage = this.dateMessages[i]; - if(dateMessage.container.childElementCount == 2) { // only date div + sentinel div + if(dateMessage.container.childElementCount === mustBeCount) { // only date div + sentinel div dateMessage.container.remove(); if(this.stickyIntersector) { this.stickyIntersector.unobserve(dateMessage.container, dateMessage.div); diff --git a/src/components/emoticonsDropdown/index.ts b/src/components/emoticonsDropdown/index.ts index 2ba14c8a..84d70324 100644 --- a/src/components/emoticonsDropdown/index.ts +++ b/src/components/emoticonsDropdown/index.ts @@ -130,7 +130,7 @@ export class EmoticonsDropdown { this.searchButton = this.element.querySelector('.emoji-tabs-search'); this.searchButton.addEventListener('click', () => { - if(this.tabId == 1) { + if(this.tabId === 1) { appSidebarRight.stickersTab.init(); } else { appSidebarRight.gifsTab.init(); @@ -177,15 +177,15 @@ export class EmoticonsDropdown { } private onSelectTabClick = (id: number) => { - if(this.tabId == id) { + if(this.tabId === id) { return; } animationIntersector.checkAnimations(true, EMOTICONSSTICKERGROUP); this.tabId = id; - this.searchButton.classList.toggle('hide', this.tabId == 0); - this.deleteBtn.classList.toggle('hide', this.tabId != 0); + this.searchButton.classList.toggle('hide', this.tabId === 0); + this.deleteBtn.classList.toggle('hide', this.tabId !== 0); }; public checkRights = () => { @@ -200,11 +200,8 @@ export class EmoticonsDropdown { tabsElements[3].toggleAttribute('disabled', !canSendGifs); const active = this.tabsEl.querySelector('.active'); - if(active && whichChild(active) != 1 && (!canSendStickers || !canSendGifs)) { - this.selectTab(0); - this.onSelectTabClick(0); - active.classList.remove('active'); - children[1].classList.add('active'); + if(active && whichChild(active) !== 1 && (!canSendStickers || !canSendGifs)) { + this.selectTab(0, false); } }; diff --git a/src/components/sidebarRight/tabs/stickers.ts b/src/components/sidebarRight/tabs/stickers.ts index efbcdbc2..c8d49098 100644 --- a/src/components/sidebarRight/tabs/stickers.ts +++ b/src/components/sidebarRight/tabs/stickers.ts @@ -44,9 +44,8 @@ export default class AppStickersTab implements SliderTab { const target = findUpClassName(e.target, 'sticker-set'); if(!target) return; - const id = target.dataset.stickerSet as string; - const access_hash = target.dataset.stickerSet as string; + const access_hash = target.dataset.access_hash as string; const button = findUpClassName(e.target, 'sticker-set-button') as HTMLElement; if(button) { diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 0cc1cc10..fff8623b 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -132,33 +132,38 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai const clear = () => { //console.log('clearing video'); - globalVideo.removeEventListener('timeupdate', onTimeUpdate); + globalVideo.removeEventListener('timeupdate', onGlobalTimeUpdate); globalVideo.removeEventListener('play', onGlobalPlay); globalVideo.removeEventListener('pause', onGlobalPause); video.removeEventListener('play', onVideoPlay); video.removeEventListener('pause', onVideoPause); }; - const onTimeUpdate = () => { + const onGlobalTimeUpdate = (e: Event) => { + //console.log('video global timeupdate event', e, globalVideo.currentTime, globalVideo.duration); if(!isInDOM(video)) { clear(); } }; - const onGlobalPlay = () => { + const onGlobalPlay = (e: Event) => { + //console.log('video global play event', e); video.play(); }; - const onGlobalPause = () => { + const onGlobalPause = (e: Event) => { + //console.trace('video global pause event', e, globalVideo.paused, e.eventPhase); video.pause(); }; - const onVideoPlay = () => { + const onVideoPlay = (e: Event) => { + //console.log('video play event', e); + globalVideo.currentTime = video.currentTime; globalVideo.play(); }; - const onVideoPause = () => { - //console.log('video pause event'); + const onVideoPause = (e: Event) => { + //console.trace('video pause event', e); if(isInDOM(video)) { globalVideo.pause(); } else { @@ -166,7 +171,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai } }; - globalVideo.addEventListener('timeupdate', onTimeUpdate); + globalVideo.addEventListener('timeupdate', onGlobalTimeUpdate); globalVideo.addEventListener('play', onGlobalPlay); globalVideo.addEventListener('pause', onGlobalPause); video.addEventListener('play', onVideoPlay); @@ -604,7 +609,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT return promise; }; - const onLoad = () => { + const onLoad = (): Promise => { if(middleware && !middleware()) return Promise.resolve(); return new Promise((resolve) => { @@ -889,7 +894,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o image.classList.add('fade-in'); } - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { const r = () => { if(middleware && !middleware()) return resolve(); diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index df1889c1..735e6958 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -231,7 +231,7 @@ export class AppImManager { } else if(e.code === "KeyC" && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') { return; } else if(e.code === 'ArrowUp') { - if(!chat.input.editMsgId) { + if(!chat.input.editMsgId && chat.input.isInputEmpty()) { const history = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId); if(history.history.length) { let goodMid: number; diff --git a/src/lib/appManagers/appStickersManager.ts b/src/lib/appManagers/appStickersManager.ts index 4a1d69ca..db784df7 100644 --- a/src/lib/appManagers/appStickersManager.ts +++ b/src/lib/appManagers/appStickersManager.ts @@ -57,6 +57,7 @@ export class AppStickersManager { if(cachedSet && cachedSet.documents?.length) { this.saveStickers(cachedSet.documents); resolve(cachedSet); + delete this.getStickerSetPromises[set.id]; return; } } @@ -92,7 +93,7 @@ export class AppStickersManager { if(!stickerSet || !stickerSet.documents) return undefined; emoji = emoji.replace(/\ufe0f/g, '').replace(/🏻|🏼|🏽|🏾|🏿/g, ''); - const pack = stickerSet.packs.find(p => p.emoticon == emoji); + const pack = stickerSet.packs.find(p => p.emoticon === emoji); return pack ? appDocsManager.getDoc(pack.documents[0]) : undefined; } @@ -117,8 +118,7 @@ export class AppStickersManager { //console.log('stickers wrote', this.stickerSets); const needSave = stickerSet.set.installed_date || id === 'emoji'; - if(needSave) this.storage.set({[id]: stickerSet}); - else this.storage.remove(id); + this.storage.set({[id]: stickerSet}, !needSave); } public getStickerSetThumbDownloadOptions(stickerSet: StickerSet.stickerSet) { @@ -185,6 +185,7 @@ export class AppStickersManager { if(res) { delete set.installed_date; rootScope.broadcast('stickers_deleted', set); + this.storage.remove(set.id, true); return true; } } else { diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index 453227ee..3ae3047c 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -178,7 +178,7 @@ export default class VideoPlayer { this.stylePlayer(); - if(this.skin == 'default') { + if(this.skin === 'default') { let controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement; this.progress = new MediaProgressLine(video, streamable); controls.prepend(this.progress.container); @@ -206,8 +206,6 @@ export default class VideoPlayer { const html = this.buildControls(); player.insertAdjacentHTML('beforeend', html); - let elapsed = 0; - let prevTime = 0; let timeDuration: HTMLElement; if(skin === 'default') { @@ -374,20 +372,19 @@ export default class VideoPlayer { circle.addEventListener('click', () => { this.togglePlay(); }); + + const update = () => { + const offset = circumference - video.currentTime / video.duration * circumference; + circle.style.strokeDashoffset = '' + offset; + + if(video.paused) { + clearInterval(updateInterval); + } + }; video.addEventListener('play', () => { iconVolume.style.display = 'none'; - updateInterval = window.setInterval(() => { - //elapsed += 0.02; // Increase with timer interval - if(video.currentTime != prevTime) { - elapsed = video.currentTime; // Update if getCurrentTime was changed - prevTime = video.currentTime; - } - - const offset = circumference - elapsed / video.duration * circumference; - circle.style.strokeDashoffset = '' + offset; - if(video.paused) clearInterval(updateInterval); - }, 20); + updateInterval = window.setInterval(update, 20); }); video.addEventListener('pause', () => { @@ -396,22 +393,6 @@ export default class VideoPlayer { let updateInterval = 0; video.addEventListener('timeupdate', () => { - clearInterval(updateInterval); - - let elapsed = 0; - let prevTime = 0; - - updateInterval = window.setInterval(() => { - if(video.currentTime != prevTime) { - elapsed = video.currentTime; // Update if getCurrentTime was changed - prevTime = video.currentTime; - } - - const offset = circumference - elapsed / video.duration * circumference; - circle.style.strokeDashoffset = '' + offset; - if(video.paused) clearInterval(updateInterval); - }, 20); - const timeLeft = String((video.duration - video.currentTime) | 0).toHHMMSS(); if(timeLeft != '0') timeDuration.innerHTML = timeLeft; }); @@ -435,6 +416,8 @@ export default class VideoPlayer { } public togglePlay(stop?: boolean) { + //console.log('video togglePlay:', stop, this.video.paused); + if(stop) { this.video.pause(); this.wrapper.classList.remove('is-playing'); diff --git a/src/lib/richtextprocessor.ts b/src/lib/richtextprocessor.ts index 29ae75e6..ffdf8155 100644 --- a/src/lib/richtextprocessor.ts +++ b/src/lib/richtextprocessor.ts @@ -441,7 +441,7 @@ namespace RichTextProcessor { } case 'messageEntityHighlight': { - insertPart(entity, '', ''); + insertPart(entity, '', ''); break; } diff --git a/src/lib/storage.ts b/src/lib/storage.ts index a4d2ee92..08a043e0 100644 --- a/src/lib/storage.ts +++ b/src/lib/storage.ts @@ -36,7 +36,6 @@ export default class AppStorage/* Storage ex } catch(e) { if(e !== 'NO_ENTRY_FOUND') { this.useStorage = false; - value = undefined; console.error('[AS]: get error:', e, key, value); } } @@ -47,12 +46,12 @@ export default class AppStorage/* Storage ex } } - public async set(obj: Partial) { + public async set(obj: Partial, onlyLocal = false) { //console.log('storageSetValue', obj, callback, arguments); - for(let key in obj) { + for(const key in obj) { if(obj.hasOwnProperty(key)) { - let value = obj[key]; + const value = obj[key]; this.setToCache(key, value); // let perf = /* DEBUG */false ? performance.now() : 0; @@ -69,7 +68,7 @@ export default class AppStorage/* Storage ex value = stringify(value); console.log('LocalStorage set: stringify time by own stringify:', performance.now() - perf); */ - if(this.useStorage) { + if(this.useStorage && !onlyLocal) { try { //console.log('setItem: will set', key/* , value */); //await this.cacheStorage.delete(key); // * try to prevent memory leak in Chrome leading to 'Unexpected internal error.' @@ -85,8 +84,15 @@ export default class AppStorage/* Storage ex } } - public async remove(key: keyof Storage) { - delete this.cache[key]; + public async remove(key: keyof Storage, saveLocal = false) { + /* if(!this.cache.hasOwnProperty(key)) { + return; + } */ + + if(!saveLocal) { + delete this.cache[key]; + } + if(this.useStorage) { try { await this.storage.delete(key as string); diff --git a/src/scss/partials/_badge.scss b/src/scss/partials/_badge.scss index 80d5216b..9cbe4857 100644 --- a/src/scss/partials/_badge.scss +++ b/src/scss/partials/_badge.scss @@ -24,7 +24,7 @@ padding: 0 7.75px; &.tgico { - width: 1.5rem; + // width: 1.5rem; &:before { font-size: 1.5rem; @@ -32,9 +32,9 @@ } } - &.tgico { + /* &.tgico { padding: 0; - } + } */ &-green { background-color: $color-green; diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 3a912531..b5674f24 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -1276,13 +1276,16 @@ $bubble-margin: .25rem; background-color: var(--message-time-background); color: #fff; text-align: center; - font-size: 34px; - line-height: 60px; + font-size: 2.125rem; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + } - @include respond-to(handhelds) { - line-height: unset; - } + .ckin__player.circle { + z-index: 1; } &:not(.forwarded).hide-name, &.emoji-big { diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index 79ec06fd..9b5354e8 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -162,9 +162,9 @@ } } - html.no-touch &:hover { + /* html.no-touch &:hover { background-color: var(--color-gray-hover); - } + } */ &-border { height: 2rem; @@ -240,9 +240,9 @@ padding: .25rem; border-radius: 4px; - html.no-touch &:hover { + /* html.no-touch &:hover { background-color: var(--color-gray-hover); - } + } */ } } diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index ea636555..f32897e9 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -99,6 +99,23 @@ align-items: flex-start; height: 27px; } + + a { + color: inherit; + } + + .text-highlight { + color: #000; + } + + /* img.emoji { + margin-right: .25rem; + margin-left: .25rem; + + &:first-child { + margin-left: 0; + } + } */ } li.menu-open { @@ -195,7 +212,7 @@ .user-title, .user-last-message { i { font-style: normal; - color: $color-blue; + //color: $color-blue; } } diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index 18619df1..114f959d 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -32,7 +32,7 @@ color: white; @include respond-to(handhelds) { - padding: 7px 0px 9px 0px; + padding: 7px 0px 9px; } } } @@ -41,18 +41,18 @@ position: relative; &:before { - background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.5) 100%); + background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, .5) 100%); } &--2:before { - background: rgba(24, 24, 24, 0.8); + background: rgba(24, 24, 24, .8); } } } .default { - border: 0 solid rgba(0, 0, 0, 0.2); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + border: 0 solid rgba(0, 0, 0, .2); + box-shadow: 0 0 20px rgba(0, 0, 0, .2); position: relative; font-size: 0; //overflow: hidden; @@ -80,7 +80,7 @@ top: 20px; z-index: 1; font-size: 24px; - color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255, .8); font-style: italic; } @@ -403,23 +403,6 @@ input[type=range] { align-items: center; } -.circle .circle-time { - color: #fff; - font-size: 13px; - float: left; - //margin-top: 1px; -} -.circle .circle-time-left { - position: absolute; - top: 3px; - left: 2px; - border-radius: 12px; - background-color: rgba(0, 0, 0, 0.23); - padding: 1px 7px 2px 7px; - z-index: 2; - display: flex; - align-items: center; -} video[data-ckin="circle"] { border-radius: 50%; overflow: hidden; @@ -441,12 +424,30 @@ video[data-ckin="circle"] { position: relative; width: 200px; height: 200px; -} -.iconVolume { - padding: 0 1px 0 3px; - display: flex; - align-items: center; - font-size: 1.25rem; - color: #fff; + .circle-time-left { + color: #fff; + position: absolute; + top: 3px; + left: 2px; + border-radius: 12px; + background-color: rgba(0, 0, 0, .23); + padding: 1px 7px 2px 7px; + height: 18px; + z-index: 2; + display: flex; + align-items: center; + + .circle-time { + font-size: .75rem; + //margin-top: 1px; + } + } + + .iconVolume { + padding: 0 1px 0 .25rem; + display: flex; + align-items: center; + font-size: 1rem; + } } diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index e0964663..1b085d92 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -96,6 +96,7 @@ .badge { margin-left: 5px; + //line-height: inherit !important; } &:not(.hide) + .scrollable { diff --git a/src/scss/style.scss b/src/scss/style.scss index 021349d1..93384e98 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -489,6 +489,7 @@ hr { .user-last-message b { font-weight: 400; + //margin-right: .25rem; } .avatar-edit {