From e7b1e5a0f6aa0e2687b172d5b89154dedfc8b951 Mon Sep 17 00:00:00 2001 From: Phyo Wai Lin Date: Fri, 19 Sep 2025 16:29:17 +0630 Subject: [PATCH] feat(UI): Ability to change UI icons (#9115) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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(''); ``` Register a custom Icon from any icon set: ```js shaka.ui.IconRegistry.register('', { path: '', viewBox: '', size: 24, // optional }); ``` Register a custom Icon (that contains multiple paths) from any icon set: ```js shaka.ui.IconRegistry.register('', { path: ['', ''], viewBox: '', size: 24, // optional }); ``` Register a custom Icon using URL of the icon: ```js shaka.ui.IconRegistry.register('', { url: '', size: 24, // optional }); ``` Closes: #9045 --------- Co-authored-by: Álvaro Velad Galván --- build/types/ui | 3 +- demo/close_button.js | 2 +- demo/visualizer_button.js | 6 +- shaka-player.uncompiled.js | 1 + ui/ad_statistics_button.js | 16 ++-- ui/airplay_button.js | 6 +- ui/audio_language_selection.js | 2 +- ui/cast_button.js | 10 +-- ui/chapter_selection.js | 2 +- ui/enums.js | 2 +- ui/externs/ui.js | 26 ++++++- ui/fast_forward_button.js | 6 +- ui/fullscreen_button.js | 12 +-- ui/hidden_fast_forward_button.js | 2 +- ui/hidden_rewind_button.js | 2 +- ui/hidden_seek_button.js | 6 +- ui/icon.js | 127 +++++++++++++++++++++++++++++++ ui/icon_registry.js | 29 +++++++ ui/less/containers.less | 8 +- ui/less/material_svg_icon.less | 6 +- ui/less/overflow_menu.less | 4 +- ui/loop_button.js | 10 +-- ui/material_svg_icon.js | 60 --------------- ui/mute_button.js | 12 +-- ui/overflow_menu.js | 6 +- ui/pip_button.js | 12 +-- ui/play_button.js | 8 +- ui/playback_rate_selection.js | 4 +- ui/recenter_vr.js | 8 +- ui/remote_button.js | 14 ++-- ui/resolution_selection.js | 3 +- ui/rewind_button.js | 7 +- ui/save_video_frame_button.js | 8 +- ui/settings_menu.js | 18 ++--- ui/skip_next_button.js | 6 +- ui/skip_previous_button.js | 6 +- ui/statistics_button.js | 16 ++-- ui/text_selection.js | 7 +- ui/toggle_stereoscopic.js | 8 +- ui/ui_utils.js | 6 +- ui/video_type_selection.js | 2 +- 41 files changed, 313 insertions(+), 186 deletions(-) create mode 100644 ui/icon.js create mode 100644 ui/icon_registry.js delete mode 100644 ui/material_svg_icon.js diff --git a/build/types/ui b/build/types/ui index 0248d2c12..078fb2c5c 100644 --- a/build/types/ui +++ b/build/types/ui @@ -19,10 +19,11 @@ +../../ui/hidden_fast_forward_button.js +../../ui/hidden_rewind_button.js +../../ui/hidden_seek_button.js ++../../ui/icon.js ++../../ui/icon_registry.js +../../ui/language_utils.js +../../ui/localization.js +../../ui/loop_button.js -+../../ui/material_svg_icon.js +../../ui/mute_button.js +../../ui/overflow_menu.js +../../ui/pip_button.js diff --git a/demo/close_button.js b/demo/close_button.js index 94233f44d..a6fdd381f 100644 --- a/demo/close_button.js +++ b/demo/close_button.js @@ -26,7 +26,7 @@ shakaDemo.CloseButton = class extends shaka.ui.Element { this.button_.classList.add('shaka-no-propagation'); this.button_.classList.add('close-button'); - new shaka.ui.MaterialSVGIcon(this.button_).use( + new shaka.ui.Icon(this.button_).use( // eslint-disable-next-line @stylistic/max-len 'M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z', ); diff --git a/demo/visualizer_button.js b/demo/visualizer_button.js index 288444e9c..558cbbe71 100644 --- a/demo/visualizer_button.js +++ b/demo/visualizer_button.js @@ -27,9 +27,9 @@ shakaDemo.VisualizerButton = class extends shaka.ui.Element { this.button_.classList.add('shaka-pip-button'); this.button_.classList.add('shaka-tooltip'); - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.icon_ = /** @type {!shaka.ui.MaterialSVGIcon} */ ( - new shaka.ui.MaterialSVGIcon(this.button_)); + /** @private {!shaka.ui.Icon} */ + this.icon_ = /** @type {!shaka.ui.Icon} */ ( + new shaka.ui.Icon(this.button_)); this.setIcon_(); const label = document.createElement('label'); diff --git a/shaka-player.uncompiled.js b/shaka-player.uncompiled.js index 3f2421b54..087fbbbb9 100644 --- a/shaka-player.uncompiled.js +++ b/shaka-player.uncompiled.js @@ -105,6 +105,7 @@ goog.require('shaka.ui.ContextMenu'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.FastForwardButton'); goog.require('shaka.ui.FullscreenButton'); +goog.require('shaka.ui.IconRegistry'); goog.require('shaka.ui.Localization'); goog.require('shaka.ui.LoopButton'); goog.require('shaka.ui.Matrix4x4'); diff --git a/ui/ad_statistics_button.js b/ui/ad_statistics_button.js index 45fb465d1..c7e37a9d4 100644 --- a/ui/ad_statistics_button.js +++ b/ui/ad_statistics_button.js @@ -13,9 +13,9 @@ goog.require('shaka.ui.ContextMenu'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -40,9 +40,9 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element { this.button_ = shaka.util.Dom.createButton(); this.button_.classList.add('shaka-ad-statistics-button'); - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_, - shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON); + /** @private {!shaka.ui.Icon} */ + this.icon_ = new shaka.ui.Icon(this.button_, + shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); @@ -146,11 +146,11 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element { /** @private */ onClick_() { if (this.container_.classList.contains('shaka-hidden')) { - this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_OFF); + this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_OFF']); this.timer_.tickEvery(0.1); shaka.ui.Utils.setDisplay(this.container_, true); } else { - this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON); + this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']); this.timer_.stop(); shaka.ui.Utils.setDisplay(this.container_, false); } @@ -196,8 +196,8 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element { const closeElement = shaka.util.Dom.createHTMLElement('div'); closeElement.classList.add('shaka-no-propagation'); closeElement.classList.add('shaka-statistics-close'); - const icon = new shaka.ui.MaterialSVGIcon(closeElement, - shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE); + const icon = new shaka.ui.Icon(closeElement, + shaka.ui.Enums.MaterialDesignSVGIcons['CLOSE']); const iconElement = icon.getSvgElement(); iconElement.classList.add('material-icons', 'notranslate'); diff --git a/ui/airplay_button.js b/ui/airplay_button.js index 36c471586..a08906ab4 100644 --- a/ui/airplay_button.js +++ b/ui/airplay_button.js @@ -12,9 +12,9 @@ goog.require('shaka.Player'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -40,8 +40,8 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element { this.airplayButton_.classList.add('shaka-tooltip'); this.airplayButton_.ariaPressed = 'false'; - new shaka.ui.MaterialSVGIcon(this.airplayButton_).use( - shaka.ui.Enums.MaterialDesignSVGIcons.AIRPLAY); + new shaka.ui.Icon(this.airplayButton_).use( + shaka.ui.Enums.MaterialDesignSVGIcons['AIRPLAY']); // Don't show the button if AirPlay is not supported. if (!window.WebKitPlaybackTargetAvailabilityEvent) { diff --git a/ui/audio_language_selection.js b/ui/audio_language_selection.js index 2eb24dce5..f2e0d1da6 100644 --- a/ui/audio_language_selection.js +++ b/ui/audio_language_selection.js @@ -29,7 +29,7 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu { * @param {!shaka.ui.Controls} controls */ constructor(parent, controls) { - super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons.LANGUAGE); + super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons['LANGUAGE']); this.button.classList.add('shaka-language-button'); this.button.classList.add('shaka-tooltip-status'); diff --git a/ui/cast_button.js b/ui/cast_button.js index da51d9ffa..3908d4d9e 100644 --- a/ui/cast_button.js +++ b/ui/cast_button.js @@ -11,9 +11,9 @@ goog.require('shaka.cast.CastProxy'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -45,9 +45,9 @@ shaka.ui.CastButton = class extends shaka.ui.Element { this.castButton_.classList.add('shaka-tooltip'); this.castButton_.ariaPressed = 'false'; - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.castIcon_ = new shaka.ui.MaterialSVGIcon(this.castButton_, - shaka.ui.Enums.MaterialDesignSVGIcons.CAST); + /** @private {!shaka.ui.Icon} */ + this.castIcon_ = new shaka.ui.Icon(this.castButton_, + shaka.ui.Enums.MaterialDesignSVGIcons['CAST']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); @@ -121,7 +121,7 @@ shaka.ui.CastButton = class extends shaka.ui.Element { const isCasting = this.castProxy_.isCasting(); const Icons = shaka.ui.Enums.MaterialDesignSVGIcons; shaka.ui.Utils.setDisplay(this.castButton_, canCast); - this.castIcon_.use(isCasting ? Icons.EXIT_CAST : Icons.CAST); + this.castIcon_.use(isCasting ? Icons['EXIT_CAST'] : Icons['CAST']); // Aria-pressed set to true when casting, set to false otherwise. if (canCast) { diff --git a/ui/chapter_selection.js b/ui/chapter_selection.js index 2ad218def..ff8249d2c 100644 --- a/ui/chapter_selection.js +++ b/ui/chapter_selection.js @@ -28,7 +28,7 @@ shaka.ui.ChapterSelection = class extends shaka.ui.SettingsMenu { * @param {!shaka.ui.Controls} controls */ constructor(parent, controls) { - super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons.CHAPTER); + super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons['CHAPTER']); this.button.classList.add('shaka-chapter-button'); this.menu.classList.add('shaka-chapters'); diff --git a/ui/enums.js b/ui/enums.js index 8a46138fa..981a7871f 100644 --- a/ui/enums.js +++ b/ui/enums.js @@ -13,7 +13,7 @@ goog.provide('shaka.ui.Enums'); * * Url used to fetch following svg icons * https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded//fill1/24px.svg - * @enum {string} + * @export */ /* eslint @stylistic/max-len: ["error", { "code": 1000 }] */ shaka.ui.Enums.MaterialDesignSVGIcons = { diff --git a/ui/externs/ui.js b/ui/externs/ui.js index 8ae774962..f34bb997f 100644 --- a/ui/externs/ui.js +++ b/ui/externs/ui.js @@ -562,7 +562,7 @@ shaka.extern.IUISettingsMenu = class { this.button; /** - * @protected {!shaka.ui.MaterialSVGIcon} + * @protected {!shaka.ui.Icon} * @exportDoc */ this.icon; @@ -664,3 +664,27 @@ shaka.extern.IUIPlayButton = class { /** @return {boolean} */ isEnded() {} }; + +/** + * @typedef {{ + * path: ?(string | Array), + * viewBox: ?string, + * url: ?string, + * size: ?number, + * }} + * + * @property {?(string | Array)} path + * A single SVG path string or an array of multiple path strings. + * Used to define the shape(s) of the SVG icon. + * @property {?string} viewBox + * The `viewBox` attribute for the SVG element. + * Defaults to `'0 -960 960 960'` if not specified. + * @property {?string} url + * The URL of an external SVG icon. + * If this is defined, `viewBox` and `path` will be ignored. + * @property {?number} size + * Custom size for the icon in pixels. + * If not provided, the size will be controlled via CSS. + * @exportDoc + */ +shaka.extern.UIIcon; diff --git a/ui/fast_forward_button.js b/ui/fast_forward_button.js index 34b4d81df..e714ab37f 100644 --- a/ui/fast_forward_button.js +++ b/ui/fast_forward_button.js @@ -10,9 +10,9 @@ goog.provide('shaka.ui.FastForwardButton'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.util.Dom'); @@ -35,8 +35,8 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element { this.button_.classList.add('shaka-tooltip-status'); this.button_.setAttribute('shaka-status', '1x'); - new shaka.ui.MaterialSVGIcon(this.button_).use( - shaka.ui.Enums.MaterialDesignSVGIcons.FAST_FORWARD); + new shaka.ui.Icon(this.button_).use( + shaka.ui.Enums.MaterialDesignSVGIcons['FAST_FORWARD']); this.parent.appendChild(this.button_); this.updateAriaLabel_(); diff --git a/ui/fullscreen_button.js b/ui/fullscreen_button.js index 016400a59..f08f6ac39 100644 --- a/ui/fullscreen_button.js +++ b/ui/fullscreen_button.js @@ -11,9 +11,9 @@ goog.require('shaka.ads.Utils'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.util.Dom'); @@ -38,9 +38,9 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element { this.button_.classList.add('shaka-fullscreen-button'); this.button_.classList.add('shaka-tooltip'); - /** @private {shaka.ui.MaterialSVGIcon} */ - this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_, - shaka.ui.Enums.MaterialDesignSVGIcons.FULLSCREEN); + /** @private {shaka.ui.Icon} */ + this.icon_ = new shaka.ui.Icon(this.button_, + shaka.ui.Enums.MaterialDesignSVGIcons['FULLSCREEN']); this.checkSupport_(); @@ -114,8 +114,8 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element { */ updateIcon_() { this.icon_.use(this.controls.isFullScreenEnabled() ? - shaka.ui.Enums.MaterialDesignSVGIcons.EXIT_FULLSCREEN : - shaka.ui.Enums.MaterialDesignSVGIcons.FULLSCREEN, + shaka.ui.Enums.MaterialDesignSVGIcons['EXIT_FULLSCREEN'] : + shaka.ui.Enums.MaterialDesignSVGIcons['FULLSCREEN'], ); } }; diff --git a/ui/hidden_fast_forward_button.js b/ui/hidden_fast_forward_button.js index d6b83df14..143dac1d4 100644 --- a/ui/hidden_fast_forward_button.js +++ b/ui/hidden_fast_forward_button.js @@ -25,7 +25,7 @@ shaka.ui.HiddenFastForwardButton = class extends shaka.ui.HiddenSeekButton { super(parent, controls); this.seekContainer.classList.add('shaka-fast-forward-container'); - this.seekIcon.use(shaka.ui.Enums.MaterialDesignSVGIcons.FAST_FORWARD); + this.seekIcon.use(shaka.ui.Enums.MaterialDesignSVGIcons['FAST_FORWARD']); this.isRewind = false; } }; diff --git a/ui/hidden_rewind_button.js b/ui/hidden_rewind_button.js index ebd7f7631..ef6755997 100644 --- a/ui/hidden_rewind_button.js +++ b/ui/hidden_rewind_button.js @@ -25,7 +25,7 @@ shaka.ui.HiddenRewindButton = class extends shaka.ui.HiddenSeekButton { super(parent, controls); this.seekContainer.classList.add('shaka-rewind-container'); - this.seekIcon.use(shaka.ui.Enums.MaterialDesignSVGIcons.REWIND); + this.seekIcon.use(shaka.ui.Enums.MaterialDesignSVGIcons['REWIND']); this.isRewind = true; } }; diff --git a/ui/hidden_seek_button.js b/ui/hidden_seek_button.js index c5398e9dd..fb828b190 100644 --- a/ui/hidden_seek_button.js +++ b/ui/hidden_seek_button.js @@ -7,7 +7,7 @@ goog.provide('shaka.ui.HiddenSeekButton'); goog.require('shaka.ui.Element'); -goog.require('shaka.ui.MaterialSVGIcon'); +goog.require('shaka.ui.Icon'); goog.require('shaka.util.Timer'); goog.require('shaka.util.Dom'); @@ -71,8 +71,8 @@ shaka.ui.HiddenSeekButton = class extends shaka.ui.Element { this.seekValue_.textContent = '0s'; this.seekContainer.appendChild(this.seekValue_); - /** @protected {!shaka.ui.MaterialSVGIcon} */ - this.seekIcon = new shaka.ui.MaterialSVGIcon(this.seekContainer); + /** @protected {!shaka.ui.Icon} */ + this.seekIcon = new shaka.ui.Icon(this.seekContainer); this.seekIcon.getSvgElement().classList.add( 'shaka-forward-rewind-container-icon'); diff --git a/ui/icon.js b/ui/icon.js new file mode 100644 index 000000000..695792db1 --- /dev/null +++ b/ui/icon.js @@ -0,0 +1,127 @@ +/*! @license + * Shaka Player + * Copyright 2016 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +goog.provide('shaka.ui.Icon'); + +goog.require('shaka.util.Dom'); + +/** + * @final + * @export + */ +shaka.ui.Icon = class { + /** + * @param {?Element} parent + * @param {?(shaka.extern.UIIcon | string)=} icon + */ + constructor(parent, icon) { + this.parent = parent; + + /** @private {!SVGElement} */ + this.svg_ = shaka.util.Dom.createSVGElement('svg'); + + this.svg_.classList.add('shaka-ui-icon'); + this.svg_.setAttribute('viewBox', '0 -960 960 960'); + + if (icon) { + this.use(icon); + } + + if (this.parent) { + parent.appendChild(this.svg_); + } + } + + /** + * If a single string is passed, it is treated as an SVG path + * @param {shaka.extern.UIIcon | string} icon + * @export + */ + use(icon) { + // check if it is empty string or null or undefined + if (!icon) { + return; + } + + // remove all previous path elements + this.emptyChildNodes_(); + + if (typeof icon == 'string') { + this.svg_.style.setProperty('font-size', ''); + this.applyInlinedSVG_(icon, null); + } else if (typeof icon == 'object') { + const url = icon['url']; + const path = icon['path']; + const viewBox = icon['viewBox']; + const size = icon['size']; + + this.svg_.style.setProperty('font-size', size ? size + 'px': ''); + + if (url) { + // let handle the background-color (icon color) by CSS + this.svg_.style.setProperty('background-color', ''); + this.svg_.style.setProperty('mask-image', `url("${url}")`); + } else if (path) { + this.applyInlinedSVG_(path, viewBox); + } + } + } + + /** + * @return {!SVGElement} + * @export + */ + getSvgElement() { + return this.svg_; + } + + + /** + * @param {string | Array} path + * @param {?string} viewBox + * @private + */ + applyInlinedSVG_(path, viewBox) { + // do not need a background color if mask-image isn't using + this.svg_.style.setProperty('background-color', 'transparent'); + this.svg_.style.setProperty('mask-image', ''); + this.svg_.setAttribute('viewBox', viewBox || '0 -960 960 960'); + + if (Array.isArray(path)) { + for (let i = 0, l = path.length; i < l; i++) { + this.addPath_(path[i]); + } + } else if (path) { + this.addPath_(path); + } + } + + /** + * Add a path element, call `emptyChildNodes()` first to clean previous + * path elements. + * @param {string} path + * @private + */ + addPath_(path) { + const el = shaka.util.Dom.createSVGElement('path'); + el.setAttribute('d', path); + this.svg_.appendChild(el); + } + + /** + * Remove all the child nodes from svg element + * @private + */ + emptyChildNodes_() { + const childNodes = this.svg_.childNodes; + for (let i = 0, l = childNodes.length, child; i < l; i++) { + child = childNodes[i]; + if (child instanceof SVGPathElement) { + child.remove(); + } + } + } +}; diff --git a/ui/icon_registry.js b/ui/icon_registry.js new file mode 100644 index 000000000..75d624781 --- /dev/null +++ b/ui/icon_registry.js @@ -0,0 +1,29 @@ +/*! @license + * Shaka Player + * Copyright 2016 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +goog.provide('shaka.ui.IconRegistry'); + +goog.require('shaka.ui.Enums'); + +/** + * @final + * @export + */ +shaka.ui.IconRegistry = class IconRegistry { + /** + * Register custom icon for UI control elements + * If a single string is passed, it is treated as an SVG path + * @param {string} name + * @param {shaka.extern.UIIcon | string} icon + * @export + */ + static register(name, icon) { + if (typeof icon === 'object' || typeof icon == 'string') { + shaka.ui.Enums.MaterialDesignSVGIcons[name] = icon; + } + } +}; + diff --git a/ui/less/containers.less b/ui/less/containers.less index df660375d..0fd2d47dc 100644 --- a/ui/less/containers.less +++ b/ui/less/containers.less @@ -16,7 +16,7 @@ display: flex; /* Set a special font for material design icons. */ - .material-svg-icon { + .shaka-ui-icon { font-size: 24px; } @@ -201,13 +201,13 @@ &.shaka-small-play-button, &.shaka-skip-previous-button, &.shaka-skip-next-button { - .material-svg-icon { + .shaka-ui-icon { font-size: 32px; } } &.shaka-fullscreen-button { - .material-svg-icon { + .shaka-ui-icon { font-size: 24px; } } @@ -215,7 +215,7 @@ &.shaka-overflow-menu-button { position: relative; - .material-svg-icon { + .shaka-ui-icon { font-size: 24px; } } diff --git a/ui/less/material_svg_icon.less b/ui/less/material_svg_icon.less index 75efd248c..19237740a 100644 --- a/ui/less/material_svg_icon.less +++ b/ui/less/material_svg_icon.less @@ -1,6 +1,10 @@ -.material-svg-icon { +.shaka-ui-icon { display: inline-block; + background-color: currentcolor; fill: currentcolor; + mask-position: left top; + mask-repeat: no-repeat; + mask-size: 1em 1em; width: 1em; height: 1em; } diff --git a/ui/less/overflow_menu.less b/ui/less/overflow_menu.less index 8b18cb571..837855672 100644 --- a/ui/less/overflow_menu.less +++ b/ui/less/overflow_menu.less @@ -74,7 +74,7 @@ /* These are the elements which contain the material design icons. * TODO: Pull MD icon details out of JS. */ - .material-svg-icon { + .shaka-ui-icon { /* TODO(b/116651454): eliminate hard-coded offsets */ padding-left: 0; padding-right: 10px; @@ -203,7 +203,7 @@ } /* The MD icon for the "back" arrow. */ - .material-svg-icon { + .shaka-ui-icon { /* TODO(b/116651454): eliminate hard-coded offsets */ padding-right: 10px; font-size: 18px !important; diff --git a/ui/loop_button.js b/ui/loop_button.js index 0bb6d4d4f..9b1dcc28a 100644 --- a/ui/loop_button.js +++ b/ui/loop_button.js @@ -11,9 +11,9 @@ goog.require('shaka.ui.ContextMenu'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -40,9 +40,9 @@ shaka.ui.LoopButton = class extends shaka.ui.Element { this.button_.classList.add('shaka-loop-button'); this.button_.classList.add('shaka-tooltip'); - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_, - shaka.ui.Enums.MaterialDesignSVGIcons.LOOP); + /** @private {!shaka.ui.Icon} */ + this.icon_ = new shaka.ui.Icon(this.button_, + shaka.ui.Enums.MaterialDesignSVGIcons['LOOP']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); @@ -165,7 +165,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element { this.currentState_.textContent = this.localization.resolve(labelText); - this.icon_.use(this.video.loop ? Icons.UNLOOP : Icons.LOOP); + this.icon_.use(this.video.loop ? Icons['UNLOOP'] : Icons['LOOP']); const ariaText = this.video.loop ? LocIds.EXIT_LOOP_MODE : LocIds.ENTER_LOOP_MODE; diff --git a/ui/material_svg_icon.js b/ui/material_svg_icon.js deleted file mode 100644 index 61f110d3e..000000000 --- a/ui/material_svg_icon.js +++ /dev/null @@ -1,60 +0,0 @@ -/*! @license - * Shaka Player - * Copyright 2016 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -goog.provide('shaka.ui.MaterialSVGIcon'); - -goog.require('shaka.util.Dom'); - -/** - * @final - * @export - */ -shaka.ui.MaterialSVGIcon = class { - /** - * @param {?Element} parent - * @param {?string=} icon - */ - constructor(parent, icon) { - this.parent = parent; - - /** @private {!SVGElement} */ - this.svg_ = shaka.util.Dom.createSVGElement('svg'); - - /** @private {!SVGElement} */ - this.path_ = shaka.util.Dom.createSVGElement('path'); - - this.svg_.classList.add('material-svg-icon'); - this.svg_.setAttribute('viewBox', '0 -960 960 960'); - - if (icon) { - this.use(icon); - } - - this.svg_.appendChild(this.path_); - - if (this.parent) { - parent.appendChild(this.svg_); - } - } - - /** - * @param {string} icon - * @export - */ - use(icon) { - if (icon && typeof icon == 'string') { - this.path_.setAttribute('d', icon); - } - } - - /** - * @return {!SVGElement} - * @export - */ - getSvgElement() { - return this.svg_; - } -}; diff --git a/ui/mute_button.js b/ui/mute_button.js index e0bd23887..20279e823 100644 --- a/ui/mute_button.js +++ b/ui/mute_button.js @@ -12,9 +12,9 @@ goog.require('shaka.ui.ContextMenu'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -39,9 +39,9 @@ shaka.ui.MuteButton = class extends shaka.ui.Element { this.button_.classList.add('shaka-mute-button'); this.button_.classList.add('shaka-tooltip'); - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_, - shaka.ui.Enums.MaterialDesignSVGIcons.MUTE); + /** @private {!shaka.ui.Icon} */ + this.icon_ = new shaka.ui.Icon(this.button_, + shaka.ui.Enums.MaterialDesignSVGIcons['MUTE']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); @@ -169,10 +169,10 @@ shaka.ui.MuteButton = class extends shaka.ui.Element { const Icons = shaka.ui.Enums.MaterialDesignSVGIcons; let icon; if (this.ad) { - icon = this.ad.isMuted() ? Icons.UNMUTE : Icons.MUTE; + icon = this.ad.isMuted() ? Icons['UNMUTE'] : Icons['MUTE']; } else { icon = (this.video.muted || this.video.volume == 0) ? - Icons.UNMUTE : Icons.MUTE; + Icons['UNMUTE'] : Icons['MUTE']; } this.icon_.use(icon); } diff --git a/ui/overflow_menu.js b/ui/overflow_menu.js index a5daa0480..e7d193572 100644 --- a/ui/overflow_menu.js +++ b/ui/overflow_menu.js @@ -13,9 +13,9 @@ goog.require('shaka.log'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); goog.require('shaka.util.Iterables'); @@ -168,8 +168,8 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element { this.overflowMenuButton_.classList.add('shaka-overflow-menu-button'); this.overflowMenuButton_.classList.add('shaka-no-propagation'); this.overflowMenuButton_.classList.add('shaka-tooltip'); - new shaka.ui.MaterialSVGIcon(this.overflowMenuButton_).use( - shaka.ui.Enums.MaterialDesignSVGIcons.OPEN_OVERFLOW); + new shaka.ui.Icon(this.overflowMenuButton_).use( + shaka.ui.Enums.MaterialDesignSVGIcons['OPEN_OVERFLOW']); const markEl = shaka.util.Dom.createHTMLElement('span'); markEl.classList.add('shaka-overflow-quality-mark'); markEl.style.display = 'none'; diff --git a/ui/pip_button.js b/ui/pip_button.js index 2dd9fb9b6..c11eb5088 100644 --- a/ui/pip_button.js +++ b/ui/pip_button.js @@ -11,9 +11,9 @@ goog.require('shaka.ui.ContextMenu'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -45,9 +45,9 @@ shaka.ui.PipButton = class extends shaka.ui.Element { this.pipButton_.classList.add('shaka-pip-button'); this.pipButton_.classList.add('shaka-tooltip'); - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.pipIcon_ = new shaka.ui.MaterialSVGIcon(this.pipButton_, - shaka.ui.Enums.MaterialDesignSVGIcons.PIP); + /** @private {!shaka.ui.Icon} */ + this.pipIcon_ = new shaka.ui.Icon(this.pipButton_, + shaka.ui.Enums.MaterialDesignSVGIcons['PIP']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); @@ -126,7 +126,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element { /** @private */ onEnterPictureInPicture_() { const LocIds = shaka.ui.Locales.Ids; - this.pipIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.EXIT_PIP); + this.pipIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['EXIT_PIP']); this.pipButton_.ariaLabel = this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE); this.currentPipState_.textContent = @@ -137,7 +137,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element { /** @private */ onLeavePictureInPicture_() { const LocIds = shaka.ui.Locales.Ids; - this.pipIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.PIP); + this.pipIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['PIP']); this.pipButton_.ariaLabel = this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE); this.currentPipState_.textContent = diff --git a/ui/play_button.js b/ui/play_button.js index ef6503aae..b47e4de12 100644 --- a/ui/play_button.js +++ b/ui/play_button.js @@ -10,9 +10,9 @@ goog.provide('shaka.ui.PlayButton'); goog.require('shaka.ads.Utils'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.util.Dom'); goog.requireType('shaka.ui.Controls'); @@ -34,8 +34,8 @@ shaka.ui.PlayButton = class extends shaka.ui.Element { this.button = shaka.util.Dom.createButton(); this.parent.appendChild(this.button); - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.icon_ = new shaka.ui.MaterialSVGIcon(this.button); + /** @private {!shaka.ui.Icon} */ + this.icon_ = new shaka.ui.Icon(this.button); const LOCALE_UPDATED = shaka.ui.Localization.LOCALE_UPDATED; this.eventManager.listen(this.localization, LOCALE_UPDATED, () => { @@ -147,7 +147,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element { if (this.isEnded() && this.video.duration) { this.icon_.use(Icons.REPLAY); } else { - this.icon_.use(this.isPaused() ? Icons.PLAY : Icons.PAUSE); + this.icon_.use(this.isPaused() ? Icons['PLAY'] : Icons['PAUSE']); } } }; diff --git a/ui/playback_rate_selection.js b/ui/playback_rate_selection.js index 55fed082e..2cc44094a 100644 --- a/ui/playback_rate_selection.js +++ b/ui/playback_rate_selection.js @@ -29,7 +29,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu { */ constructor(parent, controls) { super(parent, controls, - shaka.ui.Enums.MaterialDesignSVGIcons.PLAYBACK_RATE); + shaka.ui.Enums.MaterialDesignSVGIcons['PLAYBACK_RATE']); this.button.classList.add('shaka-playbackrate-button'); this.menu.classList.add('shaka-playback-rates'); @@ -86,7 +86,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu { const rate = this.player.getPlaybackRate(); // Remove the old checkmark icon and related tags and classes if it exists. const checkmarkIcon = shaka.ui.Utils.getDescendantIfExists( - this.menu, 'material-svg-icon shaka-chosen-item'); + this.menu, 'shaka-ui-icon shaka-chosen-item'); if (checkmarkIcon) { const previouslySelectedButton = checkmarkIcon.parentElement; previouslySelectedButton.removeAttribute('aria-selected'); diff --git a/ui/recenter_vr.js b/ui/recenter_vr.js index 99d0c53c9..b1959bf3d 100644 --- a/ui/recenter_vr.js +++ b/ui/recenter_vr.js @@ -10,9 +10,9 @@ goog.provide('shaka.ui.RecenterVRButton'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -38,9 +38,9 @@ shaka.ui.RecenterVRButton = class extends shaka.ui.Element { this.recenterVRButton_.classList.add('shaka-tooltip'); this.recenterVRButton_.ariaPressed = 'false'; - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.recenterVRIcon_ = new shaka.ui.MaterialSVGIcon(this.recenterVRButton_, - shaka.ui.Enums.MaterialDesignSVGIcons.RECENTER_VR); + /** @private {!shaka.ui.Icon} */ + this.recenterVRIcon_ = new shaka.ui.Icon(this.recenterVRButton_, + shaka.ui.Enums.MaterialDesignSVGIcons['RECENTER_VR']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); diff --git a/ui/remote_button.js b/ui/remote_button.js index f8b6efddf..ed13a0d30 100644 --- a/ui/remote_button.js +++ b/ui/remote_button.js @@ -12,9 +12,9 @@ goog.require('shaka.device.DeviceFactory'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -43,11 +43,11 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element { this.remoteButton_.classList.add('shaka-tooltip'); this.remoteButton_.ariaPressed = 'false'; - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.remoteIcon_ = new shaka.ui.MaterialSVGIcon(this.remoteButton_, + /** @private {!shaka.ui.Icon} */ + this.remoteIcon_ = new shaka.ui.Icon(this.remoteButton_, this.isAirPlay_ ? - shaka.ui.Enums.MaterialDesignSVGIcons.AIRPLAY : - shaka.ui.Enums.MaterialDesignSVGIcons.CAST); + shaka.ui.Enums.MaterialDesignSVGIcons['AIRPLAY'] : + shaka.ui.Enums.MaterialDesignSVGIcons['CAST']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); @@ -206,9 +206,9 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element { return; } if (this.video.remote.state == 'disconnected') { - this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.CAST); + this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['CAST']); } else { - this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.EXIT_CAST); + this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['EXIT_CAST']); } } }; diff --git a/ui/resolution_selection.js b/ui/resolution_selection.js index 200510c07..c4eb36980 100644 --- a/ui/resolution_selection.js +++ b/ui/resolution_selection.js @@ -35,7 +35,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu { * @param {!shaka.ui.Controls} controls */ constructor(parent, controls) { - super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons.RESOLUTION); + super(parent, controls, + shaka.ui.Enums.MaterialDesignSVGIcons['RESOLUTION']); this.button.classList.add('shaka-resolution-button'); this.button.classList.add('shaka-tooltip-status'); diff --git a/ui/rewind_button.js b/ui/rewind_button.js index a49c101ec..acebbaf2f 100644 --- a/ui/rewind_button.js +++ b/ui/rewind_button.js @@ -10,9 +10,9 @@ goog.provide('shaka.ui.RewindButton'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.util.Dom'); @@ -36,9 +36,8 @@ shaka.ui.RewindButton = class extends shaka.ui.Element { this.button_.setAttribute('shaka-status', this.localization.resolve(shaka.ui.Locales.Ids.OFF)); - new shaka.ui.MaterialSVGIcon(this.button_).use( - shaka.ui.Enums.MaterialDesignSVGIcons.REWIND, - ); + new shaka.ui.Icon(this.button_).use( + shaka.ui.Enums.MaterialDesignSVGIcons['REWIND']); this.parent.appendChild(this.button_); this.updateAriaLabel_(); diff --git a/ui/save_video_frame_button.js b/ui/save_video_frame_button.js index 232d20c96..c302364c6 100644 --- a/ui/save_video_frame_button.js +++ b/ui/save_video_frame_button.js @@ -13,9 +13,9 @@ goog.require('shaka.ui.ContextMenu'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -43,9 +43,9 @@ shaka.ui.SaveVideoFrameButton = class extends shaka.ui.Element { this.button_.classList.add('shaka-save.video-frame-button'); this.button_.classList.add('shaka-tooltip'); - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_, - shaka.ui.Enums.MaterialDesignSVGIcons.DOWNLOAD); + /** @private {!shaka.ui.Icon} */ + this.icon_ = new shaka.ui.Icon(this.button_, + shaka.ui.Enums.MaterialDesignSVGIcons['DOWNLOAD']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); diff --git a/ui/settings_menu.js b/ui/settings_menu.js index 268e1c9cd..58f42da95 100644 --- a/ui/settings_menu.js +++ b/ui/settings_menu.js @@ -9,7 +9,7 @@ goog.provide('shaka.ui.SettingsMenu'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); -goog.require('shaka.ui.MaterialSVGIcon'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); goog.require('shaka.util.FakeEvent'); @@ -26,7 +26,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element { /** * @param {!HTMLElement} parent * @param {!shaka.ui.Controls} controls - * @param {string} iconText + * @param {shaka.extern.UIIcon | string} iconText */ constructor(parent, controls, iconText) { super(parent, controls); @@ -73,7 +73,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element { /** - * @param {string} iconText + * @param {shaka.extern.UIIcon | string} iconText * @private */ addButton_(iconText) { @@ -81,8 +81,8 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element { this.button = shaka.util.Dom.createButton(); this.button.classList.add('shaka-overflow-button'); - /** @protected {!shaka.ui.MaterialSVGIcon}*/ - this.icon = new shaka.ui.MaterialSVGIcon(this.button, iconText); + /** @protected {!shaka.ui.Icon}*/ + this.icon = new shaka.ui.Icon(this.button, iconText); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); @@ -120,9 +120,9 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element { this.controls.hideSettingsMenus(); }); - /** @private {shaka.ui.MaterialSVGIcon} */ - this.backIcon_ = new shaka.ui.MaterialSVGIcon(this.backButton, - shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE); + /** @private {shaka.ui.Icon} */ + this.backIcon_ = new shaka.ui.Icon(this.backButton, + shaka.ui.Enums.MaterialDesignSVGIcons['CLOSE']); /** @protected {!HTMLElement}*/ this.backSpan = shaka.util.Dom.createHTMLElement('span'); @@ -138,7 +138,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element { // inside of the overflow menu, that option must be replaced with a // "Back" arrow that returns the user to the main menu. if (this.parent.classList.contains('shaka-overflow-menu')) { - this.backIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.BACK); + this.backIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['BACK']); this.eventManager.listen(this.menu, 'click', () => { shaka.ui.Utils.setDisplay(this.menu, false); diff --git a/ui/skip_next_button.js b/ui/skip_next_button.js index e666179c3..b6b03fc0e 100644 --- a/ui/skip_next_button.js +++ b/ui/skip_next_button.js @@ -10,9 +10,9 @@ goog.provide('shaka.ui.SkipNextButton'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -40,8 +40,8 @@ shaka.ui.SkipNextButton = class extends shaka.ui.Element { this.button_ = shaka.util.Dom.createButton(); this.button_.classList.add('shaka-skip-next-button'); this.button_.classList.add('shaka-tooltip'); - new shaka.ui.MaterialSVGIcon(this.button_).use( - shaka.ui.Enums.MaterialDesignSVGIcons.SKIP_NEXT); + new shaka.ui.Icon(this.button_).use( + shaka.ui.Enums.MaterialDesignSVGIcons['SKIP_NEXT']); this.parent.appendChild(this.button_); this.updateAriaLabel_(); diff --git a/ui/skip_previous_button.js b/ui/skip_previous_button.js index 8f2677872..f48474f28 100644 --- a/ui/skip_previous_button.js +++ b/ui/skip_previous_button.js @@ -10,9 +10,9 @@ goog.provide('shaka.ui.SkipPreviousButton'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -40,8 +40,8 @@ shaka.ui.SkipPreviousButton = class extends shaka.ui.Element { this.button_ = shaka.util.Dom.createButton(); this.button_.classList.add('shaka-skip-previous-button'); this.button_.classList.add('shaka-tooltip'); - new shaka.ui.MaterialSVGIcon(this.button_).use( - shaka.ui.Enums.MaterialDesignSVGIcons.SKIP_PREVIOUS); + new shaka.ui.Icon(this.button_).use( + shaka.ui.Enums.MaterialDesignSVGIcons['SKIP_PREVIOUS']); this.parent.appendChild(this.button_); this.updateAriaLabel_(); diff --git a/ui/statistics_button.js b/ui/statistics_button.js index 929706000..ca0ab29da 100644 --- a/ui/statistics_button.js +++ b/ui/statistics_button.js @@ -12,9 +12,9 @@ goog.require('shaka.ui.ContextMenu'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -39,9 +39,9 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element { this.button_ = shaka.util.Dom.createButton(); this.button_.classList.add('shaka-statistics-button'); - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_, - shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON); + /** @private {!shaka.ui.Icon} */ + this.icon_ = new shaka.ui.Icon(this.button_, + shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); @@ -197,11 +197,11 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element { /** @private */ onClick_() { if (this.container_.classList.contains('shaka-hidden')) { - this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_OFF); + this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_OFF']); this.timer_.tickEvery(0.1); shaka.ui.Utils.setDisplay(this.container_, true); } else { - this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON); + this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']); this.timer_.stop(); shaka.ui.Utils.setDisplay(this.container_, false); } @@ -247,8 +247,8 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element { const closeElement = shaka.util.Dom.createHTMLElement('div'); closeElement.classList.add('shaka-no-propagation'); closeElement.classList.add('shaka-statistics-close'); - const icon = new shaka.ui.MaterialSVGIcon(closeElement, - shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE); + const icon = new shaka.ui.Icon(closeElement, + shaka.ui.Enums.MaterialDesignSVGIcons['CLOSE']); const iconElement = icon.getSvgElement(); iconElement.classList.add('material-icons', 'notranslate'); this.container_.appendChild(closeElement); diff --git a/ui/text_selection.js b/ui/text_selection.js index b85d3f300..4ff7d6539 100644 --- a/ui/text_selection.js +++ b/ui/text_selection.js @@ -32,7 +32,7 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu { */ constructor(parent, controls) { super(parent, - controls, shaka.ui.Enums.MaterialDesignSVGIcons.CLOSED_CAPTIONS); + controls, shaka.ui.Enums.MaterialDesignSVGIcons['CLOSED_CAPTIONS']); this.button.classList.add('shaka-caption-button'); this.button.classList.add('shaka-tooltip-status'); @@ -127,10 +127,11 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu { .some((track) => track.active); if (hasTrack) { - this.icon.use(shaka.ui.Enums.MaterialDesignSVGIcons.CLOSED_CAPTIONS); + this.icon.use(shaka.ui.Enums.MaterialDesignSVGIcons['CLOSED_CAPTIONS']); this.button.ariaPressed = 'true'; } else { - this.icon.use(shaka.ui.Enums.MaterialDesignSVGIcons.CLOSED_CAPTIONS_OFF); + this.icon.use( + shaka.ui.Enums.MaterialDesignSVGIcons['CLOSED_CAPTIONS_OFF']); this.button.ariaPressed = 'false'; } diff --git a/ui/toggle_stereoscopic.js b/ui/toggle_stereoscopic.js index 9c30e9856..158986593 100644 --- a/ui/toggle_stereoscopic.js +++ b/ui/toggle_stereoscopic.js @@ -10,9 +10,9 @@ goog.provide('shaka.ui.ToggleStereoscopicButton'); goog.require('shaka.ui.Controls'); goog.require('shaka.ui.Element'); goog.require('shaka.ui.Enums'); +goog.require('shaka.ui.Icon'); goog.require('shaka.ui.Locales'); goog.require('shaka.ui.Localization'); -goog.require('shaka.ui.MaterialSVGIcon'); goog.require('shaka.ui.OverflowMenu'); goog.require('shaka.ui.Utils'); goog.require('shaka.util.Dom'); @@ -39,10 +39,10 @@ shaka.ui.ToggleStereoscopicButton = class extends shaka.ui.Element { this.toggleStereoscopicButton_.classList.add('shaka-tooltip'); this.toggleStereoscopicButton_.ariaPressed = 'false'; - /** @private {!shaka.ui.MaterialSVGIcon} */ - this.toggleStereoscopicIcon_ = new shaka.ui.MaterialSVGIcon( + /** @private {!shaka.ui.Icon} */ + this.toggleStereoscopicIcon_ = new shaka.ui.Icon( this.toggleStereoscopicButton_, - shaka.ui.Enums.MaterialDesignSVGIcons.TOGGLE_STEREOSCOPIC); + shaka.ui.Enums.MaterialDesignSVGIcons['TOGGLE_STEREOSCOPIC']); const label = shaka.util.Dom.createHTMLElement('label'); label.classList.add('shaka-overflow-button-label'); diff --git a/ui/ui_utils.js b/ui/ui_utils.js index 657535bda..eb165ae75 100644 --- a/ui/ui_utils.js +++ b/ui/ui_utils.js @@ -9,7 +9,7 @@ goog.provide('shaka.ui.Utils'); goog.require('goog.asserts'); goog.require('shaka.ui.Enums'); -goog.require('shaka.ui.MaterialSVGIcon'); +goog.require('shaka.ui.Icon'); shaka.ui.Utils = class { @@ -65,8 +65,8 @@ shaka.ui.Utils = class { * @return {!SVGElement} */ static checkmarkIcon() { - const icon = new shaka.ui.MaterialSVGIcon(null, - shaka.ui.Enums.MaterialDesignSVGIcons.CHECKMARK); + const icon = new shaka.ui.Icon(null, + shaka.ui.Enums.MaterialDesignSVGIcons['CHECKMARK']); const iconElement = icon.getSvgElement(); iconElement.classList.add('shaka-chosen-item'); // Screen reader should ignore icon text. diff --git a/ui/video_type_selection.js b/ui/video_type_selection.js index 18debd419..a4a1f7f69 100644 --- a/ui/video_type_selection.js +++ b/ui/video_type_selection.js @@ -29,7 +29,7 @@ shaka.ui.VideoTypeSelection = class extends shaka.ui.SettingsMenu { */ constructor(parent, controls) { super(parent, controls, - shaka.ui.Enums.MaterialDesignSVGIcons.VIDEO_TYPE); + shaka.ui.Enums.MaterialDesignSVGIcons['VIDEO_TYPE']); this.button.classList.add('shaka-playbackrate-button'); this.menu.classList.add('shaka-video-type');