73 lines
2.7 KiB
JavaScript
73 lines
2.7 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Spinner, Row, Col, Button } from "react-bootstrap";
|
|
|
|
//Videos function that handles the content of Videos
|
|
function Videos() {
|
|
const [isLoading, setLoading] = useState(true);
|
|
const [videos, setVideos] = useState([]);
|
|
const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
|
|
|
|
//Create const that gets YouTube Api data and build video links from data
|
|
const getYTVideoLink = async () => {
|
|
try {
|
|
const response = await fetch("https://express-api-neinhills.onrender.com/youtube");
|
|
const json = await response.json();
|
|
const videoLinks = await json.items.map(item => "https://www.youtube.com/embed/" + item.id.videoId);
|
|
const videoiframe = await videoLinks.map(link => <iframe className="video" width="560" height="315" src={ link } title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>);
|
|
setVideos(videoiframe);
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
//Handle the state of currentVideoIndex to get the previous video
|
|
const handlePrevClick = () => {
|
|
if (currentVideoIndex > 0) {
|
|
setCurrentVideoIndex(currentVideoIndex - 1);
|
|
}
|
|
};
|
|
|
|
//Handle the state of currentVideoIndex to get the next video
|
|
const handleNextClick = () => {
|
|
if (currentVideoIndex < videos.length - 1) {
|
|
setCurrentVideoIndex(currentVideoIndex + 1);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getYTVideoLink();
|
|
}, []);
|
|
|
|
//Return data to display on the website, also takes data from vidoes to display on the website
|
|
return (
|
|
<div className="content fadeSlideIn">
|
|
{
|
|
isLoading ?
|
|
<><Row className="justify-content-md-center">
|
|
<Col md="auto">
|
|
<Spinner animation="border" />
|
|
</Col>
|
|
</Row></> :
|
|
<><Row className="justify-content-md-center">
|
|
<Col md="auto">
|
|
{ videos[currentVideoIndex] }
|
|
</Col>
|
|
</Row>
|
|
<Row className="justify-content-md-center">
|
|
<Col md="auto">
|
|
<Button variant="primary" size="lg" onClick={handlePrevClick}>Prev</Button>{" "}
|
|
<Button variant="primary" size="lg" onClick={handleNextClick}>Next</Button>
|
|
</Col>
|
|
</Row>
|
|
<Row className="justify-content-md-center">
|
|
<Col md="auto">
|
|
<div>Watch all videos on my <a href="https://www.youtube.com/@therearenohills3171" target="_blank">YouTube Channel</a></div>
|
|
</Col>
|
|
</Row></>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
export default Videos |