`airplay` button uses WebKit's proprietary API. In newer versions, this
has been replaced by the RemotePlayback API, which is available in
`remote` button.
More info: https://caniuse.com/mdn-api_remoteplayback
---------
Co-authored-by: Theodore Abshire <TheodoreAbshire@Gmail.com>
- The following buttons are registered: play_pause, mute, fullscreen,
rewind, fast_forward, picture_in_picture, remote, loop, skip_next,
skip_previous
- SmallPlayButton and BigPlayButton are removed
- The following buttons are used by default on mobile: skip_previous,
play_pause, skip_next
## How to register a custom icon?
**Icons need to be registered before initializing the player.**
Register a custom icon from Material Symbols:
```js
shaka.ui.IconRegistry.register('<PATH_VALUE>');
```
Register a custom Icon from any icon set:
```js
shaka.ui.IconRegistry.register('<NAME>', {
path: '<PATH_VALUE>',
viewBox: '<VIEW_BOX>',
size: 24, // optional
});
```
Register a custom Icon (that contains multiple paths) from any icon set:
```js
shaka.ui.IconRegistry.register('<NAME>', {
path: ['<PATH_VALUE_1>', '<PATH_VALUE_2>'],
viewBox: '<VIEW_BOX>',
size: 24, // optional
});
```
Register a custom Icon using URL of the icon:
```js
shaka.ui.IconRegistry.register('<NAME>', {
url: '<URL>',
size: 24, // optional
});
```
Closes: #9045
---------
Co-authored-by: Álvaro Velad Galván <ladvan91@hotmail.com>
Add a new element for inline SVG icons that is supposed
to be a replacement for the current icon fonts.
I use filled Material Symbols Rounded icons as default.
Intended to support a future transition away from icon fonts.
Related to https://github.com/shaka-project/shaka-player/issues/2467
Close https://github.com/shaka-project/shaka-player/issues/8519
Fixes https://github.com/shaka-project/shaka-player/issues/8475
Introduce `NativeTextDisplayer` as a replacement of
`SimpleTextDisplayer`. But keep them both work.
Is MSE mode, `NativeTextDisplayer` creates `<track>` elements for text
streams. And listens to change events on both ends to keep them in sync.
In SRC mode, `NativeTextDisplayer` would do nothing, the player uses
original TextTracks instead.
Advantages of `NativeTextDisplayer`:
- Allow text track selection using the browser built-in UI
- Allow text track manipulation using native APIs
- Avoid transferring and processing cues in SRC mode
---------
Co-authored-by: Álvaro Velad Galván <ladvan91@hotmail.com>
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
This pull request introduces watermark support for the Shaka Player UI.
Added functionality to overlay static or dynamic watermarks on videos.
Included options to customize position, size, color, and opacity.
Enhanced content security with dynamic watermarking capabilities.
Resolves#7726 .
* 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
In player, SimpleTextDisplayer was set as the default TextDisplayer. In
our UI, it changes the configuration to use the UITextDisplayer, and
UITextDisplayer gets constructed with the player. Later in our demo, it
resets the config, so an extra SimpleTextDisplayer gets constructed.
This introduces an extra TextTrack created by SimpleTextDisplayer.
This change sets the UITextDisplayer as the default TextDisplayer in
player's default config.
Closes#2516
Change-Id: I3f653be9fad8b2edbc2fb9de84e8abb327dcfc51
Please note that this CL doesn't add the new control
to the default layout, so it won't show up in our
demo page.
Issue #2362
Change-Id: Ibecf6a7174de7d8eca9049f0b46ae179a03b9c01
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
This extracts common code in our overflow menu settings
menus.
Text, Audio Language and Resolution selections now inherit
from this class. It also makes it easier to create new
overflow menu items.
Closes#2091
Change-Id: Ib68e1fb295ed3ec61cb7a072c039a5c7c4e22183
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
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
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
Aditya Mishra
Álvaro Velad Galván
Phyo Wai Lin
xiao
Chafroud Tarek
Nico
code-it.fr
Álvaro Velad Galván
michellezhuo
Sandra Lokshina
Joey Parrish