diff --git a/src/controls/settings/useQualitySelector.js b/src/controls/settings/useQualitySelector.js index dd317be..bdce571 100644 --- a/src/controls/settings/useQualitySelector.js +++ b/src/controls/settings/useQualitySelector.js @@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from "react"; import { usePreferences } from "../usePreferences.js"; const AUTO_QUALITY = { label: "Auto", value: "auto" }; +const BEST_QUALITY = { label: "Best", value: "best" }; export function useQualitySelector(core) { const { savedQuality, setSavedQuality } = usePreferences(); @@ -14,17 +15,35 @@ export function useQualitySelector(core) { return; } - const option = - value === "auto" ? AUTO_QUALITY : { label: value, value: value }; - - setSelectedQuality(option); - if (value === "auto") { + setSelectedQuality(AUTO_QUALITY); core.setAutoQualityMode(true); setSavedQuality("auto"); return; } + if (value === "best") { + // "best" is a fake option, resolves to the highest bitrate + const bestQuality = qualities[0]; + if (bestQuality) { + setSelectedQuality({ + value: "best", + label: `${BEST_QUALITY.label} (${bestQuality.name})`, + }); + core.setAutoQualityMode(false); + core.setQuality(bestQuality); + } else { + // fallback to auto, keep saved selection as "best" + console.warn("[KickQuality] best quality could not be resolved"); + setSelectedQuality(AUTO_QUALITY); + core.setAutoQualityMode(true); + } + setSavedQuality("best"); + return; + } + + setSelectedQuality({ label: value, value: value }); + const targetQuality = qualities.find((quality) => quality.name === value); if (!targetQuality) { console.warn("[KickQuality] quality option missing", value); @@ -45,7 +64,9 @@ export function useQualitySelector(core) { if (arg?.key === "qualities") { if (arg.value?.length) { - setQualities(arg.value); + // defensive to ensure "best" functionality, `arg.value` should already be sorted + const sorted = [...arg.value].sort((a, b) => b.bitrate - a.bitrate); + setQualities(sorted); } return; } @@ -76,8 +97,8 @@ export function useQualitySelector(core) { return; } - if (savedQuality === "auto") { - handleQualityChange("auto"); + if (["auto", "best"].includes(savedQuality)) { + handleQualityChange(savedQuality); return; } @@ -88,6 +109,7 @@ export function useQualitySelector(core) { const qualityOptions = [ AUTO_QUALITY, + BEST_QUALITY, ...qualities.map((q) => ({ value: q.name, label: q.name })), ];