diff --git a/.changeset/every-berries-doubt.md b/.changeset/every-berries-doubt.md new file mode 100644 index 00000000..7fb93245 --- /dev/null +++ b/.changeset/every-berries-doubt.md @@ -0,0 +1,5 @@ +--- +'@theoplayer/web-ui': patch +--- + +Improve labels for text tracks and audio tracks in the ``. diff --git a/package-lock.json b/package-lock.json index 7dee2b25..d58055f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@theoplayer/web-ui", - "version": "1.14.0", + "version": "1.16.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@theoplayer/web-ui", - "version": "1.14.0", + "version": "1.16.2", "license": "MIT", "workspaces": [ ".", @@ -41,7 +41,7 @@ "rollup-plugin-string": "^3.0.0", "rollup-plugin-swc3": "^0.12.1", "serve": "^14.2.4", - "theoplayer": "^10.6.1", + "theoplayer": "^10.13.0", "tslib": "^2.8.1", "typedoc": "^0.27.7", "typedoc-plugin-mdn-links": "^4.0.12", @@ -8442,9 +8442,9 @@ } }, "node_modules/theoplayer": { - "version": "10.6.1", - "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-10.6.1.tgz", - "integrity": "sha512-mz3LpcChF0/pUWJwzJtMwKWyuqmv85Ao8eAFVmYFI0K+krjC+yAm28suFa7E6BITZfNTtwlDTY+ZPRDcxd6+ng==", + "version": "10.13.0", + "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-10.13.0.tgz", + "integrity": "sha512-RrHWZWFG9xEcNPwQV46mRJM1YouvS4A/ZB/0o2OM2GuFvZH65DUhsr3fml7YIXKa6iLUawvsuwHxMoM2MztNZQ==", "dev": true, "license": "SEE LICENSE AT https://www.theoplayer.com/terms" }, @@ -8835,11 +8835,11 @@ }, "react": { "name": "@theoplayer/react-ui", - "version": "1.14.0", + "version": "1.16.2", "license": "MIT", "dependencies": { "@lit/react": "^1.0.7", - "@theoplayer/web-ui": "^1.14.0" + "@theoplayer/web-ui": "^1.16.2" }, "devDependencies": { "@rollup/plugin-json": "^6.1.0", @@ -8854,7 +8854,7 @@ "rollup": "^4.34.6", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-swc3": "^0.12.1", - "theoplayer": "^10.6.1", + "theoplayer": "^10.13.0", "tslib": "^2.8.1", "typedoc": "^0.27.7", "typedoc-plugin-external-resolver": "^1.0.3", @@ -10248,14 +10248,14 @@ "@swc/cli": "^0.6.0", "@swc/core": "^1.10.15", "@swc/helpers": "^0.5.15", - "@theoplayer/web-ui": "^1.14.0", + "@theoplayer/web-ui": "^1.16.2", "@types/react": "^18.2.79", "react": "^18.2.0", "react-dom": "^18.2.0", "rollup": "^4.34.6", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-swc3": "^0.12.1", - "theoplayer": "^10.6.1", + "theoplayer": "^10.13.0", "tslib": "^2.8.1", "typedoc": "^0.27.7", "typedoc-plugin-external-resolver": "^1.0.3", @@ -10294,7 +10294,7 @@ "rollup-plugin-string": "^3.0.0", "rollup-plugin-swc3": "^0.12.1", "serve": "^14.2.4", - "theoplayer": "^10.6.1", + "theoplayer": "^10.13.0", "tslib": "^2.8.1", "typedoc": "^0.27.7", "typedoc-plugin-mdn-links": "^4.0.12", @@ -11680,14 +11680,14 @@ "@swc/cli": "^0.6.0", "@swc/core": "^1.10.15", "@swc/helpers": "^0.5.15", - "@theoplayer/web-ui": "^1.14.0", + "@theoplayer/web-ui": "^1.16.2", "@types/react": "^18.2.79", "react": "^18.2.0", "react-dom": "^18.2.0", "rollup": "^4.34.6", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-swc3": "^0.12.1", - "theoplayer": "^10.6.1", + "theoplayer": "^10.13.0", "tslib": "^2.8.1", "typedoc": "^0.27.7", "typedoc-plugin-external-resolver": "^1.0.3", @@ -15343,9 +15343,9 @@ } }, "theoplayer": { - "version": "10.6.1", - "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-10.6.1.tgz", - "integrity": "sha512-mz3LpcChF0/pUWJwzJtMwKWyuqmv85Ao8eAFVmYFI0K+krjC+yAm28suFa7E6BITZfNTtwlDTY+ZPRDcxd6+ng==", + "version": "10.13.0", + "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-10.13.0.tgz", + "integrity": "sha512-RrHWZWFG9xEcNPwQV46mRJM1YouvS4A/ZB/0o2OM2GuFvZH65DUhsr3fml7YIXKa6iLUawvsuwHxMoM2MztNZQ==", "dev": true }, "through": { @@ -19243,9 +19243,9 @@ } }, "theoplayer": { - "version": "10.6.1", - "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-10.6.1.tgz", - "integrity": "sha512-mz3LpcChF0/pUWJwzJtMwKWyuqmv85Ao8eAFVmYFI0K+krjC+yAm28suFa7E6BITZfNTtwlDTY+ZPRDcxd6+ng==", + "version": "10.13.0", + "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-10.13.0.tgz", + "integrity": "sha512-RrHWZWFG9xEcNPwQV46mRJM1YouvS4A/ZB/0o2OM2GuFvZH65DUhsr3fml7YIXKa6iLUawvsuwHxMoM2MztNZQ==", "dev": true }, "through": { diff --git a/package.json b/package.json index 1c613657..f73e953f 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "rollup-plugin-string": "^3.0.0", "rollup-plugin-swc3": "^0.12.1", "serve": "^14.2.4", - "theoplayer": "^10.6.1", + "theoplayer": "^10.13.0", "tslib": "^2.8.1", "typedoc": "^0.27.7", "typedoc-plugin-mdn-links": "^4.0.12", diff --git a/react/package.json b/react/package.json index ceaa7a7d..3ca9d82a 100644 --- a/react/package.json +++ b/react/package.json @@ -71,7 +71,7 @@ "rollup": "^4.34.6", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-swc3": "^0.12.1", - "theoplayer": "^10.6.1", + "theoplayer": "^10.13.0", "tslib": "^2.8.1", "typedoc": "^0.27.7", "typedoc-plugin-external-resolver": "^1.0.3", diff --git a/src/components/MediaTrackRadioButton.ts b/src/components/MediaTrackRadioButton.ts index 12e65f3f..aea15857 100644 --- a/src/components/MediaTrackRadioButton.ts +++ b/src/components/MediaTrackRadioButton.ts @@ -72,14 +72,19 @@ export class MediaTrackRadioButton extends RadioButton { function getTrackLabel(track: MediaTrack): string { let label = track.label; + let languageCode = track.language; if (label) { - return label; + if (label === languageCode) { + // Ignore default label with just the language code. + } else { + return label; + } } - let languageCode = track.language; - if (!languageCode) { - return ''; + let localizedLanguageName = languageCode && localizeLanguageName(languageCode); + if (localizedLanguageName) { + return localizedLanguageName; } - return localizeLanguageName(languageCode) || languageCode || ''; + return languageCode || label || ''; } customElements.define('theoplayer-media-track-radio-button', MediaTrackRadioButton); diff --git a/src/components/TextTrackRadioButton.ts b/src/components/TextTrackRadioButton.ts index 2136eb4e..2f11e465 100644 --- a/src/components/TextTrackRadioButton.ts +++ b/src/components/TextTrackRadioButton.ts @@ -5,6 +5,13 @@ import { localizeLanguageName, setTextContent } from '../util/CommonUtils'; import { Attribute } from '../util/Attribute'; import { createTemplate } from '../util/TemplateUtils'; +declare module 'theoplayer/chromeless' { + interface TextTrack { + // TODO Remove after updating to THEOplayer 10.14.0. + captionChannel?: number; + } +} + const template = createTemplate('theoplayer-text-track-radio-button', buttonTemplate(``)); const TRACK_EVENTS = ['change', 'update'] as const; @@ -70,14 +77,24 @@ export class TextTrackRadioButton extends RadioButton { function getTrackLabel(track: TextTrack): string { let label = track.label; + let languageCode = track.language; if (label) { - return label; + if (label === languageCode) { + // Ignore default label with just the language code. + } else if (track.type === 'cea608' && /^CC\d+$/.test(track.label)) { + // Ignore default label with just the caption channel. + } else { + return label; + } } - let languageCode = track.language; - if (!languageCode) { - return ''; + let localizedLanguageName = languageCode && localizeLanguageName(languageCode); + if (localizedLanguageName) { + return localizedLanguageName; + } + if (track.type === 'cea608' && typeof track.captionChannel === 'number') { + return `CC${track.captionChannel}`; } - return localizeLanguageName(languageCode) || languageCode || ''; + return languageCode || label || ''; } customElements.define('theoplayer-text-track-radio-button', TextTrackRadioButton);