diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx index 0356fc626..2794bdfad 100644 --- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx +++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx @@ -81,15 +81,6 @@ export const OwncastPlayer: FC = ({ } }; - const setLatencyCompensatorItemTitle = t => { - const item = document.querySelector('.latency-toggle-item > .vjs-menu-item-text'); - if (!item) { - return; - } - - item.innerHTML = t; - }; - const startLatencyCompensator = () => { if (latencyCompensator) { latencyCompensator.stop(); @@ -101,8 +92,6 @@ export const OwncastPlayer: FC = ({ latencyCompensator.setClockSkew(clockSkew); latencyCompensator.enable(); setLocalStorage(LATENCY_COMPENSATION_ENABLED, true); - - setLatencyCompensatorItemTitle('disable minimized latency'); }; const stopLatencyCompensator = () => { @@ -112,17 +101,16 @@ export const OwncastPlayer: FC = ({ latencyCompensator = null; latencyCompensatorEnabled = false; setLocalStorage(LATENCY_COMPENSATION_ENABLED, false); - setLatencyCompensatorItemTitle( - 'enable minimized latency (experimental)', - ); }; + // Toggle minimized latency mode. Return the new state. const toggleLatencyCompensator = () => { if (latencyCompensatorEnabled) { stopLatencyCompensator(); } else { startLatencyCompensator(); } + return latencyCompensatorEnabled; }; const setupLatencyCompensator = player => { diff --git a/web/components/video/settings-menu.ts b/web/components/video/settings-menu.ts index 0cdca45dd..68e82f77e 100644 --- a/web/components/video/settings-menu.ts +++ b/web/components/video/settings-menu.ts @@ -1,5 +1,10 @@ /* eslint-disable max-classes-per-file */ -export function createVideoSettingsMenuButton(player, videojs, qualities, latencyItemPressed): any { +export function createVideoSettingsMenuButton( + player, + videojs, + qualities, + latencyItemPressed: () => boolean, +): any { const VjsMenuItem = videojs.getComponent('MenuItem'); const MenuItem = videojs.getComponent('MenuItem'); const MenuButtonClass = videojs.getComponent('MenuButton'); @@ -19,10 +24,11 @@ export function createVideoSettingsMenuButton(player, videojs, qualities, latenc const lowLatencyItem = new MenuItem(player, { selectable: true, + label: 'minimize latency (experimental)', }); - lowLatencyItem.setAttribute('class', 'latency-toggle-item'); lowLatencyItem.on('click', () => { - latencyItemPressed(); + const enabled: boolean = latencyItemPressed(); + lowLatencyItem.selected(enabled); }); const separator = new MenuSeparator(player, { @@ -40,38 +46,45 @@ export function createVideoSettingsMenuButton(player, videojs, qualities, latenc const defaultAutoItem = new MenuItem(player, { selectable: true, + selected: true, label: 'Auto', }); - const items = qualities.map(item => { - const newMenuItem = new MenuItem(player, { + const items = Array(qualities.length); + qualities.forEach(item => { + items[item.index] = new MenuItem(player, { selectable: true, label: item.name, }); + }); + for (let i = 0; i < items.length; i += 1) { + const item = items[i]; // Quality selected - newMenuItem.on('click', () => { + item.on('click', () => { // If for some reason tech doesn't exist, then don't do anything if (!tech) { console.warn('Invalid attempt to access null player tech'); return; } - // Only enable this single, selected representation. + // Only enable and highlight this single, selected representation. tech.vhs.representations().forEach((rep, index) => { - rep.enabled(index === item.index); + const isCurrent: boolean = index === i; + rep.enabled(isCurrent); + items[index].selected(isCurrent); }); - newMenuItem.selected(false); + defaultAutoItem.selected(false); }); - - return newMenuItem; - }); + } defaultAutoItem.on('click', () => { // Re-enable all representations. tech.vhs.representations().forEach(rep => { rep.enabled(true); }); - defaultAutoItem.selected(false); + // Only highlight "Auto" + items.forEach(item => item.selected(false)); + defaultAutoItem.selected(true); }); const supportsLatencyCompensator = !!tech && !!tech.vhs; @@ -95,19 +108,8 @@ export function createVideoSettingsMenuButton(player, videojs, qualities, latenc const menuButton = new MenuButton(); menuButton.el().setAttribute('aria-label', 'Settings'); - // If none of the settings in this menu are applicable then don't show it. - const tech = player.tech({ IWillNotUseThisInPlugins: true }); menuButton.addClass('vjs-quality-selector'); videojs.registerComponent('MenuButton', MenuButton); - if (!tech.vhs) { - return menuButton; - } - - if (qualities.length < 2 && (!tech || !tech.vhs)) { - return menuButton; - } - - // eslint-disable-next-line consistent-return return menuButton; }