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
This CL changes the way controls fade out on mouseout to make
sure ad controls stay visible even when other controls are not.
Instead of fading everything within the top level controls
container, it's now possible to hide some controls, but
leave the others. Controls that need to fade on mouseout
are tagged with a 'shaka-fade-out-on-mouse-out' class.
To try out the change, make the 'shaka-ad-controls'
div visible and mouse out of the video container.
Everything except for the ad controls should fade.
(Please note that ad controls don't do anything meaningful yet).
Change-Id: I4fcd1b6430df680699980c492ec1d612437a877d
We used to disable both outline and border for mouse
navigation on the UI, which isn't what we actually
want (if a button has border, it should still have
it on mouse nav), but none of out buttons had borders,
so we never noticed.
Now we have a skip ad button that has a border, and this became
apparent.
Change-Id: I5e1bcb696686c76c32042b806c6534d41db36f90
This change adds an ad counter and a skip add
button to the DOM and styles them appropriately.
Please note that they don't work yet!
The elements are hidden for now.
To check them out, remove the 'shaka-hidden'
class from the 'shaka-ad-controls' div.
(data-shaka-player-container -> shaka-ad-controls-container ->
shaka-ad-controls).
Change-Id: I45a33d43abc6b0a023cc77f09abdae94a4cee014
This CL does:
- define CS IMA externs
- define Ad Insertion classes and sctructures
- add a (non-working) skeleton for the Ad UI
- provide a (working) early draft of the CS implementation
This CL does not:
- add any SS logic
- have a working ad UI
- provide a final and complete implementation for the CS logic
- fully follow the finalized Ad Insertion design
Change-Id: I645cdcb3a1d4041792b940c2d6faf011be5eb682
When setting "position: absolute", you should set the "left" and "top"
properties to ensure it is aligned with its parent correctly. IE11
apparently defaulted to aligning next to the video element. This
ensures the spinner is aligned with the play button.
Fixes#2084
Change-Id: I91041813e36dbfd18a00c22af3f3f5d7e7542f40
Also unified CSS/less style based on that.
This does have to use a forked version of stylelint, since there
is a bug (?) in the globbing library they use that causes it to
fail on our buildbot. I found the simplest solution was just to add
an option to disable globbing, a feature we weren't using anyway.
Closes#1867
Change-Id: I9295b01d5b15d060356e314938b64b551b75de6a
In mobile fullscreen mode, the captions font size was relatively big,
and the captions overflowing out of video window got hidden.
This was because:
1. In full screen mode the font size was set 4.4% of window height.
Changing it to min(4.4% window height, 4.4% window width) should work
for both portrait and landscape screen.
2. css 'white-space:pre' hides the overflown texts. Should be
'pre-line'.
Closes#2051.
Tested with: Demo app, Angel One, Pixel2 in chrome simulator.
1. Load the video, turn on captions, enter full screen mode.
2. Rotate the screen to see the captions in both landscape and portrait
mode.
Before: The captions font is large, and the screen hides overflown
captions.
Now: The captions font is normal, and if the captions are long, it is
shown in a few lines.
Change-Id: I5c8c3aa900ee3623955b735f93647f1ca54e9a66
This adjusts the spacing on the UI controls to match that of Chrome's
native controls (as of Chrome 75).
Change-Id: Ie0d0d1c39c3e1b1d5141fa103a8a6bf5b17949d1
This adjusts the font size on the UI time display to match that of
Chrome's native controls (as of Chrome 75).
Change-Id: Ie28498669f21e528f919d118dcb0b52477ebda4f
This factors out common functionality and structure from the volume
bar and seek bar, both of which involved specific CSS workarounds for
IE. The seek bar had logic to keep the value from jumping around
during casting, which now the volume bar benefits from, as well.
Finally, the seek bar code was spread out throughout controls.js, and
now it has its own class.
Closes#1913
Change-Id: I299476ccbc27f28f7b225a6e6f8b0d21abe5baf2
Changes to text styles:
- Default to 20px instead of 18px
- Default to a black background (issue #1955)
- Fix the line height (otherwise set in px by MDL in the demo app)
- Scale font with the window in fullscreen or cast receiver
Fixes#1955
Change-Id: I98da85030f4b5a40ba1be962b3d1b4fc2c34489e
Before, the text displayer on IE was positioned outside of the video
container, to the right. On IE, the left property was defaulting to
something surprising. The simple fix is to specify left: 0.
Change-Id: Iaf5456c4976afbe59853b32b978e63aac5df2571
This is a complete replacement for the old demo page, made to be more
modern-looking and easier to maintain. It contains new features such as
remembering the URIs you provide for custom assets, and searching through
the default assets by feature.
This demo page is not quite ready for release yet, but it's getting close.
Change-Id: Iad01d1fc02c3cd238d73b9b9e02dbb4301cb6f2a
It looked like you could click the empty spacer, which is a mistake.
This gives the spacer the default pointer.
Change-Id: I7fac4380d8286a8cda6248edc071bce07a678636
Set control panel's z-index to 1, so that the text container is at the
layer behind the control panel.
Closes#1878
Change-Id: I48e455670df3f6b9ac1f7635267761db3e5e004e
Position the text container (for the custom text displayer)
'behind' the controls, so it doesn't block other elements.
Closes#1874Closes#1873
Change-Id: I630e447d2c04a3e139a80eb4c646ac195a56bec5
This change adds support for images via SMPTE-TT by adding background image support to the TTML text parser. This required changing region parsing to respect global extends.
Issue #840
Sandra Lokshina
Joey Parrish
Theodore Abshire
michellezhuo
Jacob Trimble
Vincent Valot
Álvaro Velad Galván