## 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>
* Update all UI components to use SVG icons instead of icon fonts
* Adjust some icon sizes to 32px
Replacing icon fonts with inline SVGs removes the loading delay caused
by font fetching. Icons now appear immediately with zero delay.
Close https://github.com/shaka-project/shaka-player/issues/2467
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
Going to the configuration menu using the keyboard and entering some
menu, when going back the focus is lost because the first element of the
HTML tree is hidden. This makes it difficult to use the player using
accessibility shortcuts.
Closes#4652
Co-authored-by: Gonzalo Rodriguez <pgonzalorodriguez@gmail.com>
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
This fixes all the license headers in the main library, which corrects
the appearance of the main license in the compiled output.
It seems that the `!` in the header forces the compiler to keep it in
the output. I believe older compiler releases did this purely based
on `@license`.
Issue #2638
Change-Id: I7f0e918caad10c9af689c9d07672b7fe9be7b2f3
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
The compiler is very picky about the use of the "disabled" property on
HTMLElement, since it is only defined on certain subclasses of that.
This adds a method to create a button with the correct type to satisfy
the compiler.
Issue #2528
Change-Id: I31cacd62a35acc87b245ab362dbab55d791cf34d
- 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 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 reflects changes in Google's policy on JavaScript license
headers, which should be smaller to avoid increasing the size of the
binary unnecessarily.
This also updates the company name from "Google, Inc" to "Google LLC".
Change-Id: I3f8b9ed3700b6351f43173d50c94d35c333e82b4
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
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
Aditya Mishra
Andy(김규회)
Álvaro Velad Galván
Soumalya Bhattacharya
Phyo Wai Lin
Gonzalo Rodríguez
Nico
Joey Parrish
Theodore Abshire
Sandra Lokshina