Video player

import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

const META_RE =
  /<meta\s+(?:[^>]*?\s+)?property=["']([^"']+)["'][^>]*?content=["']([^"']+)["'][^>]*>/gi;
const META_RE_NAME =
  /<meta\s+(?:[^>]*?\s+)?name=["']([^"']+)["'][^>]*?content=["']([^"']+)["'][^>]*>/gi;

function decode(html: string): string {
  return html
    .replace(/&amp;/g, "&")
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'")
    .replace(/&#x2F;/gi, "/");
}

function parseOg(html: string) {
  const map = new Map<string, string>();
  let match: RegExpExecArray | null;
  for (const re of [META_RE, META_RE_NAME]) {
    re.lastIndex = 0;
    while ((match = re.exec(html)) !== null) {
      map.set(match[1].toLowerCase(), decode(match[2]));
    }
  }
  return {
    src:
      map.get("og:video:secure_url") ??
      map.get("og:video") ??
      map.get("twitter:player:stream") ??
      null,
    poster: map.get("og:image:secure_url") ?? map.get("og:image") ?? null,
  };
}

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const url = searchParams.get("url");
  if (!url) return NextResponse.json({ error: "Missing url" }, { status: 400 });

  try {
    const res = await fetch(url, {
      redirect: "follow",
      headers: { "user-agent": "Mozilla/5.0 (squad-ui og-video)" },
      cache: "no-store",
    });
    if (!res.ok) {
      return NextResponse.json({ error: `Upstream ${res.status}` }, { status: 502 });
    }
    const payload = parseOg(await res.text());
    if (!payload.src) {
      return NextResponse.json({ error: "No og:video tag" }, { status: 404 });
    }
    return NextResponse.json(payload, {
      headers: { "cache-control": "public, max-age=300, s-maxage=300" },
    });
  } catch (err) {
    return NextResponse.json(
      { error: err instanceof Error ? err.message : "fetch failed" },
      { status: 502 },
    );
  }
}

// Wire the API route into your player so non-direct URLs resolve to MP4.
async function resolveOgVideo(rawSrc: string) {
  const res = await fetch(`/api/og-video?url=${encodeURIComponent(rawSrc)}`);
  if (!res.ok) throw new Error(`Resolver failed (${res.status})`);
  return (await res.json()) as { src: string; poster?: string };
}

<VideoPlayer src={anySharePageUrl} resolveSrc={resolveOgVideo} />

import { VideoPlayer } from "@/components/ui/video-player";

import { VideoPlayer } from "@/components/ui/video-player";

export function Example() {
  return (
    <VideoPlayer
      src="https://example.com/video.mp4"
      poster="https://example.com/poster.jpg"
    />
  );
}

VideoPlayer                       (single component — pass content as props)
├── src=""                         (URL of the video — mp4, webm, or HLS in Safari)
├── poster=""                      (fallback image shown before play and on errors)
├── tracks={[{ src, label, srclang, default, kind }]}  (WebVTT captions)
├── playbackRates={[0.5, 1, 1.5, 2]}                   (speed menu options)
├── aspectRatio="16/9"
└── ...standard <video> attrs (autoPlay, loop, muted, …)

Built-in controls:
- Big center Play/Pause button when paused
- Bottom bar: Play/Pause, mute, volume slider, time, speed menu, captions menu, picture-in-picture, fullscreen
- Click the video surface to toggle play/pause
- Seek by scrubbing the timeline at the top of the controls bar