From c53466f1fd1852ef9bcbf1b6c891d6b689f35721 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Sun, 19 Jun 2022 20:51:15 +0400
Subject: [PATCH] Support uploading .png wallpapers

---
 src/components/sidebarLeft/tabs/background.ts | 12 ++++++++++++
 src/helpers/canvas/scaleMediaElement.ts       |  9 +++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebarLeft/tabs/background.ts b/src/components/sidebarLeft/tabs/background.ts
index 6d9699b1..adeef1c4 100644
--- a/src/components/sidebarLeft/tabs/background.ts
+++ b/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);
diff --git a/src/helpers/canvas/scaleMediaElement.ts b/src/helpers/canvas/scaleMediaElement.ts
index d70f1f73..670c3bdf 100644
--- a/src/helpers/canvas/scaleMediaElement.ts
+++ b/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');