Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[New Feature] Video Player Page #1168

Closed
wants to merge 6 commits into from

Conversation

cindyorangis
Copy link
Contributor

Issue This PR Addresses

Addresses #1026

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

This is still in its early stages and will need help/feedback on design + backend. Starting small with YouTube videos since I think they're easier to work with and will iterate with follow-up PRs. Currently only frontend React components.

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)

@cindyorangis cindyorangis added type: enhancement New feature or request help wanted Extra attention is needed area: front-end area: design Issues needing design or assets labels Oct 8, 2020
@cindyorangis cindyorangis self-assigned this Oct 8, 2020
@agarcia-caicedo
Copy link
Contributor

agarcia-caicedo commented Oct 8, 2020

Big fan of the beta badge

@agarcia-caicedo
Copy link
Contributor

Screenshots:
image
The screen is a bit bigger than the viewport, so there is horizontal scroll

image

image

@smilegodly
Copy link
Contributor

smilegodly commented Oct 8, 2020

This is a really cool feature idea. A one stop shop for videos and livestreams of this awesome community! I'm really interested in the future backend portion of this PR.

@cindyorangis
Copy link
Contributor Author

cindyorangis commented Oct 9, 2020

@smilegodly great to hear you're interested in doing the backend portion! I have no idea how it's going to work in the back so you'll have to lead the backend efforts. This will definitely need to be split up into multiple PRs, I'm just trying to put together an acceptable-looking frontend page here :P

@agarcia-caicedo nice catch, I didn't even see that

@humphd
Copy link
Contributor

humphd commented Oct 10, 2020

I'm really glad you started work on this. Adding "live" streaming is something I want to do this term with my new group.

Some questions/feedback:

  • you've chosen the term 'Player' and I wonder if it's the right name. On the one hand, you're right: we need a "player" to embed any live content. However, in terms of surfacing this to the user, I think we should somehow communicate that this is "Live" or a "Stream. Maybe we should distinguish between a "Post" (async, blog post like we have now) and something that is "Live" (sync, happening now).
  • I really like the "Beta" badge you have at the top, but what if instead of "Player" and "Beta" we did "Streams" and then when there were people streaming right now, it lit up with "LIVE" in red?
  • For the page you have, there seem to be 3 content areas: 1) a video player (youtube, twitch, or other iframe) occupying 2/3rds of the width; 2) 1/3 on the right, which could be chat?; 3) an unclaimed area at the bottom. Some thoughts for the bottom: we could do something like a "google doc" type thing down there, where the person streaming, and the audience, can copy/paste things to each other? Just a thought based on your design.

We should consider how and where to spec all this out. Probably trying to do it all in this PR isn't fair to you. Maybe more discussion should happen in #1026?

@agarcia-caicedo
Copy link
Contributor

My main question about this, is whether it's supposed to be to display livestreams or prerecorded videos, or maybe even both, since that would influence how the ui is designed

@cindyorangis
Copy link
Contributor Author

I'm really glad you started work on this. Adding "live" streaming is something I want to do this term with my new group.

Some questions/feedback:

  • you've chosen the term 'Player' and I wonder if it's the right name. On the one hand, you're right: we need a "player" to embed any live content. However, in terms of surfacing this to the user, I think we should somehow communicate that this is "Live" or a "Stream. Maybe we should distinguish between a "Post" (async, blog post like we have now) and something that is "Live" (sync, happening now).
  • I really like the "Beta" badge you have at the top, but what if instead of "Player" and "Beta" we did "Streams" and then when there were people streaming right now, it lit up with "LIVE" in red?
  • For the page you have, there seem to be 3 content areas: 1) a video player (youtube, twitch, or other iframe) occupying 2/3rds of the width; 2) 1/3 on the right, which could be chat?; 3) an unclaimed area at the bottom. Some thoughts for the bottom: we could do something like a "google doc" type thing down there, where the person streaming, and the audience, can copy/paste things to each other? Just a thought based on your design.

We should consider how and where to spec all this out. Probably trying to do it all in this PR isn't fair to you. Maybe more discussion should happen in #1026?

When I originally started this, I actually used plyr and called it a Video page then I switched to react-player since we are using React and it supports Twitch which is something we definitely wanted to add. I like your idea of calling it 'Streams' and 'LIVE'.

As for the content areas, I'm not a designer so I initially planned for it to be more of a YouTube clone with 2/3 on the left being the iframe and 1/3 on the right as a playlist. The UI probably needs to be more thought out.

Anyway, these are the things I would like for this feature are:

  • Everything mentioned in Feature Request: integrate the Telescope Podcast into the app #1026 for live streaming
  • Telescope has a way for users to add their blog feeds so I want a way for users to add their YouTube channel as a 'feed' (lack of a better term). Similar to how subscriptions work on YouTube. Pretend Telescope subscribed to a number of YouTube channels and any new videos would send off a notification and the new video thumbnail/card would be displayed under Latest Videos for users to click on to watch.
  • Or maybe the user wants to only add specific videos from their channel and not their entire channel, we should have a way for them to do that as well
  • UI wise, the right side should be for a chatbox of some sort because that's what we're used to so I'm not sure where we would put pre-recorded videos. Having pre-recorded videos as well as live streaming together is rather tricky, I'm not even sure how to do it on the same page.

modified:   src/frontend/package.json
modified:   src/frontend/src/components/Header/DesktopHeader.jsx
modified:   src/frontend/src/components/Header/MobileHeader.jsx
new file:   src/frontend/src/components/PlayerPage/PlayerPage.jsx
new file:   src/frontend/src/components/PlayerPage/index.js
new file:   src/frontend/src/pages/player.js
modified:   src/frontend/src/components/Header/DesktopHeader.jsx
modified:   src/frontend/src/components/Header/MobileHeader.jsx
modified:   src/frontend/src/components/PlayerPage/PlayerPage.jsx
@cindyorangis
Copy link
Contributor Author

cindyorangis commented Oct 21, 2020

What I did:

  • changed the name of the page to Streams and related components/links
  • added a left drawer to show channels, hardcoded 3 streamers just so we have something visually
  • added a terrible looking tab panel on the right... I'm debating whether or not to use MUI tabs + tab panel because I can't get it to do what I want. The first tab is supposed to show a list of the streamer's YouTube videos, the second tab is supposed to show a chatbox. I even added icons for the tabs but they refuse to be displayed properly and just want to be 160px in width.

Need help with:

  • styling everything
  • backend for Twitch and YouTube
  • some kind of working tab panel on the right
  • left drawer should be able to turn into a navigation rail like this https://material.io/components/navigation-rail
  • some kind of indicator that the streamer is live, so like a red dot or something next to their name
  • mobile responsiveness

I'm too scared to look at this on another screen so here's what it looks like on mine :)
Screenshot 2020-10-21 115205

@humphd
Copy link
Contributor

humphd commented Oct 21, 2020

@cindyledev let's file separate bugs on things like "Twitch backend" and "YouTube backend" etc. Your list above is a good checklist of things we'll need.

@cindyorangis cindyorangis marked this pull request as ready for review October 21, 2020 19:02
@cindyorangis
Copy link
Contributor Author

Okay, I'll undraft this PR for reviews. Coming back to this after a couple of hours and it's not as bad as I thought... Issues will be filed after I get some sort of feedback here

@agarcia-caicedo
Copy link
Contributor

@cindyledev I can help you with styling

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: design Issues needing design or assets area: front-end hacktoberfest-accepted help wanted Extra attention is needed type: enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants