* shorten_expanded: use ResizeObserver (DUH)

* add HOOK_HEADLINES_RENDERED

js/Headlines.js

@@ -436,6 +436,7 @@ const Headlines = {
 
 		dijit.byId('main').resize();
 
+		PluginHost.run(PluginHost.HOOK_HEADLINES_RENDERED);
 	},
 	render: function (headlines, hl) {
 		let row = null;
@@ -832,6 +833,8 @@ const Headlines = {
 
 		dijit.byId('main').resize();
 
+		PluginHost.run(PluginHost.HOOK_HEADLINES_RENDERED);
+
 		Notify.close();
 	},
 	reverse: function () {

js/PluginHost.js

@@ -19,6 +19,7 @@ const PluginHost = {
 	HOOK_COUNTERS_PROCESSED: 14,
 	HOOK_HEADLINE_MUTATIONS: 15,
 	HOOK_HEADLINE_MUTATIONS_SYNCED: 16,
+	HOOK_HEADLINES_RENDERED: 17,
 	hooks: [],
 	register: function (name, callback) {
 		if (typeof(this.hooks[name]) == 'undefined')

plugins/shorten_expanded/init.js

@@ -2,6 +2,13 @@
 
 Plugins.Shorten_Expanded = {
 	threshold: 1.5, // of window height
+	observer: new ResizeObserver((entries) => {
+		entries.forEach((entry) => {
+			const row = entry.target;
+
+			Plugins.Shorten_Expanded.shorten_if_needed(row);
+		});
+	}),
 	shorten_if_needed: function(row) {
 
 		const content = row.querySelector(".content");
@@ -9,7 +16,9 @@ Plugins.Shorten_Expanded = {
 
 		console.log('shorten_expanded', row.id, content.offsetHeight, 'vs', this.threshold * window.innerHeight);
 
-		if (content && content_inner && content.offsetHeight >= this.threshold * window.innerHeight) {
+		if (content && content_inner && !row.hasAttribute('data-already-shortened') && content.offsetHeight >= this.threshold * window.innerHeight) {
+
+			row.setAttribute('data-already-shortened', true);
 
 			const attachments = row.querySelector(".attachments-inline"); // optional
 
@@ -37,33 +46,7 @@ Plugins.Shorten_Expanded = {
 		if (this.shorten_if_needed(row))
 			return;
 
-		const promises = [];
+		this.observer.observe(row);
-
-		[...row.querySelectorAll("img, video")].forEach((img) => {
-			const promise = new Promise((resolve, reject) => {
-
-				// lazy load breaks our calculations
-				img.removeAttribute('loading');
-
-				img.onload = () => resolve(img);
-				img.onloadeddata = () => resolve(img);
-				img.error = () => reject(new Error("unable to load video"));
-				img.onerror = () => reject(new Error("unable to load image"));
-			});
-
-			const timeout = new Promise((resolve, reject) => {
-				const id = setTimeout(() => {
-					clearTimeout(id);
-					reject(new Error("timed out"));
-				}, 2000)
-			})
-
-			promises.push(Promise.race([promise, timeout]));
-		});
-
-		Promise.allSettled(promises).then(() => {
-			this.shorten_if_needed(row);
-		});
 	},
 	expand: function(id) {
 		const row = App.byId(id);