Skip to content

Instantly share code, notes, and snippets.

@Chuloo
Created Oct 31, 2021
Embed
What would you like to do?
Home component for a live-stream simulation player
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment