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
Previously, many events were being defined with a data dictionary
that used variable-type keys (e.g. {key: value}). This worked fine
in uncompiled mode, but in compiled mode it lead to those properties
being obfuscated.
This changes the FakeEvent constructor to take a map rather than an
object, so the compiler will force the keys to be strings.
Closes#3710
Change-Id: I67b1a391540a5ee21f0aaf940ae054d26f4c10a4
When an external subtitle track is added and you are using DAI, the external track does not take into account the ads that the video has, so this PR makes this internally take into account when generating the external track.
The UI can open up Picture-in-Picture mode, through the PiP button,
but it does not automatically leave PiP mode when being destroyed.
This CL adds leaving PiP mode to the destroy process.
Closes#3553
Change-Id: I6830a7ceed7e4ca4fbd0e7d36b8257d564e0226c
We change the "play" button icon to become "rewind" when the video ends.
However, previously we did not update the icon again when seeking.
This would lead to the icon still looking like a "rewind" button if
the user seeks back from the end of the video.
This fixes that, by making the button listen to "seeking" events.
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
Our "double tap on the video to enter fullscreen" functionality was
not checking to see if fullscreen was enabled or not first, which
would lead to the player erroring if the user double-clicks the
video on a platform that does not support fullscreen.
Fixes#3441
Change-Id: Id96f783a265e0e05fba93cae2da3904bf1747c9b
When switching from using document.createEvent to using the CustomEvent
constructor, we accidentally broke the "shaka-ui-load-failed" event
such that it no longer had a detail object. The detail object is meant
to be provided, not by itself, but as a member variable inside a custom
dictionary.
This fixes the syntax on the constructor.
Issue #3388
Change-Id: I16dc025c21c8f0a012b5854bbbc56e8b110b2300
Some internal Google tools that are meant to find XSS vulnerabilities
complain about some parts of Shaka Player. In particular:
- Using setAttribute instead of a src property
- Using setAttribute with a variable key
- Using URL.createObjectURL
This resolves these internal XSS checks. As far as I can tell, there
are no serious XSS risks from any of these, as the complaining checks
are meant to catch things that could be executed as scripts. None of
these user-controlled inputs are treated as such, but it seems that
the compiler involved can't tell that.
This goes part of the way toward solving #3378.
Change-Id: I302b9eb56a374854c9b8525b21960ef64fd386f1
'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
When we change the video play rate via UI, and pause and play the
video, it resumes playing at 1. That's caused by 'cancelTrickPlay'.
We can set the defaultPlaybackRate when changing the play rate, and
use that value when we resume playing.
Closes#3261
Change-Id: Ifc200697ea956e3257ae3371886bbb5c9c03338f
In 77054d21, we made some changes to UI keyboard events that introduced a new bug. It broke our tracking of pressed keys in the UI, which allows us to observe keyboard navigation through the UI and maintain focus when tabbing through overflow menus.
This fixes the tracking of pressed keys by properly removing them from the set on keyup, not keydown events.
After some research, I found the right way to use @event in JsDoc:
1. An event definition should be: @event className@eventName
2. The link to the event should be:
@link className#event:eventName
Reference: https://groups.google.com/g/jsdoc-users/c/-1Qle3ww8Rk/m/UjiibrcSkoUJ
Change-Id: I09ed999f44df815c2f9f558f7ddbfd2f4c7df426
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
Seeking rapidly with the keyboard controls now leverages the existing
logic for handling rapid mouse-based seeking. A new method
(changeTo()) has been added to manage this.
This also moves the keyboard control handling from keyup to keydown
events, to handle holding down the key. Previously, holding down the
key triggered the native key handling of the input element.
When you hold down a key, you get multiple keydown events. When you
release it, you get a single keyup event. So when the user holds down
the left arrow, we weren't actually doing anything. Instead, the
keydown handler built into the input element was handling the event.
By switching to keydown events, we get those multiple events when the
key is held, and we get to handle them the way we want, instead of
letting the input element handle them in a way we can't control.
Finally, since we already had a keydown handler on the window to
manage tab navigation, this renames the two handlers to make it clear
which keydown events they handle (on which target).
Closes#3234
Change-Id: I862159adb238436dac7df6451a0f3e3c3f912360
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
This enables the eslint rule requiring jsdocs on all class
declarations, function declarations, and methods.
Unfortunately, there are two problems with this:
1. We don't use class _declarations_, we use class _expressions_,
which are not covered by this rule. So it does not enforce jsdoc at
the class level.
2. We tend to document a class at the class-level, rather than at the
constructor. But a constructor counts as a method for eslint, so it
requires docs on the constructor. There is no way to configure it to
make an exception for trivial constructors.
So for all trivial (no-argument) constructors, we add empty jsdocs:
/** */
constructor() {
This was quicker and easier than setting up some alternative plugin in
eslint to make an exception for us.
The good news is that this rule caught several undocumented parameters
and places where the jsdoc comment was malformed. So fixing those
also improves the compiler's ability to enforce types.
Change-Id: Icbc46ed690c94e53d354648a883119524f8fca45
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
The docs for enums in ui.js were not generated because they were
not in any classes. Moving them to Overlay class.
Fixes#2698
Change-Id: Ib4f4745488aa6593bb377eb2b71b946c2b955ca7
* feat(ui): Allow apps to register a custom seek bar UI element implementation
- Make an external interface shaka.extern.IUISeekBar to represent the public methods of shaka.ui.SeekBar, and make SeekBar an implementation of it.
- Add a new function registerSeekBar in shaka.ui.Controls to register a seek bar factory that will be used to create the seek bar in the control elements.
Closes#2924
This fixes the renaming of the protected members of SettingsMenu and
RangeElement, both of which are useful to apps building custom UI
plugins.
In order for those app-level plugins to access the protected members
of the base class, they needed to be part of an external interface.
Otherwise the compiler would rename them.
Closes#2923
Change-Id: I2edb9f1428789fac1e6c60ec6a68b20cdd249ae5
Álvaro Velad Galván
Theodore Abshire
Dador
Jacob Trimble
Nico
Joey Parrish
Michelle Zhuo
mariocynicys
Suraj kumar (sk)
Amila Sampath
Shaka Player BuildBot
Adit Mehta
ismena
code-it.fr