From 6d1b0a63b6972d73c4d764ee68a9fab4086ee4c0 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Mon, 26 Sep 2022 22:36:41 +0200
Subject: [PATCH] Fix empty description box showing for the Invidious API
 (#2614)

* Fix empty description box showing for the Invidious API

* Add comment about HTML parsing
---
 .../watch-video-description.js                | 22 +++++++++++++------
 .../watch-video-description.vue               |  5 ++++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/watch-video-description/watch-video-description.js b/src/renderer/components/watch-video-description/watch-video-description.js
index f028e8c2..3d79c1bc 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.js
+++ b/src/renderer/components/watch-video-description/watch-video-description.js
@@ -2,7 +2,6 @@ import Vue from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtTimestampCatcher from '../ft-timestamp-catcher/ft-timestamp-catcher.vue'
 import autolinker from 'autolinker'
-import $ from 'jquery'
 
 export default Vue.extend({
   name: 'WatchVideoDescription',
@@ -31,13 +30,22 @@ export default Vue.extend({
   },
   mounted: function () {
     if (this.descriptionHtml !== '') {
-      this.shownDescription = this.parseDescriptionHtml(this.descriptionHtml)
-    } else {
-      this.shownDescription = autolinker.link(this.description)
-    }
+      const parsed = this.parseDescriptionHtml(this.descriptionHtml)
 
-    if (/^\s*$/.test(this.shownDescription)) {
-      $('.videoDescription')[0].style.display = 'none'
+      // the invidious API returns emtpy html elements when the description is empty
+      // so we need to parse it to see if there is any meaningful text in the html
+      // or if it's just empty html elements e.g. `<p></p>`
+
+      const testDiv = document.createElement('div')
+      testDiv.innerHTML = parsed
+
+      if (!/^\s*$/.test(testDiv.innerText)) {
+        this.shownDescription = parsed
+      }
+    } else {
+      if (!/^\s*$/.test(this.description)) {
+        this.shownDescription = autolinker.link(this.description)
+      }
     }
   },
   methods: {
diff --git a/src/renderer/components/watch-video-description/watch-video-description.vue b/src/renderer/components/watch-video-description/watch-video-description.vue
index 204b6269..7c47df0a 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.vue
+++ b/src/renderer/components/watch-video-description/watch-video-description.vue
@@ -1,5 +1,8 @@
 <template>
-  <ft-card class="videoDescription">
+  <ft-card
+    v-if="shownDescription.length > 0"
+    class="videoDescription"
+  >
     <ft-timestamp-catcher
       class="description"
       :input-html="shownDescription"