优化strm多版本显示

web/src/components/MediaVersionSwitcher.tsx

@@ -1,8 +1,8 @@
-import { Layers } from 'lucide-react'
+import { Cloud, Layers } from 'lucide-react'
 import { Link } from 'react-router-dom'
 
 import type { Media } from '../types'
-import { mediaVersionLabel, mediaVersionsOf } from '../utils/mediaVersion'
+import { isStrmMedia, mediaVersionLabel, mediaVersionsOf } from '../utils/mediaVersion'
 
 type MediaVersionSwitcherProps = {
   media: Media
@@ -31,14 +31,30 @@ export function MediaVersionSwitcher({
       <div className="flex flex-wrap gap-2">
         {versions.map((version) => {
           const active = version.id === media.id
+          const isStrm = isStrmMedia(version)
           const label = mediaVersionLabel(version)
-          const className = dark
+          const btnClass = dark
             ? active
-              ? 'border-white/40 bg-white/20 text-white'
-              : 'border-white/15 bg-white/5 text-white/80 hover:bg-white/15'
+              ? 'border-white/50 bg-white/20 text-white shadow-sm ring-1 ring-white/20'
+              : 'border-white/15 bg-white/5 text-white/80 hover:bg-white/15 hover:text-white'
             : active
-              ? 'border-brand-500/40 bg-brand-50 text-[#b07d35]'
+              ? 'border-brand-500/40 bg-brand-50 text-[#b07d35] font-bold shadow-sm'
               : 'border-gray-200 bg-white text-ink-100 hover:border-brand-500/30 hover:bg-brand-50/40'
+
+          const content = (
+            <span className="inline-flex items-center gap-1.5">
+              {isStrm && (
+                <Cloud
+                  size={12}
+                  className={dark ? (active ? 'text-brand-300' : 'text-white/60') : (active ? 'text-brand-500' : 'text-sand-400')}
+                  aria-label="云端 / STRM"
+                />
+              )}
+              <span>{label}</span>
+              {!dark && active ? <span className="opacity-75">· 当前</span> : null}
+            </span>
+          )
+
           if (mode === 'player') {
             return (
               <button
@@ -46,10 +62,10 @@ export function MediaVersionSwitcher({
                 type="button"
                 disabled={active}
                 onClick={() => onSelect?.(version)}
-                className={`rounded-xl border px-3 py-1.5 text-xs font-semibold transition disabled:cursor-default ${className}`}
-                title={version.path}
+                className={`rounded-xl border px-3 py-1.5 text-xs font-semibold transition disabled:cursor-default ${btnClass}`}
+                title={version.path || version.strm_url}
               >
-                {label}
+                {content}
               </button>
             )
           }
@@ -58,11 +74,10 @@ export function MediaVersionSwitcher({
               key={version.id}
               to={`/play/${version.id}`}
               state={{ from: `/media/${media.id}` }}
-              className={`rounded-xl border px-3 py-1.5 text-xs font-semibold transition ${className}`}
-              title={version.path}
+              className={`rounded-xl border px-3 py-1.5 text-xs font-semibold transition ${btnClass}`}
+              title={version.path || version.strm_url}
             >
-              {label}
-              {active ? ' · 当前' : ''}
+              {content}
             </Link>
           )
         })}

web/src/utils/mediaVersion.ts

@@ -1,33 +1,62 @@
 import type { Media } from '../types'
 
-/** 从路径 / strm URL 推断容器扩展名（mkv/mp4…）。 */
+const VIDEO_EXTENSIONS = new Set([
+  'mkv', 'mp4', 'm4v', 'avi', 'mov', 'webm', 'flv', 'wmv', 'ts', 'm2ts', 'mts', 'vob', 'rmvb', 'rm', 'iso',
+])
+
+export function isStrmMedia(media?: Media | null): boolean {
+  if (!media) return false
+  const path = (media.path || '').toLowerCase()
+  const strmUrl = (media.strm_url || '').toLowerCase()
+  return path.endsWith('.strm') || path.startsWith('cloud://') || Boolean(strmUrl.trim())
+}
+
+/** 从路径 / strm URL 推断真实视频容器扩展名（mkv/mp4…）。 */
 export function mediaVersionContainer(media: Media): string {
+  const explicit = (media.container || '').trim().toLowerCase().replace(/^\./, '')
+  if (explicit && explicit !== 'strm' && VIDEO_EXTENSIONS.has(explicit)) {
+    return explicit
+  }
+
   const path = (media.path || '').replace(/\\/g, '/')
   const base = path.split('/').pop() || ''
   const ext = base.includes('.') ? base.slice(base.lastIndexOf('.')).toLowerCase() : ''
-  let name = ext ? base.slice(0, -ext.length) : base
+  const name = ext ? base.slice(0, -ext.length) : base
+
   if (ext === '.strm') {
-    const second = name.includes('.') ? name.slice(name.lastIndexOf('.')).toLowerCase() : ''
-    if (second && second !== '.strm') {
-      return second.replace(/^\./, '')
+    const second = name.includes('.') ? name.slice(name.lastIndexOf('.')).toLowerCase().replace(/^\./, '') : ''
+    if (second && VIDEO_EXTENSIONS.has(second)) {
+      return second
     }
+
     const strm = (media.strm_url || '').toLowerCase()
-    const marker = '/video.'
-    const idx = strm.lastIndexOf(marker)
-    if (idx >= 0) {
-      let rest = strm.slice(idx + marker.length)
-      const end = rest.search(/[?#&/]/)
-      if (end >= 0) rest = rest.slice(0, end)
-      rest = rest.replace(/^\./, '').trim()
-      if (rest) return rest
+    if (strm) {
+      // 1. /video.mkv 或 /video.mp4 模式
+      const marker = '/video.'
+      const idx = strm.lastIndexOf(marker)
+      if (idx >= 0) {
+        let rest = strm.slice(idx + marker.length)
+        const end = rest.search(/[?#&/]/)
+        if (end >= 0) rest = rest.slice(0, end)
+        rest = rest.replace(/^\./, '').trim()
+        if (rest && VIDEO_EXTENSIONS.has(rest)) return rest
+      }
+
+      // 2. 从 query 参数（如 ref=/movies/abc.mkv 或 path=...）或 pathname 里匹配扩展名
+      const match = strm.match(/\.(mkv|mp4|m4v|avi|mov|webm|flv|wmv|ts|m2ts|iso)(?=[?#&/]|$)/i)
+      if (match?.[1]) {
+        return match[1].toLowerCase()
+      }
     }
     return 'strm'
   }
-  return ext.replace(/^\./, '')
+
+  const cleanExt = ext.replace(/^\./, '')
+  return VIDEO_EXTENSIONS.has(cleanExt) ? cleanExt : cleanExt
 }
 
 function formatSize(bytes: number): string {
-  if (!bytes || bytes < 1024) return bytes ? `${bytes} B` : ''
+  if (!bytes || bytes < 1024) return ''
   const units = ['KB', 'MB', 'GB', 'TB']
   let value = bytes
   let unit = -1
@@ -38,19 +67,99 @@ function formatSize(bytes: number): string {
   return `${value.toFixed(1)} ${units[unit]}`
 }
 
-/** 版本切换展示名：分辨率 · 容器 · 编码 · 体积，缺省回退文件名。 */
+/** 从文件名/路径中提取质量或规格标签（如 4K, 2160p, REMUX, HDR, 1080p, 60fps 等） */
+function extractQualityKeywords(text: string): string[] {
+  const result: string[] = []
+  const upper = text.toUpperCase()
+
+  // 分辨率
+  if (/\b(4K|2160P|UHD)\b/i.test(upper)) result.push('4K')
+  else if (/\b(1080P|FHD)\b/i.test(upper)) result.push('1080p')
+  else if (/\b(720P|HD)\b/i.test(upper)) result.push('720p')
+
+  // 格式/版本规格
+  if (/\bREMUX\b/i.test(upper)) result.push('REMUX')
+  else if (/\b(BLURAY|BLU-RAY|BD)\b/i.test(upper)) result.push('BluRay')
+  else if (/\b(WEB-?DL|WEBRIP)\b/i.test(upper)) result.push('WEB-DL')
+
+  // 动态范围/画质技术
+  if (/\b(DV|DOVI|DOLBY[\s._-]?VISION)\b/i.test(upper)) result.push('DV')
+  if (/\b(HDR10\+|HDR10PLUS)\b/i.test(upper)) result.push('HDR10+')
+  else if (/\bHDR\b/i.test(upper) && !result.includes('DV')) result.push('HDR')
+
+  // 帧率
+  if (/\b(60FPS|120FPS)\b/i.test(upper)) {
+    const fpsMatch = upper.match(/\b(60FPS|120FPS)\b/i)
+    if (fpsMatch) result.push(fpsMatch[1])
+  }
+
+  return result
+}
+
+/** 清理文件名以用作干净的兜底展示 */
+function cleanFallbackFilename(raw: string): string {
+  let name = raw.replace(/\\/g, '/').split('/').pop() || ''
+  // 去除 .strm 及前缀扩展名
+  name = name.replace(/\.strm$/i, '')
+  name = name.replace(/\.(mkv|mp4|m4v|avi|mov|webm|flv|wmv|ts|iso)$/i, '')
+  // 替换连续的点或下划线为空格
+  name = name.replace(/[._]+/g, ' ').trim()
+  return name
+}
+
+/** 版本切换展示名：分辨率 · 容器 · 编码 · 体积 / 规格 / 来源标签。 */
 export function mediaVersionLabel(media: Media): string {
+  const isStrm = isStrmMedia(media)
   const parts: string[] = []
-  if (media.height > 0) parts.push(`${media.height}p`)
-  else if (media.width > 0) parts.push(`${media.width}w`)
+
+  // 1. 分辨率（优先从媒体元数据获取，其次从路径中提取）
+  if (media.height > 0) {
+    if (media.height >= 2100) parts.push('4K')
+    else parts.push(`${media.height}p`)
+  } else if (media.width > 0) {
+    if (media.width >= 3800) parts.push('4K')
+    else parts.push(`${media.width}w`)
+  }
+
+  // 2. 容器
   const container = mediaVersionContainer(media)
-  if (container && container !== 'strm') parts.push(container.toUpperCase())
-  if (media.video_codec?.trim()) parts.push(media.video_codec.trim().toUpperCase())
-  const size = formatSize(media.size_bytes)
-  if (size) parts.push(size)
-  if (parts.length > 0) return parts.join(' · ')
-  const base = (media.path || '').replace(/\\/g, '/').split('/').pop()
-  return base || media.title || media.id
+  if (container && container !== 'strm') {
+    parts.push(container.toUpperCase())
+  }
+
+  // 3. 视频编码
+  if (media.video_codec?.trim()) {
+    parts.push(media.video_codec.trim().toUpperCase())
+  }
+
+  // 4. 从文件名/路径补充规格特征（针对 STRM 缺乏探测数据时的关键画质提示）
+  const pathKeywords = extractQualityKeywords(`${media.path || ''} ${media.strm_url || ''}`)
+  for (const kw of pathKeywords) {
+    // 避免重复（如已经有了 4K / 1080p）
+    if (!parts.some((p) => p.toUpperCase() === kw.toUpperCase())) {
+      parts.push(kw)
+    }
+  }
+
+  // 5. 文件大小：过滤掉本地 STRM 占位小文件（< 1MB 的 STRM 索引通常不是真实视频大小）
+  const isPlaceholderSize = isStrm && media.size_bytes > 0 && media.size_bytes < 1024 * 1024
+  if (media.size_bytes > 0 && !isPlaceholderSize) {
+    const size = formatSize(media.size_bytes)
+    if (size) parts.push(size)
+  }
+
+  // 6. 如果仍然没有解析出足够特征，标记来源（云盘 / STRM）
+  if (isStrm && !parts.some((p) => ['4K', '1080P', '720P', 'REMUX', 'WEB-DL', 'MKV', 'MP4'].includes(p.toUpperCase()))) {
+    parts.push('云端直链')
+  }
+
+  if (parts.length > 0) {
+    return parts.join(' · ')
+  }
+
+  // 兜底：使用清理后的文件名
+  const cleaned = cleanFallbackFilename(media.path || '')
+  return cleaned || media.title || media.id
 }
 
 export function mediaVersionsOf(media: Media | null | undefined): Media[] {