Commit Graph

277 Commits

Author SHA1 Message Date
Sandra Lokshina 6085a5cd09 Small refactors of resolution and language menus.
1) Resolutions: don't construct the 'Auto' button
twice.
2) Languages: don't update the entire menu on
localization events.

Change-Id: Ie9160f502513e46544ca14005cd91c002acf1e92
2019-04-18 14:32:47 -07:00
Sandra Lokshina 48ba5c75c0 Add integration tests for the resolutions menu.
Change-Id: I86e8d675daf48a19b477f8d92e80fc706f189d90
2019-04-18 18:29:37 +00:00
Joey Parrish 4343e954aa Fix UI unit test cleanup
The UI unit tests were leaving players undestroyed, which caused
additional failures on Tizen in the src= tests.  This makes some
changes to the UI to allow discovery of the UI through the DOM, which
in turn enables automated (and thorough) cleanup of the UI in our
tests.

b/130554111

Change-Id: I8bfef07f670ce7ec5deafaf19314d7bfd2eb6eed
2019-04-17 21:28:24 +00:00
Joey Parrish c2667c153a Hide language menus when empty
On iOS, for now, we do not have a list of tracks.  In this case, hide
the audio language menu.

This also cleans up the hiding and showing of the captions menu, which
no longer requires a special case for TS since we integrated
transmuxing with the tracks API.

Finally, this fixes a few minor indentation issues.

Issue #997

Change-Id: I1b5bc329431e3d43a0238cd4af7839d220aa9b6b
2019-04-16 09:52:06 -07:00
Joey Parrish c3afb84209 Allow demo to play video inline on iOS
Without this attribute, iOS playbacks will force fullscreen mode.

Issue #997

Change-Id: I32bbe3d16f68d91c5fb3083c5d5862967140d140
2019-04-15 16:02:48 -07:00
Joey Parrish 4334f1956b Allow UI-using apps to show support errors
By dispatching the shaka-ui-loaded event when we give up because of
browser support, apps can still finish their own setup and show an
appropriate support error.

This bug was discovered while working on #1857

Change-Id: If584ba916f7ba2e807f4861638d66319e8c8638f
2019-04-11 14:48:02 -07:00
Michelle Zhuo d8abdb0a2b Fix control panel's z-index
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
2019-04-10 16:14:20 -07:00
Joey Parrish 0147a78f9a Add localization lazy-loading to the demo app
The demo app will now respond to events from the localization system
to lazy-load missing localization data at runtime.  This will enable
the demo app to display a localized UI in non-compile-time-default
locales.

This required several changes to the compiled build to add missing
export annotations and quoted strings on event fields.

Issue #1688

Change-Id: I1e756d8ce7861bf822ec0e7d4090f143a201d422
2019-04-10 18:13:23 +00:00
Joey Parrish 00442a9a7c Split up localization data for lazy loading
This changes the format of the localization data to enable apps to
trivially lazy-load translations.  It also adds --locales to the build
scripts to allow app developers to choose the compiled-in locales.
The generated output now goes into dist/ and is not checked into
revision control.  Finally, it adds "description" and "meaning" fields
to the source messages to allow us to more easily integrate with a
context-aware human translation service.  The "description" field
provides application context for the translator, while the "meaning"
field provides linguistic disambiguation for words with multiple
meanings or parts of speech in the original English.

Because the translation service wants to collapse messages with
identical text, we had to merge several messages together.  To this
end, we have removed the prefixes "ARIA_LABEL_" and "LABEL_" from the
messages themselves and collapsed what remained.

Issue #1688

Change-Id: I24c17e71c73f6663cf123cfdba118c486fa80ecc
2019-04-09 16:06:14 -07:00
Sandra Lokshina 5678bae39e Stop text displayer from interfering with controls' work.
Position the text container (for the custom text displayer)
'behind' the controls, so it doesn't block other elements.

Closes #1874
Closes #1873

Change-Id: I630e447d2c04a3e139a80eb4c646ac195a56bec5
2019-04-09 18:19:48 +00:00
Michelle Zhuo 8459362237 UI Ally: Make live stream timecode accessible
Closes #1861

Change-Id: I1963d9edf42916bcc3f49dade8e6a436b153d3be
2019-04-09 10:21:28 -07:00
Sandra Lokshina 436e30dc11 Add integration tests for UI captions selection.
Change-Id: I59bd837a3542636c98fa8ecec6d6d0e7dfd64e23
2019-04-08 15:09:36 -07:00
Sandra Lokshina 493d459c47 Add a DOM util.
Change-Id: Ia0941868f20dbb42fa0fe02a639015ac244a65ed
2019-04-05 12:01:59 -07:00
Michelle Zhuo 3e4ff0d063 Make spacing consistent
Change-Id: Ifdf59d578b47d4c850591a1fd32666f3fd4f7515
2019-04-05 17:11:39 +00:00
Sandra Lokshina 3a2be7fe0a Add UI integration tests for the language menu.
Change-Id: Idbd3b2da9b7a0277798ecb344961aef153ad39f2
2019-04-05 16:44:13 +00:00
Álvaro Velad Galván 6f3241e696 Add SMPTE-TT Subtitle Images (#1859)
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
2019-04-04 15:19:08 -07:00
Joey Parrish 7ea43bc761 Fix aria-pressed in text selection menu
During a screen reader pass for #1860, I noticed that the state of
this button never changed.  The aria-pressed attribute was calculated
when the UI was created, but never updated.  This fixes it to update
whenever the caption state changes.

Change-Id: I742aa54278a0bd2ebdcb4b1b32189dabfe940c48
2019-04-03 22:11:30 +00:00
Joey Parrish eb97e85ec7 Add TODO for a11y of timecode
Issue #1861

Change-Id: I9bf7dc65883f9aa9b6853999a2c23a720919de26
2019-04-03 21:50:25 +00:00
Joey Parrish aeaa970227 Consolidate CSS font settings
Change-Id: I6ab9514a5ca8517619b911c84ace15805681423a
2019-04-03 21:31:10 +00:00
Michelle Zhuo 59966e2bb8 Show picture-in-picture btn only when the content has video
1. When playing an audio-only asset, the Picture-in-Picture button on
the UI shows up. Pressing the button, however, results in an error.
We should only display the Picture-in-Picture button when the content
has video.
2. When it's in the picture-in-picture mode and an audio only content is
loaded, both the main window and the picture-in-picture window get
stuck.
We should exit the picture-in-picture window when the audio only content
is loaded.

Closes #1849

Change-Id: I37bc82677108828a05ba26ad8aa081b90e137548
2019-03-29 15:36:24 -07:00
Michelle Zhuo f1c11e4054 TextDisplayer: enable showing captions in multiple lines
Set css style white-space to 'pre', so that when the captions text
contains a line break '\n', the captions will display in seperate lines.

Change-Id: I623d48ab2bbd82bb9dd3f2565c723d6ce35285e1
2019-03-19 21:21:38 +00:00
Michelle Zhuo af3f93dc19 Minor: Remove merge duplicates in TextDisplayer
Change-Id: I5d016e1b2093ddfcbc81bf9fd475ddf070669f9c
2019-03-19 12:14:43 -07:00
Aaron Vaage 7a56dd1bdc Prevent late-timer-invokes
In our tests, it was possible for a timeout to fire after |clearTimeout|
was called. This CL makes sure that cannot happen by adding an "alive"
flag to each timeout.

To ensure that the change was as well defined as possible, this CL
changes how |shaka.util.Timer| is implemented and updates the API to
better communicate what is happening internally.

Change-Id: I57e3899046a762bff3293b9822a7e8f7ac804042
2019-03-12 18:52:32 +00:00
Joey Parrish 1095ecb009 Move UI images to a folder
Change-Id: I70cad100344cffc06911444b4ebaa8f11232e6fa
2019-02-27 13:18:12 -08:00
Sandra Lokshina 4d41b7b90c Refactor the overflow menu to use components design.
Closes #1673.

Change-Id: I030745def928796a6abc813a91fb163cb2d76175
2019-02-21 13:14:28 -08:00
Aaron Vaage df3926916e Correct Factory-Constructor Syntax
Right now because the text displayer factory must be a constructor
and () => {} can't be a constructor, we need to change function-syntax
used in ui/ui.js.

Change-Id: Ib87b9353c5a955a3556949ed754314b1bee16dad
2019-02-21 01:54:24 +00:00
Joey Parrish 9167ce4eb9 Fix several typos
These were found by an automated tool internal to Google.

Change-Id: I6def5463c0e5af315b168ff4c0bb91eb2ee34de1
2019-02-20 21:58:40 +00:00
Theodore Abshire d02759bdea Fix cast button on ui.
Previously, the cast button would not show up on the ui.
This was due to a typo in an event listener (it was looking for
'caststatuschange' rather than 'caststatuschanged'), and due to
the ui starting the button out hidden and only revealing it on
cast status change.
This fixes that typo, and changes the button to start out in an
appropriate state.

Issue #1803

Change-Id: I06a18015511fd897b15606d2bb75b3a448e124c7
2019-02-20 21:39:12 +00:00
Joey Parrish d420b46077 Fix UI TextDisplayer instantiation
You can't use "new" with an arrow function, and the
TextDisplayerFactory is currently called with "new" (until #1521 is
resolved, and we stop using "new" with factories).

Change-Id: I365ff46dc59dcc0f9a751918567557b99366c950
2019-02-12 15:24:10 -08:00
Tomasz Oponowicz 4d83413631 Set background to black in fullscreen mode
Issue #1799
2019-02-12 14:10:28 -08:00
Aaron Vaage cd8db264be Refactor UI Controls to Use Timer
We have a timer class in shaka.util.Timer to make it easier to
work with repeating time-based events.

This CL changes shaka.ui.Controls to make use of shaka.util.Timer.
To ensure that delayed vs immediate invocations of the events did
not conflict with each other, a new method (tick) was added to
shaka.util.Timer.

|tick| works like |start|, but in an immediate synchronous form.

Change-Id: I50f5ac35d72f58bc55fcc9d20811dbc3dd5ba55c
2019-02-11 14:30:41 -08:00
Sandra Lokshina f07f39c716 Remove aria-pressed state from the captions button.
Captions selection used to be a simple on/off button
and having aria-pressed state on it made sense. Now
that it's a gateway to text language selection the
state is no longer applicable.

Change-Id: I3780501afc8d3f5efa835ae9f015b44763c78c0e
2019-02-08 20:03:01 +00:00
Tomasz Oponowicz dc0b3736d8 Make spacer growable in order to align control elements (#1796)
* Make spacer growable in order to align control elements
* Remove margins in order to be more flexible when shrinking
2019-02-08 08:57:01 -08:00
Sandra Lokshina 6e687ef216 Set aria-labels on buttons when they are loaded
Change-Id: Ib880c818b2dbc3ff060d668311885b15ef0306c0
2019-02-08 16:45:03 +00:00
Michelle Zhuo 5ace6c72e5 UI: Hide control panel when mouse leaves it
Hide the control panel when the mouse leaves the control panel and the
video container.
'mouseleave' is fired when the pointer has exited the element and all of
its descendants, whereas 'mouseout' is fired when the pointer leaves the
element or leaves one of the element's descendants(even if the pointer
is still within the element).
We should hide the control panel when the mouse leaves all the elements
of the control panel, or the video container.

Closes #1687

Change-Id: I7d4c8628fd75ee0737a4a11288828524aa11089d
2019-02-06 14:21:10 -08:00
Michelle Zhuo d352957c36 UI TextDisplayer minor refactor
1. Renamed captionsText to captions.
2. Removed a duplicate if-check.

Change-Id: Ib2433a8320c7863afab35de88ffc65e7deb5bf3c
2019-02-06 18:17:25 +00:00
Michelle Zhuo 3bde775c53 UI A11y: Make navigation stay inside overflow menu
When using keyboard to navigate through the overlfow menus, make sure
the focus stays inside the overflow menu, and do not let the user select
the elements behind the overflow menu until the user exits it.

Issue #1686

Change-Id: I4abdebb6b6bee9899dcc5f3144a2806addf08f0a
2019-02-05 22:06:46 +00:00
Michelle Zhuo d4f87e3392 UI A11y: Press Esc to exit overflow menu
Change-Id: I3cc42ac2b04c6ceae3babd7d83ef66d291739911
2019-02-01 18:22:20 +00:00
Theodore Abshire cc7eb20193 Fix typo in ui.js when setting textDisplayFactory.
We had previously called the config field "textDisplayerFactory"
instead.

Change-Id: Id032cfd7c689fcb10311bc2fe2b02e627f04b8be
2019-02-01 17:03:39 +00:00
Michelle Zhuo bfbcd0e38c UI A11y: Add grey background for focused overflow menu btns
When using keyboard navigation, the focused button on the overflow menu
only has 1px outline, which is hard to see. Adding a grey background to
make it more clear, and removing the background when mouse is moved.

Closes #1685

Change-Id: I8d7a0dc2fd88f4ebbdcb82f55d8ffabf2d7cc2c1
2019-01-31 23:10:43 +00:00
Michelle Zhuo f8ac9e5a30 Make Player and Demo use UI TextDisplayer
Set the configuration to make Player and Demo use UI Text Displayer when UI library is used, and use SimpleTextDisplayer otherwise.

Issue #1708

Change-Id: Id1b9c39f5bfd67c0f3e513fb44bcec7929355606
2019-01-25 15:00:41 -08:00
Michelle Zhuo 40e52ca71c TextDisplayer: Apply cues styles
Issue #1708

Change-Id: I87cea002d52792ca1f414716f7b42c080530294f
2019-01-25 11:40:34 -08:00
Michelle Zhuo 4b4dcc5841 Add spacing in control.js
Change-Id: I0a83bc554ad2db3376f343c13fb0ec14a4a466bc
2019-01-24 18:43:40 +00:00
Aaron Vaage 43afe3a7c8 Refactor Event Manager To "Release" and not "Destroy"
We often use the IDestroyable interface to provide us with a standardized
way to break internal references and tear-down objects, however many
objects don't need this to be async. Once using IDestroyable, everyone
must assume that you must be async.

This change introduces IReleasable, a sibling to IDestryable, which
provides the |release| method. IReleasable is the synchronous version of
IDestroyable.

This change converts EventManager from IDestroyable to IReleasable as
the first of many conversions.

Change-Id: Ic3e90e594abc1c7326eccbe2521eb71676b74a09
2019-01-24 01:11:38 +00:00
Michelle Zhuo f41418bb63 Add comment for captions css style
Issue #1708

Change-Id: I3025ae09143e607bea1ec833e73bc4f04e26da76
2019-01-21 20:00:40 +00:00
Michelle Zhuo 91089f0582 Add default css styles for captions
Issue #1708

Change-Id: Ie3fec157c789b4626ee098d6794a8ca75dc561e0
2019-01-18 22:29:44 +00:00
Sandra Lokshina 40afb00f20 Add spacer element to the UI.
Issue #1673.

Change-Id: I8e01366f82e5e7d3b9365d8387f02eede877ad07
2019-01-18 21:48:31 +00:00
Michelle Zhuo bec0d0fbd6 Update text displayer remove method
Removing the cues from the map of current cues and captions, as well as
the captions from the page.

Issue #1708

Change-Id: I265ce7d5bc65d77dc4c4db921b4af11c725ebd4a
2019-01-18 19:00:59 +00:00
Sandra Lokshina 121b615c3e Break UI into components design.
What's already done:
- UIElement and IUIElement interface
- All elements register themselves with controls
- Each element is responsible for its' behavior
- A bit of clean up with constants/enums moving to
their own files

What is not done yet:
- Overflow menu is a dumping ground now. Its'
elements will move to the UIElement model eventually, too.
- Build files are hacked a bit and will need more attention.
- No clean up has been done except for the constants/enums.

Change-Id: I9917aa705e85158a2f26830bd988552fe177e53b
2019-01-17 21:58:12 +00:00
Michelle Zhuo 4aa2ad5e22 Adjust control panel's width
Changing the width of the control panel from 100% to 98.5%, so that the
current time element starts at the same point as the seek bar does.

Closes #1748

Change-Id: I61aa67b5e58f2093726c988f118523c221b44ced
2019-01-17 20:31:13 +00:00