Add HLS support to multi-audio

youtube/static/modules/plyr/custom_plyr.css

@@ -44,13 +44,14 @@ e.g. Firefox playback speed options */
 .plyr__controls {
     display: flex;
     justify-content: center;
+    padding-bottom: 0px;
 }
 
 .plyr__progress__container {
     position: absolute;
     bottom: 0;
     width: 100%;
-    margin-bottom: -10px;
+    margin-bottom: -5px;
 }
 
 .plyr__controls .plyr__controls__item:first-child {
@@ -72,6 +73,120 @@ e.g. Firefox playback speed options */
     margin-bottom: 50px;
 }
 
+/*
+* Plyr Custom Controls
+*/
+
+.plyr__control svg.hls_audio_icon,
+.plyr__control svg.hls_quality_icon {
+  fill: none;
+}
+
+.plyr__control[data-plyr="quality-custom"],
+.plyr__control[data-plyr="audio-custom"] {
+  cursor: pointer;
+}
+
+.plyr__control[data-plyr="quality-custom"]:hover,
+.plyr__control[data-plyr="audio-custom"]:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/*
+* Custom styles for dropdown controls
+*/
+.plyr__control--custom {
+  padding: 0;
+}
+
+/* Quality and Audio containers */
+#plyr-quality-container,
+#plyr-audio-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Quality and Audio buttons */
+#plyr-quality-container .plyr__control,
+#plyr-audio-container .plyr__control {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Text labels */
+#plyr-quality-text,
+#plyr-audio-text {
+  font-size: 12px;
+  margin-left: 2px;
+}
+
+/* Dropdowns */
+.plyr-quality-dropdown,
+.plyr-audio-dropdown {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 8px;
+  background: #E6E6E6;
+  color: #23282f;
+  border-radius: 4px;
+  padding: 4px 6px;
+  min-width: 90px;
+  display: none;
+  z-index: 100;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+/* Audio dropdown needs slightly wider */
+.plyr-audio-dropdown {
+  min-width: 120px;
+}
+
+/* Dropdown options */
+.plyr-quality-option,
+.plyr-audio-option {
+  padding: 6px 16px;
+  margin-bottom: 2px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+  color: #23282f;
+  white-space: nowrap;
+  text-align: left;
+}
+
+/* Active/selected option */
+.plyr-quality-option[data-active="true"],
+.plyr-audio-option[data-active="true"] {
+  background: #00b3ff;
+  color: #FFF;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+/* Hover state */
+.plyr-quality-option:hover,
+.plyr-audio-option:hover {
+  background: #00b3ff;
+  color: #FFF;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+/* No audio tracks message */
+.plyr-audio-no-tracks {
+  padding: 6px 16px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+}
+
 /*
 * End custom styles
 */