From 6812ffa97e982b4467fc316f60d8e94c85a7395b Mon Sep 17 00:00:00 2001 From: morethanwords Date: Thu, 7 Oct 2021 01:18:56 +0400 Subject: [PATCH] Fix voice messages on iOS Replaced theme color on mobiles Fix loading shared media Fix bugged progress lines in Safari --- src/components/audio.ts | 17 ++++++++++--- src/lib/appManagers/appImManager.ts | 14 ++--------- src/lib/appManagers/appMessagesManager.ts | 4 ++-- src/lib/mediaPlayer.ts | 6 ++--- src/lib/rootScope.ts | 29 ++++++++++++++++++++++- src/scss/partials/_chatPinned.scss | 14 +++++++---- src/scss/partials/_chatTopbar.scss | 3 +-- 7 files changed, 60 insertions(+), 27 deletions(-) diff --git a/src/components/audio.ts b/src/components/audio.ts index 4c9e46b3..4aa6b415 100644 --- a/src/components/audio.ts +++ b/src/components/audio.ts @@ -426,10 +426,10 @@ export default class AudioElement extends HTMLElement { const audio = this.audio = appMediaPlaybackController.addMedia(this.message, autoload); - this.readyPromise = deferredPromise(); - if(this.audio.readyState >= 2) this.readyPromise.resolve(); + const readyPromise = this.readyPromise = deferredPromise(); + if(this.audio.readyState >= this.audio.HAVE_CURRENT_DATA) readyPromise.resolve(); else { - this.addAudioListener('canplay', () => this.readyPromise.resolve(), {once: true}); + this.addAudioListener('canplay', () => readyPromise.resolve(), {once: true}); } this.onTypeDisconnect = onTypeLoad(); @@ -565,10 +565,21 @@ export default class AudioElement extends HTMLElement { } else { preloader = constructDownloadPreloader(); + if(!shouldPlay) { + this.readyPromise = deferredPromise(); + } + const load = () => { onDownloadInit(); const download = appDocsManager.downloadDoc(doc); + + if(!shouldPlay) { + download.then(() => { + this.readyPromise.resolve(); + }); + } + preloader.attach(downloadDiv, false, download); return {download}; }; diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 32a956a7..0298e48a 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -99,7 +99,6 @@ export class AppImManager { private chatsSelectTabDebounced: () => void; public markupTooltip: MarkupTooltip; - private themeColorElem: Element; private backgroundPromises: {[slug: string]: Promise} = {}; get myId() { @@ -786,17 +785,8 @@ export class AppImManager { document.documentElement.style.removeProperty('--message-highlightning-color'); } - let themeColor = '#ffffff'; - if(hsla) { - themeColor = hslaStringToHex(hsla); - } - - if(this.themeColorElem === undefined) { - this.themeColorElem = document.head.querySelector('[name="theme-color"]') as Element || null; - } - - if(this.themeColorElem) { - this.themeColorElem.setAttribute('content', themeColor); + if(!IS_TOUCH_SUPPORTED && hsla) { + rootScope.themeColor = hslaStringToHex(hsla); } } diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index a41c6014..fdc21f25 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/src/lib/appManagers/appMessagesManager.ts @@ -3357,8 +3357,8 @@ export class AppMessagesManager { if(message._ === 'message') { if(message.media && neededContents[message.media._]/* && !message.fwd_from */) { const doc = (message.media as MessageMedia.messageMediaDocument).document as MyDocument; - if((neededDocTypes.length && !neededDocTypes.includes(doc.type)) - || excludeDocTypes.includes(doc.type)) { + if(doc && ((neededDocTypes.length && !neededDocTypes.includes(doc.type)) + || excludeDocTypes.includes(doc.type))) { continue; } diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index 6ac25d1f..75141d98 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -71,7 +71,7 @@ export class MediaProgressLine extends RangeSelector { }, onMouseUp: (e) => { - cancelEvent(e.event); + // cancelEvent(e.event); wasPlaying && this.media.play(); } }); @@ -211,9 +211,9 @@ export class VolumeSelector extends RangeSelector { appMediaPlaybackController.volume = value; }, - onMouseUp: (e) => { + /* onMouseUp: (e) => { cancelEvent(e.event); - } + } */ }); this.btn = document.createElement('div'); diff --git a/src/lib/rootScope.ts b/src/lib/rootScope.ts index 34c57bbb..aae3ba30 100644 --- a/src/lib/rootScope.ts +++ b/src/lib/rootScope.ts @@ -161,6 +161,9 @@ export class RootScope extends EventListenerBase<{ caption_length_max: 1024, }; + public themeColor: string; + private _themeColorElem: Element; + constructor() { super(); @@ -188,6 +191,25 @@ export class RootScope extends EventListenerBase<{ }); } + get themeColorElem() { + if(this._themeColorElem !== undefined) { + return this._themeColorElem; + } + + return this._themeColorElem = document.head.querySelector('[name="theme-color"]') as Element || null; + } + + public setThemeColor(color = this.themeColor) { + if(!color) { + color = this.isNight() ? '#212121' : '#ffffff'; + } + + const themeColorElem = this.themeColorElem; + if(themeColorElem) { + themeColorElem.setAttribute('content', color); + } + } + public setThemeListener() { try { const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); @@ -216,13 +238,14 @@ export class RootScope extends EventListenerBase<{ } public setTheme() { - const isNight = this.getTheme().name === 'night'; + const isNight = this.isNight(); const colorScheme = document.head.querySelector('[name="color-scheme"]'); if(colorScheme) { colorScheme.setAttribute('content', isNight ? 'dark' : 'light'); } document.documentElement.classList.toggle('night', isNight); + this.setThemeColor(); } get isOverlayActive() { @@ -234,6 +257,10 @@ export class RootScope extends EventListenerBase<{ this.dispatchEvent('overlay_toggle', this.isOverlayActive); } + public isNight() { + return this.getTheme().name === 'night'; + } + public getTheme(name: Theme['name'] = this.settings.theme === 'system' ? this.systemTheme : this.settings.theme) { return this.settings.themes.find(t => t.name === name); } diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index c8722907..fd0ba4fe 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -673,15 +673,21 @@ --translateY: 0; } - .progress-line__filled { - &:after { - display: none !important; + .progress-line { + &__filled { + &:after { + display: none !important; + } + } + + &__seek { + top: -1rem; } } &-wrapper { position: absolute; - height: var(--progress-height); + height: .5rem; right: 0; bottom: 0; left: 0; diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index fbf592b1..f88d7a20 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/src/scss/partials/_chatTopbar.scss @@ -32,6 +32,7 @@ max-height: var(--height); margin-bottom: var(--pinned-floating-height); position: relative; + cursor: pointer !important; &:before { content: " "; @@ -120,7 +121,6 @@ } */ .user-title { - cursor: pointer; font-size: 1rem; line-height: 1.5rem; max-width: calc(100% - 1.5rem); @@ -218,7 +218,6 @@ .person { display: flex; align-items: center; - cursor: pointer; &-avatar { flex: 0 0 auto;