<commit_before>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 bellow 👇</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)
              }}
            /><commit_msg>chore(examples): fix typo in [videoId].tsx (#41655)<commit_after>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)
              }}
            />
{'fraction_non_alphanumeric': 0.12096917869232139, 'fraction_numerical': 0.006591840370568323, 'mean_word_length': 1.6848397895743663, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 97, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5444435', 'n_tokens_mistral': 1585, 'n_tokens_neox': 1539, 'n_words': 349}