search

aimementoring / blueprint

This project defines some standards for all AIME platforms.
5 stars 0 forks source link

Enhance Video Component #24

Closed rin closed 4 years ago

rin commented 5 years ago

https://www.dropbox.com/s/67dq409niwyae79/Screenshot%202019-03-13%2023.06.13.png?dl=0

rin commented 5 years ago

12sx3qeA

mischacolley commented 5 years ago

@rin we should spec out requirements list

rin commented 5 years ago

playing like on the website, dimming the background?

rin commented 5 years ago

See this PR and discussion on something I tried with the light mode of react-player. I think it might not be the way to go, though … https://github.com/aimementoring/aime-portal/pull/168

mischacolley commented 5 years ago

Hey @rin just fleshing out your list from above a bit more. This is some of what I'm thinking. @charliemckenzie can you also include an example design of what you are looking at for videos on the website please ...

rin commented 5 years ago

So, I've done another comparison between videojs and react-player.

FullSizeRender

I think react-player is best for videos from a lot of different platforms and when you don't care too much about how your player looks, while videojs is best if you want to style your player and play your own videos.

My main problem with react-player is that it is very difficult to style. Because I'm not exactly known to be a CSS magician, I would appreciate somebody else having a look, though. Maybe @kbardi ? (Kevin, if there were specific reasons why you wanted to use react-player, please add your comments.)

About the iFrame – youtube videos will technically use an iFrame, but that doesn't mean you can't customise the play button etc (you can still hide the youtube player controls, and probably even the youtube logo by passing some options).

My questions would be:

  1. Did we actually have any real problems with videojs apart from it not working that well together with React (which we were able to work around, so it's not a concern anymore) and causing a lot of obscure issues in Bugsnag (which might be the same for any other player – especially with mobile browsers)?

  2. Are we mostly using our own videos from the media-api or S3 or hosted on vimeo? I think for all of the content apart from potential Sunday Kindness videos, we are …?

Trying to think of where we will use videos, I guess it's mostly to educate people about AIME ("About AIME" section on the website, training for new mentors), so that will be our own videos, and only very few "external" videos (especially because these could be deleted or replaced with other videos, so we don't control that content?).

rin commented 5 years ago

(Sorry, accidental click!)

charliemckenzie commented 5 years ago

I don't think the player has to be styled tooo crazily. Even if it's just pretty standard to start with that's fine with me :) as long as it is possible to style it in the future hahaha. In terms of what videos will look like on the website, that's a good question. I've attached a pic from the homepage, where ultimately, Id also like the video thumbnail to be the background of the section (again, if that's too crazy we can come up with something else hahaha)

Screen Shot 2019-04-04 at 7 31 05 am

To be honest, I was thinking of keeping it pretty simple with the videos. Kinda like a variation on this (i love the scrubber preview though <3

Screen Shot 2019-04-04 at 7 36 50 am

As for where the videos will be... they'll be everywhere hahaha. Jack loves his videos, and I think they really do convey AIME's personality well. Challenge is we'll need to make this accessible to everyone, which is a struggle when even Australia has shite internet hahaha.

mischacolley commented 5 years ago

@rin yay sketches :)

Thanks for adding so much detail here crew!

So I've had a dive into the docs for react-player and I don't think styling should actually be too difficult.

i.e. here is an example of using a HLS streaming url and I've added some basic custom content/styles around the video player https://jsfiddle.net/uk18v6Ls/14/ // We'd need to build this sort of structure into ours and then should also be able to support inline and popup players I'd think.

What I wasn't able to get working while looking at this was a custom play button with thumbnail/cover initially hiding the controls. But we totally should be able to get this sort of thing working with the light prop but I couldn't spend the time to figure it out. @rin @kbardi this might be enough info for you to pick that up?

I found this really helpful to look at all the options https://cookpete.com/react-player/

mischacolley commented 5 years ago

@rin I also wasn't able to get the vimeo m3u links working with the demo player. Saw your PR on the repo but also this https://github.com/CookPete/react-player/issues/423

rin commented 5 years ago

@mischacolley haha awesome, how come I didn't find that second link? I was wondering whether I could force the player to treat is just as a file, but didn't investigate it further. So I'd say we can make it work and the open issue is not a show stopper.

I think we should try to get the custom play button to work without the light mode, because as I said here https://github.com/aimementoring/aime-portal/pull/168#issue-262951397 (see the gif!), in the light mode the player is only loaded when you click the play button, and then you have to click play again to actually play it, and that feels not very usable and … cumbersome? 🥒

So, as for next steps I wonder if we should

  1. Do a very basic, minimalistic video player component, like the one in @charliemckenzie's second screenshot …, and then …
  2. Try to build what's in Charlie's first screenshot, preferably without the light player but let's see.

I don't know how strong @kbardi s CSS game is, but I know I don't know how to do the custom play button because I've already tried :) . I can get started and then leave the styling to the pros.

We already have a video player component in Blueprint now, but in the styleguide it's used with vimeo and youtube, so it just looks like a vimeo/youtube player right now.

mischacolley commented 5 years ago

@rin 👍🏼

Re light mode. Sounds like I may be totally wrong but I'd assume in light mode that the custom play button could be setup to trigger the play in autoplay mode and avoid the double click?

1 & 2). 👍🏼If the button functionality is there I can totally help with basic styles for it :)

rin commented 5 years ago

So, the player looks like this if we're just playing a file:

Screen Shot 2019-04-08 at 17 34 50

We can make it even cleaner by removing the current and total time (this works in Chrome: video::-webkit-media-controls-current-time-display, video::-webkit-media-controls-time-remaining-display { display: none; }).

lulen11 commented 4 years ago

@bronz3beard is now working on updating this video component with assistance from @kbardi & @rin & @lulen11 ) -

  1. working to get the video component in blueprint / contentful
  2. Styling
    • Adding the svg custom buttons
    • Getting the video component to behave the same across platforms
rin commented 4 years ago

Had to read up on this whole issue because it's been a while! To sum it up, I think we decided for react-player (see comments above on how to style it). The biggest open question for me was, can we avoid the two clicks you need to do to play the video when using the light mode. Other than that, happy for you @bronz3beard to just experiment a little with styling, (I think we're going for a minimalistic look anyway) and usability (the mentioned two clicks …).

rin commented 4 years ago

Ah, and this might be helpful/interesting or maybe not: https://github.com/aimementoring/aime-portal/pull/168 @bronz3beard

lulen11 commented 4 years ago

hey @rin and @bronz3beard were you able to connect on this one? :)

bronz3beard commented 4 years ago

@lulen11 I think Rin is on leave for the day, but looking to make a time for the meeting this Friday late afternoon.

rin commented 4 years ago

Note to self and Rory, remember to use the latest version of react player (1.14.2 I think) because an issue we had and submitted a PR for was merged and is in master now.

lulen11 commented 4 years ago

hey @rin @bronz3beard could we please get a status checkin for this component? cc. @mischacolley

We'll need to swing back into it asap.

Things we want to check are:

bronz3beard commented 4 years ago

@lulen11 @rin All of the above works I have also added two new links to test live streaming. The only thing I was not able to do is to get it to work locally, I'm hoping rin will have some luck with that. 👍

lulen11 commented 4 years ago

Thanks @bronz3beard. I had a look for where this is component work is and I thiiiink it's on https://github.com/aimementoring/blueprint/pull/163 right? Because this is connected with https://github.com/aimementoring/blueprint/pull/31 but that's closed now. I can relink those ones but want to confirm that's right with you two...

bronz3beard commented 4 years ago

@lulen11 I would say this is the issue for the pr #163 but we can add anything to this or the pr from old issues/pr that could be useful to keep logged

lara commented 4 years ago

@bronz3beard you tagged the wrong person man

mischacolley commented 4 years ago

@lulen11 @rin can this be closed / if there are remaining issues maybe we close and break out into their own issues ...

rin commented 4 years ago

I think we can close this and there's actually nothing open anymore …? @bronz3beard