Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video: Mobile UI + overlay for keyboard shortcut feedback #5119

Merged
merged 19 commits into from
Dec 14, 2020
Merged

Conversation

infinite-persistence
Copy link
Contributor

@infinite-persistence infinite-persistence commented Dec 1, 2020

New

  • Mobile version of the video play. Includes:
    • Centered and larger play/pause button
    • Tap on left or right area of screen to seek +/- 10s
      image
  • Overlay for keyboard shortcut feedback:
    • Playback-rate changes
      image
    • +/-10s seeking

Approach

  • ui/component/videoViewer/internal/plugin will contain the plugin files. Changes done to these files will be minimal so ease any future patching from the original source. The inline method is used to handle importing issues with Node modules.

Note to reviewer

  • In the last commit, I disabled the mobile UI for IOS and only enabled it for Android. I believe the native UI was intentionally used before this, so I tried to retain the same behavior. It's also because I don't have an iOS to actually confirm that it works, although the emulator in the browser seems to show that it does.
  • For the overlays, I have not tried on a Mac/Safari/iOS -- again, the native player is used there, but should try it just in case something goes bad.

Also

Closes #4889: Alt-Left shouldn't impact video

@infinite-persistence
Copy link
Contributor Author

Update

  • Re-factored the method to add "one-off" overlays
  • Added overlay for "seeked forward/backwards".

@neb-b
Copy link

neb-b commented Dec 3, 2020

Will look at this after the desktop release is out. Hopefully soon 😞

@infinite-persistence infinite-persistence force-pushed the ip-vjs-overlay branch 3 times, most recently from 8caaaa0 to e371023 Compare December 7, 2020 13:57
@infinite-persistence infinite-persistence changed the title Add overlay plugin to video player + Add overlay for play-rate keyboard shortcut Video: Mobile UI + overlay for keyboard shortcut feedback Dec 7, 2020
@infinite-persistence
Copy link
Contributor Author

Update

  • Added mobile UI and updated the main description of this PR to reflect the sum of changes.

Copy link

@neb-b neb-b left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comments. Looks great

@infinite-persistence
Copy link
Contributor Author

infinite-persistence commented Dec 10, 2020

Update

@neb-b
Copy link

neb-b commented Dec 11, 2020

I think we still need one of the licenses (don't remember which one). It said it had to be included with the code I think.

import and others added 12 commits December 13, 2020 22:59
…ctly without waiting for an event.

The plugin only supports event-based overlays. This change will provide the functionality of an "one-off" overlay, which will be display immediately upon the 'player.overlay({...})' call, and hides when the 'end' event hits.
This is an improvement to 28e7fec, which back then I just made the video control-bar re-appear when the shortcut is pressed, so that user gets to see the latest playback rate value.

Now, it uses a transient overlay.
…ntrolBar), causing the controlBar to be unresponsive to touch.

For some reason, adding the "-1" to the logic places it 2 slots behind the desired array slot, plus the actual item ends up being at the bottom of the DOM.

Removing the "-1" places it exactly at that index and pushes all existing items down 1 slot (feels like correct behavior), plus the final DOM is also correct.

Perhaps it's just some changes in videojs upstream that videojs-mobile-ui haven't catch up on (it has been dormant since 2018).
- Since the whole overlay is now the control bar, the bottom control bar should no longer be black (too focused).
- Gray out the video when the overlay is up.
- The 'play/pause' is now at the middle of the overlay, so hide the one in the bottom controlBar. The bigger button is easier to tap in smaller mobile screens.
This makes more sense and also matches the controlBar's behavior.
- Restored the control-bar when playback rate is changed via keyboard.
- Also show the control-bar when seeking via keyboard.

Aside: lint was complaining about a potentially-null 'player', so added the null check in front and removed the redundant ones below.
## Issue
4889: Alt-Left shouldn't impact video

... since that is the common combo for navigation in browsers. It ended up doing 2 things.
@infinite-persistence
Copy link
Contributor Author

Update

  • Restored the MIT license file for vjs-mobile-ui
  • Rebased to latest master.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Alt-Left shouldn't impact video
2 participants