Ignore default track labels

.changeset/every-berries-doubt.md

@@ -0,0 +1,5 @@
+---
+'@theoplayer/web-ui': patch
+---
+
+Improve labels for text tracks and audio tracks in the `<theoplayer-language-menu>`.

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",

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",

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);

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(`<slot></slot>`));
 
 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);