Better description view for videos and playlists (#272)

* draft

* proper implementation of description line clamping

* use a JS event that's potentially faster for text expand button visibility update

* remove desc title text, move show button after desc

Co-authored-by: simon <simobilleter@gmail.com>

tubearchivist/home/templates/home/channel_id_about.html

@@ -53,12 +53,10 @@
     </div>
     {% if channel_info.channel_description %}
         <div class="description-box">
-            <h2>Description</h2>
-        </div>
-        <div class="info-box-item description-box">
-            <div class="description-text">
-                {{ channel_info.channel_description|linebreaks }}
-            </div>
+            <p id="text-expand" class="description-text">
+                {{ channel_info.channel_description|linebreaksbr|urlizetrunc:50 }}
+            </p>
+            <button onclick="textExpand()" id="text-expand-button">Show more</button>
         </div>
     {% endif %}
     <div class="description-box">

tubearchivist/home/templates/home/playlist_id.html

@@ -56,11 +56,11 @@
         </div>
     </div>
     {% if playlist_info.playlist_description %}
-        <div class="info-box-item description-box">
-            <p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
-            <div id="text-reveal" class="description-text">
-                {{ playlist_info.playlist_description|linebreaks }}
-            </div>
+        <div class="description-box">
+            <p id="text-expand" class="description-text">
+                {{ playlist_info.playlist_description|linebreaksbr|urlizetrunc:50 }}
+            </p>
+            <button onclick="textExpand()" id="text-expand-button">Show more</button>
         </div>
     {% endif %}
 </div>

tubearchivist/home/templates/home/video.html

@@ -77,11 +77,11 @@
         </div>
     </div>
     {% if video.description %}
-        <div class="info-box-item description-box">
-            <p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
-            <div id="text-reveal" class="description-text">
-                {{ video.description|linebreaks }}
-            </div>
+        <div class="description-box">
+            <p id="text-expand" class="description-text">
+                {{ video.description|linebreaksbr|urlizetrunc:50 }}
+            </p>
+            <button onclick="textExpand()" id="text-expand-button">Show more</button>
         </div>
     {% endif %}
     {% if playlist_nav %}

tubearchivist/static/css/style.css

@@ -365,10 +365,17 @@ button:hover {
 }
 
 #text-reveal {
-    height: 0px;
+    height: 0;
     overflow: hidden;
 }
 
+#text-expand {
+    overflow: hidden;
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+}
+
 
 /* video player */
 .player-wrapper {
@@ -591,6 +598,8 @@ button:hover {
 
 .description-box {
     margin-top: 1rem;
+    padding: 15px;
+    background-color: var(--highlight-bg);
 }
 
 .info-box-3 {

tubearchivist/static/script.js

@@ -967,6 +967,7 @@ function createPlaylist(playlist, viewStyle) {
 
 
 // generic
+
 function sendPost(payload) {
     var http = new XMLHttpRequest();
     http.open("POST", "/process/", true);
@@ -991,19 +992,57 @@ function getCookie(c_name) {
 
 
 // animations
+
 function textReveal() {
-    var textBox = document.getElementById('text-reveal');
-    var button = document.getElementById('text-reveal-button');
+    var textBox = document.getElementById("text-reveal");
+    var button = document.getElementById("text-reveal-button");
     var textBoxHeight = textBox.style.height;
-    if (textBoxHeight === 'unset') {
-        textBox.style.height = '0px';
-        button.innerText = 'Show';
+    if (textBoxHeight === "unset") {
+        textBox.style.height = "0px";
+        button.innerText = "Show";
     } else {
-        textBox.style.height = 'unset';
-        button.innerText = 'Hide';
+        textBox.style.height = "unset";
+        button.innerText = "Hide";
     }
 }
 
+function textExpand() {
+    var textBox = document.getElementById("text-expand");
+    var button = document.getElementById("text-expand-button");
+    var textBoxLineClamp = textBox.style["-webkit-line-clamp"];
+    if (textBoxLineClamp === "none") {
+        textBox.style["-webkit-line-clamp"] = "4";
+        button.innerText = "Show more";
+    } else {
+        textBox.style["-webkit-line-clamp"] = "none";
+        button.innerText = "Show less";
+    }
+}
+
+// hide "show more" button if all text is already visible
+function textExpandButtonVisibilityUpdate() {
+    var textBox = document.getElementById("text-expand");
+    var button = document.getElementById("text-expand-button");
+    if (!textBox || !button)
+        return;
+
+    var textBoxLineClamp = textBox.style["-webkit-line-clamp"];
+    if (textBoxLineClamp === "none")
+        return; // text box is in revealed state
+
+    if (textBox.offsetHeight < textBox.scrollHeight
+        || textBox.offsetWidth < textBox.scrollWidth) {
+        // the element has an overflow, show read more button
+        button.style.display = "inline-block";
+    } else {
+        // the element doesn't have overflow
+        button.style.display = "none";
+    }
+}
+
+document.addEventListener("readystatechange", textExpandButtonVisibilityUpdate);
+window.addEventListener("resize", textExpandButtonVisibilityUpdate);
+
 function showForm() {
     var formElement = document.getElementById('hidden-form');
     var displayStyle = formElement.style.display;