[Media Controls] Separate hide timer for overlay and bottom progress bar

Since there are situations where bottom pregress bar shows and mid overlay hides,
we are going to have different hide timer for them. This CL add a hide timer logic
into touchless element base class so that all sub element can have the hide timer
(This is also a preparation for volume indicator hide timer).

Bug: 942153
Change-Id: I980f1ec4439cad233a321a98bf1f2e6a535338eb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1570128
Commit-Queue: Jazz Xu <jazzhsu@chromium.org>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#652198}

third_party/blink/renderer/modules/media_controls/BUILD.gn

@@ -104,6 +104,8 @@ blink_modules_sources("media_controls") {
 
   if (is_android && notouch_build) {
     sources += [
+      "touchless/elements/media_controls_touchless_bottom_container_element.cc",
+      "touchless/elements/media_controls_touchless_bottom_container_element.h",
       "touchless/elements/media_controls_touchless_element.cc",
       "touchless/elements/media_controls_touchless_element.h",
       "touchless/elements/media_controls_touchless_overlay_element.cc",

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_bottom_container_element.cc

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_bottom_container_element.h"
+
+#include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_time_display_element.h"
+#include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_timeline_element.h"
+
+namespace blink {
+
+MediaControlsTouchlessBottomContainerElement::
+    MediaControlsTouchlessBottomContainerElement(
+        MediaControlsTouchlessImpl& media_controls)
+    : MediaControlsTouchlessElement(media_controls) {
+  SetShadowPseudoId(
+      AtomicString("-internal-media-controls-touchless-bottom-container"));
+
+  MediaControlsTouchlessTimeDisplayElement* time_display_element =
+      MakeGarbageCollected<MediaControlsTouchlessTimeDisplayElement>(
+          media_controls);
+  MediaControlsTouchlessTimelineElement* timeline_element =
+      MakeGarbageCollected<MediaControlsTouchlessTimelineElement>(
+          media_controls);
+
+  ParserAppendChild(time_display_element);
+  ParserAppendChild(timeline_element);
+}
+
+void MediaControlsTouchlessBottomContainerElement::Trace(
+    blink::Visitor* visitor) {
+  MediaControlsTouchlessElement::Trace(visitor);
+}
+
+}  // namespace blink

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_bottom_container_element.h

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef THIRD_PARTY_BLINK_RENDERER_MODULES_MEDIA_CONTROLS_TOUCHLESS_ELEMENTS_MEDIA_CONTROLS_TOUCHLESS_BOTTOM_CONTAINER_ELEMENT_H_
+#define THIRD_PARTY_BLINK_RENDERER_MODULES_MEDIA_CONTROLS_TOUCHLESS_ELEMENTS_MEDIA_CONTROLS_TOUCHLESS_BOTTOM_CONTAINER_ELEMENT_H_
+
+#include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_element.h"
+
+namespace blink {
+
+class MediaControlsTouchlessImpl;
+
+class MediaControlsTouchlessBottomContainerElement
+    : public MediaControlsTouchlessElement {
+ public:
+  MediaControlsTouchlessBottomContainerElement(MediaControlsTouchlessImpl&);
+  void Trace(blink::Visitor*) override;
+};
+
+}  // namespace blink
+
+#endif  // THIRD_PARTY_BLINK_RENDERER_MODULES_MEDIA_CONTROLS_TOUCHLESS_ELEMENTS_MEDIA_CONTROLS_TOUCHLESS_BOTTOM_CONTAINER_ELEMENT_H_

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_element.cc

@@ -4,14 +4,26 @@
 
 #include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_element.h"
 
+#include "third_party/blink/renderer/core/dom/dom_token_list.h"
+#include "third_party/blink/renderer/core/html/media/html_media_element.h"
 #include "third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_impl.h"
 #include "third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_media_event_listener.h"
 
 namespace blink {
 
+namespace {
+
+// Amount of time that media controls are visible.
+constexpr WTF::TimeDelta kTimeToHideControl = TimeDelta::FromMilliseconds(3000);
+
+const char kTransparentCSSClass[] = "transparent";
+
+}  // namespace
+
 MediaControlsTouchlessElement::MediaControlsTouchlessElement(
     MediaControlsTouchlessImpl& media_controls)
-    : media_controls_(media_controls) {
+    : HTMLDivElement(media_controls.GetDocument()),
+      media_controls_(media_controls) {
   media_controls_->MediaEventListener().AddObserver(this);
 }
 
@@ -19,7 +31,46 @@ HTMLMediaElement& MediaControlsTouchlessElement::MediaElement() const {
   return media_controls_->MediaElement();
 }
 
+void MediaControlsTouchlessElement::MakeOpaque(bool should_hide) {
+  EnsureHideControlTimer();
+
+  classList().Remove(kTransparentCSSClass);
+
+  if (hide_control_timer_->IsActive())
+    StopHideControlTimer();
+
+  if (should_hide)
+    StartHideControlTimer();
+}
+
+void MediaControlsTouchlessElement::MakeTransparent() {
+  classList().Add(kTransparentCSSClass);
+}
+
+void MediaControlsTouchlessElement::EnsureHideControlTimer() {
+  if (!hide_control_timer_) {
+    hide_control_timer_ =
+        std::make_unique<TaskRunnerTimer<MediaControlsTouchlessElement>>(
+            MediaElement().GetDocument().GetTaskRunner(
+                TaskType::kInternalMedia),
+            this, &MediaControlsTouchlessElement::HideControlTimerFired);
+  }
+}
+
+void MediaControlsTouchlessElement::HideControlTimerFired(TimerBase*) {
+  MakeTransparent();
+}
+
+void MediaControlsTouchlessElement::StartHideControlTimer() {
+  hide_control_timer_->StartOneShot(kTimeToHideControl, FROM_HERE);
+}
+
+void MediaControlsTouchlessElement::StopHideControlTimer() {
+  hide_control_timer_->Stop();
+}
+
 void MediaControlsTouchlessElement::Trace(blink::Visitor* visitor) {
+  HTMLDivElement::Trace(visitor);
   visitor->Trace(media_controls_);
 }
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_element.h

@@ -6,8 +6,10 @@
 #define THIRD_PARTY_BLINK_RENDERER_MODULES_MEDIA_CONTROLS_TOUCHLESS_ELEMENTS_MEDIA_CONTROLS_TOUCHLESS_ELEMENT_H_
 
 #include "base/macros.h"
+#include "third_party/blink/renderer/core/html/html_div_element.h"
 #include "third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_media_event_listener_observer.h"
 #include "third_party/blink/renderer/platform/heap/member.h"
+#include "third_party/blink/renderer/platform/timer.h"
 
 namespace blink {
 
@@ -15,12 +17,18 @@ class HTMLMediaElement;
 class MediaControlsTouchlessImpl;
 
 class MediaControlsTouchlessElement
-    : public MediaControlsTouchlessMediaEventListenerObserver {
+    : public HTMLDivElement,
+      public MediaControlsTouchlessMediaEventListenerObserver {
+  USING_GARBAGE_COLLECTED_MIXIN(MediaControlsTouchlessElement);
+
  public:
   HTMLMediaElement& MediaElement() const;
 
   void Trace(blink::Visitor* visitor) override;
 
+  void MakeOpaque(bool /** True if control should hide after timer fired */);
+  void MakeTransparent();
+
   // Non-touch media event listener observer implementation.
   void OnFocusIn() override {}
   void OnTimeUpdate() override {}
@@ -38,8 +46,16 @@ class MediaControlsTouchlessElement
   MediaControlsTouchlessElement(MediaControlsTouchlessImpl& media_controls);
 
  private:
+  void EnsureHideControlTimer();
+  void HideControlTimerFired(TimerBase*);
+  void StartHideControlTimer();
+  void StopHideControlTimer();
+
   Member<MediaControlsTouchlessImpl> media_controls_;
 
+  std::unique_ptr<TaskRunnerTimer<MediaControlsTouchlessElement>>
+      hide_control_timer_;
+
   DISALLOW_COPY_AND_ASSIGN(MediaControlsTouchlessElement);
 };
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_overlay_element.cc

@@ -13,8 +13,7 @@ namespace blink {
 
 MediaControlsTouchlessOverlayElement::MediaControlsTouchlessOverlayElement(
     MediaControlsTouchlessImpl& media_controls)
-    : HTMLDivElement(media_controls.GetDocument()),
-      MediaControlsTouchlessElement(media_controls) {
+    : MediaControlsTouchlessElement(media_controls) {
   SetShadowPseudoId(AtomicString("-internal-media-controls-touchless-overlay"));
 
   MediaControlsTouchlessPlayButtonElement* play_button =
@@ -43,7 +42,6 @@ MediaControlsTouchlessOverlayElement::MediaControlsTouchlessOverlayElement(
 }
 
 void MediaControlsTouchlessOverlayElement::Trace(blink::Visitor* visitor) {
-  HTMLDivElement::Trace(visitor);
   MediaControlsTouchlessElement::Trace(visitor);
 }
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_overlay_element.h

@@ -13,10 +13,7 @@ namespace blink {
 class MediaControlsTouchlessImpl;
 
 class MediaControlsTouchlessOverlayElement
-    : public HTMLDivElement,
-      public MediaControlsTouchlessElement {
-  USING_GARBAGE_COLLECTED_MIXIN(MediaControlsTouchlessOverlayElement);
-
+    : public MediaControlsTouchlessElement {
  public:
   MediaControlsTouchlessOverlayElement(MediaControlsTouchlessImpl&);
   void Trace(blink::Visitor*) override;

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_play_button_element.cc

@@ -20,8 +20,7 @@ const char kPausedCSSClass[] = "paused";
 MediaControlsTouchlessPlayButtonElement::
     MediaControlsTouchlessPlayButtonElement(
         MediaControlsTouchlessImpl& controls)
-    : HTMLDivElement(controls.GetDocument()),
-      MediaControlsTouchlessElement(controls) {
+    : MediaControlsTouchlessElement(controls) {
   SetShadowPseudoId(
       AtomicString("-internal-media-controls-touchless-play-button"));
 
@@ -37,7 +36,6 @@ void MediaControlsTouchlessPlayButtonElement::OnPause() {
 }
 
 void MediaControlsTouchlessPlayButtonElement::Trace(blink::Visitor* visitor) {
-  HTMLDivElement::Trace(visitor);
   MediaControlsTouchlessElement::Trace(visitor);
 }
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_play_button_element.h

@@ -11,10 +11,7 @@
 namespace blink {
 
 class MediaControlsTouchlessPlayButtonElement
-    : public HTMLDivElement,
-      public MediaControlsTouchlessElement {
-  USING_GARBAGE_COLLECTED_MIXIN(MediaControlsTouchlessPlayButtonElement);
-
+    : public MediaControlsTouchlessElement {
  public:
   MediaControlsTouchlessPlayButtonElement(MediaControlsTouchlessImpl&);
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_seek_button_element.cc

@@ -12,15 +12,13 @@ MediaControlsTouchlessSeekButtonElement::
     MediaControlsTouchlessSeekButtonElement(
         MediaControlsTouchlessImpl& controls,
         bool forward)
-    : HTMLDivElement(controls.GetDocument()),
-      MediaControlsTouchlessElement(controls) {
+    : MediaControlsTouchlessElement(controls) {
   SetShadowPseudoId(AtomicString(
       forward ? "-internal-media-controls-touchless-seek-forward-button"
               : "-internal-media-controls-touchless-seek-backward-button"));
 }
 
 void MediaControlsTouchlessSeekButtonElement::Trace(blink::Visitor* visitor) {
-  HTMLDivElement::Trace(visitor);
   MediaControlsTouchlessElement::Trace(visitor);
 }
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_seek_button_element.h

@@ -11,10 +11,7 @@
 namespace blink {
 
 class MediaControlsTouchlessSeekButtonElement
-    : public HTMLDivElement,
-      public MediaControlsTouchlessElement {
-  USING_GARBAGE_COLLECTED_MIXIN(MediaControlsTouchlessSeekButtonElement);
-
+    : public MediaControlsTouchlessElement {
  public:
   MediaControlsTouchlessSeekButtonElement(
       MediaControlsTouchlessImpl&,

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_time_display_element.cc

@@ -14,8 +14,7 @@ namespace blink {
 MediaControlsTouchlessTimeDisplayElement::
     MediaControlsTouchlessTimeDisplayElement(
         MediaControlsTouchlessImpl& media_controls)
-    : HTMLDivElement(media_controls.GetDocument()),
-      MediaControlsTouchlessElement(media_controls),
+    : MediaControlsTouchlessElement(media_controls),
       current_time_(0.0),
       duration_(0.0) {
   SetShadowPseudoId(
@@ -34,7 +33,6 @@ void MediaControlsTouchlessTimeDisplayElement::OnDurationChange() {
 }
 
 void MediaControlsTouchlessTimeDisplayElement::Trace(blink::Visitor* visitor) {
-  HTMLDivElement::Trace(visitor);
   MediaControlsTouchlessElement::Trace(visitor);
 }
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_time_display_element.h

@@ -11,10 +11,7 @@
 namespace blink {
 
 class MediaControlsTouchlessTimeDisplayElement
-    : public HTMLDivElement,
-      public MediaControlsTouchlessElement {
-  USING_GARBAGE_COLLECTED_MIXIN(MediaControlsTouchlessTimeDisplayElement);
-
+    : public MediaControlsTouchlessElement {
  public:
   explicit MediaControlsTouchlessTimeDisplayElement(
       MediaControlsTouchlessImpl&);

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_timeline_element.cc

@@ -15,8 +15,7 @@ namespace blink {
 
 MediaControlsTouchlessTimelineElement::MediaControlsTouchlessTimelineElement(
     MediaControlsTouchlessImpl& media_controls)
-    : HTMLDivElement(media_controls.GetDocument()),
-      MediaControlsTouchlessElement(media_controls) {
+    : MediaControlsTouchlessElement(media_controls) {
   SetShadowPseudoId(
       AtomicString("-internal-media-controls-touchless-timeline"));
 
@@ -88,7 +87,6 @@ void MediaControlsTouchlessTimelineElement::SetBarWidth(HTMLDivElement* bar,
 void MediaControlsTouchlessTimelineElement::Trace(blink::Visitor* visitor) {
   visitor->Trace(loaded_bar_);
   visitor->Trace(progress_bar_);
-  HTMLDivElement::Trace(visitor);
   MediaControlsTouchlessElement::Trace(visitor);
 }
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_timeline_element.h

@@ -11,10 +11,7 @@
 namespace blink {
 
 class MediaControlsTouchlessTimelineElement
-    : public HTMLDivElement,
-      public MediaControlsTouchlessElement {
-  USING_GARBAGE_COLLECTED_MIXIN(MediaControlsTouchlessTimelineElement);
-
+    : public MediaControlsTouchlessElement {
  public:
   explicit MediaControlsTouchlessTimelineElement(MediaControlsTouchlessImpl&);
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_volume_button_element.cc

@@ -12,15 +12,13 @@ MediaControlsTouchlessVolumeButtonElement::
     MediaControlsTouchlessVolumeButtonElement(
         MediaControlsTouchlessImpl& controls,
         bool up)
-    : HTMLDivElement(controls.GetDocument()),
-      MediaControlsTouchlessElement(controls) {
+    : MediaControlsTouchlessElement(controls) {
   SetShadowPseudoId(AtomicString(
       up ? "-internal-media-controls-touchless-volume-up-button"
          : "-internal-media-controls-touchless-volume-down-button"));
 }
 
 void MediaControlsTouchlessVolumeButtonElement::Trace(blink::Visitor* visitor) {
-  HTMLDivElement::Trace(visitor);
   MediaControlsTouchlessElement::Trace(visitor);
 }
 

third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_volume_button_element.h

@@ -11,10 +11,7 @@
 namespace blink {
 
 class MediaControlsTouchlessVolumeButtonElement
-    : public HTMLDivElement,
-      public MediaControlsTouchlessElement {
-  USING_GARBAGE_COLLECTED_MIXIN(MediaControlsTouchlessVolumeButtonElement);
-
+    : public MediaControlsTouchlessElement {
  public:
   MediaControlsTouchlessVolumeButtonElement(
       MediaControlsTouchlessImpl&,

third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_impl.cc

@@ -22,9 +22,8 @@
 #include "third_party/blink/renderer/modules/media_controls/elements/media_control_elements_helper.h"
 #include "third_party/blink/renderer/modules/media_controls/media_controls_orientation_lock_delegate.h"
 #include "third_party/blink/renderer/modules/media_controls/media_controls_text_track_manager.h"
+#include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_bottom_container_element.h"
 #include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_overlay_element.h"
-#include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_time_display_element.h"
-#include "third_party/blink/renderer/modules/media_controls/touchless/elements/media_controls_touchless_timeline_element.h"
 #include "third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_media_event_listener.h"
 #include "third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_resource_loader.h"
 #include "third_party/blink/renderer/platform/keyboard_codes.h"
@@ -43,12 +42,6 @@ constexpr int kNumberOfSecondsToJumpForTouchless = 10;
 // Amount of volume to change when press up/down arrow.
 constexpr double kVolumeToChangeForTouchless = 0.05;
 
-// Amount of time that media controls are visible.
-constexpr WTF::TimeDelta kTimeToHideMediaControls =
-    TimeDelta::FromMilliseconds(3000);
-
-const char kTransparentCSSClass[] = "transparent";
-
 }  // namespace
 
 enum class MediaControlsTouchlessImpl::ArrowDirection {
@@ -62,16 +55,14 @@ MediaControlsTouchlessImpl::MediaControlsTouchlessImpl(
     HTMLMediaElement& media_element)
     : HTMLDivElement(media_element.GetDocument()),
       MediaControls(media_element),
+      overlay_(nullptr),
+      bottom_container_(nullptr),
       media_event_listener_(
           MakeGarbageCollected<MediaControlsTouchlessMediaEventListener>(
               media_element)),
       text_track_manager_(
           MakeGarbageCollected<MediaControlsTextTrackManager>(media_element)),
-      orientation_lock_delegate_(nullptr),
-      hide_media_controls_timer_(
-          media_element.GetDocument().GetTaskRunner(TaskType::kInternalMedia),
-          this,
-          &MediaControlsTouchlessImpl::HideMediaControlsTimerFired) {
+      orientation_lock_delegate_(nullptr) {
   SetShadowPseudoId(AtomicString("-internal-media-controls-touchless"));
   media_event_listener_->AddObserver(this);
 }
@@ -81,23 +72,19 @@ MediaControlsTouchlessImpl* MediaControlsTouchlessImpl::Create(
     ShadowRoot& shadow_root) {
   MediaControlsTouchlessImpl* controls =
       MakeGarbageCollected<MediaControlsTouchlessImpl>(media_element);
-  MediaControlsTouchlessOverlayElement* overlay_element =
+  controls->overlay_ =
       MakeGarbageCollected<MediaControlsTouchlessOverlayElement>(*controls);
+  controls->bottom_container_ =
+      MakeGarbageCollected<MediaControlsTouchlessBottomContainerElement>(
+          *controls);
 
-  MediaControlsTouchlessTimeDisplayElement* time_display_element =
-      MakeGarbageCollected<MediaControlsTouchlessTimeDisplayElement>(*controls);
-  MediaControlsTouchlessTimelineElement* timeline_element =
-      MakeGarbageCollected<MediaControlsTouchlessTimelineElement>(*controls);
-
-  controls->ParserAppendChild(overlay_element);
-
-  Element* bottom_container = MediaControlElementsHelper::CreateDiv(
-      "-internal-media-controls-touchless-bottom-container", controls);
-  bottom_container->ParserAppendChild(time_display_element);
-  bottom_container->ParserAppendChild(timeline_element);
+  controls->ParserAppendChild(controls->overlay_);
+  controls->ParserAppendChild(controls->bottom_container_);
 
   // Controls start hidden.
-  controls->MakeTransparent();
+  controls->overlay_->MakeTransparent();
+  if (!media_element.paused())
+    controls->bottom_container_->MakeTransparent();
 
   if (RuntimeEnabledFeatures::VideoFullscreenOrientationLockEnabled() &&
       media_element.IsHTMLVideoElement()) {
@@ -135,20 +122,6 @@ void MediaControlsTouchlessImpl::RemovedFrom(ContainerNode& insertion_point) {
     orientation_lock_delegate_->Detach();
 }
 
-void MediaControlsTouchlessImpl::MakeOpaque() {
-  // show controls
-  classList().Remove(kTransparentCSSClass);
-
-  if (hide_media_controls_timer_.IsActive())
-    StopHideMediaControlsTimer();
-  StartHideMediaControlsTimer();
-}
-
-void MediaControlsTouchlessImpl::MakeTransparent() {
-  // hide controls
-  classList().Add(kTransparentCSSClass);
-}
-
 void MediaControlsTouchlessImpl::MaybeShow() {
   RemoveInlineStyleProperty(CSSPropertyID::kDisplay);
 }
@@ -162,28 +135,26 @@ MediaControlsTouchlessImpl::MediaEventListener() const {
   return *media_event_listener_;
 }
 
-void MediaControlsTouchlessImpl::HideMediaControlsTimerFired(TimerBase*) {
-  MakeTransparent();
-}
-
-void MediaControlsTouchlessImpl::StartHideMediaControlsTimer() {
-  hide_media_controls_timer_.StartOneShot(kTimeToHideMediaControls, FROM_HERE);
+void MediaControlsTouchlessImpl::OnFocusIn() {
+  if (MediaElement().ShouldShowControls()) {
+    overlay_->MakeOpaque(true);
+    bottom_container_->MakeOpaque(!MediaElement().paused());
+  }
 }
 
-void MediaControlsTouchlessImpl::StopHideMediaControlsTimer() {
-  hide_media_controls_timer_.Stop();
+void MediaControlsTouchlessImpl::OnPlay() {
+  bottom_container_->MakeOpaque(true);
 }
 
-void MediaControlsTouchlessImpl::OnFocusIn() {
-  if (MediaElement().ShouldShowControls())
-    MakeOpaque();
+void MediaControlsTouchlessImpl::OnPause() {
+  bottom_container_->MakeOpaque(false);
 }
 
 void MediaControlsTouchlessImpl::OnKeyDown(KeyboardEvent* event) {
   bool handled = true;
   switch (event->keyCode()) {
     case VKEY_RETURN:
-      MakeOpaque();
+      overlay_->MakeOpaque(true);
       MediaElement().TogglePlayState();
       break;
     case VKEY_LEFT:
@@ -364,10 +335,14 @@ void MediaControlsTouchlessImpl::HandleBottomButtonPress() {
 }
 
 void MediaControlsTouchlessImpl::HandleLeftButtonPress() {
+  if (!MediaElement().paused())
+    bottom_container_->MakeOpaque(true);
   MaybeJump(kNumberOfSecondsToJumpForTouchless * -1);
 }
 
 void MediaControlsTouchlessImpl::HandleRightButtonPress() {
+  if (!MediaElement().paused())
+    bottom_container_->MakeOpaque(true);
   MaybeJump(kNumberOfSecondsToJumpForTouchless);
 }
 
@@ -384,6 +359,8 @@ void MediaControlsTouchlessImpl::MaybeJump(int seconds) {
 }
 
 void MediaControlsTouchlessImpl::Trace(blink::Visitor* visitor) {
+  visitor->Trace(bottom_container_);
+  visitor->Trace(overlay_);
   visitor->Trace(media_event_listener_);
   visitor->Trace(text_track_manager_);
   visitor->Trace(orientation_lock_delegate_);

third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_impl.h

@@ -11,11 +11,12 @@
 #include "third_party/blink/renderer/core/html/media/media_controls.h"
 #include "third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_media_event_listener_observer.h"
 #include "third_party/blink/renderer/modules/modules_export.h"
-#include "third_party/blink/renderer/platform/timer.h"
 
 namespace blink {
 
 class MediaControlsOrientationLockDelegate;
+class MediaControlsTouchlessBottomContainerElement;
+class MediaControlsTouchlessOverlayElement;
 class MediaControlsTouchlessMediaEventListener;
 class MediaControlsTextTrackManager;
 
@@ -54,8 +55,8 @@ class MODULES_EXPORT MediaControlsTouchlessImpl final
   void OnTimeUpdate() override {}
   void OnDurationChange() override {}
   void OnLoadingProgress() override {}
-  void OnPlay() override {}
-  void OnPause() override {}
+  void OnPlay() override;
+  void OnPause() override;
   void OnError() override {}
   void OnLoadedMetadata() override {}
   void OnKeyPress(KeyboardEvent* event) override {}
@@ -86,12 +87,6 @@ class MODULES_EXPORT MediaControlsTouchlessImpl final
   // Node
   bool IsMediaControls() const override { return true; }
 
-  void MakeOpaque();
-  void MakeTransparent();
-  void HideMediaControlsTimerFired(TimerBase*);
-  void StartHideMediaControlsTimer();
-  void StopHideMediaControlsTimer();
-
   void EnsureMediaControlsMenuHost();
   mojom::blink::VideoStatePtr GetVideoState();
   WTF::Vector<mojom::blink::TextTrackMetadataPtr> GetTextTracks();
@@ -99,12 +94,13 @@ class MODULES_EXPORT MediaControlsTouchlessImpl final
   void OnMediaMenuResult(mojom::blink::MenuResponsePtr);
   void OnMediaControlsMenuHostConnectionError();
 
+  Member<MediaControlsTouchlessOverlayElement> overlay_;
+  Member<MediaControlsTouchlessBottomContainerElement> bottom_container_;
+
   Member<MediaControlsTouchlessMediaEventListener> media_event_listener_;
   Member<MediaControlsTextTrackManager> text_track_manager_;
   Member<MediaControlsOrientationLockDelegate> orientation_lock_delegate_;
 
-  TaskRunnerTimer<MediaControlsTouchlessImpl> hide_media_controls_timer_;
-
   mojom::blink::MediaControlsMenuHostPtr media_controls_host_;
 
   DISALLOW_COPY_AND_ASSIGN(MediaControlsTouchlessImpl);

third_party/blink/renderer/modules/media_controls/touchless/media_controls_touchless_impl_test.cc

@@ -108,8 +108,8 @@ class MediaControlsTouchlessImplTest : public PageTestBase {
     WebMediaPlayer()->buffered_.Assign(&time_range, 1);
   }
 
-  bool IsControlsVisible() {
-    return !MediaControls().classList().contains("transparent");
+  bool IsControlsVisible(Element* element) {
+    return !element->classList().contains("transparent");
   }
 
   Element* GetControlByShadowPseudoId(const char* shadow_pseudo_id) {
@@ -293,37 +293,85 @@ TEST_F(MediaControlsTouchlessImplTest, TimeDisplay) {
   EXPECT_EQ(time_display->InnerHTMLAsString(), expect_display);
 }
 
-TEST_F(MediaControlsTouchlessImplTestWithMockScheduler, ControlsShowAndHide) {
-  // Controls should starts hidden.
-  ASSERT_FALSE(IsControlsVisible());
+TEST_F(MediaControlsTouchlessImplTestWithMockScheduler,
+       MidOverlayHideTimerTest) {
+  Element* overlay =
+      GetControlByShadowPseudoId("-internal-media-controls-touchless-overlay");
+  ASSERT_NE(nullptr, overlay);
 
-  // Controls should show when focus in.
+  // Overlay should starts hidden.
+  EXPECT_FALSE(IsControlsVisible(overlay));
+
+  // Overlay should show when focus in.
   MediaElement().SetFocused(true, WebFocusType::kWebFocusTypeNone);
   MediaElement().DispatchEvent(*Event::Create(event_type_names::kFocusin));
-  ASSERT_TRUE(IsControlsVisible());
+  EXPECT_TRUE(IsControlsVisible(overlay));
 
-  // Controls should hide after 3 seconds.
+  // Overlay should hide after 3 seconds.
   platform()->RunForPeriodSeconds(2.99);
-  ASSERT_TRUE(IsControlsVisible());
+  EXPECT_TRUE(IsControlsVisible(overlay));
   platform()->RunForPeriodSeconds(0.01);
-  ASSERT_FALSE(IsControlsVisible());
+  EXPECT_FALSE(IsControlsVisible(overlay));
 
-  // Controls should show upon pressing return key.
+  // Overlay should show upon pressing return key.
   SimulateKeydownEvent(MediaElement(), VKEY_RETURN);
-  ASSERT_TRUE(IsControlsVisible());
-
-  // Controls should not disappear after 2 seconds.
-  platform()->RunForPeriodSeconds(2);
-  ASSERT_TRUE(IsControlsVisible());
+  EXPECT_TRUE(IsControlsVisible(overlay));
 
-  // Pressing return key again should reset hiding timer.
-  SimulateKeydownEvent(MediaElement(), VKEY_RETURN);
+  // Overlay should not disappear after 2 seconds.
   platform()->RunForPeriodSeconds(2);
-  ASSERT_TRUE(IsControlsVisible());
+  EXPECT_TRUE(IsControlsVisible(overlay));
 
-  // Controls should hide 3 seconds after last key press.
+  // Overlay should hide 3 seconds after last key press.
   platform()->RunForPeriodSeconds(1);
-  ASSERT_FALSE(IsControlsVisible());
+  EXPECT_FALSE(IsControlsVisible(overlay));
+}
+
+TEST_F(MediaControlsTouchlessImplTestWithMockScheduler,
+       BottomContainerHideTimerTest) {
+  Element* bottom_container = GetControlByShadowPseudoId(
+      "-internal-media-controls-touchless-bottom-container");
+  ASSERT_NE(nullptr, bottom_container);
+
+  // Bottom container starts opaque since video is paused.
+  EXPECT_TRUE(IsControlsVisible(bottom_container));
+
+  MediaElement().Play();
+  platform()->RunForPeriodSeconds(3);
+  EXPECT_FALSE(IsControlsVisible(bottom_container));
+
+  MediaElement().pause();
+
+  // Pause after play should stop hide timer.
+  MediaElement().Play();
+  MediaElement().pause();
+  platform()->RunForPeriodSeconds(5);
+  EXPECT_TRUE(IsControlsVisible(bottom_container));
+
+  MediaElement().Play();
+  platform()->RunForPeriodSeconds(5);
+  EXPECT_FALSE(IsControlsVisible(bottom_container));
+
+  // Bottom container should show after focus in.
+  MediaElement().SetFocused(true, WebFocusType::kWebFocusTypeNone);
+  MediaElement().DispatchEvent(*Event::Create(event_type_names::kFocusin));
+  EXPECT_TRUE(IsControlsVisible(bottom_container));
+
+  // Hide after 3 seconds
+  platform()->RunForPeriodSeconds(3);
+  EXPECT_FALSE(IsControlsVisible(bottom_container));
+
+  // Bottom container should show after pressing right/left arrow.
+  SimulateKeydownEvent(MediaElement(), VK_RIGHT);
+  EXPECT_TRUE(IsControlsVisible(bottom_container));
+
+  platform()->RunForPeriodSeconds(3);
+  EXPECT_FALSE(IsControlsVisible(bottom_container));
+
+  SimulateKeydownEvent(MediaElement(), VK_LEFT);
+  EXPECT_TRUE(IsControlsVisible(bottom_container));
+
+  platform()->RunForPeriodSeconds(3);
+  EXPECT_FALSE(IsControlsVisible(bottom_container));
 }
 
 }  // namespace

third_party/blink/renderer/modules/media_controls/touchless/resources/mediaControlsTouchless.css

@@ -18,11 +18,6 @@ video::-internal-media-controls-touchless {
   margin-bottom: env(safe-area-inset-bottom);
 }
 
-video::-internal-media-controls-touchless.transparent {
-  opacity: 0;
-  transition: opacity .5s;
-}
-
 video::-internal-media-controls-touchless-overlay {
   width: 104px;
   height: 104px;
@@ -31,6 +26,7 @@ video::-internal-media-controls-touchless-overlay {
   background-position: center;
   background-repeat: no-repeat;
   position: absolute;
+  opacity: 1;
   z-index: 1;
   margin: auto;
   top: 0;
@@ -39,6 +35,11 @@ video::-internal-media-controls-touchless-overlay {
   right: 0;
 }
 
+video::-internal-media-controls-touchless-overlay.transparent {
+  opacity: 0;
+  transition: opacity .5s;
+}
+
 video::-internal-media-controls-touchless-volume-up-button {
   width: 30px;
   height: 30px;
@@ -110,11 +111,16 @@ video::-internal-media-controls-touchless-bottom-container {
   height: 100%;
   width: 100%;
   z-index: 0;
-  background-size: auto 48px;
 
   background:
     -webkit-image-set(url('gradient_bg.png') 1x)
     repeat-x bottom left;
+  background-size: auto 48px;
+}
+
+video::-internal-media-controls-touchless-bottom-container.transparent {
+  opacity: 0;
+  transition: opacity .5s;
 }
 
 video::-internal-media-controls-touchless-time-display {