From 4cec3c214d2df66e0b713e167d3f2f2a9450a125 Mon Sep 17 00:00:00 2001
From: tpmai22 <thienphuoc.0108@gmail.com>
Date: Mon, 31 Jan 2022 16:41:49 -0500
Subject: [PATCH] Make Youtube link clikable

---
 package.json             |  2 ++
 pnpm-lock.yaml           | 17 +++++++++++++++++
 src/backend/data/post.js | 10 ++++++++++
 test/post.test.js        |  5 ++++-
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c3870d64a9..b55b365c7a 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,8 @@
     "ioredis": "4.28.2",
     "ioredis-mock": "5.8.1",
     "jsdom": "18.1.1",
+    "linkify-html": "3.0.5",
+    "linkifyjs": "3.0.5",
     "node-fetch": "2.6.7",
     "normalize-url": "6.1.0",
     "opml-generator": "1.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bfeaad6285..72a6643471 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,8 @@ importers:
       jest-fetch-mock: 3.0.3
       jest-playwright-preset: 1.7.0
       jsdom: 18.1.1
+      linkify-html: 3.0.5
+      linkifyjs: 3.0.5
       nock: 13.2.1
       node-fetch: 2.6.7
       normalize-url: 6.1.0
@@ -113,6 +115,8 @@ importers:
       ioredis: 4.28.2
       ioredis-mock: 5.8.1_ioredis@4.28.2
       jsdom: 18.1.1
+      linkify-html: 3.0.5_linkifyjs@3.0.5
+      linkifyjs: 3.0.5
       node-fetch: 2.6.7
       normalize-url: 6.1.0
       opml-generator: 1.1.1
@@ -10731,6 +10735,18 @@ packages:
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  /linkify-html/3.0.5_linkifyjs@3.0.5:
+    resolution: {integrity: sha512-3O7HEYjkugX+C/G2C2wyBmIt8Mt0pmeaHNIxRHodCFeQQeSxSoZHR+5hC1pi0WrmoEvfnSemyZyYTM8w3lo9cA==}
+    peerDependencies:
+      linkifyjs: ^3.0.0
+    dependencies:
+      linkifyjs: 3.0.5
+    dev: false
+
+  /linkifyjs/3.0.5:
+    resolution: {integrity: sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==}
+    dev: false
+
   /listenercount/1.0.1:
     resolution: {integrity: sha1-hMinKrWcRyUyFIDJdeZQg0LnCTc=}
     dev: true
@@ -14095,6 +14111,7 @@ packages:
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
 
   /source-map/0.7.3:
     resolution: {integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==}
diff --git a/src/backend/data/post.js b/src/backend/data/post.js
index 3ae82f8dcf..a882e34427 100644
--- a/src/backend/data/post.js
+++ b/src/backend/data/post.js
@@ -1,3 +1,4 @@
+const linkifyHtml = require('linkify-html');
 const { getPost, addPost } = require('../utils/storage');
 const { logger } = require('../utils/logger');
 const processHTML = require('../utils/html');
@@ -148,7 +149,16 @@ class Post {
       article.date = article.pubdate;
     }
 
+    // All the Youtube feed return an array off html so we will need to convert it to a string so as to process and sanitize it
+    if (Array.isArray(article.content)) {
+      article.content = article.content.join(' ');
+    }
+
+    // Wrap an <a> tag on any link inside our content
+    article.content = linkifyHtml(article.content);
+
     let html;
+
     try {
       // The article.content is frequently the full HTML article content.
       // Sanitize it of any scripts or other dangerous attributes/elements,
diff --git a/test/post.test.js b/test/post.test.js
index 31afc5f951..6769220e82 100644
--- a/test/post.test.js
+++ b/test/post.test.js
@@ -299,7 +299,7 @@ describe('Post data class tests', () => {
       expect(articles.items.length).toBe(15);
     });
 
-    test('Post.createFromArticle() should create Post with YouTube video article', async () => {
+    test('Post.createFromArticle() should create Post with YouTube video article, with linkified content', async () => {
       const article = articles.items[0];
       const id = await Post.createFromArticle(article, feed);
       const videoPost = await Post.byId(id);
@@ -307,6 +307,9 @@ describe('Post data class tests', () => {
       expect(videoPost.title).toBe('DPS909 OSD600 Week 03 - Fixing a Bug in the Azure JS SDK');
       expect(videoPost.url).toBe('https://www.youtube.com/watch?v=mNuHA7vH6Wc');
       expect(videoPost.type).toBe('video');
+      expect(videoPost.html).toBe(
+        'Walkthrough and discussion of fixing a bug in <a href="https://github.com/Azure/azure-sdk-for-js">https://github.com/Azure/azure-sdk-for-js</a>. Issue at <a href="https://github.com/Azure/azure-sdk-for-js/issues/15772">https://github.com/Azure/azure-sdk-for-js/issues/15772</a>. PR at <a href="https://github.com/Azure/azure-sdk-for-js/pull/17820">https://github.com/Azure/azure-sdk-for-js/pull/17820</a>.'
+      );
     });
   });
 });