Added working video popup component to the app.
This commit is contained in:
parent
720cd33399
commit
784738e838
27
Components/Buttons/video-button.jsx
Normal file
27
Components/Buttons/video-button.jsx
Normal 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;
|
@ -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
9923
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
|
Reference in New Issue
Block a user