Make Youtube link clickable #2706

tpmai22 · 2022-01-22T03:13:17Z

Issue This PR Addresses

Fixes #2679

Type of Change

Bugfix: Change which fixes an issue
New Feature: Change which adds functionality
Documentation Update: Change which improves documentation
UI: Change which improves UI

Description

Make Youtube link clickable by wrapping <a> tag .

Checklist

Quality: This PR builds and passes our npm test and works locally
Tests: This PR includes thorough tests or an explanation of why it does not
Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

Testing

At the root directory remove redis-data

rm -r redis-data

Rebuild images and wait for redis to cache the feeds

gitpod-io · 2022-01-22T03:13:19Z

humphd · 2022-01-22T16:45:49Z

This doesn't solve the issue. What #2679 is about is taking the raw text in a YouTube description, and parsing it to find any URLs, then turning that into HTML that wraps them in <a> elements, so you can click them.

There are some existing React components for doing this, e.g., https://www.npmjs.com/package/react-linkify.

tpmai22 · 2022-01-23T03:56:53Z

@AmasiaNalbandian for the update I still working on it right now

humphd · 2022-01-23T14:20:01Z

Thinking about this more, we should probably use a JS lib vs. React Component for this, maybe https://www.npmjs.com/package/linkifyjs.

tpmai22 · 2022-01-27T00:41:16Z

@humphd I suppose to test if this we will only need to run pnpm dev at the root directory of our project ? Or do i need to rebuild any image if I'm using Gitpod . Since I have tried to make some changes but everytime I ran into your Youtube posts it still render the same so I'm just try to confirm pnpm dev is the right way to test it out

humphd · 2022-01-27T14:45:25Z

I'm not sure what you're doing, I need more context.

tpmai22 · 2022-01-27T15:04:12Z

After wrapping the description with react-linkify I try to test them by running only frontend using pnpm dev but everytime I scroll to your Youtube post the description still display at plain text so I wonder if I need to rebuild the post image so as to make my changes to be applied ?

telescope/src/web/src/components/Posts/Post.tsx

Lines 403 to 407 in 85eb481

    
           <section 
        
             ref={sectionEl} 
        
             className={`telescope-post-content ${extractBlogClassName(post.url)}`} 
        
             dangerouslySetInnerHTML={{ __html: post.html }} 
        
           />

humphd · 2022-01-27T16:31:18Z

As I mentioned, don't use a React component for this. Use a JS library that does it. It can happen in the front-end (fine) or back-end (ideal).

humphd · 2022-01-27T16:31:54Z

For example, https://www.npmjs.com/package/linkify-it

src/api/posts/src/data/post.js

humphd · 2022-01-31T22:55:03Z

src/backend/data/post.js

@@ -148,18 +148,26 @@ class Post {
      article.date = article.pubdate;
    }

+    if (Array.isArray(article.content) && determinePostType(article.link) === 'video') {


Why are we adding this? When is the content an Array vs. a string, and why have we never hit this in the past (e.g., with @dbelokon's previous work on YouTube)?

When I did debugging all the of the Youtube post return article.content as an array off object instead of a string like what we expected which make the html content of all the related video post not being proccesed

telescope/src/backend/utils/html/index.js

Lines 20 to 21 in 4b2de81

if (typeof html !== 'string') {

return html;

src/backend/data/post.js

package.json

src/backend/data/post.js

src/backend/utils/html/index.js

aserputov · 2022-02-02T04:27:32Z

I do not mind, but the deadline for 2.6 is till midnight. Let's ask David about this tomorrow.

humphd · 2022-02-02T14:15:00Z

This doesn't depend on microservices. We just need a couple of tests that include a post with text that doesn't have <a> tags, and to make sure it gets linkified when it goes through the processor code.

I'm not sure what the question/hold-up is? Let me know.

tpmai22 · 2022-02-02T15:12:09Z

@humphd I did add the test and also I want to help moving my code to the parser but I wonder if I'm doing it correct so i'm watiing for @TueeNguyen to give me an idea on how to test it. Otherwise like usual I'm waiting for your suggestion on how to improve my code (do I need to add more test, etc ...)

TueeNguyen · 2022-02-02T15:31:36Z

I think let's not change the parser service, it is not up to date now. I'll take your changes from backend to my branch

tpmai22 · 2022-02-02T15:34:41Z

@TueeNguyen could you do ma a favor and ping me when you move it to the parser ? I just want to see how we implement that

TueeNguyen · 2022-02-02T15:37:07Z

@TueeNguyen could you do ma a favor and ping me when you move it to the parser ? I just want to see how we implement that

@tpmai22 https://github.com/TueeNguyen/telescope/tree/feed-parser

src/backend/data/post.js

test/post.test.js

TueeNguyen

Can you rebase to add the bug fix #2795? So that we can check if PR passes tests

@manekenpix