Add videos to be played across all pages. #1523
Closed
dan1d wants to merge 13 commits from
video-overlay-new
into master
pull from: video-overlay-new
merge into: LBRYCommunity:master
LBRYCommunity:master
LBRYCommunity:dependabot/npm_and_yarn/electron-22.3.21
LBRYCommunity:dependabot/npm_and_yarn/semver-5.7.2
LBRYCommunity:7681-remove-block-list-apis
LBRYCommunity:new-sync-demo-no-user
LBRYCommunity:commentserver-swap-test-2
LBRYCommunity:Comment-server-swap
LBRYCommunity:7683-upgrade-to-electron-20
LBRYCommunity:7668-improve-startup-performance-while-fetching-comment-moderation-info
LBRYCommunity:feat-exportWalletSync
LBRYCommunity:feat-walletExport
LBRYCommunity:new-sync-demo
LBRYCommunity:test-updates4b
LBRYCommunity:test-updates-4a
LBRYCommunity:update-test-3c
LBRYCommunity:update-test-3b
LBRYCommunity:update-test-3
LBRYCommunity:test7495b2
LBRYCommunity:test7495a2
LBRYCommunity:test7495b
LBRYCommunity:test7495
LBRYCommunity:test109
LBRYCommunity:test-sdk-109
LBRYCommunity:feat-restoreLocalNotifications
LBRYCommunity:test-gatekeeper
LBRYCommunity:test-107
LBRYCommunity:test-mac-notarize
LBRYCommunity:update-postcss-quagmire
LBRYCommunity:testpush
LBRYCommunity:commentApiDefault
LBRYCommunity:inspect-upgrades
LBRYCommunity:fix-unblockIsChannelClaim
LBRYCommunity:ody255
LBRYCommunity:robd-mac-2
LBRYCommunity:sso-demo
LBRYCommunity:robd-universal
LBRYCommunity:remove-swap
LBRYCommunity:cleaning.dec.21
LBRYCommunity:update-trending-param
LBRYCommunity:collection-ordering
LBRYCommunity:download-progress
LBRYCommunity:anton
LBRYCommunity:anthony-fix-video-ios
LBRYCommunity:saltdev
LBRYCommunity:bump-electron-to-11
LBRYCommunity:fix-noBlockSubmitOnImgError
LBRYCommunity:x.lint.extras
LBRYCommunity:x.final
LBRYCommunity:somehow-working
LBRYCommunity:reenable-ads
LBRYCommunity:issue/7152
LBRYCommunity:chat-markdown
LBRYCommunity:ip/muted.uris
LBRYCommunity:odysee-split
LBRYCommunity:feat-desktopRelated
LBRYCommunity:ip/memo
LBRYCommunity:bs
LBRYCommunity:ip/memoization
LBRYCommunity:bump-flow-version
LBRYCommunity:ip/shared.block.list
LBRYCommunity:keycloak-sso
LBRYCommunity:a-r-w-k-2
LBRYCommunity:auth-refactor-w-keycloak
LBRYCommunity:auth-refactor
LBRYCommunity:rb-ip/embed-replay
LBRYCommunity:issue/2120
LBRYCommunity:oidc
LBRYCommunity:fix-videojs-ios
LBRYCommunity:fiat-tip-improvements
LBRYCommunity:test-tom-1
LBRYCommunity:fix-videojs-issues
LBRYCommunity:fix-persistSupportOption
LBRYCommunity:ctrl-txt
LBRYCommunity:add-play-button-on-pause-ios
LBRYCommunity:mobile-ui-bugfix-for-preview-images
LBRYCommunity:fix-livestream-claim-type
LBRYCommunity:playback-controls-2
LBRYCommunity:copy-list
LBRYCommunity:feat-collection-background-publishing
LBRYCommunity:ip/repost.in.homepage
LBRYCommunity:wallet-iteration-2
LBRYCommunity:broken-ads-branch
LBRYCommunity:move-stripe-transactions-to-wallet-fix
LBRYCommunity:lint.autoformat
LBRYCommunity:jessop-stripe
LBRYCommunity:move-transactions
LBRYCommunity:stripe-move-transactions-to-wallet
LBRYCommunity:mater
LBRYCommunity:more-stripe-integration
LBRYCommunity:more-stripe-integration1
LBRYCommunity:desktop-redirect
LBRYCommunity:rss-test
LBRYCommunity:fixed-collectionEdit
LBRYCommunity:watchman-plugin-odysee-anthony
LBRYCommunity:grin
LBRYCommunity:watchman-plugin-odysee
LBRYCommunity:protocol
LBRYCommunity:salt_saved_list
LBRYCommunity:salt-saved_list
LBRYCommunity:watchman-plugin
LBRYCommunity:more-stripe-integration2
LBRYCommunity:salt-savedList
LBRYCommunity:salt/mobile-comments
LBRYCommunity:chromecast-test2
LBRYCommunity:odysee
LBRYCommunity:wpe-on-ody
LBRYCommunity:bring-back-subtitles-button
LBRYCommunity:merge-to-odysee
LBRYCommunity:bugfix-tip-error
LBRYCommunity:popup-fix
LBRYCommunity:favi-cherry
LBRYCommunity:searchDefaults
LBRYCommunity:pin-from-homepages-master
LBRYCommunity:ody-7-22-c
LBRYCommunity:ody-7-22-b
LBRYCommunity:ody-7-22
LBRYCommunity:ody-7-21
LBRYCommunity:cherry.pick.thumbs.fix
LBRYCommunity:ody-rb-7-20c
LBRYCommunity:test-chromecast
LBRYCommunity:ody-7-20-rb
LBRYCommunity:odysee-cnsearch
LBRYCommunity:ody-7-19-b
LBRYCommunity:anthony-odysee
LBRYCommunity:drewhancock-patch-2
LBRYCommunity:horizon-server
LBRYCommunity:feat-nicer-outages
LBRYCommunity:tech-debt/selectors-search
LBRYCommunity:fix-lbry-tv-thumbnails
LBRYCommunity:drewhancock-patch-1
LBRYCommunity:jbnrecsys
LBRYCommunity:feat/disableListEditPending
LBRYCommunity:testapi
LBRYCommunity:bump-lightouse-throttle
LBRYCommunity:popup
LBRYCommunity:replays-rebased-tom
LBRYCommunity:pre-reoll-ads-rebase
LBRYCommunity:julianchandra-patch-1
LBRYCommunity:feat/better-chat
LBRYCommunity:revert-livestream
LBRYCommunity:feat/code-splitting
LBRYCommunity:feat/go-live-forms
LBRYCommunity:UI/drop-down-menu-animation
LBRYCommunity:faster-builds
Labels
Clear labels
Work is part of a proposal
Beamer is waiting on you!
Discuss this issue at the next planning meeting, then remove this label
Welcome to Hacktoberfest
Long-term storage
No knowledge of the existing code required
Some knowledge of the existing code is recommended
Significant knowledge of the existing code is recommended
Intimate knowledge of the existing code is recommended
Solution unclear, needs research
Issue needs to be groomed before work can start
Priority level needs to be defined
Issue needs step-by-step instructions on how to reproduce in latest code
Needs technical design signoff before implementation can begin
Temporarily paused
Issue is blocking release, do ASAP
Work needs to be moved into sprint ASAP
Work should be done but can stay in the backlog for now
Work needs to be done within 2-3 sprints
general redesign not prioritize for anyone release
Requires work on lbry-sdk repo
Existing functionality is wrong or broken
A conversation. No specific changes requested
Existing (or partially existing) functionality needs to be changed
New functionality that does not exist yet
Minimal user-visible changes, but significant internal work
Either work that's not related to the code, or a small chore that does not fit into other categories
Solution needs additional user testing
Work that was not planned into the spirnt, took priority over planned work
accessibility
app-parity
area: creator
area: daemon
area: design
area: devops
area: discovery
area: docs
area: installer
area: internal
area: livestream
area: performance
area: proposal
Work is part of a proposal
area: reposts
area: rewards
area: search
area: security
area: subscriptions
area: sync
area: ux
area: viewer
area: wallet
BEAMER
Beamer is waiting on you!
channel
comments
community PR
consider soon
Discuss this issue at the next planning meeting, then remove this label
core team
css
dependencies
electron
Epic
feature request
first-timers-only
good first issue
hacktoberfest
Welcome to Hacktoberfest
help wanted
hub-dependent
icebox
Long-term storage
Invalid
level: 0
level: 1
No knowledge of the existing code required
level: 2
Some knowledge of the existing code is recommended
level: 3
Significant knowledge of the existing code is recommended
level: 4
Intimate knowledge of the existing code is recommended
merge when green
needs: exploration
Solution unclear, needs research
needs: grooming
Issue needs to be groomed before work can start
needs: priority
Priority level needs to be defined
needs: repro
Issue needs step-by-step instructions on how to reproduce in latest code
needs: tech design
Needs technical design signoff before implementation can begin
notifications
odysee
on hold
Temporarily paused
playlists
priority: blocker
Issue is blocking release, do ASAP
priority: high
Work needs to be moved into sprint ASAP
priority: low
Work should be done but can stay in the backlog for now
priority: medium
Work needs to be done within 2-3 sprints
protocol dependent
recsys
redesign
general redesign not prioritize for anyone release
regression
resilience
sdk dependent
Requires work on lbry-sdk repo
Tom's Wishlist
trending
type: bug
Existing functionality is wrong or broken
type: discussion
A conversation. No specific changes requested
type: improvement
Existing (or partially existing) functionality needs to be changed
type: new feature
New functionality that does not exist yet
type: refactor
Minimal user-visible changes, but significant internal work
type: task
Either work that's not related to the code, or a small chore that does not fit into other categories
type: testing
Solution needs additional user testing
unplanned
Work that was not planned into the spirnt, took priority over planned work
windows
No labels
accessibility
app-parity
area: creator
area: daemon
area: design
area: devops
area: discovery
area: docs
area: installer
area: internal
area: livestream
area: performance
area: proposal
area: reposts
area: rewards
area: search
area: security
area: subscriptions
area: sync
area: ux
area: viewer
area: wallet
BEAMER
channel
comments
community PR
consider soon
core team
css
dependencies
electron
Epic
feature request
first-timers-only
good first issue
hacktoberfest
help wanted
hub-dependent
icebox
Invalid
level: 0
level: 1
level: 2
level: 3
level: 4
merge when green
needs: exploration
needs: grooming
needs: priority
needs: repro
needs: tech design
notifications
odysee
on hold
playlists
priority: blocker
priority: high
priority: low
priority: medium
protocol dependent
recsys
redesign
regression
resilience
sdk dependent
Tom's Wishlist
trending
type: bug
type: discussion
type: improvement
type: new feature
type: refactor
type: task
type: testing
unplanned
windows
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
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
Reference in a new issue
No description provided.
Delete branch "video-overlay-new"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Closes #579
This PR adds Picture in Picture!
Let me know if any modification is needed
Todo
Preview
I'll take a look at this (try it out) tomorrow night. 😃
I ran into a lot of odd cases when investigating this prior.
@skhameneh , i'm working on a commit currently to make it draggable, could you wait please ?
A few things:
Also, is this a new issue?
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:
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 ?
My thoughts even though I wasn't asked 😁 :
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
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.
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!
@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.
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
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
@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.
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!
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?
Planning on doing a deeper dive to see if this is viable tomorrow.
@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 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?
@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!
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.
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)
@dan1d said he's still working on finishing this up. Best of luck!
Assigned @skhameneh to determine if this is approach is a viable option.
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
I'm guessing the spacebar issue is due to losing the React hooks after manually moving the video element?
Yes @seanyesmunt
Hey @dan1d are you still working on this?
I see there's some remaining bugs as well as my earlier comment:
Let me know where you're at with this, thanks!
@skhameneh Still missing these two:
Clicking the same video will make the 2 videos(overlayed and normal screen) to show up
Hookup events
Starting again with this one tomorrow morning.
On Wed, Jul 25, 2018, 12:22 Shawn Khameneh notifications@github.com wrote:
@dan1d can you provide us an update with your new approach?
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:
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:
@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.
Closing this PR due to inactivity. Issue #579 will be used to track this effort.
@dan1d if you could push up your latest changes here, that would still be super helpful!
Pull request closed