Browse Source

Fix voice messages on iOS

Replaced theme color on mobiles
Fix loading shared media
Fix bugged progress lines in Safari
master
morethanwords 3 years ago
parent
commit
6812ffa97e
  1. 17
      src/components/audio.ts
  2. 14
      src/lib/appManagers/appImManager.ts
  3. 4
      src/lib/appManagers/appMessagesManager.ts
  4. 6
      src/lib/mediaPlayer.ts
  5. 29
      src/lib/rootScope.ts
  6. 10
      src/scss/partials/_chatPinned.scss
  7. 3
      src/scss/partials/_chatTopbar.scss

17
src/components/audio.ts

@ -426,10 +426,10 @@ export default class AudioElement extends HTMLElement { @@ -426,10 +426,10 @@ export default class AudioElement extends HTMLElement {
const audio = this.audio = appMediaPlaybackController.addMedia(this.message, autoload);
this.readyPromise = deferredPromise<void>();
if(this.audio.readyState >= 2) this.readyPromise.resolve();
const readyPromise = this.readyPromise = deferredPromise<void>();
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 { @@ -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};
};

14
src/lib/appManagers/appImManager.ts

@ -99,7 +99,6 @@ export class AppImManager { @@ -99,7 +99,6 @@ export class AppImManager {
private chatsSelectTabDebounced: () => void;
public markupTooltip: MarkupTooltip;
private themeColorElem: Element;
private backgroundPromises: {[slug: string]: Promise<string>} = {};
get myId() {
@ -786,17 +785,8 @@ export class AppImManager { @@ -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);
}
}

4
src/lib/appManagers/appMessagesManager.ts

@ -3357,8 +3357,8 @@ export class AppMessagesManager { @@ -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;
}

6
src/lib/mediaPlayer.ts

@ -71,7 +71,7 @@ export class MediaProgressLine extends RangeSelector { @@ -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 { @@ -211,9 +211,9 @@ export class VolumeSelector extends RangeSelector {
appMediaPlaybackController.volume = value;
},
onMouseUp: (e) => {
/* onMouseUp: (e) => {
cancelEvent(e.event);
}
} */
});
this.btn = document.createElement('div');

29
src/lib/rootScope.ts

@ -161,6 +161,9 @@ export class RootScope extends EventListenerBase<{ @@ -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<{ @@ -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<{ @@ -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<{ @@ -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);
}

10
src/scss/partials/_chatPinned.scss

@ -673,15 +673,21 @@ @@ -673,15 +673,21 @@
--translateY: 0;
}
.progress-line__filled {
.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;

3
src/scss/partials/_chatTopbar.scss

@ -32,6 +32,7 @@ @@ -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 @@ @@ -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 @@ @@ -218,7 +218,6 @@
.person {
display: flex;
align-items: center;
cursor: pointer;
&-avatar {
flex: 0 0 auto;

Loading…
Cancel
Save