Support uploading .png wallpapers

src/components/sidebarLeft/tabs/background.ts

@@ -29,6 +29,9 @@ import choosePhotoSize from "../../../lib/appManagers/utils/photos/choosePhotoSi
 import { STATE_INIT, Theme } from "../../../config/state";
 import themeController from "../../../helpers/themeController";
 import requestFile from "../../../helpers/files/requestFile";
+import { renderImageFromUrlPromise } from "../../../helpers/dom/renderImageFromUrl";
+import scaleMediaElement from "../../../helpers/canvas/scaleMediaElement";
+import { MediaSize } from "../../../helpers/mediaSize";
 
 export default class AppBackgroundTab extends SliderSuperTab {
   private grid: HTMLElement;
@@ -108,6 +111,15 @@ export default class AppBackgroundTab extends SliderSuperTab {
 
   private onUploadClick = () => {
     requestFile('image/x-png,image/png,image/jpeg').then(async(file) => {
+      if(file.name.endsWith('.png')) {
+        const img = document.createElement('img');
+        const url = URL.createObjectURL(file);
+        await renderImageFromUrlPromise(img, url, false);
+        const mimeType = 'image/jpeg';
+        const {blob} = await scaleMediaElement({media: img, size: new MediaSize(img.naturalWidth, img.naturalHeight), mimeType});
+        file = new File([blob], file.name.replace(/\.png$/, '.jpg'), {type: mimeType});
+      }
+
       const wallPaper = await this.managers.appDocsManager.prepareWallPaperUpload(file);
       const uploadPromise = this.managers.appDocsManager.uploadWallPaper(wallPaper.id);
       const uploadDeferred: CancellablePromise<any> = appDownloadManager.getNewDeferredForUpload(file.name, uploadPromise);

src/helpers/canvas/scaleMediaElement.ts

@@ -2,14 +2,15 @@ import type { MediaSize } from "../mediaSize";
 
 export default function scaleMediaElement(options: {
   media: CanvasImageSource, 
-  mediaSize: MediaSize, 
-  boxSize: MediaSize, 
+  mediaSize?: MediaSize, 
+  boxSize?: MediaSize, 
   quality?: number,
-  mimeType?: 'image/jpeg' | 'image/png'
+  mimeType?: 'image/jpeg' | 'image/png',
+  size?: MediaSize
 }): Promise<{blob: Blob, size: MediaSize}> {
   return new Promise((resolve) => {
     const canvas = document.createElement('canvas');
-    const size = options.mediaSize.aspectFitted(options.boxSize);
+    const size = options.size ?? options.mediaSize.aspectFitted(options.boxSize);
     canvas.width = size.width * window.devicePixelRatio;
     canvas.height = size.height * window.devicePixelRatio;
     const ctx = canvas.getContext('2d');