دليل: تضمين مشغّل في تطبيق Next.js 15

npm install @videohati/react @videohati/node

// app/watch/[videoId]/page.tsx
import { Videohati } from "@videohati/node";
import { Watch } from "./watch";

export default async function WatchPage({
  params,
}: {
  params: Promise<{ videoId: string }>;
}) {
  const { videoId } = await params;
  const videohati = new Videohati({ apiKey: process.env.VIDEOHATI_API_KEY });

  const session = await videohati.playback.createSession({
    videoId,
    viewerDisplayText: "[email protected]",
  });

  return (
    <Watch
      videoId={videoId}
      projectId={process.env.VIDEOHATI_PROJECT_ID!}
      sessionToken={session.sessionToken}
    />
  );
}

// app/watch/[videoId]/watch.tsx
"use client";

import { VideohatiPlayer } from "@videohati/react";

export function Watch({
  videoId,
  projectId,
  sessionToken,
}: {
  videoId: string;
  projectId: string;
  sessionToken: string;
}) {
  return (
    <VideohatiPlayer
      videoId={videoId}
      projectId={projectId}
      sessionToken={sessionToken}
      lang="ar"
      autoplay="muted"
      onStateChange={(state) => console.log("player state:", state)}
      onError={(error) => console.error(error.code, error.message)}
      style={{ width: "100%", maxWidth: 960 }}
    />
  );
}

<VideohatiPlayer
  videoId={videoId}
  projectId={projectId}
  sessionToken={sessionToken}
  lang="ar"
/>

"use client";

import { VideohatiProvider } from "@videohati/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <VideohatiProvider baseUrl="https://api.staging.videohati.com">
      {children}
    </VideohatiProvider>
  );
}