ymb-site/src/features/shorts/components/ShortSlide.jsx

// Author: fruit.com.cn
import { Bookmark, MessageCircle, Share2, ThumbsUp } from 'lucide-react';
import { useLocale } from '../../../app/providers/AppProviders';
import { VideoPlayer } from '../../../shared/components/player/VideoPlayer';
import { useEngagement } from '../../../shared/hooks/useEngagement';
import { formatCount } from '../../../shared/lib/format';
import { reportWatchProgress } from '../../../shared/lib/watchProgress';

export function ShortSlide({ video, active, followed, onToggleFollow, onOpenComments, onShare }) {
  const { locale } = useLocale();
  const src = video.preview?.playUrl;
  const likeTargetId = video.preview?.id || video.id;
  const { liked, likeCount, saved, saveCount, toggleLike, toggleSave } = useEngagement({
    likeTargetType: video.preview?.id ? 'EPISODE' : 'DRAMA',
    likeTargetId,
    dramaId: video.id,
    initialLikeCount: video.likeCount,
    initialSaveCount: video.favoriteCount,
  });

  return (
    <article className="short-slide" data-id={video.id}>
      <div className="short-slide-stage">
        <div className="short-slide-info">
          <div className="short-channel">
            <span className="short-avatar">{video.channel?.[0] || 'Y'}</span>
            <span className="short-channel-name">{video.channel}</span>
            <button className={`short-follow ${followed ? 'followed' : ''}`} onClick={onToggleFollow} type="button">{followed ? locale.subscribed : locale.subscribe}</button>
          </div>
          <h1>{video.title}</h1>
        </div>
        <div className="short-column">
          <div className="short-player-wrap">
            <div className="short-slide-player">
              {src
                ? <VideoPlayer src={src} poster={video.image} autoPlay={active} soundHint={locale.soundHint} onProgress={(position, duration, flush) => reportWatchProgress(video.preview?.id, position, duration, 'shorts', flush)} />
                : <div className="short-slide-placeholder"><img src={video.image} alt={video.title} /><span>{video.title}</span></div>}
            </div>
          </div>
        </div>
        <div className="short-rail">
          <button className={saved ? 'active' : ''} onClick={toggleSave} type="button" aria-label={locale.save}>
            <span className="rail-icon"><Bookmark size={22} fill={saved ? 'currentColor' : 'none'} /></span>
            <small>{formatCount(saveCount, locale.code)}</small>
          </button>
          <button className={liked ? 'active' : ''} onClick={toggleLike} type="button" aria-label={locale.like}>
            <span className="rail-icon"><ThumbsUp size={22} fill={liked ? 'currentColor' : 'none'} /></span>
            <small>{formatCount(likeCount, locale.code)}</small>
          </button>
          <button onClick={onOpenComments} type="button" aria-label={locale.comments}>
            <span className="rail-icon"><MessageCircle size={22} /></span>
            <small>{formatCount(video.commentCount, locale.code)}</small>
          </button>
          <button onClick={onShare} type="button" aria-label={locale.share}>
            <span className="rail-icon"><Share2 size={22} /></span>
            <small>{locale.share}</small>
          </button>
        </div>
      </div>
    </article>
  );
}