Browse Source

Fix Safari freeze

Fix color scheme
master
morethanwords 3 years ago
parent
commit
384abc702d
  1. 7
      src/components/appSearchSuper..ts
  2. 5
      src/components/sidebarLeft/tabs/background.ts
  3. 24
      src/components/wrappers.ts
  4. 5
      src/helpers/blur.ts
  5. 6
      src/helpers/dom/renderImageFromUrl.ts
  6. 2
      src/index.hbs
  7. 4
      src/lib/appManagers/appDownloadManager.ts
  8. 8
      src/lib/rootScope.ts

7
src/components/appSearchSuper..ts

@ -477,6 +477,7 @@ export default class AppSearchSuper { @@ -477,6 +477,7 @@ export default class AppSearchSuper {
//this.log(message, photo);
let wrapped: ReturnType<typeof wrapPhoto>;
const size = appPhotosManager.choosePhotoSize(media, 200, 200);
if(media._ !== 'photo') {
wrapped = wrapVideo({
doc: media,
@ -488,7 +489,8 @@ export default class AppSearchSuper { @@ -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 { @@ -500,7 +502,8 @@ export default class AppSearchSuper {
lazyLoadQueue: this.lazyLoadQueue,
middleware,
withoutPreloader: true,
noBlur: true
noBlur: true,
size
});
}

5
src/components/sidebarLeft/tabs/background.ts

@ -217,9 +217,8 @@ export default class AppBackgroundTab extends SliderSuperTab { @@ -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;

24
src/components/wrappers.ts

@ -42,7 +42,7 @@ import appDownloadManager from '../lib/appManagers/appDownloadManager'; @@ -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 @@ -59,6 +59,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
withoutPreloader?: boolean,
loadPromises?: Promise<any>[],
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 @@ -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 @@ -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 @@ -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 @@ -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<any>;
let thumbImage: HTMLImageElement;
@ -682,7 +687,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT @@ -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 @@ -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);

5
src/helpers/blur.ts

@ -49,6 +49,11 @@ function processBlur(dataUri: string, radius: number, iterations: number) { @@ -49,6 +49,11 @@ function processBlur(dataUri: string, radius: number, iterations: number) {
const blurPromises: {[dataUri: string]: Promise<string>} = {};
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<string>((resolve) => {
//return resolve(dataUri);

6
src/helpers/dom/renderImageFromUrl.ts

@ -13,6 +13,12 @@ const set = (elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLVideoE @@ -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);

2
src/index.hbs

@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
<meta name="msapplication-TileImage" content="/assets/img/mstile-144x144.png?v=jw3mK7G9Ry">
<meta name="msapplication-config" content="/assets/img/browserconfig.xml?v=jw3mK7G9Ry">
<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="light dark">
<meta name="color-scheme" content="light">
{{# each htmlWebpackPlugin.files.css }}
<link rel="stylesheet" href="{{ this }}">
{{/ each }}

4
src/lib/appManagers/appDownloadManager.ts

@ -270,9 +270,9 @@ export class AppDownloadManager { @@ -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] = {});

8
src/lib/rootScope.ts

@ -163,7 +163,13 @@ export class RootScope extends EventListenerBase<{ @@ -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() {

Loading…
Cancel
Save