When loading the spinner is shown, but we need motion specs for the following: - Hiding the media controls from pre-load -> loading - Reshowing the media controls from loading -> post-load including the flash of the play button from the spec.
Helene - do you have a spec / more information about how the state transitions between pre-loading > loading > playing should work?
Do we still need spec on the transitions? Should we update the bug title and link to the specs?
Is this the spec we're looking for here? https://docs.google.com/presentation/d/1Xwu6nvCoxEIjuIdGYt9DRPBHqEX3QQkpQluHcJazCsE/edit?ts=5a8f17b2#slide=id.g354e69073e_0_0
Yep, those are the ones.
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/5d20103b766fa80065a025c363d9db838ceb2ed4 commit 5d20103b766fa80065a025c363d9db838ceb2ed4 Author: Becca Hughes <beccahughes@chromium.org> Date: Wed Apr 11 01:13:56 2018 Media Controls: Control opacity with CSS Adds a "transparent" class to the panel element when we should be transparent. This will allow us to animate it with CSS animations in the future. Also decreases the time to hide to 2.5s for modern media controls as per spec. BUG= 780051 Change-Id: I9f69e455f4be822eec00b124da610c768bf8f141 Reviewed-on: https://chromium-review.googlesource.com/1005620 Commit-Queue: Becca Hughes <beccahughes@chromium.org> Reviewed-by: Mounir Lamouri <mlamouri@chromium.org> Cr-Commit-Position: refs/heads/master@{#549709} [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/WebKit/LayoutTests/media/audio-controls-do-not-fade-out.html [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/WebKit/LayoutTests/media/video-controls-always-visible-when-control-hovered.html [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/WebKit/LayoutTests/media/video-controls-auto-hide-after-play-by-touch.html [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/WebKit/LayoutTests/media/video-controls-focus-movement-on-hide.html [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/WebKit/LayoutTests/media/video-controls-hide-after-touch-on-control.html [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/WebKit/LayoutTests/media/video-controls-hide-on-move-outside-controls.html [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/WebKit/LayoutTests/media/video-controls-show-on-focus.html [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/blink/renderer/modules/media_controls/elements/media_control_panel_element.cc [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/blink/renderer/modules/media_controls/media_controls_impl.cc [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/blink/renderer/modules/media_controls/resources/legacyMediaControls.css [modify] https://crrev.com/5d20103b766fa80065a025c363d9db838ceb2ed4/third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/2cb8f3a0e9bf4d998a6cab2acc930f115b035d05 commit 2cb8f3a0e9bf4d998a6cab2acc930f115b035d05 Author: Becca Hughes <beccahughes@chromium.org> Date: Thu Apr 12 18:33:22 2018 Media Controls: Hide/show panel based on new curves Update the transition CSS for the panel to hide and show based on the new timings and curves. Also removes the timer from the panel and replaces it with a transitionend event listener. BUG= 780051 Change-Id: Idf6204b4a021b19f3530dc33a1dbe34193e2837e Reviewed-on: https://chromium-review.googlesource.com/1006034 Commit-Queue: Becca Hughes <beccahughes@chromium.org> Reviewed-by: Mounir Lamouri <mlamouri@chromium.org> Cr-Commit-Position: refs/heads/master@{#550282} [modify] https://crrev.com/2cb8f3a0e9bf4d998a6cab2acc930f115b035d05/third_party/blink/renderer/modules/BUILD.gn [modify] https://crrev.com/2cb8f3a0e9bf4d998a6cab2acc930f115b035d05/third_party/blink/renderer/modules/media_controls/elements/media_control_panel_element.cc [modify] https://crrev.com/2cb8f3a0e9bf4d998a6cab2acc930f115b035d05/third_party/blink/renderer/modules/media_controls/elements/media_control_panel_element.h [add] https://crrev.com/2cb8f3a0e9bf4d998a6cab2acc930f115b035d05/third_party/blink/renderer/modules/media_controls/elements/media_control_panel_element_test.cc [modify] https://crrev.com/2cb8f3a0e9bf4d998a6cab2acc930f115b035d05/third_party/blink/renderer/modules/media_controls/media_controls_impl_test.cc [modify] https://crrev.com/2cb8f3a0e9bf4d998a6cab2acc930f115b035d05/third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css
Comment 1 by beccahughes@chromium.org
, Nov 13 2017Owner: helenepark@chromium.org