Added working video popup component to the app.

This commit is contained in:
Caretaker0699 2023-04-18 08:47:48 -07:00
parent 720cd33399
commit 784738e838
4 changed files with 9966 additions and 15 deletions

View File

@ -0,0 +1,27 @@
import React, { useState } from "react";
import ModalVideo from "react-modal-video";
import "react-modal-video/scss/modal-video.scss";
const VideoButton = ({ link, buttonOneText }) => {
const [isOpen, setIsOpen] = useState(false);
const openModal = () => {
setIsOpen(true);
};
return (
<div>
<button className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none" onClick={openModal}>
{buttonOneText}
</button>
<ModalVideo
channel="youtube"
isOpen={isOpen}
videoId={link}
onClose={() => setIsOpen(false)}
/>
</div>
);
};
export default VideoButton;

View File

@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from "react";
import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx";
const Section = ({ videoUrl, text, buttonOneText, buttonTwoText }) => {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
@ -7,7 +7,7 @@ const Section = ({ videoUrl, text, buttonOneText, buttonTwoText }) => {
useEffect(() => {
const options = {
root: null,
rootMargin: '0px',
rootMargin: "0px",
threshold: 0.5,
};
@ -40,19 +40,19 @@ const Section = ({ videoUrl, text, buttonOneText, buttonTwoText }) => {
loop
autoPlay={isPlaying}
/>
<div className="relative z-10 flex flex-col items-center justify-center h-full">
<div className="relative flex justify-center items-end w-full mb-20">
<h1 className="text-6xl font-normal text-white">{text}</h1>
</div>
<div className="flex justify-start space-x-4">
<button className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">{buttonOneText}</button>
<button className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">{buttonTwoText}</button>
</div>
</div>
<div className="relative z-10 flex flex-col items-center justify-center h-full">
<div className="relative flex justify-center items-end w-full mb-20">
<h1 className="text-6xl font-normal text-white">{text}</h1>
</div>
<div className="flex justify-start space-x-4">
<VideoButton buttonOneText="Watch" videoId="sjxLF4IYnJc" />
<button className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">
{buttonTwoText}
</button>
</div>
</div>
</div>
);
};
export default Section;
export default Section;

9923
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -18,6 +18,7 @@
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-intersection-observer": "^9.4.3",
"react-modal-video": "^2.0.0",
"react-player": "^2.12.0",
"tailwindcss": "3.3.1"
}