package removal, fixed video buttons

components/buttons/VideoButton.jsx

@@ -1,27 +1,19 @@
-import React, { useState } from "react";
-import ModalVideo from "react-modal-video";
-import "react-modal-video/scss/modal-video.scss";
+const VideoButton = ({ buttonVideoURL, buttonOneText }) => {
 
-const VideoButton = ({ videoId, buttonOneText }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const openModal = () => {
-    setIsOpen(true);
+  const openVideoLink = () => {
+    window.open(buttonVideoURL, "_blank");
   };
 
   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}>
+      <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={openVideoLink}
+      >
         {buttonOneText}
       </button>
-      <ModalVideo
-        channel="youtube"
-        isOpen={isOpen}
-        videoId={videoId}
-        onClose={() => setIsOpen(false)}
-      />
     </div>
   );
 };
 
-export default VideoButton;
+export default VideoButton;

components/layouts/Section.jsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 const Section = ({
   videoUrl,
   text,
-  videoId,
+  buttonVideoURL,
   buttonOneText,
   buttonTwoText,
   buttonLink = "/",
@@ -83,9 +83,9 @@ const Section = ({
         </div>
         <div className="flex justify-start space-x-4">
           {isMobile && !hasInteracted ? (
-            <VideoButton videoId={videoId} buttonOneText={buttonOneText} />
+            <VideoButton buttonVideoURL={buttonVideoURL} buttonOneText={buttonOneText} />
           ) : (
-            <VideoButton videoId={videoId} buttonOneText={buttonOneText} />
+            <VideoButton buttonVideoURL={buttonVideoURL} buttonOneText={buttonOneText} />
           )}
           {buttonLink && (
             <Link

package.json

@@ -9,7 +9,6 @@
     "export": "next export"
   },
   "dependencies": {
-    "animejs": "^3.2.1",
     "autoprefixer": "10.4.14",
     "core-js": "^3.30.2",
     "framer-motion": "^10.12.4",
@@ -22,7 +21,6 @@
     "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",
     "react-scroll": "^1.8.9",
     "tailwindcss": "3.3.1",

pages/about.js

@@ -29,7 +29,7 @@ export default function Home() {
         buttonTwoText="say hello"
         buttonLink="#contact"
         buttonOneText="watch"
-        videoId="W60vWdXR1sQ"
+        buttonVideoURL="https://invidious.slipfox.xyz/watch?v=W60vWdXR1sQ"
       ></Section>
       <StatementOfFaithSection />
 

pages/getinvolved.js

@@ -19,7 +19,7 @@ export default function Home() {
         buttonLink="#contact"
         buttonTwoText="say hello"
         buttonOneText="watch"
-        videoId="j16NyCutsOo"
+        buttonVideoURL="https://invidious.slipfox.xyz/watch?v=j16NyCutsOo"
       />
       <SectionTwo
         text="githaven"
@@ -32,9 +32,9 @@ export default function Home() {
         buttonLink="https://remnant.chat"
       ></SectionTwo>
       <SectionTwo
-        text="agilegrace"
+        text="heartily.work"
         buttonText="Explore"
-        buttonLink="https://agilegrace.org"
+        buttonLink="https://heartily.work"
       ></SectionTwo>
       <ContactFormSection
         text="contact us"

pages/index.js

@@ -29,7 +29,7 @@ export default function Home() {
         text="redemptive tech in Jesus' name"
         buttonTwoText="learn more"
         buttonOneText="watch"
-        videoId="R0QFTSLC1Gg"
+        buttonVideoURL="https://invidious.slipfox.xyz/watch?v=R0QFTSLC1Gg"
         buttonLink="/about"
         headingLevel={1}
       />
@@ -39,7 +39,7 @@ export default function Home() {
         text="about"
         buttonOneText="watch"
         buttonTwoText="learn more"
-        videoId="W60vWdXR1sQ"
+        videoId="https://invidious.slipfox.xyz/watch?v=W60vWdXR1sQ"
         buttonLink="/about"
         headingLevel={2}
       />
@@ -49,7 +49,7 @@ export default function Home() {
         text="get involved"
         buttonOneText="watch"
         buttonTwoText="learn more"
-        videoId="j16NyCutsOo"
+        videoId="https://invidious.slipfox.xyz/watch?v=j16NyCutsOo"
         buttonLink="/getinvolved"
         headingLevel={2}
       />

pages/projects.js

@@ -18,7 +18,7 @@ export default function Home() {
         buttonLink="#contact"
         buttonTwoText="say hello"
         buttonOneText="watch"
-        videoId="uu01xBw_BVE"
+        videoButtonURL="https://invidious.slipfox.xyz/watch?v=uu01xBw_BVE"
       />
       <ContactFormSection text="say hello" buttonText="contact us" />
     </>