feat: add bandwidth hints to quality selector popup

src/components/PlaybackBar.vue

@@ -24,10 +24,10 @@ const showSpeedMenu = ref(false)
 const speedOptions = [1, 2, 4]
 const showQualityMenu = ref(false)
 const qualityOptions = computed(() => [
-  { value: '', label: t('ui.qualityAuto') },
-  { value: '超清 (1080P)', label: t('ui.quality1080p') },
-  { value: '高清 (720P)', label: t('ui.quality720p') },
-  { value: '标清 (480P)', label: t('ui.quality480p') },
+  { value: '', label: t('ui.qualityAuto'), speed: '' },
+  { value: '超清 (1080P)', label: t('ui.quality1080p'), speed: t('ui.qualitySpeed') + ' 320KB/s' },
+  { value: '高清 (720P)', label: t('ui.quality720p'), speed: t('ui.qualitySpeed') + ' 256KB/s' },
+  { value: '标清 (480P)', label: t('ui.quality480p'), speed: t('ui.qualitySpeed') + ' 100KB/s' },
 ])
 
 function currentQualityLabel() {
@@ -102,7 +102,7 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
             class="speed-option"
             :class="{ active: store.preferredQuality === q.value }"
             @click.stop="selectQuality(q.value)"
-          >{{ q.label }}</button>
+          >{{ q.label }}<span v-if="q.speed" class="quality-speed">{{ q.speed }}</span></button>
         </div>
       </Transition>
     </div>
@@ -199,6 +199,12 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   color: #c9a84c;
 }
 
+.quality-speed {
+  margin-left: 8px;
+  font-size: 10px;
+  color: #666;
+}
+
 .speed-drop-enter-active,
 .speed-drop-leave-active {
   transition: all 0.15s ease;

src/locales/en.json

@@ -41,6 +41,7 @@
     "qualityAuto": "Auto",
     "quality1080p": "1080p",
     "quality720p": "720p",
-    "quality480p": "480p"
+    "quality480p": "480p",
+    "qualitySpeed": "Requires"
   }
 }

src/locales/zh.json

@@ -41,6 +41,7 @@
     "qualityAuto": "自动",
     "quality1080p": "超清",
     "quality720p": "高清",
-    "quality480p": "标清"
+    "quality480p": "标清",
+    "qualitySpeed": "需要"
   }
 }