feat(UI): Add captions-style submenu for subtitle size and position by aditya0155 · Pull Request #10540 · shaka-project/shaka-player

aditya0155 · 2026-09-04T19:37:22Z

Pull Request Type

Feature

Related Issue

Discussion in (FreeTubeApp/FreeTube#9120 (comment))
where adding separate captions-size and captions-position buttons made the overflow menu too full when subtitles were enabled.

Description

This PR adds a Subtitle style (captions-style) submenu to Shaka Player.

Right now, subtitle size and subtitle position are two separate buttons. When I was adding them to FreeTube in FreeTube#9723, the menu got too full once subtitles were turned on. Making a single submenu for them like YouTube does is a much cleaner option.

What this PR does:

Adds a single Subtitle style button to the player menu with the CC settings icon.
Shows current values on the menu button (e.g. 100% · Default).
Clicking it opens a submenu with Size and Position options.
When you hover or focus an option, you can preview the change without saving it (same as #10077).
Clicking the back button inside Size or Position takes you back to Subtitle style instead of closing the whole menu.
Keyboard focus is properly kept inside the menu even if the player scale isn't in the default options.
The button only shows up when subtitles are on, and hides when they are off.

Testing

Open a video with subtitles and enable them.
Open the player menu and confirm Subtitle style is visible with current settings (e.g. 100% · Default).
Click Subtitle style and confirm Size and Position options are shown.
Click Size (or Position) and check that preview works on hover and keyboard focus.
Click back and confirm it goes back to Subtitle style without closing the menu.
Click back again and confirm it returns to the main player menu.
Select an option and confirm the change is saved and updated on the main menu button.
Turn off subtitles and confirm the button is hidden.

Before:

Before.mp4

After:

After.mp4

Tests:

Added 6 unit tests in test/ui/ui_unit.js.
All UI controls tests pass.
Linter and spell checks pass with 0 errors.

Desktop

OS: Windows
OS Version: 11

Additional Context

Grouping size and position into one submenu keeps the player menu clean, matches YouTube's player UX, and leaves room for more subtitle settings in the future without cluttering the menu.

also apologies I linked the wrong PR link in related issue previously, I have corrected it now

avelad · 2026-09-07T15:21:33Z

+shaka.ui.OverflowMenu.registerElement(
+    'captions-style', new shaka.ui.CaptionStyle.Factory());
+
+shaka.ui.OverflowMenu.registerElement(
+    'captions-styles', new shaka.ui.CaptionStyle.Factory());
+
+shaka.ui.Controls.registerElement(
+    'captions-style', new shaka.ui.CaptionStyle.Factory());
+
+shaka.ui.Controls.registerElement(
+    'captions-styles', new shaka.ui.CaptionStyle.Factory());


I added it to match captionsStyles config name but captions-style makes more sense so I have pushed the changes

avelad · 2026-09-07T15:22:56Z

The changes in this file sound like they should be in a separate PR.

Thanks alot for the review I have reverted the changes

avelad · 2026-09-07T15:23:01Z

The changes in this file sound like they should be in a separate PR.

Yes I have reverted the changes

shaka-bot · 2026-09-07T15:26:41Z

Bundle Size Report for PR #10540

File	HEAD	Base	Diff
controls.css	41.5 KiB (7.1 KiB)	41.4 KiB (7.1 KiB)	+0.1 KiB
controls.modern.css	34.0 KiB (6.5 KiB)	33.9 KiB (6.5 KiB)	+0.1 KiB
demo.compiled.debug.js	266.4 KiB (54.2 KiB)	266.4 KiB (54.2 KiB)	0.0 KiB
demo.compiled.js	266.4 KiB (54.2 KiB)	266.4 KiB (54.2 KiB)	0.0 KiB
demo.css	160.4 KiB (25.7 KiB)	160.4 KiB (25.7 KiB)	0.0 KiB
demo.modern.css	146.1 KiB (24.7 KiB)	146.1 KiB (24.7 KiB)	0.0 KiB
locales.js	45.3 KiB (11.2 KiB)	45.2 KiB (11.2 KiB)	+0.1 KiB
receiver.compiled.debug.js	151.1 KiB (24.5 KiB)	151.1 KiB (24.5 KiB)	0.0 KiB
receiver.compiled.js	151.1 KiB (24.5 KiB)	151.1 KiB (24.5 KiB)	0.0 KiB
shaka-player.compiled-es2021.debug.js	1332.6 KiB (331.6 KiB)	1332.6 KiB (331.6 KiB)	0.0 KiB
shaka-player.compiled-es2021.js	701.7 KiB (237.0 KiB)	701.7 KiB (237.0 KiB)	0.0 KiB
shaka-player.compiled.debug.js	1632.3 KiB (377.3 KiB)	1632.3 KiB (377.3 KiB)	+0.0 KiB
shaka-player.compiled.js	818.8 KiB (268.9 KiB)	818.8 KiB (268.9 KiB)	0.0 KiB
shaka-player.dash-es2021.debug.js	994.5 KiB (252.4 KiB)	994.5 KiB (252.4 KiB)	0.0 KiB
shaka-player.dash-es2021.js	494.6 KiB (170.2 KiB)	494.6 KiB (170.2 KiB)	0.0 KiB
shaka-player.dash.debug.js	1215.6 KiB (286.1 KiB)	1215.6 KiB (286.1 KiB)	+0.0 KiB
shaka-player.dash.js	579.8 KiB (193.3 KiB)	579.8 KiB (193.3 KiB)	0.0 KiB
shaka-player.experimental-es2021.debug.js	1787.1 KiB (431.4 KiB)	1778.4 KiB (430.0 KiB)	+8.7 KiB
shaka-player.experimental-es2021.js	990.1 KiB (316.5 KiB)	985.2 KiB (315.4 KiB)	+4.9 KiB
shaka-player.experimental.debug.js	2180.1 KiB (489.9 KiB)	2170.1 KiB (488.4 KiB)	+10.1 KiB
shaka-player.experimental.js	1141.0 KiB (356.2 KiB)	1135.6 KiB (354.9 KiB)	+5.5 KiB
shaka-player.hls-es2021.debug.js	1015.8 KiB (255.7 KiB)	1015.8 KiB (255.7 KiB)	0.0 KiB
shaka-player.hls-es2021.js	522.2 KiB (178.9 KiB)	522.2 KiB (178.9 KiB)	0.0 KiB
shaka-player.hls.debug.js	1241.0 KiB (290.2 KiB)	1241.0 KiB (290.2 KiB)	+0.0 KiB
shaka-player.hls.js	610.3 KiB (203.4 KiB)	610.3 KiB (203.4 KiB)	0.0 KiB
shaka-player.transmuxer-worker.debug.js	243.4 KiB (56.1 KiB)	243.4 KiB (56.1 KiB)	-0.0 KiB
shaka-player.transmuxer-worker.js	98.5 KiB (32.3 KiB)	98.5 KiB (32.3 KiB)	0.0 KiB
shaka-player.ui-es2021.debug.js	1658.7 KiB (404.8 KiB)	1650.0 KiB (403.4 KiB)	+8.7 KiB
shaka-player.ui-es2021.js	926.3 KiB (299.6 KiB)	921.5 KiB (298.5 KiB)	+4.9 KiB
shaka-player.ui.debug.js	1999.1 KiB (456.6 KiB)	1989.0 KiB (455.1 KiB)	+10.1 KiB
shaka-player.ui.js	1057.4 KiB (335.6 KiB)	1051.9 KiB (334.4 KiB)	+5.5 KiB

shaka-bot · 2026-09-07T15:44:25Z

Incremental code coverage: 98.19%

…ition Introduce shaka.ui.CaptionStyle (registered as 'captions-style') to provide a unified, nested submenu for configuring subtitle size and position. This collapses separate 'captions-size' and 'captions-position' entries into a single 'Subtitle style' item in the overflow menu, matching YouTube's player UX and eliminating overflow menu bloat. Key Changes: - ui/caption_style.js: Multi-page navigation (ROOT, SIZE, POSITION) with live subtitle preview, checkmarks, dynamic localization, and generic radio option helper. - ui/settings_menu.js: Add onBackButtonClick(event) lifecycle hook to cleanly intercept back-navigation inside nested submenus without closing the entire menu, fully backward compatible with existing subclasses. - ui/text_position.js: Extract TextPosition.getNameOfPosition(position, localization) as a public static helper to eliminate duplicate position resolution code. - ui/text_style.js: Add 'textchanged' listener to TextStyleMenu for dynamic text track availability updates. - ui/less/overflow_menu.less: Reset inline label margin in submenus to prevent misalignment. - docs/tutorials/ui-customization.md: Document 'captions-style' in controlPanelElements and overflowMenuButtons. - test/ui/ui_unit.js: Comprehensive unit tests covering navigation, preview lifecycle, overflow menu integration, track availability, and focus retention.

avelad reviewed Sep 7, 2026

View reviewed changes

aditya0155 force-pushed the feat/caption-style-submenu branch from 2ad54d4 to 83060a3 Compare September 7, 2026 16:28

Navigation Menu

Uh oh!

feat(UI): Add captions-style submenu for subtitle size and position - #10540

feat(UI): Add captions-style submenu for subtitle size and position#10540
aditya0155 wants to merge 1 commit into
shaka-project:mainfrom
aditya0155:feat/caption-style-submenu

aditya0155 commented Sep 4, 2026 •

edited

Loading

Uh oh!

avelad Sep 7, 2026

Uh oh!

aditya0155 Sep 7, 2026

Uh oh!

avelad Sep 7, 2026

Uh oh!

aditya0155 Sep 7, 2026

Uh oh!

avelad Sep 7, 2026

Uh oh!

aditya0155 Sep 7, 2026

Uh oh!

shaka-bot commented Sep 7, 2026

Uh oh!

shaka-bot commented Sep 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

aditya0155 commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Type

Related Issue

Description

Testing

Desktop

Additional Context

Uh oh!

avelad Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

aditya0155 Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

avelad Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

aditya0155 Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

avelad Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

aditya0155 Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

shaka-bot commented Sep 7, 2026

Uh oh!

shaka-bot commented Sep 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

aditya0155 commented Sep 4, 2026 •

edited

Loading