diff --git a/src/js/menu/menu-item.js b/src/js/menu/menu-item.js index 99accf6d46..33f5bedd68 100644 --- a/src/js/menu/menu-item.js +++ b/src/js/menu/menu-item.js @@ -4,6 +4,7 @@ import ClickableComponent from '../clickable-component.js'; import Component from '../component.js'; import {createEl} from '../utils/dom.js'; +import { containsHexCode, decodeString } from '../utils/str.js'; /** @import Player from '../player' */ @@ -68,10 +69,18 @@ class MenuItem extends ClickableComponent { tabIndex: -1 }, props), attrs); + const createTextContent = () => { + if (containsHexCode(this.options_.label)) { + return this.localize(decodeString(this.options_.label)); + } + + return this.localize(this.options_.label); + }; + // swap icon with menu item text. const menuItemEl = createEl('span', { className: 'vjs-menu-item-text', - textContent: this.localize(this.options_.label) + textContent: createTextContent() }); // If using SVG icons, the element with vjs-icon-placeholder will be added separately. diff --git a/src/js/utils/str.js b/src/js/utils/str.js index 3eb3ee8147..08af74cfac 100644 --- a/src/js/utils/str.js +++ b/src/js/utils/str.js @@ -52,3 +52,30 @@ export const toTitleCase = function(string) { export const titleCaseEquals = function(str1, str2) { return toTitleCase(str1) === toTitleCase(str2); }; + +/** + * + * @param {string} string + * The string that will be tested + * + * @return {boolean} + * Whether the string contains a Hex Code + */ +export const containsHexCode = (string) => { + return /(&#x[0-9a-fA-F]{2,4};)/.test(string); +}; + +/** + * + * @param {string} string + * The string that will be decoded + * + * @return {string} + * Decoded string without problematic characters + */ +export const decodeString = (string) => { + // eslint-disable-next-line no-undef + const doc = new DOMParser().parseFromString(string, 'text/html'); + + return doc.documentElement.textContent; +};