[Media Controls] audio controls

Add audio controls on touchless devices

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

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

@@ -98,7 +98,7 @@ MediaControlsTouchlessImpl* MediaControlsTouchlessImpl::Create(
           *controls);
 
   MediaControlElementsHelper::CreateDiv(
-      "-internal-media-controls-touchless-error-info", controls);
+      "-internal-media-controls-touchless-info", controls);
 
   controls->ParserAppendChild(controls->bottom_container_);
   controls->ParserAppendChild(controls->overlay_);

third_party/blink/renderer/modules/media_controls/touchless/resources/ic_music_note.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3l.01 10.55c-.59-.34-1.27-.55-2-.55C7.79 13 6 14.79 6 17s1.79 4 4.01 4S14 19.21 14 17V7h4V3h-6z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>
\ No newline at end of file

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

@@ -2,6 +2,12 @@
    Use of this source code is governed by a BSD-style license that can be
    found in the LICENSE file. */
 
+audio {
+  width: 300px;
+  height: 180px;
+}
+
+audio::-webkit-media-controls-touchless,
 video::-webkit-media-controls-touchless {
   width: inherit;
   height: inherit;
@@ -18,11 +24,13 @@ video::-webkit-media-controls-touchless {
   margin-bottom: env(safe-area-inset-bottom);
 }
 
+audio::-webkit-media-controls-touchless,
 video::-webkit-media-controls-touchless.use-default-poster {
   background: #333;
 }
 
-video::-internal-media-controls-touchless-error-info {
+audio::-internal-media-controls-touchless-info,
+video::-internal-media-controls-touchless-info {
   display: none;
   height: 72px;
   width: 72px;
@@ -30,7 +38,6 @@ video::-internal-media-controls-touchless-error-info {
   opacity: 0.3;
   background-color: rgba(255, 255, 255, 0.9);
   background-size: 50%;
-  background-image: -webkit-image-set(url(ic_no_source.svg) 1x);
   background-position: center;
   background-repeat: no-repeat;
   position: absolute;
@@ -41,10 +48,18 @@ video::-internal-media-controls-touchless-error-info {
   right: 0;
 }
 
-video::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-error-info"] {
+audio::-internal-media-controls-touchless-info {
+  background-image: -webkit-image-set(url(ic_music_note.svg) 1x);
   display: block;
 }
 
+audio::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-info"],
+video::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-info"] {
+  background-image: -webkit-image-set(url(ic_no_source.svg) 1x);
+  display: block;
+}
+
+audio::-internal-media-controls-touchless-overlay,
 video::-internal-media-controls-touchless-overlay {
   width: 104px;
   height: 104px;
@@ -62,19 +77,23 @@ video::-internal-media-controls-touchless-overlay {
   right: 0;
 }
 
+audio::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-overlay"],
 video::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-overlay"] {
   display: none;
 }
 
+audio::-internal-media-controls-touchless-overlay.transparent,
 video::-internal-media-controls-touchless-overlay.transparent {
   opacity: 0;
   transition: opacity .5s;
 }
 
+audio::-internal-media-controls-touchless-overlay.transparent-immediate,
 video::-internal-media-controls-touchless-overlay.transparent-immediate {
   opacity: 0;
 }
 
+audio::-internal-media-controls-touchless-volume-up-button,
 video::-internal-media-controls-touchless-volume-up-button {
   width: 30px;
   height: 30px;
@@ -85,7 +104,7 @@ video::-internal-media-controls-touchless-volume-up-button {
   background-repeat: no-repeat;
 }
 
-
+audio::-internal-media-controls-touchless-seek-backward-button,
 video::-internal-media-controls-touchless-seek-backward-button {
   width: 30px;
   height: 30px;
@@ -97,7 +116,7 @@ video::-internal-media-controls-touchless-seek-backward-button {
   background-repeat: no-repeat;
 }
 
-
+audio::-internal-media-controls-touchless-play-button,
 video::-internal-media-controls-touchless-play-button {
   width: 44px;
   height: 44px;
@@ -107,14 +126,17 @@ video::-internal-media-controls-touchless-play-button {
   float: left;
 }
 
+audio::-internal-media-controls-touchless-play-button.playing,
 video::-internal-media-controls-touchless-play-button.playing {
   background-image: -webkit-image-set(url(ic_pause.svg) 1x);
 }
 
+audio::-internal-media-controls-touchless-play-button.paused,
 video::-internal-media-controls-touchless-play-button.paused {
   background-image: -webkit-image-set(url(ic_play_arrow.svg) 1x);
 }
 
+audio::-internal-media-controls-touchless-seek-forward-button,
 video::-internal-media-controls-touchless-seek-forward-button {
   width: 30px;
   height: 30px;
@@ -126,6 +148,7 @@ video::-internal-media-controls-touchless-seek-forward-button {
   background-repeat: no-repeat;
 }
 
+audio::-internal-media-controls-touchless-volume-down-button,
 video::-internal-media-controls-touchless-volume-down-button {
   width: 30px;
   height: 30px;
@@ -138,6 +161,7 @@ video::-internal-media-controls-touchless-volume-down-button {
   background-repeat: no-repeat;
 }
 
+audio::-internal-media-controls-touchless-bottom-container,
 video::-internal-media-controls-touchless-bottom-container {
   position: absolute;
   display: flex;
@@ -153,11 +177,13 @@ video::-internal-media-controls-touchless-bottom-container {
   background-size: auto 48px;
 }
 
+audio::-internal-media-controls-touchless-bottom-container.transparent,
 video::-internal-media-controls-touchless-bottom-container.transparent {
   opacity: 0;
   transition: opacity .5s;
 }
 
+audio::-internal-media-controls-touchless-time-display,
 video::-internal-media-controls-touchless-time-display {
   color: #ffffff;
   font-family: Roboto-Regular, Roboto, sans-serif;
@@ -168,6 +194,7 @@ video::-internal-media-controls-touchless-time-display {
   padding-bottom: 8px;
 }
 
+audio::-internal-media-controls-touchless-timeline,
 video::-internal-media-controls-touchless-timeline {
   width: 100%;
   bottom: auto;
@@ -175,6 +202,7 @@ video::-internal-media-controls-touchless-timeline {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
+audio::-internal-media-controls-touchless-timeline-loaded,
 video::-internal-media-controls-touchless-timeline-loaded {
   height: 100%;
   width: 0; /* We are using style attribute to override this. */
@@ -182,6 +210,7 @@ video::-internal-media-controls-touchless-timeline-loaded {
   background-color: rgba(255, 255, 255, 0.54);
 }
 
+audio::-internal-media-controls-touchless-timeline-progress,
 video::-internal-media-controls-touchless-timeline-progress {
   height: 100%;
   width: 0; /* We are using style attribute to override this. */
@@ -189,6 +218,7 @@ video::-internal-media-controls-touchless-timeline-progress {
   background-color: rgba(255, 255, 255, 1.0);
 }
 
+audio::-internal-media-controls-touchless-volume-container,
 video::-internal-media-controls-touchless-volume-container {
   width: 44px;
   max-height: 152px;
@@ -207,15 +237,18 @@ video::-internal-media-controls-touchless-volume-container {
   justify-content: flex-end;
 }
 
+audio::-internal-media-controls-touchless-volume-container.transparent,
 video::-internal-media-controls-touchless-volume-container.transparent {
   opacity: 0;
   transition: opacity .5s;
 }
 
+audio::-internal-media-controls-touchless-volume-container.transparent-immediate,
 video::-internal-media-controls-touchless-volume-container.transparent-immediate {
   opacity: 0;
 }
 
+audio::-internal-media-controls-touchless-volume-bar-background,
 video::-internal-media-controls-touchless-volume-bar-background {
   width: 4px;
   margin-left: 20px;
@@ -229,15 +262,18 @@ video::-internal-media-controls-touchless-volume-bar-background {
   justify-content: flex-end;
 }
 
+audio::-webkit-media-controls-touchless.inline [pseudo="-internal-media-controls-touchless-volume-bar-background"],
 video::-webkit-media-controls-touchless.inline [pseudo="-internal-media-controls-touchless-volume-bar-background"] {
   margin-bottom: 12px;
 }
 
+audio::-internal-media-controls-touchless-volume-bar,
 video::-internal-media-controls-touchless-volume-bar {
   background-color: #FFFFFF;
   border-radius: 2px;
 }
 
+audio::-internal-media-controls-touchless-volume-icon,
 video::-internal-media-controls-touchless-volume-icon {
   width: 24px;
   height: 24px;
@@ -247,10 +283,12 @@ video::-internal-media-controls-touchless-volume-icon {
   background-image: -webkit-image-set(url(ic_volume_on.svg) 1x);
 }
 
+audio::-internal-media-controls-touchless-volume-icon.muted,
 video::-internal-media-controls-touchless-volume-icon.muted {
   background-image: -webkit-image-set(url(ic_volume_off.svg) 1x);
 }
 
+audio::-webkit-media-controls-touchless.inline div[pseudo="-internal-media-controls-touchless-volume-icon" i],
 video::-webkit-media-controls-touchless.inline div[pseudo="-internal-media-controls-touchless-volume-icon" i] {
   display: none;
 }