Show videos in the main timeline

[dbelokon]

Issue This PR Addresses

#1026: This will address the front end implementation for viewing videos in Telescope

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

Display videos on the main timeline, processed by feed of a YouTube channel. This depends on PR #2581 to display any videos at all.

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR does not need tests because it changes the UI.
• Screenshots:
• Documentation: This PR does not documentation, as it adds UI changes.

[gitpod-io]

[humphd]

This is very cool. One other thing I'd like to see, either here or in follow-up, is to make links into HTML <a> elements, so they are clickable. I can't remember the subset of HTML that YouTube lets you put in the description, but it's pretty small, and we could likely write a simple parser for it.

[dbelokon]

@humphd, would it be possible to modify the feed list in the CDOT wiki to include your YouTube channel? I would like to see whether the back-end with the front-end would display the video.

[humphd]

@humphd, would it be possible to modify the feed list in the CDOT wiki to include your YouTube channel? I would like to see whether the back-end with the front-end would display the video.

Done. I added this:

[http://blog.humphd.org/tag/seneca/rss/]
name=David Humphrey

[https://www.youtube.com/feeds/videos.xml?channel_id=UCqaMbMDf01BLttof1lHAo2A]
name=David Humphrey (YouTube)

[dbelokon]

One other thing I'd like to see, either here or in follow-up, is to make links into HTML elements, so they are clickable.

I will submit an issue to address this.

[dbelokon]

I checked the preview deployment after @humphd added his YouTube feed to the CDOT wiki feed list. Here are the results:

PC screens:

Phone screens:

This is on the screen resizing of the browser, so on an actual phone it might be different. It can be improved, but I am not sure how we would like to show it for mobile user (maybe with a redirect to the YouTube mobile app if they have it?).

Let me know of any other small changes I may do.

cc @humphd, @DukeManh, @cindyledev

[humphd]

Awesome! In a follow-up, we should add a side-bar that includes YouTube links and the YouTube icon, like we do with GitHub info. @dbelokon can you file that for me please?

[humphd]

Looks good, a couple small things.

[humphd]

R+ with CI/CD passing.

[DukeManh]

Great work on implementing both backend and frontend.

nit: I think the video could expand to full width on Mobile as the screen is smaller.

redirect to the YouTube mobile app if they have it?

I tested this on my phone, clicking on the video title does redirect to the youtube app. We can still watch in the browser directly.

[dbelokon]

@TDDR, since the reviews approved the changes and the PR is done, I'll be rebasing and merging once the CI checks have completed.