* cdm: render enclosures into content element

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

8 files changed, 31 insertions, 108 deletions

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;