Commit f38cfe3c authored by Jennifer Apacible's avatar Jennifer Apacible Committed by Commit Bot

[Media] Clean up interstitial CSS.

Only one interstitial (of media remoting and picture in picture) will
be shown at a time. This change renames IDs for elements in the
interstitial element with the same styling.

This change also pulls out the CSS into a separate file, per TODO.

Expected further work here includes some more styling updates with
an interstitial icon for picture in picture.

BUG: 805516
Change-Id: I6c2151f2166b4dbbf2aaa0be83f8492369008a11
Reviewed-on: https://chromium-review.googlesource.com/890025Reviewed-by: default avatarMounir Lamouri (slow) <mlamouri@chromium.org>
Reviewed-by: default avatarXiangjun Zhang <xjz@chromium.org>
Commit-Queue: apacible <apacible@chromium.org>
Cr-Commit-Position: refs/heads/master@{#532917}
parent 100173ff
...@@ -331,7 +331,7 @@ function mediaControlsOverlayPlayButtonInternal(videoElement) { ...@@ -331,7 +331,7 @@ function mediaControlsOverlayPlayButtonInternal(videoElement) {
} }
function pictureInPictureInterstitial(videoElement) { function pictureInPictureInterstitial(videoElement) {
var controlID = '-internal-picture-in-picture-interstitial'; var controlID = '-internal-picture-in-picture-message';
var interstitial = getElementByPseudoId(window.internals.shadowRoot(videoElement).firstChild, controlID); var interstitial = getElementByPseudoId(window.internals.shadowRoot(videoElement).firstChild, controlID);
if (!interstitial) if (!interstitial)
...@@ -340,7 +340,7 @@ function pictureInPictureInterstitial(videoElement) { ...@@ -340,7 +340,7 @@ function pictureInPictureInterstitial(videoElement) {
} }
function checkPictureInPictureInterstitialDoesNotExist(videoElement) { function checkPictureInPictureInterstitialDoesNotExist(videoElement) {
var controlID = '-internal-picture-in-picture-interstitial'; var controlID = '-internal-picture-in-picture-message';
var interstitial = getElementByPseudoId(internals.oldestShadowRoot(videoElement), controlID); var interstitial = getElementByPseudoId(internals.oldestShadowRoot(videoElement), controlID);
if (interstitial) if (interstitial)
......
...@@ -29,10 +29,10 @@ MediaRemotingInterstitial::MediaRemotingInterstitial( ...@@ -29,10 +29,10 @@ MediaRemotingInterstitial::MediaRemotingInterstitial(
this, this,
&MediaRemotingInterstitial::ToggleInterstitialTimerFired), &MediaRemotingInterstitial::ToggleInterstitialTimerFired),
video_element_(&videoElement) { video_element_(&videoElement) {
SetShadowPseudoId(AtomicString("-internal-media-remoting-interstitial")); SetShadowPseudoId(AtomicString("-internal-media-interstitial"));
background_image_ = HTMLImageElement::Create(GetDocument()); background_image_ = HTMLImageElement::Create(GetDocument());
background_image_->SetShadowPseudoId( background_image_->SetShadowPseudoId(
AtomicString("-internal-media-remoting-background-image")); AtomicString("-internal-media-interstitial-background-image"));
background_image_->SetSrc(videoElement.getAttribute(HTMLNames::posterAttr)); background_image_->SetSrc(videoElement.getAttribute(HTMLNames::posterAttr));
AppendChild(background_image_); AppendChild(background_image_);
......
...@@ -27,10 +27,10 @@ PictureInPictureInterstitial::PictureInPictureInterstitial( ...@@ -27,10 +27,10 @@ PictureInPictureInterstitial::PictureInPictureInterstitial(
this, this,
&PictureInPictureInterstitial::ToggleInterstitialTimerFired), &PictureInPictureInterstitial::ToggleInterstitialTimerFired),
video_element_(&videoElement) { video_element_(&videoElement) {
SetShadowPseudoId(AtomicString("-internal-picture-in-picture-interstitial")); SetShadowPseudoId(AtomicString("-internal-media-interstitial"));
background_image_ = HTMLImageElement::Create(GetDocument()); background_image_ = HTMLImageElement::Create(GetDocument());
background_image_->SetShadowPseudoId( background_image_->SetShadowPseudoId(
AtomicString("-internal-picture-in-picture-background-image")); AtomicString("-internal-media-interstitial-background-image"));
background_image_->SetSrc(videoElement.getAttribute(HTMLNames::posterAttr)); background_image_->SetSrc(videoElement.getAttribute(HTMLNames::posterAttr));
AppendChild(background_image_); AppendChild(background_image_);
......
...@@ -77,6 +77,13 @@ String MediaControlsResourceLoader::GetOverlayPlayStyleSheet() { ...@@ -77,6 +77,13 @@ String MediaControlsResourceLoader::GetOverlayPlayStyleSheet() {
return ResourceBundleHelper::UncompressResourceAsString( return ResourceBundleHelper::UncompressResourceAsString(
IDR_SHADOWSTYLE_MODERN_MEDIA_CONTROLS_OVERLAY_PLAY_CSS); IDR_SHADOWSTYLE_MODERN_MEDIA_CONTROLS_OVERLAY_PLAY_CSS);
}; };
// static
String MediaControlsResourceLoader::GetMediaInterstitialsStyleSheet() {
return ResourceBundleHelper::UncompressResourceAsString(
IDR_UASTYLE_MEDIA_INTERSTITIALS_CSS);
};
// Re-enable the warnings. // Re-enable the warnings.
#if defined(OS_WIN) #if defined(OS_WIN)
#pragma warning(default : 4068) #pragma warning(default : 4068)
...@@ -85,9 +92,11 @@ String MediaControlsResourceLoader::GetOverlayPlayStyleSheet() { ...@@ -85,9 +92,11 @@ String MediaControlsResourceLoader::GetOverlayPlayStyleSheet() {
#endif #endif
String MediaControlsResourceLoader::GetUAStyleSheet() { String MediaControlsResourceLoader::GetUAStyleSheet() {
if (ShouldLoadAndroidCSS()) if (ShouldLoadAndroidCSS()) {
return GetMediaControlsCSS() + GetMediaControlsAndroidCSS(); return GetMediaControlsCSS() + GetMediaControlsAndroidCSS() +
return GetMediaControlsCSS(); GetMediaInterstitialsStyleSheet();
}
return GetMediaControlsCSS() + GetMediaInterstitialsStyleSheet();
} }
void MediaControlsResourceLoader::InjectMediaControlsUAStyleSheet() { void MediaControlsResourceLoader::InjectMediaControlsUAStyleSheet() {
......
...@@ -31,6 +31,9 @@ class MediaControlsResourceLoader ...@@ -31,6 +31,9 @@ class MediaControlsResourceLoader
// Returns the overlay play button stylesheet content as a string. // Returns the overlay play button stylesheet content as a string.
static String GetOverlayPlayStyleSheet(); static String GetOverlayPlayStyleSheet();
// Returns the specific stylesheet used for media related interstitials.
static String GetMediaInterstitialsStyleSheet();
String GetUAStyleSheet() override; String GetUAStyleSheet() override;
MediaControlsResourceLoader(); MediaControlsResourceLoader();
......
...@@ -170,101 +170,6 @@ video::-webkit-media-controls-overlay-play-button { ...@@ -170,101 +170,6 @@ video::-webkit-media-controls-overlay-play-button {
padding: 0; padding: 0;
} }
/* TODO(xjz): Move media remoting elements to a separate css file. */
video::-internal-media-remoting-interstitial,
video::-internal-picture-in-picture-interstitial {
width: inherit;
height: inherit;
position: relative;
direction: ltr;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
/* The font size is set to be proportional to the viewport width.
* Specifically, it is 15px for 400px width, and 36px for 1920px width. The
* full math expression is:
* 15px + (36 - 15) * ((100vw - 400px) / (1920 - 400)). */
font-size: calc(9.5px + 1.38vw);
background-color: transparent;
opacity: 0;
transition: opacity .3s ease-in-out;
}
video::-internal-media-remoting-background-image,
video::-internal-picture-in-picture-background-image {
display: flex;
position: absolute;
margin: 0;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: none;
border-width: 0px;
background-color: transparent;
padding: 0;
filter: grayscale(100%) blur(5px) opacity(40%);
}
video::-internal-media-remoting-cast-icon {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/legacy/mediaremoting_cast.png) 1x,
url(default_200_percent/legacy/mediaremoting_cast.png) 2x);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
display: flex;
position: absolute;
margin: 0px;
border-width: 0px;
background-color: transparent;
height: 2.5vw;
width: 3vw;
padding: 0px;
left: calc(50% - 1.5vw);
top: calc(50% - 3vw);
}
video::-internal-media-remoting-cast-text-message,
video::-internal-picture-in-picture-message {
display: inline;
position: absolute;
top: calc(50% + 1vw);
border: none;
color: rgba(255,255,255,.54);
width: 100%;
text-wrap: none;
text-align: center;
background-color: transparent;
font-size: 90%;
font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica;
padding: 0px;
margin: 0px;
}
video::-internal-picture-in-picture-message {
top: calc(50%);
}
video::-internal-media-remoting-toast-message {
display: inline;
position: absolute;
top: 16pt;
border: none;
border-radius: 2pt;
color: rgba(255,255,255, 1);
width: auto;
text-wrap: none;
text-align: center;
background-color: rgba(40, 44, 50, 0.7);
font-size: 90%;
font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica;
padding: 10pt 24pt 10pt 24pt;
margin: 0px;
}
video::-internal-media-controls-overlay-cast-button { video::-internal-media-controls-overlay-cast-button {
-webkit-appearance: none; -webkit-appearance: none;
background-image: -webkit-image-set( background-image: -webkit-image-set(
......
/* Copyright 2018 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. */
video::-internal-media-interstitial {
width: inherit;
height: inherit;
position: relative;
direction: ltr;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
/* The font size is set to be proportional to the viewport width.
* Specifically, it is 15px for 400px width, and 36px for 1920px width.
* The full math expression is:
* 15px + (36 - 15) * ((100vw - 400px) / (1920 - 400)).
*/
font-size: calc(9.5px + 1.38vw);
background-color: transparent;
opacity: 0;
transition: opacity .3s ease-in-out;
}
video::-internal-media-interstitial-background-image {
display: flex;
position: absolute;
margin: 0;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: none;
border-width: 0px;
background-color: transparent;
padding: 0;
filter: grayscale(100%) blur(5px) opacity(40%);
}
video::-internal-media-remoting-cast-icon {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(default_100_percent/legacy/mediaremoting_cast.png) 1x,
url(default_200_percent/legacy/mediaremoting_cast.png) 2x);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
display: flex;
position: absolute;
margin: 0px;
border-width: 0px;
background-color: transparent;
height: 2.5vw;
width: 3vw;
padding: 0px;
left: calc(50% - 1.5vw);
top: calc(50% - 3vw);
}
video::-internal-media-remoting-cast-text-message,
video::-internal-picture-in-picture-message {
display: inline;
position: absolute;
top: calc(50% + 1vw);
border: none;
color: rgba(255,255,255,.54);
width: 100%;
text-wrap: none;
text-align: center;
background-color: transparent;
font-size: 90%;
font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica;
padding: 0px;
margin: 0px;
}
video::-internal-picture-in-picture-message {
top: calc(50%);
}
video::-internal-media-remoting-toast-message {
display: inline;
position: absolute;
top: 16pt;
border: none;
border-radius: 2pt;
color: rgba(255,255,255, 1);
width: auto;
text-wrap: none;
text-align: center;
background-color: rgba(40, 44, 50, 0.7);
font-size: 90%;
font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica;
padding: 10pt 24pt 10pt 24pt;
margin: 0px;
}
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<structures fallback_to_low_resolution="true"> <structures fallback_to_low_resolution="true">
<structure type="chrome_html" name="IDR_UASTYLE_LEGACY_MEDIA_CONTROLS_CSS" file="legacyMediaControls.css" flattenhtml="true" compress="gzip" /> <structure type="chrome_html" name="IDR_UASTYLE_LEGACY_MEDIA_CONTROLS_CSS" file="legacyMediaControls.css" flattenhtml="true" compress="gzip" />
<structure type="chrome_html" name="IDR_UASTYLE_MODERN_MEDIA_CONTROLS_CSS" file="modernMediaControls.css" flattenhtml="true" compress="gzip" /> <structure type="chrome_html" name="IDR_UASTYLE_MODERN_MEDIA_CONTROLS_CSS" file="modernMediaControls.css" flattenhtml="true" compress="gzip" />
<structure type="chrome_html" name="IDR_UASTYLE_MEDIA_INTERSTITIALS_CSS" file="mediaInterstitials.css" flattenhtml="true" compress="gzip" />
<structure type="chrome_html" name="IDR_SHADOWSTYLE_MODERN_MEDIA_CONTROLS_LOADING_CSS" file="modernMediaControls_loading.css" flattenhtml="true" compress="gzip" /> <structure type="chrome_html" name="IDR_SHADOWSTYLE_MODERN_MEDIA_CONTROLS_LOADING_CSS" file="modernMediaControls_loading.css" flattenhtml="true" compress="gzip" />
</structures> </structures>
<includes> <includes>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment