- Set `40px` as the touchable size for range elements (seek-bar and
volume-bar).
- Decrease `z-index` of `shaka-seek-bar-container` to `-1` to prevent
seek-bar from covering the controls button panel
- Made `ui-time-container` non-interactive so it can cover the seek-bar
without blocking interactions.
Closes: #9120
Changes:
- The look has been changed to make it more similar to YouTube:
- The main background color is now black, and the font is white.
- Presentation time has been moved to the bottom.
- Cast and airplay buttons are now more accessible.
- Tooltips have been enabled except on mobile platforms.
- The ad information has been moved to appear in the same position as
the presentation time when the ad is present.
- A mark indicating the current quality has been added (e.g.: HD, 2K,
4K, 8K)
- The spinner has been replaced with one that works well on Smart TVs
and is very similar to the current one. The animation is included in the
SVG element itself rather than through CSS.
- More LESS variables have been added to make customization easier in
forks.
- The maximum size of the menus is dynamically calculated so that they
never extend outside the video container.
- The size of the subtitle container when the UI appears is now
calculated dynamically.
- The Demo has been updated to show the seekbar when trickplays are
enabled.
- UI performance on Smart TVs has been improved (Tested on Tizen 5.0)
- Many offsets that were hardcoded have been removed, but not all (in
CSS).
Close https://github.com/shaka-project/shaka-player/issues/8406
Currently, player buttons clickable area are 24px by 32px which is not close to WCAG guidelines(44px by 44px)
Solution would be moving margins around buttons to paddings since padding rendered as touchable area. This makes player buttons 34*32px. (and makes focus indicators look nicer too :)
Co-authored-by: Joey Parrish <joeyparrish@users.noreply.github.com>
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
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
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
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
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 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
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
This adjusts the spacing on the UI controls to match that of Chrome's
native controls (as of Chrome 75).
Change-Id: Ie0d0d1c39c3e1b1d5141fa103a8a6bf5b17949d1
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
For the volume bar and seek bar, we use an input element of type
"range".
These elements are composed of two main parts: a "track", which is the
horizontal bar, and the "thumb", which is the knob which slides along
that bar.
In order to style the track across browsers (cough, IE 11), we need to
do something a bit tricky. Styling the track is a nightmare,
especially if you want the thumb to be larger. On IE 11, this gets
clipped at the track size. So a tiny track with a large thumb is not
easily achieved. It can be done, but the techniques for it are
incompatible with the gradient background we want to apply to it.
The solution is to put the input inside a div container, and apply the
background gradient styles to the container. The container will act
as a visible, virtual track, inside which is contained a larger,
invisible track, in which is contained a visible thumb. This way, the
thumb is not larger than the actual track (for IE 11's sake), but can
be larger than the virtual track. And since we are still using a
semantically correct input element, the element is inherently
accessible.
Fixes#1703
Change-Id: I80e1c18d56e0d1455efd26310b699561bf2f41b0
- Make shaka-overlay-parent a mixin instead of an actual class
- Fox maximum stylability, it should be the job of the styles to
position and overlay objects without JS code declaring that it be
so.
- The "seek to live" effect of clicking the current time no longer
depends on the seek bar being used
- The shaka-transparent class is not needed. The controls are now
set to be opaque based on an attribute.
- Use an attribute for casting state as well.
- Remove redundant opacity transition on play button. It is already
on the controls overlay as a whole.
- Make layout more generic, which allows us to remove some explicit
positioning and browser-specific layout hacks.
- Rename user-select(), whose value is always the default of "none",
to unselectable().
- Remove unnecessary or redundant styles.
- Apply the same default styles to all control elements, whether
buttons, divs, or inputs.
- Make overlay-parent() and overlay-child() more resilient with
settings to fill space by default.
- Consolidate the setting of displayed & hidden in JS.
Pre-work for #1703, #1709 (IE style fixes)
Makes progress on b/116651454 (hard-coded offsets)
Change-Id: I7ea579429979afa98f5b2c54f68114312c4f508d
This doesn't start refactoring, but does move a couple of lines around
to group them in clearer ways. It also adds lots of comments
explaining what things are, what they are for, and where they appear.
Pre-work for #1703, #1709, and b/116651454
Change-Id: I77a76c569e4e426b040eaf55f900baa38414fc0c
This doesn't change any styles. It just splits related styles into
several separate files, so that things are easier to find.
Pre-work for #1703, #1709, and b/116651454
Change-Id: Icd3330a70ca6c8ff313991c127f8036238cae813
Álvaro Velad Galván
Phyo Wai Lin
Amila Sampath
Álvaro Velad Galván
Joey Parrish
Joey Parrish
Sandra Lokshina
Jacob Trimble
Theodore Abshire