New issue
Advanced search Search tips

Issue 816960 link

Starred by 1 user

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Feature


Participants' hotlists:
Modern-Media-Controls


Sign in to add a comment

Modern Media Controls: Make unloaded timeline completely transparent

Project Member Reported by steimel@chromium.org, Feb 27 2018

Issue description

For modern media controls, the unloaded segment of the timeline should be completely transparent (even cutting through the scrim). See https://docs.google.com/presentation/d/1Xwu6nvCoxEIjuIdGYt9DRPBHqEX3QQkpQluHcJazCsE/edit?ts=5a8f17b2#slide=id.g31148197c4_0_2

The difficulty here is that with the scrim the way it is, we can't cut through it via CSS. We may be able to split the scrim into multiple pieces (above and below the timeline) to accomplish this
 
re: css complexity, LMK if you need specs for the individual pieces. (the only detail I can think to call out is that the scrubber bar should be totally rounded).
Labels: -Pri-3 Pri-2
Cc: beccahughes@chromium.org
+becca for visibility since she had some ideas for implementation tactics 
This is one way it can be done:

For the scrim background we can have the timeline cut out of the background (e.g. example scrim but 1px wide and repeated).

Then we can remove the left and right padding on the timeline element and hide overflow using CSS. Then to the segmented track element add a border the size of the left and right padding using just the gradient at the edge and repeated. Then round the edges on the segmented track to create the rounded effect and since we know the width of the blue area extend the border past this (this will hide the outer rounded edge of the border and any overflow will be trimmed by the timeline element having overflow hidden).
with blue box.png
213 KB View Download
example scrim.png
6.0 KB View Download

Sign in to add a comment