Shorts

export const videos = pgTable("videos", {
  id: varchar("id", { length: 50 }).primaryKey(),
  title: varchar("title", { length: 255 }),
  is_shorts: boolean("is_shorts").notNull().default(false), // Marks video as a short
  // ... other fields
});

<div className="h-[calc(100vh-56px)] snap-start flex items-center justify-center">
  <div className="relative h-full aspect-9/16 bg-black rounded-xl overflow-hidden">
    {/* Poster image when not active */}
    {showPoster && (
      <img src={thumbnailUrl} className="absolute inset-0 object-contain" />
    )}
    
    {/* Video element */}
    <video
      ref={videoRef}
      src={getVideoUrl(video.filename)}
      className="w-full h-full object-contain"
      loop
      playsInline
      onClick={togglePlay}
    />
  </div>
</div>

<div className="fixed right-6 top-1/2 -translate-y-1/2 flex-col gap-3 z-50">
  <button
    onClick={goPrev}
    disabled={activeIndex === 0}
    className="w-12 h-12 rounded-full bg-secondary"
  >
    <NavUpIcon />
  </button>
  <button
    onClick={goNext}
    disabled={activeIndex === videos.length - 1}
    className="w-12 h-12 rounded-full bg-secondary"
  >
    <NavDownIcon />
  </button>
</div>

<div className={`transition-opacity ${showPlayPauseOverlay ? 'opacity-100' : 'opacity-0'}`}>
  <div className="w-20 h-20 rounded-full bg-black/60">
    {overlayIcon === 'play' ? (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M8 5v14l11-7z" />
      </svg>
    ) : (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
      </svg>
    )}
  </div>
</div>

<div className="absolute top-0 left-0 right-0 p-3 bg-gradient-to-b from-black/50">
  <button onClick={togglePlay}>
    {isPlaying ? <PauseIcon /> : <PlayIcon />}
  </button>
  <button onClick={toggleMute}>
    {isMuted ? <VolumeMutedIcon /> : <VolumeIcon />}
  </button>
</div>

<div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70">
  {/* Channel info */}
  <div className="flex items-center gap-3 mb-3">
    <Link to="/">
      <Avatar src={channelAvatar} size="md" />
    </Link>
    <Link to="/" className="font-semibold text-white">
      @jefferyepstein
    </Link>
  </div>
  
  {/* Video title */}
  <p className="text-white line-clamp-2">{video.title}</p>
</div>

function formatCount(count: number): string {
  if (count >= 1_000_000) {
    return `${(count / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
  }
  if (count >= 1_000) {
    return `${(count / 1_000).toFixed(1).replace(/\.0$/, '')}K`;
  }
  return count.toString();
}

// Examples:
// 1234 → "1.2K"
// 1234567 → "1.2M"
// 1000000 → "1M" (trailing .0 removed)

<div className={`fixed top-0 right-0 h-full w-full sm:w-[400px] bg-primary z-50 transform ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
  {/* Header */}
  <div className="flex items-center justify-between p-4 border-b">
    <h2>Comments {formatCount(commentCount)}</h2>
    <button onClick={onClose}>
      <CloseIcon />
    </button>
  </div>
  
  {/* Comments content */}
  <div className="h-[calc(100%-64px)] overflow-y-auto px-4">
    <CommentSection videoId={videoId} />
  </div>
</div>

<div className="absolute bottom-0 left-0 right-0 h-1 bg-white/30">
  <div
    className="h-full bg-red-600"
    style={{ width: `${progress}%` }}
  />
</div>

const handleTimeUpdate = () => {
  const prog = (videoEl.currentTime / videoEl.duration) * 100;
  setProgress(isNaN(prog) ? 0 : prog);
};

// Only render videos within range of current position
const BUFFER_SIZE = 2;
const virtualizedVideos = useMemo(() => {
  const start = Math.max(0, activeIndex - BUFFER_SIZE);
  const end = Math.min(videos.length, activeIndex + BUFFER_SIZE + 1);
  
  return videos.slice(start, end).map((video, i) => ({
    video,
    originalIndex: start + i,
  }));
}, [videos, activeIndex]);

const { randomSortedShorts } = useData();

{/* Action buttons - mobile: overlaid, desktop: beside */}
<div className="absolute right-2 bottom-24 flex flex-col gap-3 lg:static lg:self-end lg:pb-24">
  {/* Buttons */}
</div>