Shiloh/old-shiloh-website
Shiloh/old-shiloh-website
Archived
7
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modified the prop naming for the videoButton

Browse Source 
component so now the passed props are working
with youtube video id.
This commit is contained in:
Caretaker0699 2023-04-18 09:31:17 -07:00
parent e3feb2081b
commit f4d76e0060
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Components/Buttons/video-button.jsx
View File

@ -2,7 +2,7 @@ import React, { useState } from "react";
import ModalVideo from "react-modal-video"; import ModalVideo from "react-modal-video";
import "react-modal-video/scss/modal-video.scss"; import "react-modal-video/scss/modal-video.scss";
const VideoButton = ({ link, buttonOneText }) => { const VideoButton = ({ videoId, buttonOneText }) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const openModal = () => { const openModal = () => {
@ -17,7 +17,7 @@ const VideoButton = ({ link, buttonOneText }) => {
<ModalVideo <ModalVideo
channel="youtube" channel="youtube"
isOpen={isOpen} isOpen={isOpen}
videoId={link} videoId={videoId}
onClose={() => setIsOpen(false)} onClose={() => setIsOpen(false)}
/> />
</div> </div>

4
Components/Layout/section.jsx
View File

@ -1,6 +1,6 @@
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"; import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx";
const Section = ({ videoUrl, text, videoID, buttonOneText, buttonTwoText }) => { const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => {
const videoRef = useRef(null); const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
@ -45,7 +45,7 @@ const Section = ({ videoUrl, text, videoID, buttonOneText, buttonTwoText }) => {
<h1 className="text-6xl font-normal text-white">{text}</h1> <h1 className="text-6xl font-normal text-white">{text}</h1>
</div> </div>
<div className="flex justify-start space-x-4"> <div className="flex justify-start space-x-4">
<VideoButton videoId={videoID} buttonOneText={buttonOneText}/> <VideoButton videoId={videoId} buttonOneText={buttonOneText}/>
<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"> <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} {buttonTwoText}
</button> </button>

2
pages/index.js
View File

@ -11,7 +11,7 @@ export default function Home() {
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22" videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
text="redemptive tech in Jesus' name" text="redemptive tech in Jesus' name"
buttonTwoText="learn more" buttonTwoText="learn more"
buttonOneText="Watch" videoId="khbXchTeE" buttonOneText="Watch" videoId="uu01xBw_BVE"
/> />
<Section <Section
videoUrl="https://rr2---sn-vgqsknly.googlevideo.com/videoplayback?expire=1681820311&ei=NzY-ZLiXNcrO8wTXlp3YBQ&ip=15.204.174.205&id=o-AIURdLrU3YcNtnUpLoL3D_iec3v8rTkvoNcWMG4R4EAk&itag=22&source=youtube&requiressl=yes&spc=99c5CW9_6piE8zD4uWtb1XmeXIFTIjA&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=170.991&lmt=1628618583216432&fexp=24007246&c=ANDROID&txp=5311224&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhALw9zi65tVkUhhQShkW3Yy7zxaDrnkXDYAIvchAcD-2nAiEA0Uylg0GI_-2QwVqbsyoL1N3IYoqCzWc7Kx5pkXVLPbc%3D&host=rr2---sn-p5qddn7r.googlevideo.com&rm=sn-p5qel77l&req_id=c70118d7d937a3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5sk7l&cms_redirect=yes&cmsv=e&mh=It&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknly&ms=ltu&mt=1681798608&mv=m&mvi=2&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhALEvvp_J4MX7zxd00taP964ALILSjBRUNCCuhdAxr55lAiAbYpxCaiZKcLW8U67R-O4JazIWK1T2649mtxEindLogA%3D%3D" videoUrl="https://rr2---sn-vgqsknly.googlevideo.com/videoplayback?expire=1681820311&ei=NzY-ZLiXNcrO8wTXlp3YBQ&ip=15.204.174.205&id=o-AIURdLrU3YcNtnUpLoL3D_iec3v8rTkvoNcWMG4R4EAk&itag=22&source=youtube&requiressl=yes&spc=99c5CW9_6piE8zD4uWtb1XmeXIFTIjA&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=170.991&lmt=1628618583216432&fexp=24007246&c=ANDROID&txp=5311224&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhALw9zi65tVkUhhQShkW3Yy7zxaDrnkXDYAIvchAcD-2nAiEA0Uylg0GI_-2QwVqbsyoL1N3IYoqCzWc7Kx5pkXVLPbc%3D&host=rr2---sn-p5qddn7r.googlevideo.com&rm=sn-p5qel77l&req_id=c70118d7d937a3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5sk7l&cms_redirect=yes&cmsv=e&mh=It&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknly&ms=ltu&mt=1681798608&mv=m&mvi=2&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhALEvvp_J4MX7zxd00taP964ALILSjBRUNCCuhdAxr55lAiAbYpxCaiZKcLW8U67R-O4JazIWK1T2649mtxEindLogA%3D%3D"