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
Docking UX refinements #19179
Docking UX refinements #19179
Conversation
alanorozco
commented
Nov 7, 2018
•
edited
edited
- Refines animation breakpoints, thresholds and timeouts.
- Adds a repositioning transition for undocking.
- No longer docks to bottom.
- Fixes a variety of Chrome/Android issues.
- Fixes clipping on Safari.
- Adds placeholder treatment with icon and blurred poster.
* @return {!Element} | ||
* @private | ||
*/ | ||
const ShadowLayer = html => |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Structuring the templates like this has a few benefits:
- Added readability.
- Reduced length of constructor.
- Automatic syntax highlighting in a lot of editors + plugins (by using
html
instead ofhtmlFor()
directly).
'%s/experiments.html', | ||
urls.cdn); | ||
'%s', | ||
urls.cdn + '/experiments.html'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doing like this so string doesn't get split in console.
unmuteButton, | ||
} = this.getControls_(); | ||
const overlay = this.getOverlay_(); | ||
installShowControlsOnTapOrHover_(element) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now shows up on hover.
if (this.isDragging_ || | ||
this.ignoreDueToSize_(video) || | ||
!this.isValidSize_(video) || |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Renamed.
src/service/video/docking.js
Outdated
* @private | ||
*/ | ||
isValidScrollingDirection_() { | ||
return this.currentlyDocked_ || |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now only allows scrolling up for docking, while scrolling down works to undock as well.
return; | ||
} | ||
this.dock_(video, target); | ||
if (this.currentlyDocked_) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the video is no longer dockable on resize, undock it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wow, so much math! 🔢
- Shows controls on hover. - Refines animation breakpoints, thresholds and timeouts. - Adds a repositioning transition for undocking. - No longer docks to bottom. - Fixes a variety of Chrome/Android issues. - Fixes clipping on Safari. - Adds placeholder treatment with icon and blurred poster.