next.js/examples/with-apivideo/pages/videos/[videoId].tsx

import { GetServerSideProps, NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import { useRouter } from "next/router";
import React, { ChangeEvent, useState } from "react";
import ApiVideoPlayer, { PlayerTheme } from "@api.video/react-player";

interface IVideoViewProps {
  children: React.ReactNode;
  videoId: string;
  uploaded: string;
}
const VideoView: NextPage<IVideoViewProps> = ({
  videoId,
  uploaded,
}): JSX.Element => {
  const [playerTheme, setPlayerTheme] = useState<PlayerTheme>({
    link: "rgb(235, 137, 82)",
    linkHover: "rgb(240, 95, 12)",
  });
  const [hideControls, setHideControls] = useState<boolean>(false);
  const router = useRouter();

  const handleChangeSetting = (e: ChangeEvent<HTMLInputElement>) =>
    setPlayerTheme({
      ...playerTheme,
      [e.currentTarget.id]: e.currentTarget.value,
    });

  return (
    <div className="global-container">
      <Head>
        <title>Video view</title>
        <meta
          name="description"
          content="Generated by create next app & created by api.video"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <header>
        {uploaded ? (
          <>
            <span>Already there</span> 🎉
          </>
        ) : (
          <>
            <span>Here's your player</span> 👀
          </>
        )}
      </header>

      <main>
        <div className="texts-container">
          <p>
            This player is generated by the{" "}
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://github.com/apivideo/api.video-react-player"
            >
              api.video's React player component
            </a>
            .<br />
            It provides multiple properties to customize your video player.
          </p>
          <p>Try 3 of them just below 👇</p>
        </div>

        <div className="inputs-container">
          <div>
            <label>Play button color</label>
            <input
              id="link"
              type="text"
              placeholder="Play button color"
              value={playerTheme.link}
              onChange={handleChangeSetting}
            />
          </div>
          <div>
            <label>Buttons hover color</label>
            <input
              id="linkHover"
              type="text"
              placeholder="Buttons hover color"
              value={playerTheme.linkHover}
              onChange={handleChangeSetting}
            />
          </div>
          <div>
            <input
              type="checkbox"
              checked={hideControls}
              onChange={(e) => {
                setHideControls(e.currentTarget.checked);
              }}
            />
            <label>Hide controls</label>
          </div>
        </div>
        <ApiVideoPlayer
          video={{ id: videoId }}
          style={{ width: "75%", height: 300 }}
          theme={playerTheme}
          chromeless={hideControls}
        />

        <button
          className="upload"
          onClick={() => router.push(uploaded ? "/uploader" : "/videos")}
        >
          {uploaded ? "Another video?" : "Videos list"}
        </button>
      </main>

      <footer>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
        <span>and</span>
        <a href="https://api.video" target="_blank" rel="noopener noreferrer">
          api.video
        </a>
      </footer>
    </div>
  );
};

export default VideoView;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { videoId, uploaded } = context.query;
  return { props: { videoId, uploaded: uploaded ?? null } };
};