LBRYCommunity/lbry-desktop

Fork 0

Keep video playing when navigating from a playing video #579

New issue

Closed

opened 2017-09-18 04:30:34 +02:00 by kauffj · 12 comments

kauffj commented

2017-09-18 04:30:34 +02:00

(Migrated from github.com)

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

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

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 commented

2017-09-18 04:51:26 +02:00

(Migrated from github.com)

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

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

btzr-io commented

2017-09-19 04:12:41 +02:00

(Migrated from github.com)

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

skhameneh commented

2018-05-26 19:43:27 +02:00

(Migrated from github.com)

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

skhameneh commented

2018-05-26 20:09:16 +02:00

(Migrated from github.com)

Notes

Inserting another video player with a resumed timestamp, outside of the page's DOM context, will introduce an interruption of video playback.
Storing DOM nodes in Redux is ill-advised. All content within the Redux store should be fully JSON compatible.
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)
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

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 commented

2018-05-26 20:21:11 +02:00

(Migrated from github.com)

@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 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 commented

2018-05-26 20:48:47 +02:00

(Migrated from github.com)

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.

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. ![screenshot from 2018-05-26 15-47-12](https://user-images.githubusercontent.com/3293616/40579361-15b24d94-60fc-11e8-9c2e-ff2c89235e51.png) I was also planing to make the video draggable, but I want to finish the core first.

🎉 2

skhameneh commented

2018-05-26 20:51:11 +02:00

(Migrated from github.com)

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.

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.

👍 2

dan1d commented

2018-05-26 20:57:46 +02:00

(Migrated from github.com)

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

👍 2

dan1d commented

2018-05-26 23:30:45 +02:00

(Migrated from github.com)

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

Thanks in advance!

@skhameneh @tzarebczan [PR sent](https://github.com/lbryio/lbry-app/pull/1523), I would like to receive some feedback or any modification to the styles would be appreciated! Thanks in advance!

skhameneh commented

2018-08-27 17:43:32 +02:00

(Migrated from github.com)

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

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

👍 1

neb-b commented

2019-08-13 19:50:22 +02:00

(Migrated from github.com)

The beast has been conquered

🎉 1

dan1d commented