Lbry-desktop: Keep video playing when navigating from a playing video

[kauffj]

When the user navigates from a page with a playing video, this video can be displayed in a picture-in-picture-esque popup, ala Twitch.

Acceptance Criteria

1.
2.
3.

Definition of Done

• [ ] Tested against acceptance criteria
• [ ] Tested against the assumptions of the user story
• [ ] The project builds without errors
• [ ] Unit tests are written and passing
• [ ] Tests on devices/browsers listed in the issue have passed
• [ ] QA performed & issues resolved
• [ ] Refactoring completed
• [ ] Any configuration or build changes documented
• [ ] Documentation updated
• [ ] Peer Code Review performed

[btzr-io]

I don't think this is gonna be that easy but I'll try :stuck_out_tongue:

[btzr-io]

Also needs an autoplay feature and let's not forget about this one: https://github.com/lbryio/lbry-app/issues/491

[skhameneh]

I'm on it, maybe I'll have something this weekend. 😄

[skhameneh]

Notes

1. Inserting another video player with a resumed timestamp, outside of the page's DOM context, will introduce an interruption of video playback.
2. Storing DOM nodes in Redux is ill-advised. All content within the Redux store should be fully JSON compatible.
3. Moving playback DOM nodes outside of the embedded video's containers will introduce layout complexities. (The playback elements must scroll with content while on the video's source page)
4. Some interactions may require manual HTML entry for manual DOM manipulation, I will need to see is node placement changes can be done without interrupting playback. See https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

[tzarebczan]

@dan1d was taking a look at this one too... Not sure if he started yet.

Old pr: https://github.com/lbryio/lbry-app/pull/585

[dan1d]

Yes @tzarebczan , I'm working on it, I'll try to finish it by EOD, but I'm having troubles closing the video when another video is played, if I fix that, then I think it is good to go.

I was also planing to make the video draggable, but I want to finish the core first.

[skhameneh]

Thanks for the heads up @tzarebczan

Notes, last findings:
I can move the video playback elements, without interruption (on Windows), using node manipulation.
Moving the node with appendChild() (removing the element manually causes an interruption) causes the video to pause. Using a subsequent play() call on the video player results in no interruption of playback. Because leaving the page does not manipulate elements within the video elements, React does not error on DOM reconciliation. This only works when the code managing the video player has been unloaded (DOM moved, user leaves video page, then DOM is manipulated)

Code used in dev tools (on a video page, with video playing):

var videoNode = document.getElementsByClassName('content__view--container')[0];
var videoPlayer = videoNode.getElementsByTagName('video')[0];
var header = document.getElementsByClassName('header')[0];
var navBar = document.getElementsByClassName('nav__primary')[0];

// Move to header
header.appendChild(videoNode); videoPlayer.play();

// Move to navBar
navBar.appendChild(videoNode); videoPlayer.play();

@dan1d thanks for the update, let me know if you need assistance.

[dan1d]

ok @skhameneh, I need to cleanup my code then push, maybe you can take a look if i'm on the correct path. Will let you know when pushed

[dan1d]

@skhameneh @tzarebczan PR sent, I would like to receive some feedback or any modification to the styles would be appreciated!

Thanks in advance!

[skhameneh]

Closing
https://github.com/lbryio/lbry-desktop/pull/1523, a new PR can be filed when work is resumed.

[seanyesmunt]

The beast has been conquered

[dan1d]

Amazing!!!