Chuloo/home.jsx

## home.jsx
import Head from "next/head";
import React, { useState } from "react";
import { MemoizedVideoPlayer } from "../component/video-player";
import styles from "../styles/Home.module.css";

const Home = () => {
  const [startTime, setStartTime] = useState(1633538276355);
  const [controls, setControls] = useState(true);
  const [ended, setEnded] = useState(false);
  const [duration, setDuration] = useState(null);
  const [playing, setPlaying] = useState(true);

  let date = new Date();
  let currentTime = date.getTime();
  let timePlayed = (currentTime - startTime) % 1000;

  const endVideo = () => {
    if (controls === false && ended === true) {
      if (playing === false) {
        return;
      } else {
        setPlaying(false);
      }
    } else {
      setControls(false);
      setEnded(true);
      setPlaying(false);
    }
  };

  const restartLive = () => {
    let newDate = new Date();
    let newStartTime = newDate.getTime();
    setStartTime(newStartTime);
    setEnded(false);
    setPlaying(true);
    setControls(true);
  };
  const videoDuration = (num) => {
    setDuration(num);
  };

  if (timePlayed > duration) {
    endVideo();
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Live Simulator</title>
        <meta
          name="description"
          content="Live Event Simulator Created by Nextjs"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className="live-event-container">
          {/* Our VideoPlayer component */}

          <MemoizedVideoPlayer
            ended={ended}
            timePlayed={timePlayed}
            controls={controls}
            endVideo={endVideo}
            playing={playing}
            videoDuration={videoDuration}
          />
        </div>

        {/* Our Restart button */}

        <button className="reset-button" onClick={restartLive}>
          Restart Live Simulation
        </button>
      </main>
    </div>
  );
};

export default Home;
	import Head from "next/head";
	import React, { useState } from "react";
	import { MemoizedVideoPlayer } from "../component/video-player";
	import styles from "../styles/Home.module.css";

	const Home = () => {
	const [startTime, setStartTime] = useState(1633538276355);
	const [controls, setControls] = useState(true);
	const [ended, setEnded] = useState(false);
	const [duration, setDuration] = useState(null);
	const [playing, setPlaying] = useState(true);

	let date = new Date();
	let currentTime = date.getTime();
	let timePlayed = (currentTime - startTime) % 1000;

	const endVideo = () => {
	if (controls === false && ended === true) {
	if (playing === false) {
	return;
	} else {
	setPlaying(false);
	}
	} else {
	setControls(false);
	setEnded(true);
	setPlaying(false);
	}
	};

	const restartLive = () => {
	let newDate = new Date();
	let newStartTime = newDate.getTime();
	setStartTime(newStartTime);
	setEnded(false);
	setPlaying(true);
	setControls(true);
	};
	const videoDuration = (num) => {
	setDuration(num);
	};

	if (timePlayed > duration) {
	endVideo();
	}

	return (
	<div className={styles.container}>
	<Head>
	<title>Live Simulator</title>
	<meta
	name="description"
	content="Live Event Simulator Created by Nextjs"
	/>
	<link rel="icon" href="/favicon.ico" />
	</Head>

	<main className={styles.main}>
	<div className="live-event-container">
	{/* Our VideoPlayer component */}

	<MemoizedVideoPlayer
	ended={ended}
	timePlayed={timePlayed}
	controls={controls}
	endVideo={endVideo}
	playing={playing}
	videoDuration={videoDuration}
	/>
	</div>

	{/* Our Restart button */}

	<button className="reset-button" onClick={restartLive}>
	Restart Live Simulation
	</button>
	</main>
	</div>
	);
	};

	export default Home;