Fix voice messages on iOS

Replaced theme color on mobiles
Fix loading shared media
Fix bugged progress lines in Safari

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<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 {
           } 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};
             };

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<string>} = {};
 
   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);
     }
   }
 

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;
           }
   

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');

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);
   }

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;

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;