Skip to content

Commit

Permalink
fix: removes duplicate id in text track settings (#8755)
Browse files Browse the repository at this point in the history
## Description
Prevents a duplicate id in text track settings.
Fixes #8754

## Specific Changes proposed
The text edge settings were erroneously duplicating the id generated for
the background colour. Changes to a unique name.
Adds a general test for duplicate ids.

## Requirements Checklist
- [x] Feature implemented / Bug fixed
- [ ] If necessary, more likely in a feature request than a bug fix
- [x] Change has been verified in an actual browser (Chrome, Firefox,
IE)
  - [x] Unit Tests updated or fixed
  - [ ] Docs/guides updated
- [ ] Example created ([starter template on
JSBin](https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0))
- [x] Has no DOM changes which impact accessiblilty or trigger warnings
(e.g. Chrome issues tab)
  - [x] Has no changes to JSDoc which cause `npm run docs:api` to error
- [ ] Reviewed by Two Core Contributors
  • Loading branch information
mister-ben authored Jun 1, 2024
1 parent 8729e31 commit a10d258
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/js/tracks/text-track-settings-font.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class TextTrackSettingsFont extends Component {
player,
{
id_,
legendId: `captions-background-${id_}`,
legendId: `captions-edge-style-${id_}`,
legendText: this.localize('Text Edge Style'),
className: 'vjs-edge-style vjs-track-setting',
selects: this.options_.fieldSets[1],
Expand Down
12 changes: 12 additions & 0 deletions test/unit/tracks/text-track-settings.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -397,3 +397,15 @@ QUnit.test('should associate <label>s with <select>s', function(assert) {
);

});

QUnit.test('should not duplicate ids', function(assert) {
const player = TestHelpers.makePlayer({
tracks
});

const elements = [...player.el().querySelectorAll('[id]')];
const ids = elements.map(el => el.id);
const duplicates = elements.filter(el => ids.filter(id => id === el.id).length > 1);

assert.strictEqual(duplicates.length, 0, 'there should be no duplicate ids');
});

0 comments on commit a10d258

Please sign in to comment.