Since range elements are special input elements, they must reflect user
interaction, so when the user hovers over the range element, the cursor must be a pointer.
Issue #3220
This has been secretly in our demo on appspot since April 2019, but it
was being inserted on-the-fly by our appspot code on the server-side.
Now that we are transitioning all of our infrastructure into GitHub
Actions, we're simplifying things by making this public and adding it
to the repo for the first time.
Enjoy!
https://shaka-player-demo.appspot.com/demo/#uilang=sjn
The new version requires additional configuration for less syntax, and
has new default rules we were out of compliance with.
I disabled rules about avoiding explicit vendor prefixes (such as
"-webkit") because we are not using any auto-prefixer tools. Other
violations have been fixed:
- kebab-case for element ids
- quotes around URLs
- double quotes instead of single quotes
- disable class selector pattern matching for MDL (external)
- use modern rgb/rgba syntax
- no quotes on font families
- no long-hand when short-hand will do
This brings our NPM audit vulnerabilities from 20 down to 10.
Downgrade less to v3. v4 is failing on macOS for some reason. See
less/less.js#3693
This also makes some less/CSS changes that are useful for future
upgrades:
- wrap all calculations in calc(), which is required in less v4
- remove unneeded @transparent variable
Finally, this fixes an erroneous error message that said "extern
generation failed" instead of "CSS compilation failed".
Closes#3981
First, the positioning of cues was incorrect. We need to explicitly
set all the position attributes when we position elements with the
"absolute" position.
Second, if we position a text <span> manually, the background will fill
the whole region. So to keep the background wrapping the text, we need
to add another <span> for the text.
Third, the background and font color should not be set on every <span>
element since it won't allow parent cues to set the inherited value.
So this moves the defaults to the top-level text element and allows
parent cue elements to override this. It also would make app CSS
easier to override. Because background color isn't inherited through
CSS, the default is set in JavaScript instead.
Fixes#3521Fixes#3600Closes#3713
Change-Id: I45fc88dcac4a0a062e1474087f24c80d98eef619
This uses flexbox once again to get proper positioning of cues. To
compensate for the issues that originally made us remove flexbox, this
adds a wrapper span inside the flexbox element.
Summary of screenshot changes:
- slight change to background sizing
- ui-basic-cue
- ui-cue-with-controls
- ui-duplicate-cues
- ui-end-time-edge-case
- ui-flat-cue-bg
- ui-two-basic-cues
- background fills block with literal newline in text
- ui-cue-with-newline
- region anchored without padding
- ui-region-position
- new screenshots
- *-nested-cues-with-linebreak
- *-region-with-display-alignment (regression test for this issue)
Closes#3379
Change-Id: I8c678721d96662e0f8940cda12df4f5b5e5baf1e
'stroke-dasharray' and 'stroke-dashoffset' are not supported in IE11,
and we deleted those styles for spinner by accident in PR #3309.
Adding them back to fix the Spinner display.
Change-Id: I5127b1d05d25b9869b7e29f9daf8ce1c6f9b55f2
It turns out that `-webkit-focus-ring-color` is no longer working
across platforms in Chrome. It works on Mac, but not anywhere else.
Removing it creates a consistent focus outline across browsers and
platforms. It was only being used on Safari and Chrome anyway,
neither of which seem to need it.
Closes#2863
Change-Id: Ic6df1a10f14a0907558595e53bef80ac349e6b9d
Using flex layout causes problems with the positioning of elements and
causes the borders to be wrapped over the whole parent. This changes
to use block/inline layouts instead.
This also removes any padding around the cue lines, hugging the
background around the text. This is a bit more consistent with other
renderers by having a gap between lines. This also changes a bit of
the nested cues padding.
The deeply nested cue test is different because the `background-color`
CSS attribute isn't inherited, so the default in our CSS sets the
background to black.
Fixes#3013
Change-Id: I3e4b63b1b4de1f12e69fce2460d142e0a69bfcd9
Click events in an ad were previously received by shaka-text-container
and shaka-controls-container. shaka-text-container now ignores all
pointer events, because there is nothing interactive in this layer.
shaka-controls-container ignores pointer events only while an ad is
showing, with the exception that the bottom controls are still
clickable even during an ad.
Closes#3053
Change-Id: I07834c75c29315dc76afbdf886517437be5b85ff
Previously, the client-side ad container was put inside the controls
container, which was cleared when the UI was configured. This meant
that re-configuring the UI made client-side ads go away, basically.
This moves client-side ads to go into their own container, which
is never re-made or uprooted, even when the DOM is recreated, in
order to not break the IMA SDK.
This has the side-effect of fixing a bug where client-side ads were
not always cleared upon loading a new asset, and could show up
unexpectedly in future playbacks.
Fixes#2869Fixes#2943
Change-Id: I3cf67b0b278764c10c6ff2f678316dc9cc85929e
Without listing them individually, the controls CSS now applies the
correct styles to all submenus. This makes it easier for apps to
subclass SettingsMenu without needing to add explicit CSS to achieve
the same styling as the built-in menus.
Closes#2925
Change-Id: Ie1e1536dc4806576d7ed22dfc8feb17abaa72152
Previously, StyleLint had a problem that was preventing us from
using their library in our buildbot tests. To get around this, we
made a custom branch of their library.
Recently, they almost fixed the issue. There's just one minor change
left before we can use their master branch. In the meantime, this
CL changes Shaka Player to use a new fork of StyleLint that is based
on their current master branch, and makes the LESS modifications
that the newest versions ask for.
Change-Id: I78624b3d366e6c22c577ca6707f5a3311f8e808e
Changes:
- Update comments on shaka.extern.Cue to clarify how fields should be
used and interpreted
- Add support for arbitrarily-deep nested cues in both text
displayers
- Stop adding whitespace between nested cues (parsers should emit
exactly what they want displayed) and update tests to match
- Remove obscure special cases from UITextDisplayer styles and make
styling consistent with the Cue docs
- Fix rendering for single line break (cue.spacer) elements
- Add a layout test for deeply-nested cues
- Remove reundant and identical set of UITextDisplayer unit tests
- Update layout test for backgrounds to reflect the clarified rules
- Update remaining UITextDisplayer unit tests to look for div instead
of span for top-level cues
- Updates screenshots for region-position, which changed slightly in
appearance due to changes in whitespace rules
- Updates screenshots for nested-cue-bg, to reflect simplified rules
for applying backgrounds
TODO:
- Temporarily breaks TTML output until the TTML parser can be updated
to conform to the clarified rules in the Cue docs
- Still more special cases around regions in UITextDisplayer
- Rendering for multiple line break elements in UITextDisplayer
- Support bold, italic, and underline in SimpleTextDisplayer
- None of the displayers will honor the wrapLine field yet
Closes#2762 (extra vertical space seen for line breaks)
Issue #2761 (deeply-nested cues)
Change-Id: I02ac8213e4de67a65fb38d596d2c59536f3722ee
TTML nested cues are meant to be displayed horizontally as inline
elements. This fixes the rendering of these nested cues in both
SimpleTextDisplayer and UITextDisplayer.
In UITextDisplayer, the styles have been adjusted to lay out the
nested cues horizontally rather than vertically.
In SimpleTextDisplayer, the nested cues were being displayed as if
they were top-level cues. This change concatenates the nested cues
into a single cue displayed in the browser.
This also improves comments on the poorly-named "spacer" property,
which represents a line break in TTML.
This fixes the rendering of "spacer" in SimpleTextDisplayer by
inserting an actual newline character into the collapsed nested cues.
Finally, this fixes and clarifies names used internally in
UITextDisplayer. For example, there is a difference between a nested
cue and leaf cue. A nested cue and a top-level cue without nested
cues are both "leaf" cues, but a top-level cue is never a "nested"
cue, since it is at the top level. The conflation of these names
before this fix made it difficult to understand and fix the code in
the first place.
Closes#2760
Change-Id: I89633761d12704e253371d17e2e786c5b2ed67a7
Apparently, IMA SDK adds their ad UI differently on SS vs
CS ad streams. The solution we devised for CS ad experience
that combined our UI with the IMA's native ad UI turned out
not to work for the SS experience - our UI was being obstructed
by the IMA's UI.
This change adds a new container for the SS IMA UI that allows
our own UI to stay visible.
Issue #2592.
Change-Id: Iedb24beeb8d6f777b1fd7f4155c591350432ec78
This corrects/normalizes the license headers in CSS and LESS files.
The LESS tool respects the same "/*!" syntax for forcing the inclusion
of a license header, but will not dedup these licenses. So the LESS
files generally will not use this syntax. Instead, the build system
prepends a license header after compilation.
The exception is for our SVG spinner, which is based on third-party
CSS from codepen. The copyright header for this is forced into the
output to give proper credit to the original author.
Issue #2638
Change-Id: I4c58e2b082f2d5e550a6f0a30feaaf9ebf82a53a
We depended on this font size being set in the font server's CSS, but
did not realize we had this implicit dependency. This makes our
desired font size explicit.
This protects us from applications which happen to use the same font
and class name with a different default size. Note that applications
which intend to change our icon size can still do so explicitly in
their own styles. This is meant only to protect against accidental
conflicts.
Closes#2633
Change-Id: I0a2993c8b2e39596b47eb59b7e1a4a6373633c0b
When we changed the font for the icons without changing the class
name, we lost upstream styles from the font server. This was not
obvious in our demo, but was more obvious in other apps where the font
size was different.
By using the same class name as used by the font server, we get those
upstream styles applied correctly.
Issue #2633
Change-Id: I615c1dfd86e5b9802d03050c5db0154ac196c2ef
Rather than making the gradient 92px tall, make it 15% of the size of
the video container. This is consistent with the size of the controls
and the position of the subtitles when the controls are shown.
In this way, the size of the gradient is now proportional and
responsive to the size of the video container.
This was spotted while developing screenshot-based layout tests using
relatively small containers.
Change-Id: I304d99a26be90b9eefa50dc179b924da15dc601d
We might have misunderstood something the UX team said early on in our
UI efforts, but this element that partially obscures the background is
called a "scrim", not a "skim".
See https://travishorn.com/responsive-scrim-6f286da5b6a5
Change-Id: I483eb38deb9d98b9fc22b45772992029d43a4b65
Previously, we were positioning subtitles relative to the video,
but this lead to problems with subtitles that were manually positioned
(via the line attribute) to be low (85% or lower); they would overlap
with the controls bar, and thus be hidden.
This changes cues to be positioned relative to the text-usable area of
the screen (e.g. the space above the controls bar). In addition, the
less values have been changed to not trim cues that extend out of the
container, so that if they do overlap with the controls, they aren't
clipped in an ugly way.
Examining the Chrome native controls, this appears to be closer to how
they render captions.
Fixes#2524
Change-Id: I4500b8f637f3f43f48d019d14ef527e75d960fec
According to the agreement with the IMA team, we will
no longer hide their UI during ads. Instead we will
incorporate their elements into our layout.
(Some of the elements they expose are legally required
or business critical for partners for certain types of
ads).
This change replaces our skip button with the IMA one
and tweaks our layout to make it fit better.
We are keeping our ad counter and the 'Ad X of Y'
element.
Our skip button will stay in the library, and we will
use it for other (non IMA) ad integrations.
Change-Id: I648c6c65a34607685a409a264c2a03d74cc4d461
Some of the files still used the old long license. This increased the
size of the compiled bundle since it had both versions.
Change-Id: Iec137f71547f91369a563145f870eb26ddc96a96
- Drop unused classes
- Drop shaka-displayed in favor of shaka-hidden
- Move shaka-hidden to general.less and fix specificity issue
Change-Id: I9c91da637023607cccd6e7602d9b9ef30994dd82
This works around google/material-design-icons#958 by switching from
the default "solid" style to the "rounded" icon style.
Change-Id: Iea29ed3732d252bd2d089c802c478a97cbda163d
To match Chrome native controls, the default controls for desktop will
now contain the small play/pause button, but default controls for
mobile will now contain the large play/pause button. Mobile controls
will also not contain the volume button.
This removes several CSS-based versions of these things in preference
for configuration.
Apps can still override the defaults, no matter the platform. Apps
can also make their own mobile-based config choices in JS by checking
video.ui.isMobile() or change styles in CSS using ".shaka-mobile".
Change-Id: I4fb8391f7f3727c7086cd3bca2b1d5c93bd9e856
This is now based solely on container attributes and CSS, as it used
to be, removing the need for a list of controls to hide in JavaScript.
This also does away with the "shaka-fade-out-on-mouse-out" CSS class.
Change-Id: Ic2f77c5b2f0691023279d9c99cfe3519f4b26cdd
This was broken during recent ads work, when we refactored how
controls are shown/hidden in CSS. When we transitioned from
showing/hiding the container to showing/hiding individual controls,
the override behavior for casting was lost. This restores it.
Change-Id: I81df8e4d3ff14ded0fe431f5f1b66fa821610e02
After my CL changing the fade out controls logic, the
black gradient at the bottom of the controls stayed
visible when all other controls faded out. This
change fixes that.
Change-Id: Ieb3d8980c2ddf7fde3c3fdcb6fc1e530a743b77f
Álvaro Velad Galván
Joey Parrish
Jacob Trimble
Nico
Joey Parrish
Michelle Zhuo
mariocynicys
Amila Sampath
Theodore Abshire
Sandra Lokshina