feat: ✨ YouTube Playlist Component #36

Omafovbe · 2022-10-09T18:42:46Z

Created a component to accommodate listing the youtube playlist. for now just the images and their titles.

Related Issue

resolves #17

Summary of Changes

thescientist13

Hey @Omafovbe , thanks for the PR!

Would it be possible to see this in a Storybook? That would be really helpful for review and testing. You can see how the Footer component is structured to get an idea of how to set things up.

Left some feedback in-line and also a couple minor observations (no big deal, I can always clean these up before merge)

If you run yarn lint it should help give you some feedback on indentation fixes to help us keep our code formatting a bit more consistent
I would avoid abberviations, I think it's fine to spell out the whole file / variable name, e.g. src/components/youtube-playlist/youtube-playlist.js
Looks like a package-lock.json file landed in the PR, so we can delete that.

Thanks for the good start, let me know if you have any questions!

thescientist13 · 2022-10-09T21:47:49Z

channelDetails.txt

@@ -0,0 +1,6 @@
+channel ID: UCxs5mxoDpmmR0hRbwsxU7Sg


API / implementation details like this information may be better captured in the Storybook for this component.

thescientist13 · 2022-10-09T21:54:45Z

src/components/yt-playlist/playlists.js

@@ -0,0 +1,25 @@
+const fetchVideoPlaylist = async () => {
+    const API_KEY = '';
+    let playlists = await fetch(`https://youtube.googleapis.com/youtube/v3/playlists?part=snippet&channelId=UCxs5mxoDpmmR0hRbwsxU7Sg&key=${API_KEY}`)


Interesting, I hadn't thought of fetching them ahead of time and listing them out. My only thought with this approach is as we are planning on pre-rendering the site to HTML, it would be great to avoid fetches on the client. But this, could also be a neat technique to fetch latest videos on page load too, to append any new items to the existing list. This would avoid having to re-build the page since I'm not sure what kind of web hooks YouTube offers.

Also wonder what does it look like if the playlist is just embedded on the page in an <iframe>?

<iframe width="560" height="315" src="https://www.youtube.com/embed/qRskZcB5Rbc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Curious to see what each option looks like. <iframe> approach may mean a little less control stylistically, but we never have to worry about stale data, it will always be the latest on page load.

Just thinking out loud but would be good to experiment with the <iframe> approach too, to know our options. We can always start out with an <iframe> version so it is ready by Tuesday, and build our own at a later date using your technique here, if we can get access to web hooks or something like that. Will do some research on my end.

To test, we could put a hardcoded example of the <iframe> version into the Storybook template to compare . contrast.

thescientist13 · 2022-10-09T21:55:51Z

src/styles/main.css

@@ -35,4 +35,10 @@ a {

 h6 {
  text-align: center;
+}
+
+.videos {


We're using Tailwind in this project, so it would be good to try and stick to using those classes since it is utility based, otherwise I think at a component level, an inline style="..." is good enough for now for one-off styles tweaks.

Here's a little cheat sheet for getting started with Tailwind. (this is my first project using it, so far so good!)

thescientist13 · 2022-10-09T21:59:21Z

src/components/yt-playlist/playlists.js

+    }
+}
+
+customElements.define('yt-playlist', Playlists);


Our current convention has been to prefix all first party custom elements with tt-, so for this example it would be

customElements.define('tt-youtuve-playlist', YouTubePlaylist);

Omafovbe · 2022-10-10T07:10:21Z

In relation to all of the comments you made on the first PR, I have done some update

Updated the yt-playlist branch from feature/cast-and-crew branch
Carried out all of suggestions (hope I didn't miss any one)
Create storybook files to help preview the updates and changes
I really don't know how to manage the YouTube channel ID on storybook

Here are some image preview of how things look at the moment

Please let me know if there is anything I missed and need updating. Thanks

Omafovbe · 2022-10-11T08:30:14Z

Thanks for the comment. Just saw the feature/cast-and-crew branch has more packages installed than the main or v1 branch. Guess moving forward I would create a branch off the feature branch and that's why some of my code looks somewhat different. For the corrections would surely, take that into account and improve on the PR. Thanks

…

On Sun, Oct 9, 2022 at 11:02 PM Owen Buckley ***@***.***> wrote: ***@***.**** commented on this pull request. Hey @Omafovbe <https://github.com/Omafovbe> , thanks for the PR! Would it be possible to see this in a Storybook? That would be really helpful for review and testing. You can see how the Footer component <https://github.com/AnalogStudiosRI/www.tuesdaystunes.tv/tree/v1/src/components/footer> is structured to get an idea of how to set things up. Left some feedback in-line and also a couple minor observations (no big deal, I can always clean these up before merge) - If you run yarn lint it should help give you some feedback on indentation fixes to help us keep our code formatting a bit more consistent - I would avoid abberviations, I think it's fine to spell out the whole file / variable name, e.g. *src/components/youtube-playlist/youtube-playlist.js* - This project uses Yarn, so I would make sure you have run yarn install. We can delete *package-lock.json* from this PR Thanks for the good start, let me know if you have any questions! ------------------------------ In channelDetails.txt <#36 (comment)> : > @@ -0,0 +1,6 @@ +channel ID: UCxs5mxoDpmmR0hRbwsxU7Sg This information my better captured in the Storybook for this component. ------------------------------ In src/components/yt-playlist/playlists.js <#36 (comment)> : > @@ -0,0 +1,25 @@ +const fetchVideoPlaylist = async () => { + const API_KEY = ''; + let playlists = await fetch(`https://youtube.googleapis.com/youtube/v3/playlists?part=snippet&channelId=UCxs5mxoDpmmR0hRbwsxU7Sg&key=${API_KEY}` <https://youtube.googleapis.com/youtube/v3/playlists?part=snippet&channelId=UCxs5mxoDpmmR0hRbwsxU7Sg&key=$%7BAPI_KEY%7D>) Interesting, I hadn't thought of fetching them ahead of time and listing them out. My only thought with this approach is as we are planning on pre-rendering the site to HTML, it would be great to avoid fetches on the client. But this, could also be a neat technique to fetch latest videos on page load too, to append any new items to the existing list. This would avoid having to re-build the page since I'm not sure what kind of web hooks YouTube offers. ------------------------------ Also wonder what does it look like if the playlist is just embedded on the page in an <iframe>? <iframe width="560" height="315" src="https://www.youtube.com/embed/qRskZcB5Rbc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Curious to see what each option looks like. <iframe> approach may mean a little less control stylistically, but we never have to worry about stale data, it will always be the latest on page load. ------------------------------ Just thinking out loud but would be good to experiment with the <iframe> approach too, to know our options. We can always start out with an <iframe> version so it is ready by Tuesday, and build our own at a later date using your technique here, if we can get access to web hooks or something like that. Will do some research on my end. To test, we could put a hardcoded example of the <iframe> version into the Storybook template to compare . contrast. ------------------------------ In src/styles/main.css <#36 (comment)> : > @@ -35,4 +35,10 @@ a { h6 { text-align: center; +} + +.videos { We're using Tailwind in this project, so it would be good to try and stick to using those classes, otherwise I think at a component level, an inline style="..." is good enough for now for one-off styles tweaks. ------------------------------ In src/components/yt-playlist/playlists.js <#36 (comment)> : > + connectedCallback() { + let ytplaylists = fetchVideoPlaylist() + for (playlist of ytplaylists) { + this.innerHTML = ` + <div class="videos"> + <img src="${playlist.snippet.thumbnails.medium.url}" /> + <p>${playlist.snippet.title} - ${playlist.snippet.publishedAt}</p> + </div> + ` + } + + + } +} + +customElements.define('yt-playlist', Playlists); Our current convention has been to prefix all first party custom elements with tt-, so for this example it would be customElements.define('tt-youtuve-playlist', YouTubePlaylist); — Reply to this email directly, view it on GitHub <#36 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEXP2H667WEQNKJNS3ZIRHDWCM6HNANCNFSM6AAAAAARAZQC54> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

thescientist13

Hey @Omafovbe , thanks for your work here and providing the different samples.

I think we should have an <iframe> embed version to compare with, just so we can see what a "live" list version might look like just coming straight from YouTube. That could be the simplest to start out with for now and then maybe we could evolve the implementation together in follow up PRs? But for now, let's just compare both options (<iframe> vs API call) just so we can learn what the pros / cons of each approach might be.

Also, we would want to specifically use the playlist from the issue, as that is a playlist from our channel specific to our Tuesday's Tunes show. So basically, the embed version should probably look something like

<iframe src="https://www.youtube.com/watch?v=qRskZcB5Rbc&list=PLrY8SmqJ5XZ_UvVurEvGg8i10g-cxMudZ" ...>

Here are the docs from YouTube to help give you an idea of what might be possible with that option.
https://developers.google.com/youtube/player_parameters

As a note on branch management, I would just focus on maintaining a reference to only what is in the v1 branch. Each PR only has to focus on one task of work, so no need to mix and match work from other PRs. If you could just make sure your branch is coming from v1 and doesn't have any other code other than the YT work, that will make sure reviewing (and merging!) is much easier for each of us.

Thanks again for your help! ✌️

thescientist13

Let me know if you need any help finishing this up. There was a PR opened for the Spotify player which should give you a good reference for what to do for this PR. So basically just cleaning up the extra files and just using the <iframe> for now. - #43

I did make a ticket to track a more long term solution for building our players so if you have any thoughts / ideas on that approach, feel free to comment! - #45

Omafovbe · 2022-10-16T18:10:26Z

Oh thanks. Sorry about not going about the update from last PR. Was busy over the weekend but should work on it this week and send a PR will surely look into the stripe thingy and use that as a reference

…

On Sun, 16 Oct 2022, 19:05 Owen Buckley, ***@***.***> wrote: ***@***.**** commented on this pull request. Let me know if you need any help finishing this up. There was a PR opened for the Spotify player which should give you a good reference for what we can do for now in this PR. So basically just cleaning up the extra files and just using the <iframe> for now. #43 <#43> I did make a ticket to track a more long term solution for building our players so if you have any thoughts / ideas on that approach, feel free to comment! #45 <#45> — Reply to this email directly, view it on GitHub <#36 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEXP2H4P5MBFHMLMJJPADVDWDQ7WHANCNFSM6AAAAAARAZQC54> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

Created a component to accommodate listing the youtube playlist. for now just the images and their titles.

…mg playlist Saved the Youtube data API response in two separate json files. Added stories for quick display

thescientist13

Thanks for your help with this @Omafovbe ! 🙌

Going to keep it as an <iframe> for now and will think about other ways to enhance this as you had originally suggested, I like the idea of us creating a first party playlist for this component.

Feel free to jump into any other tasks you might find, I'll be making a few more issues over the next couple days and so some of those should be good first issue types as well.

* feat: ✨ Youtube Playlist Component Created a component to accommodate listing the youtube playlist. for now just the images and their titles. * initial version of cast and crew section * basic styling and theming of the header * add test cases * refactor: 🎨 updated component to display both youtube in iframe and img playlist Saved the Youtube data API response in two separate json files. Added stories for quick display * delete cast and crew component * update YouTube player implementation to an iframe * branch cleanup * add test case * restore cast and crew files Co-authored-by: Owen Buckley <[email protected]>

thescientist13 added question Further information is requested feature New feature or request labels Oct 9, 2022

thescientist13 self-requested a review October 9, 2022 22:02

thescientist13 reviewed Oct 9, 2022

View reviewed changes

thescientist13 added hacktoberfest-accepted documentation Improvements or additions to documentation labels Oct 11, 2022

thescientist13 reviewed Oct 11, 2022

View reviewed changes

thescientist13 mentioned this pull request Oct 12, 2022

Spotify Playlist #18

Closed

5 tasks

thescientist13 reviewed Oct 16, 2022

View reviewed changes

thescientist13 assigned Omafovbe Oct 16, 2022

thescientist13 removed the question Further information is requested label Oct 16, 2022

Omafovbe and others added 10 commits October 23, 2022 13:12

feat: ✨ Youtube Playlist Component

a39d6e7

Created a component to accommodate listing the youtube playlist. for now just the images and their titles.

initial version of cast and crew section

bc7ed99

basic styling and theming of the header

51c8dac

add test cases

19cba51

refactor: 🎨 updated component to display both youtube in iframe and i…

4abfca4

…mg playlist Saved the Youtube data API response in two separate json files. Added stories for quick display

delete cast and crew component

9c3a841

update YouTube player implementation to an iframe

141d921

branch cleanup

a2fd710

add test case

3872e6b

restore cast and crew files

0b89f1a

thescientist13 force-pushed the yt-playlist branch from 1b711f2 to 0b89f1a Compare October 23, 2022 17:17

thescientist13 approved these changes Oct 23, 2022

View reviewed changes

thescientist13 merged commit 2d56d28 into AnalogStudiosRI:v1 Oct 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ✨ YouTube Playlist Component #36

feat: ✨ YouTube Playlist Component #36

Omafovbe commented Oct 9, 2022 •

edited by thescientist13

Loading

thescientist13 left a comment •

edited

Loading

thescientist13 Oct 9, 2022 •

edited

Loading

thescientist13 Oct 9, 2022

thescientist13 Oct 9, 2022 •

edited

Loading

thescientist13 Oct 9, 2022

Omafovbe commented Oct 10, 2022 •

edited

Loading

Omafovbe commented Oct 11, 2022 via email

thescientist13 left a comment •

edited

Loading

thescientist13 left a comment •

edited

Loading

Omafovbe commented Oct 16, 2022 via email

thescientist13 left a comment

feat: ✨ YouTube Playlist Component #36

feat: ✨ YouTube Playlist Component #36

Conversation

Omafovbe commented Oct 9, 2022 • edited by thescientist13 Loading

Related Issue

Summary of Changes

thescientist13 left a comment • edited Loading

Choose a reason for hiding this comment

thescientist13 Oct 9, 2022 • edited Loading

Choose a reason for hiding this comment

thescientist13 Oct 9, 2022

Choose a reason for hiding this comment

thescientist13 Oct 9, 2022 • edited Loading

Choose a reason for hiding this comment

thescientist13 Oct 9, 2022

Choose a reason for hiding this comment

Omafovbe commented Oct 10, 2022 • edited Loading

Omafovbe commented Oct 11, 2022 via email

thescientist13 left a comment • edited Loading

Choose a reason for hiding this comment

thescientist13 left a comment • edited Loading

Choose a reason for hiding this comment

Omafovbe commented Oct 16, 2022 via email

thescientist13 left a comment

Choose a reason for hiding this comment

Omafovbe commented Oct 9, 2022 •

edited by thescientist13

Loading

thescientist13 left a comment •

edited

Loading

thescientist13 Oct 9, 2022 •

edited

Loading

thescientist13 Oct 9, 2022 •

edited

Loading

Omafovbe commented Oct 10, 2022 •

edited

Loading

thescientist13 left a comment •

edited

Loading

thescientist13 left a comment •

edited

Loading