showImages: Fix wrapper being resized on media unload (honestbleeps#4674

)

* Minor fixes

* Fix wrapper being resized when unloaded

lib/modules/showImages.js

@@ -637,13 +637,18 @@ function enableConserveMemory() {
  }), 1000));
 }
 
+
+const stopEventPropagation = e => { e.stopImmediatePropagation(); };
+
 function lazyUnload(media: ExpandoMediaElement, keepLoaded: boolean) {
  if (!media.unload || !media.restore) return;
 
  if (/*:: media.restore && */ keepLoaded && media.state === mediaStates.UNLOADED) {
  media.restore();
+ media.removeEventListener('mediaResize', stopEventPropagation);
  } else if (/*:: media.unload && */ !keepLoaded && media.state !== mediaStates.UNLOADED) {
  media.unload();
+ media.addEventListener('mediaResize', stopEventPropagation, true);
  }
 }
 
@@ -1651,7 +1656,7 @@ function keepMediaVisible(media) {
  const basisLeft = _.once(() => (media.parentElement: any).getBoundingClientRect().left);
  let isAligned = false;
 
- media.addEventListener('mediaResize', frameThrottle(({ detail: { width: mediaWidth } }: any) => {
+ media.addEventListener('mediaResize', ({ detail: { width: mediaWidth } }: any) => {
  const { width: viewportWidth } = getViewportSize();
 
  if (!isAligned && basisLeft() + mediaWidth < viewportWidth) return;
@@ -1670,7 +1675,7 @@ function keepMediaVisible(media) {
  isAligned = false;
  moveMedia(media, -deltaLeft, 0);
  }
- }));
+ });
 }
 
 function getClippyText() {
@@ -1839,12 +1844,15 @@ function makeMediaIndependent(element) {
  independent.classList.add('res-media-independent');
  wrapper.style.willChange = 'height';
 
+ wrapper.addEventListener('mediaResize', ({ detail: { height } }: any) => {
+ wrapper.style.height = `${height}px`;
+ });
+
  const observer = new ResizeObserverLite(contentRect => {
- wrapper.style.height = `${contentRect.height}px`;
  element.dispatchEvent(new CustomEvent('mediaResize', { detail: contentRect, bubbles: true }));
  });
  observer.observe(element);
- waitForEvent(element, 'mediaManuallyMoved').then(() => { observer.unobserve(element); });
+ waitForEvent(element, 'mediaManuallyMoved').then(() => { observer.disconnect(); });
 }
 
 // When videos is added, this will pause or play them individually depending on their visibility