Add videos to be played across all pages. #1523

Closed
dan1d wants to merge 13 commits from video-overlay-new into master
dan1d commented 2018-05-26 23:29:50 +02:00 (Migrated from github.com)

Closes #579
This PR adds Picture in Picture!
Let me know if any modification is needed

Todo

Preview

screenshot from 2018-05-26 18-15-28

Closes #579 This PR adds Picture in Picture! Let me know if any modification is needed ### Todo - [x] Fix conflicts. - [ ] Fix navigation issues https://github.com/lbryio/lbry-app/pull/1523#issuecomment-398189947 ### Preview ![screenshot from 2018-05-26 18-15-28](https://user-images.githubusercontent.com/3293616/40580352-c060fe8c-6112-11e8-89ac-795fdf82cf52.png)
neb-b (Migrated from github.com) reviewed 2018-05-26 23:29:50 +02:00
skhameneh commented 2018-05-29 07:05:25 +02:00 (Migrated from github.com)

I'll take a look at this (try it out) tomorrow night. 😃
I ran into a lot of odd cases when investigating this prior.

I'll take a look at this (try it out) tomorrow night. 😃 I ran into a lot of odd cases when investigating this prior.
dan1d commented 2018-05-29 23:12:24 +02:00 (Migrated from github.com)

@skhameneh , i'm working on a commit currently to make it draggable, could you wait please ?

@skhameneh , i'm working on a commit currently to make it draggable, could you wait please ?
skhameneh (Migrated from github.com) requested changes 2018-05-30 07:16:28 +02:00
skhameneh (Migrated from github.com) left a comment

A few things:

  • Video state settings (time, playing state, etc) are passed to VideoPlayer. (the video restarts from the beginning)
  • An entirely new video playback component is created; this creates an interruption of video playback.
  • The video is in a paused state upon navigation
  • I am unable to dismiss the video unless I go to the video page and pause it.

Also, is this a new issue?

media.js?2261:32 Uncaught ReferenceError: action is not defined
    at eval (media.js?2261:32)
    [actions.MEDIA_POSITION]: (state: MediaState) => {
      const { outpoint, position } = action.data;
A few things: - Video state settings (time, playing state, etc) are passed to VideoPlayer. (the video restarts from the beginning) - An entirely new video playback component is created; this creates an interruption of video playback. - The video is in a paused state upon navigation - I am unable to dismiss the video unless I go to the video page and pause it. Also, is this a new issue? ``` media.js?2261:32 Uncaught ReferenceError: action is not defined at eval (media.js?2261:32) ``` ``` [actions.MEDIA_POSITION]: (state: MediaState) => { const { outpoint, position } = action.data; ```
dan1d commented 2018-05-30 21:29:22 +02:00 (Migrated from github.com)

About the new issue, I've fixed on my new commit, I've mistakenly deleted a line, I always test my changes after a commit, I don't know why this one didn't show up that time, anyway fixed.

Now I'm working on make the video draggable:

screenshot from 2018-05-29 22-21-55

Should the entire video be grabbable?, currently the dashed part of the video title is the zone where you can drag the video and move it around and only shows up when hovering the video.

A comment from @tzarebczan on discord:
The more I think about it, the grabbable area makes sense - then you can have a close button + button to go back to full view on the show page?
have you considered the "going back to claim page" scenario yet?

What would you suggest @seanyesmunt @skhameneh ?

screenshot from 2018-05-29 22-23-33

About the new issue, I've fixed on my new commit, I've mistakenly deleted a line, I always test my changes after a commit, I don't know why this one didn't show up that time, anyway fixed. Now I'm working on make the video draggable: ![screenshot from 2018-05-29 22-21-55](https://user-images.githubusercontent.com/3293616/40742885-3dfacbfa-6426-11e8-816e-16935986802e.png) Should the entire video be grabbable?, currently the dashed part of the video title is the zone where you can drag the video and move it around and only shows up when hovering the video. A comment from @tzarebczan on discord: The more I think about it, the grabbable area makes sense - then you can have a close button + button to go back to full view on the show page? have you considered the "going back to claim page" scenario yet? What would you suggest @seanyesmunt @skhameneh ? ![screenshot from 2018-05-29 22-23-33](https://user-images.githubusercontent.com/3293616/40742982-998a29ca-6426-11e8-91c1-137a4eb5a59d.png)
kauffj commented 2018-05-31 18:18:19 +02:00 (Migrated from github.com)

My thoughts even though I wasn't asked 😁 :

  • It's always good to look at what other well-designed sites do that have spent a lot of time thinking about this (e.g. maybe Netflix or Twitch?)
  • While I support draggability, I actually don't consider draggability to be a core requirement for this to be finished. It's a nice-to-have. As an example, Twitch doesn't even appear to support moving the window they provide.
  • If the window is draggable, it ought to retain it's position, even across sessions/restarts.
  • I'd support being able to drag the window via a click and hold anywhere on the entire component
  • I'd also support showing a titlebar on mouseover similar to what Twitch always shows on their component. This titlebar could have both a close icon and a move icon. The move icon wouldn't really be any different than clicking-and-holding, it'd just serve as an additional cue.
My thoughts even though I wasn't asked :grin: : - It's always good to look at what other well-designed sites do that have spent a lot of time thinking about this (e.g. maybe Netflix or Twitch?) - While I support draggability, I actually don't consider draggability to be a core requirement for this to be finished. It's a nice-to-have. As an example, Twitch doesn't even appear to support moving the window they provide. - If the window is draggable, it ought to retain it's position, even across sessions/restarts. - I'd support being able to drag the window via a click and hold anywhere on the entire component - I'd also support showing a titlebar on mouseover similar to what Twitch always shows on their component. This titlebar could have both a close icon and a move icon. The move icon wouldn't really be any different than clicking-and-holding, it'd just serve as an additional cue.
dan1d commented 2018-06-01 04:26:47 +02:00 (Migrated from github.com)

Hello, I've tried to add a lot of features to this PR but that wouldn't work for me, so I simply went with the basic which is Picture in Picture I think I finished it, you are welcome to test and point me any issues that I didn't figure out.
I've uploaded a video on how it works for me:
Video

Thanks @kauffj for pointing me in the right path as we can create a new Issue with your comment to be added when this PR gets merged

Hello, I've tried to add a lot of features to this PR but that wouldn't work for me, so I simply went with the basic which is Picture in Picture I think I finished it, you are welcome to test and point me any issues that I didn't figure out. I've uploaded a video on how it works for me: [Video](https://www.useloom.com/share/cc6d6bb87dca4027b9bf751499f743b3) Thanks @kauffj for pointing me in the right path as we can create a new Issue with your comment to be added when this PR gets merged
neb-b commented 2018-06-01 07:31:35 +02:00 (Migrated from github.com)

Hey @dan1d. I'm really liking how this is looking stylistically. It seems there are a few playback issues. When navigating away, the video stutters, and sometimes it jumps back to the beginning of the video.

Hey @dan1d. I'm really liking how this is looking stylistically. It seems there are a few playback issues. When navigating away, the video stutters, and sometimes it jumps back to the beginning of the video.
dan1d commented 2018-06-01 07:37:41 +02:00 (Migrated from github.com)

I will investigate the jump to start, im glad you liked the style!
Thanks for the heads up

I hope to finish this by tomorrow!

I will investigate the jump to start, im glad you liked the style! Thanks for the heads up I hope to finish this by tomorrow!
tzarebczan commented 2018-06-02 16:19:01 +02:00 (Migrated from github.com)

@dan1d per our Discord convo, here's the other bug I found:
Play a video from the home page, go to home page. close the video. go back to same video. The audio is playing twice, no way to stop it.

Another: Play a video, pause, and navigate away. The video starts playing again in pop out. Should we even be popping out if paused? Repeating this a few times I was able to get the audio to play twice again.

Question: Should we be popping out if the video ended? We are currently.

@dan1d per our Discord convo, here's the other bug I found: Play a video from the home page, go to home page. close the video. go back to same video. The audio is playing twice, no way to stop it. Another: Play a video, pause, and navigate away. The video starts playing again in pop out. Should we even be popping out if paused? Repeating this a few times I was able to get the audio to play twice again. Question: Should we be popping out if the video ended? We are currently.
dan1d commented 2018-06-04 21:25:08 +02:00 (Migrated from github.com)

Fixed issues that @tzarebczan reported
The only one that I couldn't fix is "Loading metadata"
Also thanks to @DaniNz that reported me an issue on master were the video finishes playing but the media position never resets to 0 so when you go back and then open the video again the video does not autoplay and is stuck on the end of the video.

When video ends it closes

Fixed issues that @tzarebczan reported The only one that I couldn't fix is "Loading metadata" Also thanks to @DaniNz that reported me an issue on master were the video finishes playing but the media position never resets to 0 so when you go back and then open the video again the video does not autoplay and is stuck on the end of the video. [When video ends it closes](https://www.useloom.com/share/88d1dadca82944a7a895905ac611324a)
dan1d commented 2018-06-08 19:55:55 +02:00 (Migrated from github.com)

Hi @seanyesmunt @tzarebczan @seanyesmunt
Updated code, is not very react but that's the only way that I managed to make the video not to stop/show the black screen, let me know what you think, IF it is wrong, then I will need to close this PR as I can't make it work :(

Video without black screen

Hi @seanyesmunt @tzarebczan @seanyesmunt Updated code, is not very react but that's the only way that I managed to make the video not to stop/show the black screen, let me know what you think, IF it is wrong, then I will need to close this PR as I can't make it work :( [Video without black screen](https://www.useloom.com/share/60e25ffd7bfb4aa09b254036efc20d63)
neb-b commented 2018-06-08 20:21:59 +02:00 (Migrated from github.com)

@dan1d I think this could work, I will have to spend some more time digging into it. After a quick test, it looks like the black screen is still there when navigating back to the file page while a video is playing.

@dan1d I think this could work, I will have to spend some more time digging into it. After a quick test, it looks like the black screen is still there when navigating back to the file page while a video is playing.
dan1d commented 2018-06-08 20:27:09 +02:00 (Migrated from github.com)

Yes, I've leave that issue for now as I want to know if the solution that I used is fine enough to pass the review(as I've said above is not very reactish) before fully get the feature working( I also have to hide native video controls when the video is overlayed), thanks @seanyesmunt for testing it so quickly!

Yes, I've leave that issue for now as I want to know if the solution that I used is fine enough to pass the review(as I've said above is not very reactish) before fully get the feature working( I also have to hide native video controls when the video is overlayed), thanks @seanyesmunt for testing it so quickly!
tzarebczan commented 2018-06-10 21:41:52 +02:00 (Migrated from github.com)

These were the last comments from Discord:
[3:32 PM] dan1d: @sean I found a few issues using vanilla js(context is lost and there are some functions that are called and as the react context is lost it throws an error)
[3:34 PM] dan1d: but on my PR they do work fine as I'm not using react onClick events anymore and just doing vanila video.play() to avoid that exception(edited)

What are the next steps? Are we proceeding down this non-react path or need to explore other options?

These were the last comments from Discord: [3:32 PM] dan1d: @sean I found a few issues using vanilla js(context is lost and there are some functions that are called and as the react context is lost it throws an error) [3:34 PM] dan1d: but on my PR they do work fine as I'm not using react onClick events anymore and just doing vanila video.play() to avoid that exception(edited) What are the next steps? Are we proceeding down this non-react path or need to explore other options?
neb-b commented 2018-06-11 03:58:31 +02:00 (Migrated from github.com)

Planning on doing a deeper dive to see if this is viable tomorrow.

Planning on doing a deeper dive to see if this is viable tomorrow.
neb-b commented 2018-06-12 18:35:12 +02:00 (Migrated from github.com)

@dan1d Been pretty busy trying to get bugs fixed for the redesign. I will spend some time on this tonight and actually give you an answer.

@dan1d Been pretty busy trying to get bugs fixed for the redesign. I will spend some time on this tonight and actually give you an answer.
neb-b commented 2018-06-13 06:42:35 +02:00 (Migrated from github.com)

@dan1d I'm not super sure on this. I think moving to a modal is fine, but moving back to the video component is where we will run into issues. It might be worth trying to implement the second half of this to see if we run into any issues when going from video overlay => video page?

@dan1d I'm not super sure on this. I think moving to a modal is fine, but moving back to the video component is where we will run into issues. It might be worth trying to implement the second half of this to see if we run into any issues when going from video overlay => video page?
dan1d commented 2018-06-13 06:56:27 +02:00 (Migrated from github.com)

@seanyesmunt Yes, Moving to the modal does not trigger any error, I may be able to implement the going back to the video, which shouldn't be that difficult, I didn't do that before as I didn't knew if the PR will be accepted with the current code as you know it feels a bit hackish but does the job(from video page => modal)

Thanks for the review!

@seanyesmunt Yes, Moving to the modal does not trigger any error, I may be able to implement the going back to the video, which shouldn't be that difficult, I didn't do that before as I didn't knew if the PR will be accepted with the current code as you know it feels a bit hackish but does the job(from video page => modal) Thanks for the review!
dan1d commented 2018-06-18 22:46:16 +02:00 (Migrated from github.com)

So moving from overlay to the video by clicking on the overlay icon works correctly.

I think there are 3 issues left:
If you leave the show page(overlayed will show up) or the same video you will get an error.
If you leave the show page and get back to the video page the keyboards callbacks won't work, so we may need to re-hook them.
If the video ends, it should not show the overlay page.

So moving from overlay to the video by clicking on the overlay icon works correctly. I think there are 3 issues left: If you leave the show page(overlayed will show up) or the same video you will get an error. If you leave the show page and get back to the video page the keyboards callbacks won't work, so we may need to re-hook them. If the video ends, it should not show the overlay page.
neb-b commented 2018-06-20 06:40:07 +02:00 (Migrated from github.com)

Sorry to leave you hanging @dan1d

Most of my time has been spent trying to get everything cleaned up for the release of the redesign. I will come back to this after that (hopefully tomorrow)

Sorry to leave you hanging @dan1d Most of my time has been spent trying to get everything cleaned up for the release of the redesign. I will come back to this after that (hopefully tomorrow)
tzarebczan commented 2018-07-05 18:20:59 +02:00 (Migrated from github.com)

@dan1d said he's still working on finishing this up. Best of luck!

@dan1d said he's still working on finishing this up. Best of luck!
neb-b commented 2018-07-09 21:58:53 +02:00 (Migrated from github.com)

Assigned @skhameneh to determine if this is approach is a viable option.

Assigned @skhameneh to determine if this is approach is a viable option.
dan1d commented 2018-07-11 22:43:13 +02:00 (Migrated from github.com)

Hi all, I have been very busy lately, I didn't have enough time to work on this, I have worked on it but still getting a lot of edge cases(events like pressing the bar space does not pause the video)

Fixed: Going back to the video does not show up the black screen anymore
Missing:
Clicking the same video will make the 2 videos(overlayed and normal screen) to show up
Hookup events

Hi all, I have been very busy lately, I didn't have enough time to work on this, I have worked on it but still getting a lot of edge cases(events like pressing the bar space does not pause the video) Fixed: Going back to the video does not show up the black screen anymore Missing: Clicking the same video will make the 2 videos(overlayed and normal screen) to show up Hookup events
neb-b commented 2018-07-12 04:46:17 +02:00 (Migrated from github.com)

I'm guessing the spacebar issue is due to losing the React hooks after manually moving the video element?

I'm guessing the spacebar issue is due to losing the React hooks after manually moving the video element?
dan1d commented 2018-07-12 04:52:34 +02:00 (Migrated from github.com)

Yes @seanyesmunt

Yes @seanyesmunt
skhameneh commented 2018-07-25 17:22:54 +02:00 (Migrated from github.com)

Hey @dan1d are you still working on this?

I see there's some remaining bugs as well as my earlier comment:

An entirely new video playback component is created; this creates an interruption of video playback.

Let me know where you're at with this, thanks!

Hey @dan1d are you still working on this? I see there's some remaining bugs as well as my earlier comment: > An entirely new video playback component is created; this creates an interruption of video playback. Let me know where you're at with this, thanks!
dan1d commented 2018-07-27 21:51:52 +02:00 (Migrated from github.com)

@skhameneh Still missing these two:
Clicking the same video will make the 2 videos(overlayed and normal screen) to show up
Hookup events

@skhameneh Still missing these two: Clicking the same video will make the 2 videos(overlayed and normal screen) to show up Hookup events
dan1d commented 2018-08-02 00:02:26 +02:00 (Migrated from github.com)

Starting again with this one tomorrow morning.

On Wed, Jul 25, 2018, 12:22 Shawn Khameneh notifications@github.com wrote:

Hey @dan1d https://github.com/dan1d are you still working on this?

I see there's some remaining bugs as well as my earlier comment:

An entirely new video playback component is created; this creates an
interruption of video playback.

Let me know where you're at with this, thanks!


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/lbryio/lbry-desktop/pull/1523#issuecomment-407793323,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADJBsLgNJjciRTfH5dKjc-_HN0ygneqFks5uKI1QgaJpZM4UPDwI
.

Starting again with this one tomorrow morning. On Wed, Jul 25, 2018, 12:22 Shawn Khameneh <notifications@github.com> wrote: > Hey @dan1d <https://github.com/dan1d> are you still working on this? > > I see there's some remaining bugs as well as my earlier comment: > > An entirely new video playback component is created; this creates an > interruption of video playback. > > Let me know where you're at with this, thanks! > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://github.com/lbryio/lbry-desktop/pull/1523#issuecomment-407793323>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ADJBsLgNJjciRTfH5dKjc-_HN0ygneqFks5uKI1QgaJpZM4UPDwI> > . >
tzarebczan commented 2018-08-14 17:20:28 +02:00 (Migrated from github.com)

@dan1d can you provide us an update with your new approach?

@dan1d can you provide us an update with your new approach?
dan1d commented 2018-08-14 19:11:08 +02:00 (Migrated from github.com)

Will do it tonight when i'm on my pc.
Basically I've created a root component sibbling of Router and App for
example, and the video plays there, so I need to work around the styles
size to match the box of the current video div and the overlayed div. That
way i'm not moving around the node elements just manipulating css styles

On Tue, Aug 14, 2018, 12:20 Thomas Zarebczan notifications@github.com
wrote:

@dan1d https://github.com/dan1d can you provide us an update with your
new approach?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/lbryio/lbry-desktop/pull/1523#issuecomment-412910094,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADJBsKQK10IBvUWwTmD8BTOmOCHNgzAsks5uQurCgaJpZM4UPDwI
.

Will do it tonight when i'm on my pc. Basically I've created a root component sibbling of Router and App for example, and the video plays there, so I need to work around the styles size to match the box of the current video div and the overlayed div. That way i'm not moving around the node elements just manipulating css styles On Tue, Aug 14, 2018, 12:20 Thomas Zarebczan <notifications@github.com> wrote: > @dan1d <https://github.com/dan1d> can you provide us an update with your > new approach? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://github.com/lbryio/lbry-desktop/pull/1523#issuecomment-412910094>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ADJBsKQK10IBvUWwTmD8BTOmOCHNgzAsks5uQurCgaJpZM4UPDwI> > . >
dan1d commented 2018-08-14 19:15:08 +02:00 (Migrated from github.com)

I also gave another chance to portals but they do remount the video
component.

On Tue, Aug 14, 2018, 14:15 Daniel Alejandro Dominguez Diaz <
danielfromarg@gmail.com> wrote:

Will do it tonight when i'm on my pc.
Basically I've created a root component sibbling of Router and App for
example, and the video plays there, so I need to work around the styles
size to match the box of the current video div and the overlayed div. That
way i'm not moving around the node elements just manipulating css styles

On Tue, Aug 14, 2018, 12:20 Thomas Zarebczan notifications@github.com
wrote:

@dan1d https://github.com/dan1d can you provide us an update with your
new approach?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/lbryio/lbry-desktop/pull/1523#issuecomment-412910094,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADJBsKQK10IBvUWwTmD8BTOmOCHNgzAsks5uQurCgaJpZM4UPDwI
.

I also gave another chance to portals but they do remount the video component. On Tue, Aug 14, 2018, 14:15 Daniel Alejandro Dominguez Diaz < danielfromarg@gmail.com> wrote: > Will do it tonight when i'm on my pc. > Basically I've created a root component sibbling of Router and App for > example, and the video plays there, so I need to work around the styles > size to match the box of the current video div and the overlayed div. That > way i'm not moving around the node elements just manipulating css styles > > On Tue, Aug 14, 2018, 12:20 Thomas Zarebczan <notifications@github.com> > wrote: > >> @dan1d <https://github.com/dan1d> can you provide us an update with your >> new approach? >> >> — >> You are receiving this because you were mentioned. >> Reply to this email directly, view it on GitHub >> <https://github.com/lbryio/lbry-desktop/pull/1523#issuecomment-412910094>, >> or mute the thread >> <https://github.com/notifications/unsubscribe-auth/ADJBsKQK10IBvUWwTmD8BTOmOCHNgzAsks5uQurCgaJpZM4UPDwI> >> . >> >
tzarebczan commented 2018-08-21 16:24:12 +02:00 (Migrated from github.com)

@dan1d can you commit your latest changes? Any progress? We need to decide what to do with this PR since it's been in progress for a really long time.

@dan1d can you commit your latest changes? Any progress? We need to decide what to do with this PR since it's been in progress for a really long time.
tzarebczan commented 2018-08-27 17:43:17 +02:00 (Migrated from github.com)

Closing this PR due to inactivity. Issue #579 will be used to track this effort.

Closing this PR due to inactivity. Issue #579 will be used to track this effort.
tzarebczan commented 2018-08-27 17:43:41 +02:00 (Migrated from github.com)

@dan1d if you could push up your latest changes here, that would still be super helpful!

@dan1d if you could push up your latest changes here, that would still be super helpful!

Pull request closed

Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#1523
No description provided.