tcjlj/MeBox
1
0
Fork 0
mirror of https://github.com/truewhile/MeBox.git synced 2026-09-30 11:46:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化strm多版本显示

Browse Source
This commit is contained in:
truewhile
2026-09-09 17:07:21 +08:00
parent 1ea29cca9e
commit d489c1608e
2 changed files with 162 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/MediaVersionSwitcher.tsx
+28 -13
View File
@@ -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>
)
})}