* cdm: render enclosures into content element

 * deprecate cdm.intermediate
 * implement lazy-load for rendered enclosures
 * simplify pack/unpack logic for articles

10 files changed, 42 insertions, 117 deletions

diff --git a/js/Article.js b/js/Article.js
index 16abfbfee..3b23d1d59 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -255,12 +255,12 @@ const Article = {
 		return comments;
 	},
 	unpack: function(row) {
-		if (row.hasAttribute("data-content")) {
+		if (row.getAttribute("data-is-packed") == "1") {
 			console.log("unpacking: " + row.id);
 
 			const container = row.querySelector(".content-inner");
 
-			container.innerHTML = row.getAttribute("data-content").trim();
+			container.innerHTML = row.getAttribute("data-content").trim() + row.getAttribute("data-rendered-enclosures").trim();
 
 			dojo.parser.parse(container);
 
@@ -272,16 +272,15 @@ const Article = {
 			if (App.isCombinedMode() && App.byId("main").hasClassName("expandable"))
 				row.setAttribute("data-content-original", row.getAttribute("data-content"));
 
-			row.removeAttribute("data-content");
+			row.setAttribute("data-is-packed", "0");
 
 			PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
 		}
 	},
 	pack: function(row) {
-		if (row.hasAttribute("data-content-original")) {
+		if (row.getAttribute("data-is-packed") != "1") {
 			console.log("packing", row.id);
-			row.setAttribute("data-content", row.getAttribute("data-content-original"));
-			row.removeAttribute("data-content-original");
+			row.setAttribute("data-is-packed", "1");
 
 			row.querySelector(".content-inner").innerHTML = `<div class="text-center text-muted">
 				${__("Loading, please wait...")}
diff --git a/js/Headlines.js b/js/Headlines.js
index 134bdad6d..d01993838 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -490,7 +490,9 @@ const Headlines = {
 						id="RROW-${hl.id}"
 						data-article-id="${hl.id}"
 						data-orig-feed-id="${hl.feed_id}"
+						data-is-packed="1"
 						data-content="${App.escapeHtml(hl.content)}"
+						data-rendered-enclosures="${App.escapeHtml(Article.renderEnclosures(hl.enclosures))}"
 						data-score="${hl.score}"
 						data-article-title="${App.escapeHtml(hl.title)}"
 						onmouseover="Article.mouseIn(${hl.id})"
@@ -537,9 +539,10 @@ const Headlines = {
 									${__("Loading, please wait...")}
 								</div>
 							</div>
-							<div class="intermediate">
-								${Article.renderEnclosures(hl.enclosures)}
-							</div>
+
+							<!-- intermediate: unstyled, kept for compatibility -->
+							<div class="intermediate"></div>
+
 							<div class="footer" onclick="event.stopPropagation()">
 
 								<div class="left">
diff --git a/themes/compact.css b/themes/compact.css
index 3dbc204ab..4f4c76bce 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -644,6 +644,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   border-top-width: 0;
   padding: 0 4px 4px 4px;
 }
+body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a {
+  word-break: break-all;
+}
 body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
   top: -8px;
   border-bottom-width: 1px;
@@ -670,10 +673,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   overflow: hidden;
   text-overflow: ellipsis;
 }
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a,
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a {
-  word-break: break-all;
-}
 body.ttrss_main #headlines-frame {
   padding: 0;
   border: 0;
@@ -1306,24 +1305,16 @@ body.ttrss_utility hr {
 .cdm .footer .left {
   flex-grow: 2;
 }
-.cdm .intermediate {
-  margin-top: 10px;
-  margin-left: 10px;
-  line-height: 1.5;
-}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
   font-size: 16px;
 }
-.cdm .intermediate iframe,
 .cdm .content-inner iframe {
   max-width: 98%;
   width: auto;
   height: auto;
 }
-.cdm .intermediate img,
-.cdm .intermediate video,
 .cdm .content-inner img,
 .cdm .content-inner video {
   border-width: 0px;
@@ -1385,13 +1376,11 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
-.cdm .intermediate .embed-responsive,
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
 }
-.cdm .intermediate .embed-responsive iframe,
 .cdm .content-inner .embed-responsive iframe {
   border: 0;
   bottom: 0;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 34417a92c..f1b455f2d 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -644,6 +644,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   border-top-width: 0;
   padding: 0 4px 4px 4px;
 }
+body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a {
+  word-break: break-all;
+}
 body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
   top: -8px;
   border-bottom-width: 1px;
@@ -670,10 +673,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   overflow: hidden;
   text-overflow: ellipsis;
 }
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a,
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a {
-  word-break: break-all;
-}
 body.ttrss_main #headlines-frame {
   padding: 0;
   border: 0;
@@ -1306,24 +1305,16 @@ body.ttrss_utility hr {
 .cdm .footer .left {
   flex-grow: 2;
 }
-.cdm .intermediate {
-  margin-top: 10px;
-  margin-left: 10px;
-  line-height: 1.5;
-}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
   font-size: 16px;
 }
-.cdm .intermediate iframe,
 .cdm .content-inner iframe {
   max-width: 98%;
   width: auto;
   height: auto;
 }
-.cdm .intermediate img,
-.cdm .intermediate video,
 .cdm .content-inner img,
 .cdm .content-inner video {
   border-width: 0px;
@@ -1385,13 +1376,11 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #b87d2c;
 }
-.cdm .intermediate .embed-responsive,
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
 }
-.cdm .intermediate .embed-responsive iframe,
 .cdm .content-inner .embed-responsive iframe {
   border: 0;
   bottom: 0;
diff --git a/themes/light-high-contrast.css b/themes/light-high-contrast.css
index 6e799bc9c..0bf179d9f 100644
--- a/themes/light-high-contrast.css
+++ b/themes/light-high-contrast.css
@@ -644,6 +644,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   border-top-width: 0;
   padding: 0 4px 4px 4px;
 }
+body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a {
+  word-break: break-all;
+}
 body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
   top: -8px;
   border-bottom-width: 1px;
@@ -670,10 +673,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   overflow: hidden;
   text-overflow: ellipsis;
 }
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a,
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a {
-  word-break: break-all;
-}
 body.ttrss_main #headlines-frame {
   padding: 0;
   border: 0;
@@ -1306,24 +1305,16 @@ body.ttrss_utility hr {
 .cdm .footer .left {
   flex-grow: 2;
 }
-.cdm .intermediate {
-  margin-top: 10px;
-  margin-left: 10px;
-  line-height: 1.5;
-}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
   font-size: 16px;
 }
-.cdm .intermediate iframe,
 .cdm .content-inner iframe {
   max-width: 98%;
   width: auto;
   height: auto;
 }
-.cdm .intermediate img,
-.cdm .intermediate video,
 .cdm .content-inner img,
 .cdm .content-inner video {
   border-width: 0px;
@@ -1385,13 +1376,11 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
-.cdm .intermediate .embed-responsive,
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
 }
-.cdm .intermediate .embed-responsive iframe,
 .cdm .content-inner .embed-responsive iframe {
   border: 0;
   bottom: 0;
diff --git a/themes/light.css b/themes/light.css
index 78a8b24b6..b201da5f4 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -644,6 +644,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   border-top-width: 0;
   padding: 0 4px 4px 4px;
 }
+body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a {
+  word-break: break-all;
+}
 body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
   top: -8px;
   border-bottom-width: 1px;
@@ -670,10 +673,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   overflow: hidden;
   text-overflow: ellipsis;
 }
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a,
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a {
-  word-break: break-all;
-}
 body.ttrss_main #headlines-frame {
   padding: 0;
   border: 0;
@@ -1306,24 +1305,16 @@ body.ttrss_utility hr {
 .cdm .footer .left {
   flex-grow: 2;
 }
-.cdm .intermediate {
-  margin-top: 10px;
-  margin-left: 10px;
-  line-height: 1.5;
-}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
   font-size: 16px;
 }
-.cdm .intermediate iframe,
 .cdm .content-inner iframe {
   max-width: 98%;
   width: auto;
   height: auto;
 }
-.cdm .intermediate img,
-.cdm .intermediate video,
 .cdm .content-inner img,
 .cdm .content-inner video {
   border-width: 0px;
@@ -1385,13 +1376,11 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
-.cdm .intermediate .embed-responsive,
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
 }
-.cdm .intermediate .embed-responsive iframe,
 .cdm .content-inner .embed-responsive iframe {
   border: 0;
   bottom: 0;
diff --git a/themes/light/cdm.less b/themes/light/cdm.less
index a89ceed27..5641a0380 100644
--- a/themes/light/cdm.less
+++ b/themes/light/cdm.less
@@ -103,35 +103,26 @@
 		}
 	}
 
-	.intermediate {
-		margin-top : 10px;
-		margin-left : 10px;
-		line-height : 1.5;
-	}
-
 	.content-inner {
 		margin : 10px;
 		line-height : 1.5;
 		font-size : 16px;
 	}
 
-	.intermediate,
 	.content-inner {
 		iframe {
 			max-width : 98%;
 			width : auto;
 			height : auto;
 		}
-	}
 
-	.intermediate img,
-	.intermediate video,
-	.content-inner img,
-	.content-inner video {
-		border-width : 0px;
-		max-width : 98%;
-		width : auto;
-		height : auto;
+		img,
+		video {
+			border-width : 0px;
+			max-width : 98%;
+			width : auto;
+			height : auto;
+		}
 	}
 
 	&.expanded {
@@ -210,7 +201,6 @@
 		}
 	}
 
-	.intermediate,
 	.content-inner {
 		.embed-responsive {
 			overflow : hidden;
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 088a3c7ff..0e85d53fb 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -754,6 +754,12 @@ body.ttrss_main {
 			.content {
 				border-top-width : 0;
 				padding : 0 4px 4px 4px;
+
+				.content-inner {
+					a {
+						word-break: break-all;
+					}
+				}
 			}
 
 			.header[data-is-stuck] {
@@ -787,13 +793,6 @@ body.ttrss_main {
 					text-overflow: ellipsis;
 				}
 			}
-
-			.content-inner,
-			.intermediate {
-				a {
-					word-break: break-all;
-				}
-			}
 		}
 	}
 
diff --git a/themes/night.css b/themes/night.css
index d401c50c2..ec4b2f08c 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -645,6 +645,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   border-top-width: 0;
   padding: 0 4px 4px 4px;
 }
+body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a {
+  word-break: break-all;
+}
 body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
   top: -8px;
   border-bottom-width: 1px;
@@ -671,10 +674,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   overflow: hidden;
   text-overflow: ellipsis;
 }
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a,
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a {
-  word-break: break-all;
-}
 body.ttrss_main #headlines-frame {
   padding: 0;
   border: 0;
@@ -1307,24 +1306,16 @@ body.ttrss_utility hr {
 .cdm .footer .left {
   flex-grow: 2;
 }
-.cdm .intermediate {
-  margin-top: 10px;
-  margin-left: 10px;
-  line-height: 1.5;
-}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
   font-size: 16px;
 }
-.cdm .intermediate iframe,
 .cdm .content-inner iframe {
   max-width: 98%;
   width: auto;
   height: auto;
 }
-.cdm .intermediate img,
-.cdm .intermediate video,
 .cdm .content-inner img,
 .cdm .content-inner video {
   border-width: 0px;
@@ -1386,13 +1377,11 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #b87d2c;
 }
-.cdm .intermediate .embed-responsive,
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
 }
-.cdm .intermediate .embed-responsive iframe,
 .cdm .content-inner .embed-responsive iframe {
   border: 0;
   bottom: 0;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index b0686a067..24edfbdf9 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -645,6 +645,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   border-top-width: 0;
   padding: 0 4px 4px 4px;
 }
+body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a {
+  word-break: break-all;
+}
 body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] {
   top: -8px;
   border-bottom-width: 1px;
@@ -671,10 +674,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr
   overflow: hidden;
   text-overflow: ellipsis;
 }
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a,
-body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a {
-  word-break: break-all;
-}
 body.ttrss_main #headlines-frame {
   padding: 0;
   border: 0;
@@ -1307,24 +1306,16 @@ body.ttrss_utility hr {
 .cdm .footer .left {
   flex-grow: 2;
 }
-.cdm .intermediate {
-  margin-top: 10px;
-  margin-left: 10px;
-  line-height: 1.5;
-}
 .cdm .content-inner {
   margin: 10px;
   line-height: 1.5;
   font-size: 16px;
 }
-.cdm .intermediate iframe,
 .cdm .content-inner iframe {
   max-width: 98%;
   width: auto;
   height: auto;
 }
-.cdm .intermediate img,
-.cdm .intermediate video,
 .cdm .content-inner img,
 .cdm .content-inner video {
   border-width: 0px;
@@ -1386,13 +1377,11 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
-.cdm .intermediate .embed-responsive,
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
 }
-.cdm .intermediate .embed-responsive iframe,
 .cdm .content-inner .embed-responsive iframe {
   border: 0;
   bottom: 0;