Modified the prop naming for the videoButton

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

View File

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

View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from "react";
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 [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>
</div>
<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">
{buttonTwoText}
</button>

View File

@ -11,7 +11,7 @@ export default function Home() {
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
text="redemptive tech in Jesus' name"
buttonTwoText="learn more"
buttonOneText="Watch" videoId="khbXchTeE"
buttonOneText="Watch" videoId="uu01xBw_BVE"
/>
<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"