fix: resolve issues 241-243

components/player/VideoMetadata.tsx

@@ -4,6 +4,7 @@ import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Icons } from '@/components/ui/Icon';
 import { getSourceName } from '@/lib/utils/source-names';
+import { htmlToText } from '@/lib/utils/html';
 
 /**
  * Split person names by common delimiters (comma, Chinese comma, slash).
@@ -21,6 +22,8 @@ interface VideoMetadataProps {
 }
 
 export function VideoMetadata({ videoData, source, title }: VideoMetadataProps) {
+  const description = htmlToText(videoData?.vod_content);
+
   return (
     <Card hover={false}>
       <div className="flex flex-col sm:flex-row items-start gap-4">
@@ -82,9 +85,9 @@ export function VideoMetadata({ videoData, source, title }: VideoMetadataProps)
               </Badge>
             )}
           </div>
-          {videoData?.vod_content && (
+          {description && (
             <p className="text-sm sm:text-base text-[var(--text-secondary)]">
-              {videoData.vod_content.replace(/<[^>]*>/g, '')}
+              {description}
             </p>
           )}
           {videoData?.vod_actor && (

components/search/VideoCard.tsx

@@ -10,6 +10,7 @@ import { LatencyBadge } from '@/components/ui/LatencyBadge';
 import { FavoriteButton } from '@/components/favorites/FavoriteButton';
 
 import { Video } from '@/lib/types';
+import { htmlToText } from '@/lib/utils/html';
 import { parseVideoTitle } from '@/lib/utils/video';
 import type { ResolutionInfo } from '@/lib/hooks/useResolutionProbe';
 
@@ -37,6 +38,7 @@ export const VideoCard = memo<VideoCardProps>(({
     isProbing = false,
 }) => {
     const displayLatency = latencies[video.source] ?? video.latency;
+    const displayRemarks = htmlToText(video.vod_remarks);
     return (
         <div
             style={{
@@ -171,6 +173,14 @@ export const VideoCard = memo<VideoCardProps>(({
                                     <h4 className="font-semibold text-sm text-[var(--text-color)] line-clamp-2 min-h-[2.5rem] mb-1">
                                         {cleanTitle}
                                     </h4>
+                                    {displayRemarks && (
+                                        <p
+                                            className="text-xs text-[var(--text-color-secondary)] mt-1 line-clamp-1"
+                                            title={displayRemarks}
+                                        >
+                                            {displayRemarks}
+                                        </p>
+                                    )}
                                     <div className="flex items-center gap-1.5 flex-wrap">
                                         {resolution ? (
                                             <span className={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold text-white ${resolution.color}`}>
@@ -201,4 +211,3 @@ export const VideoCard = memo<VideoCardProps>(({
 });
 
 VideoCard.displayName = 'VideoCard';
-

components/search/VideoGroupCard.tsx

@@ -14,6 +14,7 @@ import { Icons } from '@/components/ui/Icon';
 import { LatencyBadge } from '@/components/ui/LatencyBadge';
 import { FavoriteButton } from '@/components/favorites/FavoriteButton';
 import { Video } from '@/lib/types';
+import { htmlToText } from '@/lib/utils/html';
 import { parseVideoTitle } from '@/lib/utils/video';
 import { storeGroupedSources } from '@/lib/utils/grouped-sources-cache';
 import type { ResolutionInfo } from '@/lib/hooks/useResolutionProbe';
@@ -49,6 +50,11 @@ export const VideoGroupCard = memo<VideoGroupCardProps>(({
     isProbing = false,
 }) => {
     const { representative, videos, name } = group;
+    const displayRemarks = useMemo(() => {
+        const preferredVideo = videos.find((video) => video === representative && video.vod_remarks)
+            ?? videos.find((video) => video.vod_remarks);
+        return htmlToText(preferredVideo?.vod_remarks);
+    }, [representative, videos]);
 
     // Best latency from the group, preferring real-time updates
     const bestLatency = useMemo(() => {
@@ -214,6 +220,14 @@ export const VideoGroupCard = memo<VideoGroupCardProps>(({
                                     <h4 className="font-semibold text-sm text-[var(--text-color)] line-clamp-2 min-h-[2.5rem] mb-1">
                                         {cleanTitle}
                                     </h4>
+                                    {displayRemarks && (
+                                        <p
+                                            className="text-xs text-[var(--text-color-secondary)] mt-1 line-clamp-1"
+                                            title={displayRemarks}
+                                        >
+                                            {displayRemarks}
+                                        </p>
+                                    )}
                                     <div className="flex items-center gap-1.5 flex-wrap">
                                         {resolution ? (
                                             <span className={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold text-white ${resolution.color}`}>