|
|
@ -774,8 +774,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType |
|
|
|
|
|
|
|
|
|
|
|
protected updateMediaSource(target: HTMLElement, url: string, tagName: 'video' | 'img') { |
|
|
|
protected updateMediaSource(target: HTMLElement, url: string, tagName: 'video' | 'img') { |
|
|
|
//if(target instanceof SVGSVGElement) {
|
|
|
|
//if(target instanceof SVGSVGElement) {
|
|
|
|
const el = target.querySelector(tagName) as HTMLElement; |
|
|
|
const el = target.tagName.toLowerCase() === tagName ? target : target.querySelector(tagName) as HTMLElement; |
|
|
|
|
|
|
|
if(el) { |
|
|
|
renderImageFromUrl(el, url); |
|
|
|
renderImageFromUrl(el, url); |
|
|
|
|
|
|
|
} |
|
|
|
/* } else { |
|
|
|
/* } else { |
|
|
|
|
|
|
|
|
|
|
|
} */ |
|
|
|
} */ |
|
|
@ -847,7 +849,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType |
|
|
|
this.buttons.next.classList.toggle('hide', !this.nextTargets.length); |
|
|
|
this.buttons.next.classList.toggle('hide', !this.nextTargets.length); |
|
|
|
|
|
|
|
|
|
|
|
const container = this.content.media; |
|
|
|
const container = this.content.media; |
|
|
|
const useContainerAsTarget = !target; |
|
|
|
const useContainerAsTarget = !target || target === container; |
|
|
|
if(useContainerAsTarget) target = container; |
|
|
|
if(useContainerAsTarget) target = container; |
|
|
|
|
|
|
|
|
|
|
|
this.lastTarget = target; |
|
|
|
this.lastTarget = target; |
|
|
@ -890,11 +892,22 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType |
|
|
|
//const maxWidth = appPhotosManager.windowW - 16;
|
|
|
|
//const maxWidth = appPhotosManager.windowW - 16;
|
|
|
|
const maxWidth = mediaSizes.isMobile ? this.pageEl.scrollWidth : this.pageEl.scrollWidth - 16; |
|
|
|
const maxWidth = mediaSizes.isMobile ? this.pageEl.scrollWidth : this.pageEl.scrollWidth - 16; |
|
|
|
const maxHeight = appPhotosManager.windowH - 100; |
|
|
|
const maxHeight = appPhotosManager.windowH - 100; |
|
|
|
|
|
|
|
let thumbPromise: Promise<any> = Promise.resolve(); |
|
|
|
|
|
|
|
if(useContainerAsTarget) { |
|
|
|
|
|
|
|
const cacheContext = appPhotosManager.getCacheContext(media); |
|
|
|
|
|
|
|
if(cacheContext.downloaded) { |
|
|
|
|
|
|
|
const img = new Image(); |
|
|
|
|
|
|
|
img.src = cacheContext.url; |
|
|
|
|
|
|
|
container.append(img); |
|
|
|
|
|
|
|
} else { |
|
|
|
const gotThumb = appPhotosManager.getStrippedThumbIfNeeded(media); |
|
|
|
const gotThumb = appPhotosManager.getStrippedThumbIfNeeded(media); |
|
|
|
if(gotThumb) { |
|
|
|
if(gotThumb) { |
|
|
|
|
|
|
|
thumbPromise = gotThumb.loadPromise; |
|
|
|
container.append(gotThumb.image); |
|
|
|
container.append(gotThumb.image); |
|
|
|
} |
|
|
|
} |
|
|
|
const size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight, mediaSizes.isMobile ? false : true); |
|
|
|
|
|
|
|
|
|
|
|
// need after setAttachmentSize
|
|
|
|
// need after setAttachmentSize
|
|
|
|
/* if(useContainerAsTarget) { |
|
|
|
/* if(useContainerAsTarget) { |
|
|
@ -910,7 +923,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType |
|
|
|
// потому что для safari нужно создать элемент из event'а
|
|
|
|
// потому что для safari нужно создать элемент из event'а
|
|
|
|
const video = document.createElement('video'); |
|
|
|
const video = document.createElement('video'); |
|
|
|
|
|
|
|
|
|
|
|
setMoverPromise = this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => { |
|
|
|
const set = () => this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => { |
|
|
|
//return; // set and don't move
|
|
|
|
//return; // set and don't move
|
|
|
|
//if(wasActive) return;
|
|
|
|
//if(wasActive) return;
|
|
|
|
//return;
|
|
|
|
//return;
|
|
|
@ -1050,8 +1063,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType |
|
|
|
this.lazyLoadQueue.unshift({load}); |
|
|
|
this.lazyLoadQueue.unshift({load}); |
|
|
|
//} else createPlayer();
|
|
|
|
//} else createPlayer();
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setMoverPromise = thumbPromise.then(set); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
setMoverPromise = this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => { |
|
|
|
const set = () => this.setMoverToTarget(target, false, fromRight).then(({onAnimationEnd}) => { |
|
|
|
//return; // set and don't move
|
|
|
|
//return; // set and don't move
|
|
|
|
//if(wasActive) return;
|
|
|
|
//if(wasActive) return;
|
|
|
|
//return;
|
|
|
|
//return;
|
|
|
@ -1088,18 +1103,25 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
const div = mover.firstElementChild && mover.firstElementChild.classList.contains('media-viewer-aspecter') ? mover.firstElementChild : mover; |
|
|
|
const div = mover.firstElementChild && mover.firstElementChild.classList.contains('media-viewer-aspecter') ? mover.firstElementChild : mover; |
|
|
|
|
|
|
|
const haveImage = div.firstElementChild?.tagName === 'IMG' ? div.firstElementChild as HTMLImageElement : null; |
|
|
|
|
|
|
|
if(!haveImage || haveImage.src !== url) { |
|
|
|
let image = new Image(); |
|
|
|
let image = new Image(); |
|
|
|
|
|
|
|
|
|
|
|
//this.log('will renderImageFromUrl:', image, div, target);
|
|
|
|
//this.log('will renderImageFromUrl:', image, div, target);
|
|
|
|
|
|
|
|
|
|
|
|
renderImageFromUrl(image, url, () => { |
|
|
|
renderImageFromUrl(image, url, () => { |
|
|
|
if(div.firstElementChild?.tagName === 'IMG') { |
|
|
|
this.updateMediaSource(target, url, 'img'); |
|
|
|
div.firstElementChild.remove(); |
|
|
|
|
|
|
|
|
|
|
|
if(haveImage) { |
|
|
|
|
|
|
|
window.requestAnimationFrame(() => { |
|
|
|
|
|
|
|
haveImage.remove(); |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
div.append(image); |
|
|
|
div.append(image); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.preloader.detach(); |
|
|
|
this.preloader.detach(); |
|
|
|
}).catch(err => { |
|
|
|
}).catch(err => { |
|
|
@ -1111,6 +1133,8 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType |
|
|
|
|
|
|
|
|
|
|
|
this.lazyLoadQueue.unshift({load}); |
|
|
|
this.lazyLoadQueue.unshift({load}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setMoverPromise = thumbPromise.then(set); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return this.setMoverPromise = setMoverPromise.catch(() => { |
|
|
|
return this.setMoverPromise = setMoverPromise.catch(() => { |
|
|
|