1275 description markdown rendering not working (TUM-Dev#1297)

* Course description on the watching page: Switch "Show more" and "Show less" to avoid confusion. Now the button reads "Show more" when the full description is not shown, and "Show less" when the full description is shown.

* Change the hidden field containing the video description from input to span to preserve its formatting.

* Collapse video description also when it is too high (more than 1 line of title + 1 line of plain text)

* The hidden element holding the description simulates the real description environment, allowing the element's height to be accurately calculated even with blank lines;
Remove debug code.

web/assets/css/watch.css

@@ -1,3 +1,13 @@
 .playlist-thumbnail {
     @apply bg-gray-100 dark:bg-gray-800 rounded-lg mr-4 bg-cover transition-all duration-500 hover:shadow-xl dark:shadow-gray-900/75;
-}
+}
+
+/* Rendered, but not visible on the screen. Enables layout calculations. */
+.offscreen {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+}

web/template/watch.gohtml

@@ -85,7 +85,13 @@
     {{template "alert-modal" . }}
 {{end}}
 <div id="watchPageMainWrapper">
-    <input type="hidden" id="description" value="{{.Description}}">
+    <div class="offscreen video-description flex-grow p-3 order-2 basis-full lg:order-none lg:p-5 lg:mx-2">
+        <div>
+            <div class="rounded-lg bg-gray-50 hover:bg-gray-100 dark:bg-secondary-light hover:dark:bg-gray-600 text-3 text-sm">
+                <span id="description">{{.Description}}</span>
+            </div>
+        </div>
+    </div>
     <input type="hidden" id="streamID" value="{{$stream.Model.ID}}">
     <div x-data="interaction.videoInformationContext({{$stream.ID}});"
          class="flex flex-wrap shadow border bg-white dark:bg-secondary dark:shadow-0 dark:border-0">
@@ -577,7 +583,7 @@
                         </button>
                         <template x-if="less">
                             <button class="font-semibold m-1 py-1 px-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600"
-                                    x-text="showFullDescription.toggleText('Show more', 'Show less')"
+                                    x-text="showFullDescription.toggleText('Show less', 'Show more')"
                                     @click="showFullDescription.toggle()"></button>
                         </template>
                     </div>

web/ts/components/video-information.ts

@@ -4,14 +4,15 @@ import { ToggleableElement } from "../utilities/ToggleableElement";
 import { RealtimeFacade } from "../utilities/ws";
 
 const CUTOFFLENGTH = 256;
+const CUTOFFHEIGHT = 52; // This is the height of one line of level 1 title + one line of plain text
 
 export function videoInformationContext(streamId: number): AlpineComponent {
     // TODO: REST
     const descriptionEl = document.getElementById("description") as HTMLInputElement;
     return {
         viewers: 0 as number,
-        description: descriptionEl.value as string,
-        less: descriptionEl.value.length > CUTOFFLENGTH,
+        description: descriptionEl.innerHTML as string,
+        less: descriptionEl.innerHTML.length > CUTOFFLENGTH || descriptionEl.offsetHeight > CUTOFFHEIGHT,
 
         showFullDescription: new ToggleableElement(),