From 384abc702d41c3fa9d78296ac1532583295c2b5e Mon Sep 17 00:00:00 2001 From: morethanwords Date: Mon, 3 May 2021 04:29:46 +0400 Subject: [PATCH 1/2] Fix Safari freeze Fix color scheme --- src/components/appSearchSuper..ts | 7 ++++-- src/components/sidebarLeft/tabs/background.ts | 5 ++-- src/components/wrappers.ts | 24 +++++++++++++------ src/helpers/blur.ts | 5 ++++ src/helpers/dom/renderImageFromUrl.ts | 6 +++++ src/index.hbs | 2 +- src/lib/appManagers/appDownloadManager.ts | 4 ++-- src/lib/rootScope.ts | 8 ++++++- 8 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/components/appSearchSuper..ts b/src/components/appSearchSuper..ts index eeaea68d..c6491425 100644 --- a/src/components/appSearchSuper..ts +++ b/src/components/appSearchSuper..ts @@ -477,6 +477,7 @@ export default class AppSearchSuper { //this.log(message, photo); let wrapped: ReturnType; + const size = appPhotosManager.choosePhotoSize(media, 200, 200); if(media._ !== 'photo') { wrapped = wrapVideo({ doc: media, @@ -488,7 +489,8 @@ export default class AppSearchSuper { middleware, onlyPreview: true, withoutPreloader: true, - noPlayButton: true + noPlayButton: true, + size }).thumb; } else { wrapped = wrapPhoto({ @@ -500,7 +502,8 @@ export default class AppSearchSuper { lazyLoadQueue: this.lazyLoadQueue, middleware, withoutPreloader: true, - noBlur: true + noBlur: true, + size }); } diff --git a/src/components/sidebarLeft/tabs/background.ts b/src/components/sidebarLeft/tabs/background.ts index 28fa7c13..aecd2752 100644 --- a/src/components/sidebarLeft/tabs/background.ts +++ b/src/components/sidebarLeft/tabs/background.ts @@ -217,9 +217,8 @@ export default class AppBackgroundTab extends SliderSuperTab { photo: wallpaper.document, message: null, container: media, - boxWidth: 0, - boxHeight: 0, - withoutPreloader: true + withoutPreloader: true, + size: appPhotosManager.choosePhotoSize(wallpaper.document, 200, 200) }); container.dataset.docId = wallpaper.document.id; diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index cfbaed86..07b1901b 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -42,7 +42,7 @@ import appDownloadManager from '../lib/appManagers/appDownloadManager'; const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB -export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTail, isOut, middleware, lazyLoadQueue, noInfo, group, onlyPreview, withoutPreloader, loadPromises, noPlayButton, noAutoDownload}: { +export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTail, isOut, middleware, lazyLoadQueue, noInfo, group, onlyPreview, withoutPreloader, loadPromises, noPlayButton, noAutoDownload, size}: { doc: MyDocument, container?: HTMLElement, message?: any, @@ -59,6 +59,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai withoutPreloader?: boolean, loadPromises?: Promise[], noAutoDownload?: boolean, + size?: PhotoSize }) { const isAlbumItem = !(boxWidth && boxHeight); const canAutoplay = (doc.type !== 'video' || (doc.size <= MAX_VIDEO_AUTOPLAY_SIZE && !isAlbumItem)) @@ -115,7 +116,8 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai middleware, withoutPreloader, loadPromises, - noAutoDownload + noAutoDownload, + size }); res.thumb = photoRes; @@ -252,7 +254,8 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai middleware, withoutPreloader: true, loadPromises, - noAutoDownload + noAutoDownload, + size }); res.thumb = photoRes; @@ -654,7 +657,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT noBlur?: boolean, }) { if(!((photo as MyPhoto).sizes || (photo as MyDocument).thumbs)) { - if(boxWidth && boxHeight && photo._ === 'document') { + if(boxWidth && boxHeight && !size && photo._ === 'document') { size = appPhotosManager.setAttachmentSize(photo, container, boxWidth, boxHeight, undefined, message && message.message); } @@ -671,8 +674,10 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT }; } - if(boxWidth === undefined) boxWidth = mediaSizes.active.regular.width; - if(boxHeight === undefined) boxHeight = mediaSizes.active.regular.height; + if(!size) { + if(boxWidth === undefined) boxWidth = mediaSizes.active.regular.width; + if(boxHeight === undefined) boxHeight = mediaSizes.active.regular.height; + } let loadThumbPromise: Promise; let thumbImage: HTMLImageElement; @@ -682,7 +687,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT } else { image = new Image(); - if(boxWidth && boxHeight) { // !album + if(boxWidth && boxHeight && !size) { // !album size = appPhotosManager.setAttachmentSize(photo, container, boxWidth, boxHeight, undefined, message && message.message); } @@ -731,6 +736,11 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT if(middleware && !middleware()) return Promise.resolve(); return new Promise((resolve) => { + /* if(photo._ === 'document') { + console.error('wrapPhoto: will render document', photo, size, cacheContext); + return resolve(); + } */ + renderImageFromUrl(image, cacheContext.url, () => { sequentialDom.mutateElement(container, () => { container.append(image); diff --git a/src/helpers/blur.ts b/src/helpers/blur.ts index 27fd8c20..cf5b894e 100644 --- a/src/helpers/blur.ts +++ b/src/helpers/blur.ts @@ -49,6 +49,11 @@ function processBlur(dataUri: string, radius: number, iterations: number) { const blurPromises: {[dataUri: string]: Promise} = {}; export default function blur(dataUri: string, radius: number = RADIUS, iterations: number = ITERATIONS) { + if(!dataUri) { + console.error('no dataUri for blur', dataUri); + return Promise.resolve(dataUri); + } + if(blurPromises[dataUri]) return blurPromises[dataUri]; return blurPromises[dataUri] = new Promise((resolve) => { //return resolve(dataUri); diff --git a/src/helpers/dom/renderImageFromUrl.ts b/src/helpers/dom/renderImageFromUrl.ts index 62774c5b..488e1def 100644 --- a/src/helpers/dom/renderImageFromUrl.ts +++ b/src/helpers/dom/renderImageFromUrl.ts @@ -13,6 +13,12 @@ const set = (elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLVideoE // проблема функции в том, что она не подходит для ссылок, пригодна только для blob'ов, потому что обычным ссылкам нужен 'load' каждый раз. export default function renderImageFromUrl(elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLVideoElement, url: string, callback?: (err?: Event) => void, useCache = true): boolean { + if(!url) { + console.error('renderImageFromUrl: no url?', elem, url); + //callback && callback(); + return false; + } + if(((loadedURLs[url]/* && false */) && useCache) || elem instanceof HTMLVideoElement) { if(elem) { set(elem, url); diff --git a/src/index.hbs b/src/index.hbs index 329adb7b..d1c4efae 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -21,7 +21,7 @@ - + {{# each htmlWebpackPlugin.files.css }} {{/ each }} diff --git a/src/lib/appManagers/appDownloadManager.ts b/src/lib/appManagers/appDownloadManager.ts index fdd09b85..977a1fc6 100644 --- a/src/lib/appManagers/appDownloadManager.ts +++ b/src/lib/appManagers/appDownloadManager.ts @@ -270,9 +270,9 @@ export class AppDownloadManager { return download; } - public getCacheContext(media: MyPhoto | MyDocument, thumbSize: string = ''): ThumbCache { + public getCacheContext(media: MyPhoto | MyDocument, thumbSize: string = 'full'): ThumbCache { if(media._ === 'photo' && thumbSize !== 'i') { - thumbSize = ''; + thumbSize = 'full'; } const cache = this.thumbsCache[media._][media.id] ?? (this.thumbsCache[media._][media.id] = {}); diff --git a/src/lib/rootScope.ts b/src/lib/rootScope.ts index 71a3de7a..94736b72 100644 --- a/src/lib/rootScope.ts +++ b/src/lib/rootScope.ts @@ -163,7 +163,13 @@ export class RootScope extends EventListenerBase<{ } public setTheme() { - document.documentElement.classList.toggle('night', this.getTheme().name === 'night'); + const isNight = this.getTheme().name === 'night'; + const colorScheme = document.head.querySelector('[name="color-scheme"]'); + if(colorScheme) { + colorScheme.setAttribute('content', isNight ? 'dark' : 'light'); + } + + document.documentElement.classList.toggle('night', isNight); } get overlayIsActive() {